From b21efcc6d2c6698c87770b39e05cbb38d4c5bf69 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Wed, 29 Apr 2026 09:26:52 +0200
Subject: [PATCH 01/10] add profanity filter

---
 package-lock.json                    | 31 +++++++++++++++
 package.json                         |  1 +
 src/shared/lib/useProfanityFilter.ts | 57 ++++++++++++++++++++++++++++
 3 files changed, 89 insertions(+)
 create mode 100644 src/shared/lib/useProfanityFilter.ts

diff --git a/package-lock.json b/package-lock.json
index 310211de..40ec922d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.2.2",
+        "leo-profanity": "^1.9.0",
         "lucide-vue-next": "^1.0.0",
         "pinia": "^3.0.4",
         "tailwindcss": "^4.2.2",
@@ -3490,6 +3491,13 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/french-badwords-list": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/french-badwords-list/-/french-badwords-list-1.0.7.tgz",
+      "integrity": "sha512-H1ziKs2PJh2+UXZ9oCGJ/rRQpsI9NBykGf2Sc7WaKaj1OnWFuBXfsvANTdRcfVmOghGQaUmRyZ1hJOPbDpy04Q==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -3900,6 +3908,19 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/leo-profanity": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/leo-profanity/-/leo-profanity-1.9.0.tgz",
+      "integrity": "sha512-vMrrrjsbT+fA5I/1rlBEVT5YjJsw1ASIVF8/xBEdZ6ylsg5AEIBrEvHxwe5XAmfVuTBi7aw2KcO2L3s9ddpKzw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "french-badwords-list": "^1.0.7",
+        "russian-bad-words": "^0.5.0"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5014,6 +5035,16 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/russian-bad-words": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/russian-bad-words/-/russian-bad-words-0.5.0.tgz",
+      "integrity": "sha512-euNvEYki6iYYpkNbeudW+lEMMYGEmN7EBwVF8ezlbv0bZoQpVYB7W10cCeUIGV7Ed50sJynLQ0c559q5iI0ejQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/sax": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
diff --git a/package.json b/package.json
index da2c8941..14cc371c 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.2.2",
+    "leo-profanity": "^1.9.0",
     "lucide-vue-next": "^1.0.0",
     "pinia": "^3.0.4",
     "tailwindcss": "^4.2.2",
diff --git a/src/shared/lib/useProfanityFilter.ts b/src/shared/lib/useProfanityFilter.ts
new file mode 100644
index 00000000..4e1a499e
--- /dev/null
+++ b/src/shared/lib/useProfanityFilter.ts
@@ -0,0 +1,57 @@
+import leoProfanity from "leo-profanity"
+
+let initialized = false
+
+function init() {
+  if (initialized) return
+
+  leoProfanity.clearList()
+
+  leoProfanity.loadDictionary("en")
+
+  leoProfanity.add([
+    "faen",
+    "jævlig",
+    "dritt",
+    "helvete",
+    "idiot",
+  ])
+
+  initialized = true
+}
+
+// normalization
+function normalize(text: string) {
+  return text
+  .toLowerCase()
+  .replace(/[@4]/g, "a")
+  .replace(/1/g, "i")
+  .replace(/3/g, "e")
+  .replace(/\s+/g, "")
+}
+
+export function useProfanityFilter() {
+  init()
+
+  function hasProfanity(text: string): boolean {
+    return (
+        leoProfanity.check(text) ||
+        leoProfanity.check(normalize(text))
+    )
+  }
+
+  function clean(text: string): string {
+    return leoProfanity.clean(text)
+  }
+
+  function sanitize(text: string): string {
+    if (!hasProfanity(text)) return text
+    return clean(text)
+  }
+
+  return {
+    hasProfanity,
+    clean,
+    sanitize,
+  }
+}
\ No newline at end of file

From 6f06dedcd4e778e2c0ca5c14020464a6a4015683 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Wed, 29 Apr 2026 09:45:27 +0200
Subject: [PATCH 02/10] change folder name

---
 src/shared/{lib => composables}/useProfanityFilter.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/shared/{lib => composables}/useProfanityFilter.ts (100%)

diff --git a/src/shared/lib/useProfanityFilter.ts b/src/shared/composables/useProfanityFilter.ts
similarity index 100%
rename from src/shared/lib/useProfanityFilter.ts
rename to src/shared/composables/useProfanityFilter.ts

From 09c53b6c6e8de052b70d4e91cc9a2aa02eddd12f Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Wed, 29 Apr 2026 09:45:42 +0200
Subject: [PATCH 03/10] censor notebook input

---
 src/notebook/components/NotebookComponent.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/notebook/components/NotebookComponent.vue b/src/notebook/components/NotebookComponent.vue
index b8e5c309..589feb52 100644
--- a/src/notebook/components/NotebookComponent.vue
+++ b/src/notebook/components/NotebookComponent.vue
@@ -18,9 +18,11 @@ import type {
   NotebookEntryResponse,
   NotebookStatus,
 } from '@/notebook/model/notebook.types'
+import { useProfanityFilter } from "@/shared/composables/useProfanityFilter.ts";
 
 const authStore = useAuthStore()
 const { t } = useI18n()
+const { hasProfanity, sanitize } = useProfanityFilter()
 
 const props = withDefaults(
   defineProps<{
@@ -120,8 +122,11 @@ async function createEntry() {
     return
   }
 
-  const title = newEntryTitle.value.trim()
-  const content = newEntryContent.value.trim()
+  let title = newEntryTitle.value.trim()
+  let content = newEntryContent.value.trim()
+
+  title = sanitize(title)
+  content = sanitize(content)
 
   if (!title || !content) {
     status.value = 'error'

From 207c6c3aedcde19b5ff71fc0860fc12c77349be8 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Wed, 29 Apr 2026 10:24:11 +0200
Subject: [PATCH 04/10] make filter stricter

---
 src/shared/composables/useProfanityFilter.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/shared/composables/useProfanityFilter.ts b/src/shared/composables/useProfanityFilter.ts
index 4e1a499e..c3c7c021 100644
--- a/src/shared/composables/useProfanityFilter.ts
+++ b/src/shared/composables/useProfanityFilter.ts
@@ -27,16 +27,25 @@ function normalize(text: string) {
   .replace(/[@4]/g, "a")
   .replace(/1/g, "i")
   .replace(/3/g, "e")
+  .replace(/0/g, "o")
   .replace(/\s+/g, "")
+  .replace(/[^a-zæøå]/g, "")
 }
 
 export function useProfanityFilter() {
   init()
 
   function hasProfanity(text: string): boolean {
-    return (
-        leoProfanity.check(text) ||
-        leoProfanity.check(normalize(text))
+    const normalized = normalize(text)
+
+    if (leoProfanity.check(text) || leoProfanity.check(normalized)) {
+      return true
+    }
+
+    const badWords = leoProfanity.list()
+
+    return badWords.some(word =>
+    normalized.includes(word)
     )
   }
 

From bc4570bb0b3255516dd0dbadf7da961097b910c5 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Wed, 29 Apr 2026 10:24:28 +0200
Subject: [PATCH 05/10] remove unused import

---
 src/notebook/components/NotebookComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/notebook/components/NotebookComponent.vue b/src/notebook/components/NotebookComponent.vue
index 589feb52..5b93fd53 100644
--- a/src/notebook/components/NotebookComponent.vue
+++ b/src/notebook/components/NotebookComponent.vue
@@ -22,7 +22,7 @@ import { useProfanityFilter } from "@/shared/composables/useProfanityFilter.ts";
 
 const authStore = useAuthStore()
 const { t } = useI18n()
-const { hasProfanity, sanitize } = useProfanityFilter()
+const { sanitize } = useProfanityFilter()
 
 const props = withDefaults(
   defineProps<{

From 050b067048cabec90c507fe128b5f0b419ed680d Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Wed, 29 Apr 2026 10:25:50 +0200
Subject: [PATCH 06/10] disallow inappropriate displaynames

---
 src/locales/en.ts                      |  1 +
 src/locales/nb.ts                      |  1 +
 src/profile/pages/PupilProfilePage.vue | 14 +++++++++++++-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/locales/en.ts b/src/locales/en.ts
index 2c6a254e..41383da4 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -330,6 +330,7 @@ export const en = {
       namePlaceholder: "Detective name",
       nameUpdateSuccess: "Display name updated.",
       nameUpdateError: "Could not update the display name.",
+      nameProfanityError: "Name cannot contain profanities.",
       avatarTitle: "Avatar",
       avatarPlaceholder:
         "The avatar builder is not fully implemented yet, but this is where avatar editing belongs.",
diff --git a/src/locales/nb.ts b/src/locales/nb.ts
index 1a1a5b32..7e41d0ec 100644
--- a/src/locales/nb.ts
+++ b/src/locales/nb.ts
@@ -235,6 +235,7 @@ export const nb = {
     namePlaceholder: "Detektivnavn",
     nameUpdateSuccess: "Visningsnavnet er oppdatert.",
     nameUpdateError: "Kunne ikke oppdatere visningsnavnet.",
+    nameProfanityError: "Navnet kan ikke inneholde banneord.",
     avatarTitle: "Avatar",
     avatarPlaceholder:
       "Avatarbyggeren er ikke fullt implementert ennå, men dette er stedet for avatarredigering.",
diff --git a/src/profile/pages/PupilProfilePage.vue b/src/profile/pages/PupilProfilePage.vue
index cd46ebf3..1eca826a 100644
--- a/src/profile/pages/PupilProfilePage.vue
+++ b/src/profile/pages/PupilProfilePage.vue
@@ -5,6 +5,7 @@ import { RouterLink, useRouter } from 'vue-router'
 import { useAuthStore } from '@/auth/model/auth.store'
 import AvatarComponent from '@/avatar/components/AvatarComponent.vue'
 import { requestUpdateCurrentUserProfile } from '@/profile/api/profile.api'
+import { useProfanityFilter } from "@/shared/composables/useProfanityFilter.ts";
 
 const { t } = useI18n()
 const authStore = useAuthStore()
@@ -26,6 +27,8 @@ const normalizedDraftDisplayName = computed(() =>
   trimmedDraftDisplayName.value.length > 0 ? trimmedDraftDisplayName.value : defaultDisplayName.value,
 )
 const isNameDirty = computed(() => normalizedDraftDisplayName.value !== savedDisplayName.value)
+const { hasProfanity } = useProfanityFilter()
+const hasBadWords = computed(() => hasProfanity(normalizedDraftDisplayName.value))
 
 watch(
   pupilProfile,
@@ -90,6 +93,12 @@ async function saveDisplayName() {
   try {
     const updatedDisplayName = normalizedDraftDisplayName.value
 
+    if (hasProfanity(updatedDisplayName)) {
+      saveErrorMessage.value = t('pupilProfile.nameProfanityError')
+      isSavingName.value = false
+      return
+    }
+
     await requestUpdateCurrentUserProfile(authStore.authorizationHeader, {
       displayName: normalizedDraftDisplayName.value,
     })
@@ -189,7 +198,7 @@ onMounted(() => {
             <div class="flex flex-wrap gap-3">
               <button
                 class="inline-flex items-center justify-center rounded-lg border border-zinc-900 bg-zinc-900 px-4 py-3 text-white transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-zinc-900/20"
-                :disabled="!isNameDirty || isSavingName"
+                :disabled="!isNameDirty || isSavingName || hasBadWords"
                 type="submit"
               >
                 {{ isSavingName ? t('pupilProfile.savingNameAction') : t('pupilProfile.saveNameAction') }}
@@ -205,6 +214,9 @@ onMounted(() => {
             </div>
           </form>
 
+          <p v-if="hasBadWords" class="text-sm text-red-600">
+            {{ t('pupilProfile.nameProfanityError') }}
+          </p>
           <p v-if="saveSuccessMessage" class="mt-4 text-sm text-emerald-700">
             {{ saveSuccessMessage }}
           </p>

From a79be9fca10e2c588a1a851daf8bfcdadcc8b3b4 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Wed, 29 Apr 2026 13:23:44 +0200
Subject: [PATCH 07/10] add normal profanities to be checked by default

---
 .../pages/ClassroomModerationPage.vue         | 37 ++++++++++++++-
 .../components/MysterySubmissionForm.vue      | 39 +++++++++++----
 src/notebook/components/NotebookComponent.vue | 47 ++++++++++++++-----
 src/profile/pages/PupilProfilePage.vue        | 35 +++++++++++++-
 4 files changed, 134 insertions(+), 24 deletions(-)

diff --git a/src/classrooms/pages/ClassroomModerationPage.vue b/src/classrooms/pages/ClassroomModerationPage.vue
index 6be37a44..58fab27d 100644
--- a/src/classrooms/pages/ClassroomModerationPage.vue
+++ b/src/classrooms/pages/ClassroomModerationPage.vue
@@ -10,6 +10,7 @@ import {
   requestUpdateTeacherClassroomBannedWord,
   type ClassroomBannedWordResponse,
 } from '@/shared/moderation/moderation.api'
+import { useProfanityFilter } from '@/shared/composables/useProfanityFilter'
 
 const route = useRoute()
 const { t } = useI18n()
@@ -23,6 +24,8 @@ const newWord = ref('')
 const editingId = ref<number | null>(null)
 const editingWord = ref('')
 
+const { hasProfanity } = useProfanityFilter()
+
 const authorizationHeader = computed(() => authStore.authorizationHeader)
 
 async function loadBannedWords() {
@@ -47,6 +50,10 @@ async function loadBannedWords() {
   }
 }
 
+function normalizeWord(word: string) {
+  return word.trim().toLowerCase()
+}
+
 function startEditing(entry: ClassroomBannedWordResponse) {
   editingId.value = entry.id
   editingWord.value = entry.word
@@ -63,12 +70,24 @@ async function createWord() {
     return
   }
 
-  const normalizedWord = newWord.value.trim()
+  const normalizedWord = normalizeWord(newWord.value)
   if (!normalizedWord) {
     errorMessage.value = t('classroomModeration.errors.missingWord')
     return
   }
 
+  // check if already banned
+  if (hasProfanity(normalizedWord)) {
+    errorMessage.value = t('classroomModeration.errors.alreadyBlockedGlobally')
+    return
+  }
+
+  // avoid duplicates
+  if (bannedWords.value.some(w => normalizeWord(w.word) === normalizedWord)) {
+    errorMessage.value = t('classroomModeration.errors.duplicateWord')
+    return
+  }
+
   status.value = 'saving'
   errorMessage.value = null
 
@@ -101,6 +120,20 @@ async function saveWord(entryId: number) {
     return
   }
 
+  if (hasProfanity(normalizedWord)) {
+    errorMessage.value = t('classroomModeration.errors.alreadyBlockedGlobally')
+    return
+  }
+
+  if (
+      bannedWords.value.some(
+          w => w.id !== entryId && normalizeWord(w.word) === normalizedWord
+      )
+  ) {
+    errorMessage.value = t('classroomModeration.errors.duplicateWord')
+    return
+  }
+
   status.value = 'saving'
   errorMessage.value = null
 
@@ -159,7 +192,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <main class="mx-auto flex min-h-screen w-full max-w-5xl flex-col gap-6 px-6 py-10">
+  <main class="mx-auto flex min-h-screen w-full max-w-5xl flex-col gap-6 px-6 py-10 pt-30">
     <header class="space-y-2">
       <h1 class="text-4xl font-extrabold text-zinc-900">
         {{ t('classroomModeration.title') }}
diff --git a/src/mystery/components/MysterySubmissionForm.vue b/src/mystery/components/MysterySubmissionForm.vue
index 1c75c329..e91b12a0 100644
--- a/src/mystery/components/MysterySubmissionForm.vue
+++ b/src/mystery/components/MysterySubmissionForm.vue
@@ -2,8 +2,10 @@
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { moderateText } from '@/shared/moderation/banned-words'
+import { useProfanityFilter } from "@/shared/composables/useProfanityFilter.ts";
 
 const { t } = useI18n()
+const { hasProfanity } = useProfanityFilter()
 
 const props = defineProps<{
   submitting: boolean
@@ -22,17 +24,36 @@ const description = ref('')
 const attachmentFile = ref<File | null>(null)
 const attachmentPreviewUrl = ref<string | null>(null)
 const uploadError = ref<string | null>(null)
-const moderation = computed(() => moderateText([description.value], props.bannedWords ?? []))
-const moderationError = computed(() =>
-  moderation.value.hasBlockedWords
-    ? t('mystery.submitForm.bannedWords', {
-        words: moderation.value.blockedWords.join(', '),
-      })
-    : null,
-)
+
+const moderation = computed(() => {
+  const text = description.value
+
+  const bannedCheck = moderateText([text], props.bannedWords ?? [])
+  const profanityDetected = hasProfanity(text)
+
+  return {
+    ...bannedCheck,
+    hasProfanity: profanityDetected,
+    hasAnyViolation: bannedCheck.hasBlockedWords || profanityDetected,
+  }
+})
+
+const moderationError = computed(() => {
+  if (moderation.value.hasBlockedWords) {
+    return t('mystery.submitForm.bannedWords', {
+      words: moderation.value.blockedWords.join(', '),
+    })
+  }
+
+  if (moderation.value.hasProfanity) {
+    return t('mystery.submitForm.profanity')
+  }
+
+  return null
+})
 
 const canSubmit = () =>
-  description.value.trim().length > 0 && !uploadError.value && !moderation.value.hasBlockedWords
+  description.value.trim().length > 0 && !uploadError.value && !moderation.value.hasAnyViolation
 
 function onFileSelected(event: Event) {
   const input = event.target as HTMLInputElement
diff --git a/src/notebook/components/NotebookComponent.vue b/src/notebook/components/NotebookComponent.vue
index 186c152e..85fbc605 100644
--- a/src/notebook/components/NotebookComponent.vue
+++ b/src/notebook/components/NotebookComponent.vue
@@ -29,6 +29,7 @@ import type {
 } from '@/notebook/model/notebook.types'
 import { requestClassroomBannedWords } from '@/shared/moderation/moderation.api'
 import { moderateText } from '@/shared/moderation/banned-words'
+import { useProfanityFilter } from "@/shared/composables/useProfanityFilter.ts";
 
 const authStore = useAuthStore()
 const { t } = useI18n()
@@ -54,6 +55,7 @@ const errorMessage = ref<string | null>(null)
 const newEntryTitle = ref('')
 const newEntryContent = ref('')
 const bannedWords = ref<string[]>([])
+const { hasProfanity } = useProfanityFilter()
 const currentPageByStopId = ref<Record<number, number>>({})
 const pageBodyElement = ref<HTMLElement | null>(null)
 const formElement = ref<HTMLElement | null>(null)
@@ -131,16 +133,37 @@ const entriesByStopId = computed(() =>
 const defaultCreateStopId = computed(
   () => currentStopId.value ?? mapStops.value[0]?.stopId ?? null,
 )
-const notebookModeration = computed(() =>
-  moderateText([newEntryTitle.value, newEntryContent.value], bannedWords.value),
-)
-const notebookModerationMessage = computed(() =>
-  notebookModeration.value.hasBlockedWords
-    ? t('notebook.errors.bannedWords', {
-        words: notebookModeration.value.blockedWords.join(', '),
-      })
-    : null,
-)
+
+const notebookModeration = computed(() => {
+  const title = newEntryTitle.value
+  const content = newEntryContent.value
+
+  const bannedCheck = moderateText([title, content], bannedWords.value)
+
+  const profanityDetected =
+      hasProfanity(title) || hasProfanity(content)
+
+  return {
+    ...bannedCheck,
+    hasProfanity: profanityDetected,
+    hasAnyViolation: bannedCheck.hasBlockedWords || profanityDetected,
+  }
+})
+
+const notebookModerationMessage = computed(() => {
+  if (notebookModeration.value.hasBlockedWords) {
+    return t('notebook.errors.bannedWords', {
+      words: notebookModeration.value.blockedWords.join(', '),
+    })
+  }
+
+  if (notebookModeration.value.hasProfanity) {
+    return t('notebook.errors.profanity')
+  }
+
+  return null
+})
+
 const pageCapacity = computed(() =>
   Math.max(availablePageHeight.value || defaultPageHeight, 220),
 )
@@ -344,7 +367,7 @@ async function createEntry() {
     return
   }
 
-  if (notebookModeration.value.hasBlockedWords) {
+  if (notebookModeration.value.hasAnyViolation) {
     status.value = 'error'
     errorMessage.value = notebookModerationMessage.value
     return
@@ -771,7 +794,7 @@ onBeforeUnmount(() => {
                   status === 'saving' ||
                   currentClassroomId === null ||
                   defaultCreateStopId === null ||
-                  notebookModeration.hasBlockedWords
+                  notebookModeration.hasAnyViolation
                 "
                 type="submit"
               >
diff --git a/src/profile/pages/PupilProfilePage.vue b/src/profile/pages/PupilProfilePage.vue
index 1eca826a..6c11bdbb 100644
--- a/src/profile/pages/PupilProfilePage.vue
+++ b/src/profile/pages/PupilProfilePage.vue
@@ -5,6 +5,7 @@ import { RouterLink, useRouter } from 'vue-router'
 import { useAuthStore } from '@/auth/model/auth.store'
 import AvatarComponent from '@/avatar/components/AvatarComponent.vue'
 import { requestUpdateCurrentUserProfile } from '@/profile/api/profile.api'
+import { requestClassroomBannedWords } from "@/shared/moderation/moderation.api.ts";
 import { useProfanityFilter } from "@/shared/composables/useProfanityFilter.ts";
 
 const { t } = useI18n()
@@ -28,7 +29,38 @@ const normalizedDraftDisplayName = computed(() =>
 )
 const isNameDirty = computed(() => normalizedDraftDisplayName.value !== savedDisplayName.value)
 const { hasProfanity } = useProfanityFilter()
-const hasBadWords = computed(() => hasProfanity(normalizedDraftDisplayName.value))
+const bannedWords = ref<string[]>([])
+
+async function loadBannedWords() {
+  if (!authStore.authorizationHeader || !pupilProfile.value?.currentClassroomId) {
+    bannedWords.value = []
+    return
+  }
+
+  try {
+    const result = await requestClassroomBannedWords(
+        pupilProfile.value.currentClassroomId,
+        authStore.authorizationHeader,
+    )
+    bannedWords.value = result.map(entry => entry.word.toLowerCase())
+  } catch {
+    bannedWords.value = []
+  }
+}
+
+function containsBannedWord(text: string, words: string[]) {
+  const normalized = text.toLowerCase()
+  return words.some(word => normalized.includes(word))
+}
+
+const hasBadWords = computed(() => {
+  const name = normalizedDraftDisplayName.value
+
+  return (
+      hasProfanity(name) ||
+      containsBannedWord(name, bannedWords.value)
+  )
+})
 
 watch(
   pupilProfile,
@@ -38,6 +70,7 @@ watch(
     if (!isEditingName.value) {
       draftDisplayName.value = displayName
     }
+    void loadBannedWords()
   },
   { immediate: true },
 )

From e9b0f2708b197878b5712b378d259d20c43bfba4 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Wed, 29 Apr 2026 15:00:36 +0200
Subject: [PATCH 08/10] allow submit button on bad names

---
 src/profile/pages/PupilProfilePage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/profile/pages/PupilProfilePage.vue b/src/profile/pages/PupilProfilePage.vue
index 6c11bdbb..9cd378ab 100644
--- a/src/profile/pages/PupilProfilePage.vue
+++ b/src/profile/pages/PupilProfilePage.vue
@@ -231,7 +231,7 @@ onMounted(() => {
             <div class="flex flex-wrap gap-3">
               <button
                 class="inline-flex items-center justify-center rounded-lg border border-zinc-900 bg-zinc-900 px-4 py-3 text-white transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-zinc-900/20"
-                :disabled="!isNameDirty || isSavingName || hasBadWords"
+                :disabled="!isNameDirty || isSavingName"
                 type="submit"
               >
                 {{ isSavingName ? t('pupilProfile.savingNameAction') : t('pupilProfile.saveNameAction') }}

From 7de0c264892a30f0827a239d03429eac85c88e88 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 30 Apr 2026 14:36:51 +0200
Subject: [PATCH 09/10] disable button when bad words

---
 src/profile/pages/PupilProfilePage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/profile/pages/PupilProfilePage.vue b/src/profile/pages/PupilProfilePage.vue
index 9cd378ab..6c11bdbb 100644
--- a/src/profile/pages/PupilProfilePage.vue
+++ b/src/profile/pages/PupilProfilePage.vue
@@ -231,7 +231,7 @@ onMounted(() => {
             <div class="flex flex-wrap gap-3">
               <button
                 class="inline-flex items-center justify-center rounded-lg border border-zinc-900 bg-zinc-900 px-4 py-3 text-white transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-zinc-900/20"
-                :disabled="!isNameDirty || isSavingName"
+                :disabled="!isNameDirty || isSavingName || hasBadWords"
                 type="submit"
               >
                 {{ isSavingName ? t('pupilProfile.savingNameAction') : t('pupilProfile.saveNameAction') }}

From 8acf996efc951fa15c2a7c266d3fe8b9577fb870 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 30 Apr 2026 14:38:32 +0200
Subject: [PATCH 10/10] formatting

---
 src/app/AppShell.vue                          | 187 +++---
 src/app/__tests__/AppShell.spec.ts            | 290 +++++----
 src/app/__tests__/BackButton.spec.ts          | 154 ++---
 src/app/__tests__/NotFoundPage.spec.ts        |  84 +--
 .../audio/__tests__/celebrationSound.spec.ts  |  60 +-
 .../audio/__tests__/pupilSoundtrack.spec.ts   | 195 +++---
 src/app/audio/celebrationSound.ts             |  26 +-
 src/app/audio/pupilSfx.ts                     |  34 +-
 src/app/audio/pupilSoundtrack.ts              | 160 +++--
 src/app/i18n/index.ts                         |   4 +-
 src/app/pages/NotFoundPage.vue                |  35 +-
 src/app/router/__tests__/auth-routing.spec.ts |  35 +-
 src/app/router/auth-routing.ts                |   3 +-
 src/app/router/index.ts                       | 117 ++--
 src/app/router/route-meta.d.ts                |  19 +-
 src/app/styles/main.css                       |  50 +-
 src/assets/medals/README.md                   |   1 -
 src/auth/api/auth.api.ts                      |  30 +-
 src/auth/components/AuthPortalShell.vue       |  28 +-
 src/auth/model/__tests__/auth.store.spec.ts   | 329 +++++-----
 src/auth/model/auth.store.ts                  |  42 +-
 src/auth/pages/LoginPage.vue                  |  31 +-
 src/auth/pages/PupilLoginPage.vue             |  31 +-
 src/auth/pages/RegisterPage.vue               |  24 +-
 src/auth/pages/TeacherLoginPage.vue           |  25 +-
 src/auth/pages/__tests__/login-pages.spec.ts  | 137 ++--
 src/avatar/api/avatar.api.ts                  |  63 +-
 .../components/AvatarAssetComponent.vue       |  34 +-
 src/avatar/components/AvatarComponent.vue     |  60 +-
 .../__tests__/AvatarAssetComponent.spec.ts    |  72 +-
 .../__tests__/AvatarComponent.spec.ts         | 112 ++--
 .../model/__tests__/avatar.store.spec.ts      | 234 +++----
 src/avatar/model/avatar.store.ts              | 170 ++---
 src/avatar/model/avatar.types.ts              |  34 +-
 src/avatar/model/avatarAssets.ts              |  56 +-
 src/avatar/pages/AvatarEditPage.vue           | 127 ++--
 src/avatar/routes.ts                          |  12 +-
 .../_tests_/classrooms.store.spec.ts          |  37 +-
 .../_tests_/teacher-routing.spec.ts           |   4 +-
 src/classrooms/api/classrooms.api.ts          |  52 +-
 src/classrooms/components/ClassroomTable.vue  | 100 +--
 src/classrooms/components/PupilTable.vue      |  79 +--
 .../components/__tests__/PupilTable.spec.ts   |  80 +--
 src/classrooms/pages/ClassroomDetails.vue     |  36 +-
 .../pages/ClassroomModerationPage.vue         | 214 +++---
 src/classrooms/pages/JoinClassroom.vue        |  45 +-
 src/classrooms/pages/NewClassroom.vue         |  65 +-
 src/classrooms/routes.ts                      | 129 ++--
 src/classrooms/store/classrooms.store.ts      |   7 +-
 src/help/routes.ts                            |   2 +-
 src/leaderboard/api/leaderboard.api.ts        |  35 +-
 .../components/LeaderboardComponent.vue       |  44 +-
 .../__tests__/LeaderboardComponent.spec.ts    |  77 +--
 src/leaderboard/model/leaderboard.types.ts    |  18 +-
 src/leaderboard/pages/LeaderboardPage.vue     |  12 +-
 src/leaderboard/routes.ts                     |   2 +-
 src/locales/en.ts                             | 130 ++--
 src/locales/nb.ts                             | 250 +++----
 src/map/api/__tests__/map.api.spec.ts         | 292 +++++----
 src/map/api/map.api.ts                        |  61 +-
 src/map/components/GameMapScene.vue           | 614 +++++++++---------
 src/map/components/MapStopOverlay.vue         |  59 +-
 src/map/model/__tests__/map.store.spec.ts     | 258 ++++----
 src/map/model/map.store.ts                    | 114 ++--
 src/map/model/map.types.ts                    |  40 +-
 src/map/pages/MapPage.vue                     |  49 +-
 src/map/pages/StopFailurePage.vue             |  32 +-
 src/map/pages/StopSuccessPage.vue             |  53 +-
 src/map/routes.ts                             |  20 +-
 src/map/util/useDevGrid.ts                    | 104 +--
 src/medals/api/__tests__/medals.api.spec.ts   |  72 +-
 src/medals/api/medals.api.ts                  |  35 +-
 src/medals/components/MedalCard.vue           | 102 +--
 .../components/__tests__/MedalCard.spec.ts    |  72 +-
 .../model/__tests__/medalAssets.spec.ts       |  64 +-
 src/medals/model/medalAssets.ts               |  28 +-
 src/medals/model/medals.types.ts              |  38 +-
 src/medals/pages/MedalsPage.vue               | 139 ++--
 src/medals/pages/__tests__/MedalsPage.spec.ts | 146 +++--
 src/medals/routes.ts                          |  12 +-
 src/mystery/api/__tests__/mystery.api.spec.ts | 411 +++++++-----
 src/mystery/api/mystery.api.ts                |  83 +--
 src/mystery/components/MysteryCard.vue        |  38 +-
 src/mystery/components/MysteryCardModal.vue   |  62 +-
 .../components/MysterySubmissionForm.vue      | 180 ++---
 .../components/MysterySubmissionRow.vue       |  36 +-
 src/mystery/components/MysteryTabBar.vue      |  22 +-
 .../components/MysteryWeekNavigator.vue       |  22 +-
 .../model/__tests__/mystery.store.spec.ts     | 293 +++++----
 src/mystery/model/mystery.store.ts            | 155 +++--
 src/mystery/model/mystery.types.ts            |  45 +-
 src/mystery/pages/MysteryPage.vue             | 250 +++----
 src/mystery/routes.ts                         |   2 +-
 src/notebook/api/notebook.api.ts              |  85 +--
 src/notebook/components/NotebookComponent.vue | 483 +++++++-------
 .../components/NotebookEntryComponent.vue     |  18 +-
 .../components/NotebookSidebarComponent.vue   |  66 +-
 .../__tests__/NotebookComponent.spec.ts       | 332 +++++-----
 src/notebook/model/notebook.types.ts          |  36 +-
 src/notebook/pages/NotebookPage.vue           |   7 +-
 .../pages/TeacherPupilNotebookPage.vue        |  28 +-
 src/notebook/routes.ts                        |   2 +-
 .../__tests__/notifications.filters.spec.ts   | 102 +--
 .../__tests__/notifications.render.spec.ts    |  78 +--
 .../api/__tests__/notifications.api.spec.ts   |  42 +-
 src/notifications/api/notifications.api.ts    |  89 +--
 .../components/NotificationsComponent.vue     |  16 +-
 .../components/NotificationsFiltersCard.vue   | 167 +++--
 .../components/NotificationsFiltersPanel.vue  | 167 +++--
 .../components/NotificationsListCard.vue      | 115 ++--
 .../components/NotificationsListPanel.vue     |  93 ++-
 .../components/NotificationsMuteCard.vue      |  54 +-
 .../components/NotificationsMutePanel.vue     |  43 +-
 .../composables/useNotificationsInbox.ts      | 519 ++++++++-------
 src/notifications/notifications.filters.ts    | 133 ++--
 src/notifications/notifications.render.ts     |  86 ++-
 src/notifications/notifications.types.ts      | 122 ++--
 src/notifications/pages/NotificationsPage.vue |  40 +-
 .../pages/__tests__/NotificationsPage.spec.ts |  37 +-
 src/notifications/routes.ts                   |   2 +-
 src/profile/api/profile.api.ts                |  65 +-
 src/profile/model/profile.types.ts            |  11 +-
 src/profile/pages/PupilProfilePage.vue        | 270 ++++----
 src/profile/pages/PupilSettingsPage.vue       | 105 +--
 .../pages/__tests__/PupilProfilePage.spec.ts  | 146 +++--
 .../pages/__tests__/PupilSettingsPage.spec.ts |  64 +-
 src/profile/routes.ts                         |  14 +-
 src/pupil-portal/components/DashboardCard.vue |  26 +-
 src/pupil-portal/pages/PupilHomePage.vue      | 245 ++++---
 .../pages/PupilOnboardingPage.vue             | 219 ++++---
 .../pages/__tests__/PupilHomePage.spec.ts     | 115 ++--
 .../__tests__/PupilOnboardingPage.spec.ts     | 119 ++--
 src/shared/api/response-errors.ts             |  24 +-
 src/shared/components/AppCelebration.vue      |  23 +-
 src/shared/components/BackButton.vue          |  44 +-
 src/shared/components/LogoutButton.vue        |  20 +-
 src/shared/components/NewClassroomButton.vue  |   4 +-
 src/shared/components/NotificationButton.vue  |   4 +-
 src/shared/components/SettingsButton.vue      |   4 +-
 src/shared/composables/useProfanityFilter.ts  |  56 +-
 src/shared/moderation/banned-words.ts         |  32 +-
 src/shared/moderation/moderation.api.ts       |  37 +-
 src/stops/api/stops.api.ts                    | 189 +++---
 src/stops/components/StopFailureModal.vue     | 100 +--
 src/stops/components/StopTaskView.vue         | 259 ++++----
 src/stops/components/TaskCard.vue             |  90 ++-
 .../components/tasks/EmailReviewCard.vue      | 295 +++++----
 .../components/tasks/ImageSelectCard.vue      | 248 ++++---
 .../components/tasks/SourceComparisonCard.vue |  90 ++-
 .../tasks/fotografen/ImageAssessmentCard.vue  |  37 +-
 .../tasks/fotografen/ImageQuestionCard.vue    |  10 +-
 src/stops/model/__tests__/stop.store.spec.ts  | 350 +++++-----
 src/stops/model/stop.store.ts                 | 197 +++---
 src/stops/pages/StopPage.vue                  | 156 +++--
 .../api/__tests__/teacher-mystery.api.spec.ts | 495 ++++++++------
 .../api/teacher-mystery.api.ts                |  78 ++-
 .../components/TeacherFeatureModal.vue        |  93 +--
 .../components/TeacherFeaturedCard.vue        |  18 +-
 .../components/TeacherMysteryTabBar.vue       |  22 +-
 .../components/TeacherReviewModal.vue         |  65 +-
 .../components/TeacherSubmissionRow.vue       |  45 +-
 .../__tests__/teacher-mystery.store.spec.ts   | 441 +++++++------
 .../model/teacher-mystery.store.ts            | 136 ++--
 .../model/teacher-mystery.types.ts            |   4 +-
 src/teacher-mystery/pages/TeacherMystery.vue  | 373 ++++++-----
 src/teacher-mystery/routes.ts                 |   2 +-
 .../api/teacher-playtest.api.ts               |  44 +-
 .../model/teacherPlaytestMap.store.ts         | 126 ++--
 .../model/teacherPlaytestStop.store.ts        | 183 +++---
 .../pages/TeacherPlaytestMapPage.vue          |  54 +-
 .../pages/TeacherPlaytestStopPage.vue         |  54 +-
 src/teacher-portal/pages/TeacherHomePage.vue  |  42 +-
 .../pages/TeacherSettingsPage.vue             |  75 ++-
 src/teacher-portal/routes.ts                  |  24 +-
 174 files changed, 9554 insertions(+), 7976 deletions(-)

diff --git a/src/app/AppShell.vue b/src/app/AppShell.vue
index 293405dd..c48e17a1 100644
--- a/src/app/AppShell.vue
+++ b/src/app/AppShell.vue
@@ -1,107 +1,118 @@
 <script lang="ts" setup>
-import {computed, ref, watch} from 'vue'
-import {RouterLink, RouterView, useRoute} from 'vue-router'
-import {useI18n} from 'vue-i18n'
-
-import {useAuthStore} from '@/auth/model/auth.store'
-import {startPupilSoundtrack, stopPupilSoundtrack} from '@/app/audio/pupilSoundtrack'
-import {type AppLocale, persistLocale, supportedLocales} from '@/app/i18n'
-import BackButton from '@/shared/components/BackButton.vue'
+import { computed, ref, watch } from "vue";
+import { RouterLink, RouterView, useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
+
+import { useAuthStore } from "@/auth/model/auth.store";
+import {
+  startPupilSoundtrack,
+  stopPupilSoundtrack,
+} from "@/app/audio/pupilSoundtrack";
+import { type AppLocale, persistLocale, supportedLocales } from "@/app/i18n";
+import BackButton from "@/shared/components/BackButton.vue";
 
 const { locale, t } = useI18n();
-const authStore = useAuthStore()
-const route = useRoute()
-const isOpen = ref(false)
+const authStore = useAuthStore();
+const route = useRoute();
+const isOpen = ref(false);
 
 const currentLocale = computed({
   get: () => locale.value as AppLocale,
   set: (value: AppLocale) => {
     locale.value = value;
-    isOpen.value = false
+    isOpen.value = false;
   },
 });
 
 const shouldShowBackButton = computed(
-    () => !route.matched.some((record) => record.meta.hideBackButton === true),
-)
+  () => !route.matched.some((record) => record.meta.hideBackButton === true),
+);
 
 const shouldShowHomeButton = computed(
-    () =>
-        authStore.isAuthenticated &&
-        !route.matched.some((record) => record.meta.hideHomeButton === true),
-)
+  () =>
+    authStore.isAuthenticated &&
+    !route.matched.some((record) => record.meta.hideHomeButton === true),
+);
 
 const shellHomeRoute = computed(() => {
-  if (authStore.portalType === 'TEACHER') {
-    return {name: 'teacher-home'}
+  if (authStore.portalType === "TEACHER") {
+    return { name: "teacher-home" };
   }
 
-  if (authStore.portalType === 'PUPIL') {
-    return {name: 'pupil-home'}
+  if (authStore.portalType === "PUPIL") {
+    return { name: "pupil-home" };
   }
 
-  return {name: 'root'}
-})
+  return { name: "root" };
+});
 
 const shellHomeLabel = computed(() =>
-    authStore.isAuthenticated ? t('common.dashboard') : t('common.home'),
-)
+  authStore.isAuthenticated ? t("common.dashboard") : t("common.home"),
+);
 
 const shellHomeAriaLabel = computed(() =>
-    authStore.isAuthenticated ? t('common.dashboard') : t('landing.title'),
-)
+  authStore.isAuthenticated ? t("common.dashboard") : t("landing.title"),
+);
 
 watch(locale, (value) => {
   persistLocale(value);
 });
 
 watch(
-    () => [authStore.isAuthenticated, authStore.portalType] as const,
-    async ([isAuthenticated, portalType]) => {
-      if (isAuthenticated && portalType === 'PUPIL') {
-        await startPupilSoundtrack()
-        return
-      }
-
-      stopPupilSoundtrack()
-    },
-    {immediate: true},
-)
+  () => [authStore.isAuthenticated, authStore.portalType] as const,
+  async ([isAuthenticated, portalType]) => {
+    if (isAuthenticated && portalType === "PUPIL") {
+      await startPupilSoundtrack();
+      return;
+    }
+
+    stopPupilSoundtrack();
+  },
+  { immediate: true },
+);
 
 const flagMap: Record<string, string> = {
-  en: '🇬🇧',
-  nb: '🇳🇴',
-}
+  en: "🇬🇧",
+  nb: "🇳🇴",
+};
 
 function getFlag(loc: string) {
-  return flagMap[loc] ?? '🌐'
+  return flagMap[loc] ?? "🌐";
 }
 </script>
 
 <template>
   <main class="relative min-h-screen">
     <div
-        v-if="shouldShowHomeButton"
-        class="fixed top-5.5 left-6 z-200 flex flex-col items-center"
+      v-if="shouldShowHomeButton"
+      class="fixed top-5.5 left-6 z-200 flex flex-col items-center"
     >
       <div
-          aria-hidden="true"
-          class="relative z-1 -mb-0.5 flex flex-col items-center filter-[drop-shadow(0_1px_2px_rgba(0,0,0,0.25))]"
+        aria-hidden="true"
+        class="relative z-1 -mb-0.5 flex flex-col items-center filter-[drop-shadow(0_1px_2px_rgba(0,0,0,0.25))]"
       >
-        <div class="h-3 w-3 rounded-full bg-[radial-gradient(circle_at_38%_35%,#e96b6b,#b02a2a)]"/>
-        <div class="h-3 w-0.5 rounded-[1px] bg-[linear-gradient(to_bottom,#bbb,#888)]"/>
+        <div
+          class="h-3 w-3 rounded-full bg-[radial-gradient(circle_at_38%_35%,#e96b6b,#b02a2a)]"
+        />
+        <div
+          class="h-3 w-0.5 rounded-[1px] bg-[linear-gradient(to_bottom,#bbb,#888)]"
+        />
       </div>
 
       <RouterLink
-          :aria-label="shellHomeAriaLabel"
-          :to="shellHomeRoute"
-          data-testid="shell-home-link"
-          class="inline-flex min-w-42.5 origin-top-left flex-col gap-0.5 rounded-[3px] bg-[#fff6cf] px-4 pt-3 pr-4 pb-2.75 text-[#4a3b18] no-underline shadow-[2px_4px_10px_rgba(0,0,0,0.13)] transition-[transform,box-shadow,background] duration-150 ease-out hover:-translate-y-px hover:rotate-0 hover:bg-[#fff2b8] hover:shadow-[3px_6px_16px_rgba(0,0,0,0.18)] focus-visible:rotate-0 focus-visible:outline-2 focus-visible:outline-dashed focus-visible:outline-offset-4 focus-visible:outline-[#c8a93a] transform-[rotate(-1.4deg)]"
+        :aria-label="shellHomeAriaLabel"
+        :to="shellHomeRoute"
+        data-testid="shell-home-link"
+        class="inline-flex min-w-42.5 origin-top-left flex-col gap-0.5 rounded-[3px] bg-[#fff6cf] px-4 pt-3 pr-4 pb-2.75 text-[#4a3b18] no-underline shadow-[2px_4px_10px_rgba(0,0,0,0.13)] transition-[transform,box-shadow,background] duration-150 ease-out hover:-translate-y-px hover:rotate-0 hover:bg-[#fff2b8] hover:shadow-[3px_6px_16px_rgba(0,0,0,0.18)] focus-visible:rotate-0 focus-visible:outline-2 focus-visible:outline-dashed focus-visible:outline-offset-4 focus-visible:outline-[#c8a93a] transform-[rotate(-1.4deg)]"
       >
-        <span class="text-[1.2rem] leading-none font-bold [font-family:var(--font-display),serif]">
-          {{ t('landing.title') }}
+        <span
+          class="text-[1.2rem] leading-none font-bold [font-family:var(--font-display),serif]"
+        >
+          {{ t("landing.title") }}
         </span>
-        <span class="text-base leading-none text-[#7a6430] [font-family:var(--font-display),serif]">
+        <span
+          class="text-base leading-none text-[#7a6430] [font-family:var(--font-display),serif]"
+        >
           {{ shellHomeLabel }}
         </span>
       </RouterLink>
@@ -110,16 +121,20 @@ function getFlag(loc: string) {
     <div class="fixed top-6 right-7 z-200 flex flex-col items-center">
       <!-- Pin -->
       <div
-          aria-hidden="true"
-          class="relative z-1 -mb-0.5 flex flex-col items-center filter-[drop-shadow(0_1px_2px_rgba(0,0,0,0.25))]"
+        aria-hidden="true"
+        class="relative z-1 -mb-0.5 flex flex-col items-center filter-[drop-shadow(0_1px_2px_rgba(0,0,0,0.25))]"
       >
-        <div class="h-3 w-3 rounded-full bg-[radial-gradient(circle_at_38%_35%,#e96b6b,#b02a2a)]"/>
-        <div class="h-3 w-0.5 rounded-[1px] bg-[linear-gradient(to_bottom,#bbb,#888)]"/>
+        <div
+          class="h-3 w-3 rounded-full bg-[radial-gradient(circle_at_38%_35%,#e96b6b,#b02a2a)]"
+        />
+        <div
+          class="h-3 w-0.5 rounded-[1px] bg-[linear-gradient(to_bottom,#bbb,#888)]"
+        />
       </div>
 
       <!-- Note -->
       <div
-          :class="[
+        :class="[
           'min-w-37.5 origin-top rounded-xs px-4 pt-3.5 pb-3 shadow-[2px_4px_10px_rgba(0,0,0,0.13)] transition-[transform,box-shadow,background] duration-180 ease-out',
           isOpen
             ? 'bg-[#fff2b8] shadow-[3px_6px_16px_rgba(0,0,0,0.18)]'
@@ -127,15 +142,15 @@ function getFlag(loc: string) {
         ]"
       >
         <button
-            :aria-expanded="isOpen"
-            data-testid="locale-toggle"
-            class="flex w-full items-center gap-1.75 bg-transparent p-0 text-left text-[1.2rem] leading-none font-bold text-[#4a3b18] [font-family:var(--font-display),serif] focus-visible:rounded-[3px] focus-visible:outline-2 focus-visible:outline-dashed focus-visible:outline-offset-3 focus-visible:outline-[#c8a93a]"
-            @click="isOpen = !isOpen"
+          :aria-expanded="isOpen"
+          data-testid="locale-toggle"
+          class="flex w-full items-center gap-1.75 bg-transparent p-0 text-left text-[1.2rem] leading-none font-bold text-[#4a3b18] [font-family:var(--font-display),serif] focus-visible:rounded-[3px] focus-visible:outline-2 focus-visible:outline-dashed focus-visible:outline-offset-3 focus-visible:outline-[#c8a93a]"
+          @click="isOpen = !isOpen"
         >
           <span>{{ getFlag(currentLocale) }}</span>
           <span class="flex-1">{{ t(`app.languages.${currentLocale}`) }}</span>
           <span
-              :class="[
+            :class="[
               'inline-block rotate-90 text-[1.1rem] leading-none text-[#9a8040] transition-transform duration-180 ease-out',
               isOpen ? '-rotate-90' : '',
             ]"
@@ -145,28 +160,28 @@ function getFlag(loc: string) {
         </button>
 
         <Transition
-            enter-active-class="origin-top transition duration-150 ease-out"
-            enter-from-class="scale-y-[0.92] opacity-0"
-            enter-to-class="scale-y-100 opacity-100"
-            leave-active-class="origin-top transition duration-150 ease-in"
-            leave-from-class="scale-y-100 opacity-100"
-            leave-to-class="scale-y-[0.92] opacity-0"
+          enter-active-class="origin-top transition duration-150 ease-out"
+          enter-from-class="scale-y-[0.92] opacity-0"
+          enter-to-class="scale-y-100 opacity-100"
+          leave-active-class="origin-top transition duration-150 ease-in"
+          leave-from-class="scale-y-100 opacity-100"
+          leave-to-class="scale-y-[0.92] opacity-0"
         >
           <ul
-              v-if="isOpen"
-              class="mt-2 list-none border-t border-dashed border-t-[rgba(122,100,48,0.35)] pt-2"
-              role="listbox"
+            v-if="isOpen"
+            class="mt-2 list-none border-t border-dashed border-t-[rgba(122,100,48,0.35)] pt-2"
+            role="listbox"
           >
             <li
-                v-for="loc in supportedLocales"
-                :key="loc"
-                :aria-selected="loc === currentLocale"
-                :class="[
+              v-for="loc in supportedLocales"
+              :key="loc"
+              :aria-selected="loc === currentLocale"
+              :class="[
                 'flex items-center gap-1.75 rounded-xs px-0.5 py-1 text-[1.1rem] text-[#5c4a20] transition-colors duration-100 [font-family:var(--font-display),serif] hover:bg-[rgba(122,100,48,0.12)]',
                 loc === currentLocale ? 'font-bold text-[#3a2d08]' : '',
               ]"
-                role="option"
-                @click="currentLocale = loc as AppLocale"
+              role="option"
+              @click="currentLocale = loc as AppLocale"
             >
               <span>{{ getFlag(loc) }}</span>
               <span>{{ t(`app.languages.${loc}`) }}</span>
@@ -177,12 +192,12 @@ function getFlag(loc: string) {
     </div>
 
     <div
-        v-if="isOpen"
-        class="fixed inset-0 z-199 bg-[rgba(28,42,80,0.3)] backdrop-blur-[1.5px]"
-        @click="isOpen = false"
+      v-if="isOpen"
+      class="fixed inset-0 z-199 bg-[rgba(28,42,80,0.3)] backdrop-blur-[1.5px]"
+      @click="isOpen = false"
     />
 
-    <BackButton v-if="shouldShowBackButton"/>
-    <RouterView/>
+    <BackButton v-if="shouldShowBackButton" />
+    <RouterView />
   </main>
 </template>
diff --git a/src/app/__tests__/AppShell.spec.ts b/src/app/__tests__/AppShell.spec.ts
index d0e9179b..f045eae6 100644
--- a/src/app/__tests__/AppShell.spec.ts
+++ b/src/app/__tests__/AppShell.spec.ts
@@ -1,84 +1,84 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { flushPromises, mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import { createMemoryHistory, createRouter } from 'vue-router'
-
-import AppShell from '../AppShell.vue'
-import { createAppI18n } from '../i18n'
-import { useAuthStore } from '@/auth/model/auth.store'
-import type { AuthUser, PortalType } from '@/auth/model/auth.types'
-
-const audioPlayMock = vi.fn().mockResolvedValue(undefined)
-const audioPauseMock = vi.fn()
-
-vi.mock('@/assets/music/background_music.mp3', () => ({
-  default: '/src/assets/music/background_music.mp3',
-}))
-
-async function mountAppShell(initialPath = '/') {
-  const pinia = createPinia()
-  setActivePinia(pinia)
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { nextTick } from "vue";
+import { flushPromises, mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
+import { createMemoryHistory, createRouter } from "vue-router";
+
+import AppShell from "../AppShell.vue";
+import { createAppI18n } from "../i18n";
+import { useAuthStore } from "@/auth/model/auth.store";
+import type { AuthUser, PortalType } from "@/auth/model/auth.types";
+
+const audioPlayMock = vi.fn().mockResolvedValue(undefined);
+const audioPauseMock = vi.fn();
+
+vi.mock("@/assets/music/background_music.mp3", () => ({
+  default: "/src/assets/music/background_music.mp3",
+}));
+
+async function mountAppShell(initialPath = "/") {
+  const pinia = createPinia();
+  setActivePinia(pinia);
   const router = createRouter({
     history: createMemoryHistory(),
     routes: [
       {
-        path: '/',
-        name: 'root',
-        component: { template: '<div>Root page</div>' },
+        path: "/",
+        name: "root",
+        component: { template: "<div>Root page</div>" },
         meta: { hideBackButton: true },
       },
       {
-        path: '/pupil/help',
-        component: { template: '<div>Help page</div>' },
+        path: "/pupil/help",
+        component: { template: "<div>Help page</div>" },
       },
       {
-        path: '/pupil/map',
-        name: 'pupil-map',
-        component: { template: '<div>Map page</div>' },
+        path: "/pupil/map",
+        name: "pupil-map",
+        component: { template: "<div>Map page</div>" },
         meta: {
-          backTarget: { name: 'pupil-home' },
+          backTarget: { name: "pupil-home" },
         },
       },
       {
-        path: '/pupil/map/:slug/success',
-        name: 'pupil-stop-success',
-        component: { template: '<div>Success page</div>' },
+        path: "/pupil/map/:slug/success",
+        name: "pupil-stop-success",
+        component: { template: "<div>Success page</div>" },
         meta: {
-          backTarget: { name: 'pupil-map' },
+          backTarget: { name: "pupil-map" },
         },
       },
       {
-        path: '/login',
-        name: 'login',
-        component: { template: '<div>Login page</div>' },
+        path: "/login",
+        name: "login",
+        component: { template: "<div>Login page</div>" },
         meta: { hideBackButton: true },
       },
       {
-        path: '/pupil/home',
-        name: 'pupil-home',
-        component: { template: '<div>Pupil dashboard</div>' },
+        path: "/pupil/home",
+        name: "pupil-home",
+        component: { template: "<div>Pupil dashboard</div>" },
         meta: { hideBackButton: true },
       },
       {
-        path: '/teacher/home',
-        name: 'teacher-home',
-        component: { template: '<div>Teacher dashboard</div>' },
+        path: "/teacher/home",
+        name: "teacher-home",
+        component: { template: "<div>Teacher dashboard</div>" },
         meta: { hideBackButton: true },
       },
     ],
-  })
+  });
 
-  await router.push(initialPath)
-  await router.isReady()
+  await router.push(initialPath);
+  await router.isReady();
 
   const wrapper = mount(AppShell, {
     global: {
       plugins: [createAppI18n(), pinia, router],
     },
-  })
+  });
 
-  return { wrapper, router }
+  return { wrapper, router };
 }
 
 function authenticatedUser(
@@ -86,149 +86,157 @@ function authenticatedUser(
   overrides: Partial<AuthUser> = {},
 ): AuthUser {
   return {
-    subject: portalType === 'PUPIL' ? 'pupil-1' : 'teacher-1',
+    subject: portalType === "PUPIL" ? "pupil-1" : "teacher-1",
     portalType,
-    email: portalType === 'TEACHER' ? 'teacher@example.com' : null,
-    username: portalType === 'PUPIL' ? 'student1' : null,
+    email: portalType === "TEACHER" ? "teacher@example.com" : null,
+    username: portalType === "PUPIL" ? "student1" : null,
     authorities: [],
     pupilProfile: null,
     teacherProfile: null,
     ...overrides,
-  }
+  };
 }
 
-describe('AppShell', () => {
+describe("AppShell", () => {
   beforeEach(() => {
-    setActivePinia(createPinia())
-    if (typeof window.localStorage.removeItem === 'function') {
-      window.localStorage.removeItem('locale')
+    setActivePinia(createPinia());
+    if (typeof window.localStorage.removeItem === "function") {
+      window.localStorage.removeItem("locale");
     }
 
-    audioPlayMock.mockClear()
-    audioPauseMock.mockClear()
+    audioPlayMock.mockClear();
+    audioPauseMock.mockClear();
     class FakeAudio {
-      loop = false
-      preload = 'none'
-      currentTime = 0
+      loop = false;
+      preload = "none";
+      currentTime = 0;
 
       constructor() {}
 
-      play = audioPlayMock
-      pause = audioPauseMock
-      addEventListener = vi.fn()
+      play = audioPlayMock;
+      pause = audioPauseMock;
+      addEventListener = vi.fn();
     }
 
-    vi.stubGlobal('Audio', FakeAudio)
-  })
+    vi.stubGlobal("Audio", FakeAudio);
+  });
 
-  it('mounts and renders properly', async () => {
-    const { wrapper } = await mountAppShell('/')
+  it("mounts and renders properly", async () => {
+    const { wrapper } = await mountAppShell("/");
 
-    expect(wrapper.text()).toContain('Norsk')
-    expect(wrapper.text()).toContain('Root page')
-    expect(wrapper.find('[data-testid="shell-home-link"]').exists()).toBe(false)
-  })
+    expect(wrapper.text()).toContain("Norsk");
+    expect(wrapper.text()).toContain("Root page");
+    expect(wrapper.find('[data-testid="shell-home-link"]').exists()).toBe(
+      false,
+    );
+  });
 
-  it('switches locale', async () => {
-    const { wrapper } = await mountAppShell()
+  it("switches locale", async () => {
+    const { wrapper } = await mountAppShell();
 
-    await wrapper.get('[data-testid="locale-toggle"]').trigger('click')
-    await nextTick()
+    await wrapper.get('[data-testid="locale-toggle"]').trigger("click");
+    await nextTick();
 
-    const enOption = wrapper.findAll('[role="option"]')[0]
+    const enOption = wrapper.findAll('[role="option"]')[0];
 
-    expect(enOption).toBeDefined()
-    await enOption!.trigger('click')
+    expect(enOption).toBeDefined();
+    await enOption!.trigger("click");
 
-    expect(wrapper.text()).toContain('English')
-  })
+    expect(wrapper.text()).toContain("English");
+  });
 
-  it('hides the back button on home-level routes', async () => {
-    const { wrapper } = await mountAppShell('/')
+  it("hides the back button on home-level routes", async () => {
+    const { wrapper } = await mountAppShell("/");
 
-    expect(wrapper.find('button.back-button').exists()).toBe(false)
-  })
+    expect(wrapper.find("button.back-button").exists()).toBe(false);
+  });
 
-  it('shows the back button on non-home routes', async () => {
-    const { wrapper } = await mountAppShell('/pupil/help')
+  it("shows the back button on non-home routes", async () => {
+    const { wrapper } = await mountAppShell("/pupil/help");
 
-    expect(wrapper.find('button.back-button').exists()).toBe(true)
-  })
+    expect(wrapper.find("button.back-button").exists()).toBe(true);
+  });
 
-  it('hides the back button on the login route', async () => {
-    const { wrapper } = await mountAppShell('/login')
+  it("hides the back button on the login route", async () => {
+    const { wrapper } = await mountAppShell("/login");
 
-    expect(wrapper.find('button.back-button').exists()).toBe(false)
-  })
+    expect(wrapper.find("button.back-button").exists()).toBe(false);
+  });
 
-  it('plays looping soundtrack only for authenticated pupils', async () => {
-    const { wrapper } = await mountAppShell('/')
-    const authStore = useAuthStore()
+  it("plays looping soundtrack only for authenticated pupils", async () => {
+    const { wrapper } = await mountAppShell("/");
+    const authStore = useAuthStore();
 
-    audioPauseMock.mockClear()
+    audioPauseMock.mockClear();
 
-    authStore.status = 'authenticated'
-    authStore.accessToken = 'access-token'
-    authStore.user = authenticatedUser('PUPIL')
+    authStore.status = "authenticated";
+    authStore.accessToken = "access-token";
+    authStore.user = authenticatedUser("PUPIL");
 
-    await nextTick()
+    await nextTick();
 
-    expect(audioPlayMock).toHaveBeenCalledTimes(1)
+    expect(audioPlayMock).toHaveBeenCalledTimes(1);
 
-    authStore.user = authenticatedUser('TEACHER')
+    authStore.user = authenticatedUser("TEACHER");
 
-    await nextTick()
+    await nextTick();
 
-    expect(audioPauseMock).toHaveBeenCalledTimes(1)
+    expect(audioPauseMock).toHaveBeenCalledTimes(1);
 
-    wrapper.unmount()
-  })
+    wrapper.unmount();
+  });
 
-  it('routes the shell home link to the pupil dashboard for authenticated pupils', async () => {
-    const { wrapper } = await mountAppShell('/pupil/help')
-    const authStore = useAuthStore()
+  it("routes the shell home link to the pupil dashboard for authenticated pupils", async () => {
+    const { wrapper } = await mountAppShell("/pupil/help");
+    const authStore = useAuthStore();
 
-    authStore.status = 'authenticated'
-    authStore.accessToken = 'access-token'
-    authStore.user = authenticatedUser('PUPIL')
+    authStore.status = "authenticated";
+    authStore.accessToken = "access-token";
+    authStore.user = authenticatedUser("PUPIL");
 
-    await nextTick()
+    await nextTick();
 
-    expect(wrapper.get('[data-testid="shell-home-link"]').attributes('href')).toBe('/pupil/home')
-  })
+    expect(
+      wrapper.get('[data-testid="shell-home-link"]').attributes("href"),
+    ).toBe("/pupil/home");
+  });
 
-  it('routes the shell home link to the teacher dashboard for authenticated teachers', async () => {
-    const { wrapper } = await mountAppShell('/pupil/help')
-    const authStore = useAuthStore()
+  it("routes the shell home link to the teacher dashboard for authenticated teachers", async () => {
+    const { wrapper } = await mountAppShell("/pupil/help");
+    const authStore = useAuthStore();
 
-    authStore.status = 'authenticated'
-    authStore.accessToken = 'access-token'
-    authStore.user = authenticatedUser('TEACHER')
+    authStore.status = "authenticated";
+    authStore.accessToken = "access-token";
+    authStore.user = authenticatedUser("TEACHER");
 
-    await nextTick()
+    await nextTick();
 
-    expect(wrapper.get('[data-testid="shell-home-link"]').attributes('href')).toBe('/teacher/home')
-  })
+    expect(
+      wrapper.get('[data-testid="shell-home-link"]').attributes("href"),
+    ).toBe("/teacher/home");
+  });
 
-  it('routes the back button from the map to home even when history contains stop success', async () => {
-    const { router, wrapper } = await mountAppShell('/pupil/home')
+  it("routes the back button from the map to home even when history contains stop success", async () => {
+    const { router, wrapper } = await mountAppShell("/pupil/home");
 
-    await router.push('/pupil/map/example/success')
-    await router.push('/pupil/map')
-    await flushPromises()
+    await router.push("/pupil/map/example/success");
+    await router.push("/pupil/map");
+    await flushPromises();
 
-    await wrapper.get('button.back-button').trigger('click')
-    await flushPromises()
+    await wrapper.get("button.back-button").trigger("click");
+    await flushPromises();
 
-    expect(router.currentRoute.value.name).toBe('pupil-home')
-  })
+    expect(router.currentRoute.value.name).toBe("pupil-home");
+  });
 
-  it('routes the back button from stop success to the map', async () => {
-    const { router, wrapper } = await mountAppShell('/pupil/map/example/success')
+  it("routes the back button from stop success to the map", async () => {
+    const { router, wrapper } = await mountAppShell(
+      "/pupil/map/example/success",
+    );
 
-    await wrapper.get('button.back-button').trigger('click')
-    await flushPromises()
+    await wrapper.get("button.back-button").trigger("click");
+    await flushPromises();
 
-    expect(router.currentRoute.value.name).toBe('pupil-map')
-  })
-})
+    expect(router.currentRoute.value.name).toBe("pupil-map");
+  });
+});
diff --git a/src/app/__tests__/BackButton.spec.ts b/src/app/__tests__/BackButton.spec.ts
index dab94578..90c72eb4 100644
--- a/src/app/__tests__/BackButton.spec.ts
+++ b/src/app/__tests__/BackButton.spec.ts
@@ -1,129 +1,131 @@
-import { describe, expect, it } from 'vitest'
-import { flushPromises, mount } from '@vue/test-utils'
-import { createMemoryHistory, createRouter } from 'vue-router'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { describe, expect, it } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import { createMemoryHistory, createRouter } from "vue-router";
+import type { RouteLocationNormalizedLoaded } from "vue-router";
 
-import BackButton from '@/shared/components/BackButton.vue'
-import { createAppI18n } from '@/app/i18n'
+import BackButton from "@/shared/components/BackButton.vue";
+import { createAppI18n } from "@/app/i18n";
 
 async function mountBackButton(initialPath: string) {
   const router = createRouter({
     history: createMemoryHistory(),
     routes: [
       {
-        path: '/',
-        name: 'root',
-        component: { template: '<div>Root</div>' },
+        path: "/",
+        name: "root",
+        component: { template: "<div>Root</div>" },
       },
       {
-        path: '/previous',
-        name: 'previous',
-        component: { template: '<div>Previous</div>' },
+        path: "/previous",
+        name: "previous",
+        component: { template: "<div>Previous</div>" },
       },
       {
-        path: '/parent',
-        name: 'parent',
-        component: { template: '<div>Parent</div>' },
+        path: "/parent",
+        name: "parent",
+        component: { template: "<div>Parent</div>" },
       },
       {
-        path: '/child',
-        name: 'child',
-        component: { template: '<div>Child</div>' },
+        path: "/child",
+        name: "child",
+        component: { template: "<div>Child</div>" },
         meta: {
-          backTarget: { name: 'parent' },
+          backTarget: { name: "parent" },
         },
       },
       {
-        path: '/pupil/help',
-        name: 'pupil-help',
-        component: { template: '<div>Pupil help</div>' },
+        path: "/pupil/help",
+        name: "pupil-help",
+        component: { template: "<div>Pupil help</div>" },
       },
       {
-        path: '/pupil/home',
-        name: 'pupil-home',
-        component: { template: '<div>Pupil home</div>' },
+        path: "/pupil/home",
+        name: "pupil-home",
+        component: { template: "<div>Pupil home</div>" },
       },
       {
-        path: '/teacher/help',
-        name: 'teacher-help',
-        component: { template: '<div>Teacher help</div>' },
+        path: "/teacher/help",
+        name: "teacher-help",
+        component: { template: "<div>Teacher help</div>" },
       },
       {
-        path: '/teacher/home',
-        name: 'teacher-home',
-        component: { template: '<div>Teacher home</div>' },
+        path: "/teacher/home",
+        name: "teacher-home",
+        component: { template: "<div>Teacher home</div>" },
       },
       {
-        path: '/teacher/classrooms/:classroomId/playtest',
-        name: 'teacher-playtest-map',
-        component: { template: '<div>Teacher playtest map</div>' },
+        path: "/teacher/classrooms/:classroomId/playtest",
+        name: "teacher-playtest-map",
+        component: { template: "<div>Teacher playtest map</div>" },
       },
       {
-        path: '/teacher/classrooms/:classroomId/playtest/:slug',
-        name: 'teacher-playtest-stop',
-        component: { template: '<div>Teacher playtest stop</div>' },
+        path: "/teacher/classrooms/:classroomId/playtest/:slug",
+        name: "teacher-playtest-stop",
+        component: { template: "<div>Teacher playtest stop</div>" },
         meta: {
           backTarget: (route: RouteLocationNormalizedLoaded) => ({
-            name: 'teacher-playtest-map',
+            name: "teacher-playtest-map",
             params: { classroomId: route.params.classroomId },
           }),
         },
       },
       {
-        path: '/loose',
-        name: 'loose',
-        component: { template: '<div>Loose</div>' },
+        path: "/loose",
+        name: "loose",
+        component: { template: "<div>Loose</div>" },
       },
     ],
-  })
+  });
 
-  await router.push('/previous')
-  await router.push(initialPath)
-  await router.isReady()
+  await router.push("/previous");
+  await router.push(initialPath);
+  await router.isReady();
 
   const wrapper = mount(BackButton, {
     global: {
       plugins: [createAppI18n(), router],
     },
-  })
+  });
 
-  return { router, wrapper }
+  return { router, wrapper };
 }
 
-describe('BackButton', () => {
-  it('uses a static route back target instead of browser history', async () => {
-    const { router, wrapper } = await mountBackButton('/child')
+describe("BackButton", () => {
+  it("uses a static route back target instead of browser history", async () => {
+    const { router, wrapper } = await mountBackButton("/child");
 
-    await wrapper.get('button').trigger('click')
-    await flushPromises()
+    await wrapper.get("button").trigger("click");
+    await flushPromises();
 
-    expect(router.currentRoute.value.name).toBe('parent')
-  })
+    expect(router.currentRoute.value.name).toBe("parent");
+  });
 
-  it('uses a functional route back target with current params', async () => {
-    const { router, wrapper } = await mountBackButton('/teacher/classrooms/42/playtest/source-check')
+  it("uses a functional route back target with current params", async () => {
+    const { router, wrapper } = await mountBackButton(
+      "/teacher/classrooms/42/playtest/source-check",
+    );
 
-    await wrapper.get('button').trigger('click')
-    await flushPromises()
+    await wrapper.get("button").trigger("click");
+    await flushPromises();
 
-    expect(router.currentRoute.value.name).toBe('teacher-playtest-map')
-    expect(router.currentRoute.value.params.classroomId).toBe('42')
-  })
+    expect(router.currentRoute.value.name).toBe("teacher-playtest-map");
+    expect(router.currentRoute.value.params.classroomId).toBe("42");
+  });
 
-  it('falls back to pupil home, teacher home, or root without a route back target', async () => {
-    const pupil = await mountBackButton('/pupil/help')
-    await pupil.wrapper.get('button').trigger('click')
-    await flushPromises()
-    expect(pupil.router.currentRoute.value.name).toBe('pupil-home')
+  it("falls back to pupil home, teacher home, or root without a route back target", async () => {
+    const pupil = await mountBackButton("/pupil/help");
+    await pupil.wrapper.get("button").trigger("click");
+    await flushPromises();
+    expect(pupil.router.currentRoute.value.name).toBe("pupil-home");
 
-    const teacher = await mountBackButton('/teacher/help')
-    await teacher.wrapper.get('button').trigger('click')
-    await flushPromises()
-    expect(teacher.router.currentRoute.value.name).toBe('teacher-home')
+    const teacher = await mountBackButton("/teacher/help");
+    await teacher.wrapper.get("button").trigger("click");
+    await flushPromises();
+    expect(teacher.router.currentRoute.value.name).toBe("teacher-home");
 
-    const root = await mountBackButton('/loose')
-    await root.wrapper.get('button').trigger('click')
-    await flushPromises()
-    expect(root.router.currentRoute.value.name).toBe('root')
-  })
-})
+    const root = await mountBackButton("/loose");
+    await root.wrapper.get("button").trigger("click");
+    await flushPromises();
+    expect(root.router.currentRoute.value.name).toBe("root");
+  });
+});
diff --git a/src/app/__tests__/NotFoundPage.spec.ts b/src/app/__tests__/NotFoundPage.spec.ts
index 1c45e292..d615c29b 100644
--- a/src/app/__tests__/NotFoundPage.spec.ts
+++ b/src/app/__tests__/NotFoundPage.spec.ts
@@ -1,72 +1,72 @@
-import { beforeEach, describe, expect, it } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import { createMemoryHistory } from 'vue-router'
+import { beforeEach, describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
+import { createMemoryHistory } from "vue-router";
 
-import { createAppI18n } from '@/app/i18n'
-import NotFoundPage from '@/app/pages/NotFoundPage.vue'
-import { createAppRouter } from '@/app/router'
-import { useAuthStore } from '@/auth/model/auth.store'
+import { createAppI18n } from "@/app/i18n";
+import NotFoundPage from "@/app/pages/NotFoundPage.vue";
+import { createAppRouter } from "@/app/router";
+import { useAuthStore } from "@/auth/model/auth.store";
 
 async function mountNotFoundPage() {
-  const pinia = createPinia()
-  setActivePinia(pinia)
+  const pinia = createPinia();
+  setActivePinia(pinia);
 
-  const router = createAppRouter(createMemoryHistory(), pinia)
-  await router.push('/missing-page')
-  await router.isReady()
+  const router = createAppRouter(createMemoryHistory(), pinia);
+  await router.push("/missing-page");
+  await router.isReady();
 
   return mount(NotFoundPage, {
     global: {
       plugins: [pinia, router, createAppI18n()],
     },
-  })
+  });
 }
 
-describe('NotFoundPage', () => {
+describe("NotFoundPage", () => {
   beforeEach(() => {
-    window.sessionStorage.clear()
-  })
+    window.sessionStorage.clear();
+  });
 
-  it('links anonymous users back to the public home page', async () => {
-    const wrapper = await mountNotFoundPage()
+  it("links anonymous users back to the public home page", async () => {
+    const wrapper = await mountNotFoundPage();
 
-    const link = wrapper.get('a')
+    const link = wrapper.get("a");
 
-    expect(link.attributes('href')).toBe('/')
-    expect(link.text()).toBe('Gå hjem')
-  })
+    expect(link.attributes("href")).toBe("/");
+    expect(link.text()).toBe("Gå hjem");
+  });
 
-  it('links authenticated teachers to their home screen', async () => {
-    const pinia = createPinia()
-    setActivePinia(pinia)
+  it("links authenticated teachers to their home screen", async () => {
+    const pinia = createPinia();
+    setActivePinia(pinia);
 
-    const authStore = useAuthStore(pinia)
-    authStore.status = 'authenticated'
-    authStore.accessToken = 'access-token'
+    const authStore = useAuthStore(pinia);
+    authStore.status = "authenticated";
+    authStore.accessToken = "access-token";
     authStore.user = {
-      subject: 'teacher-1',
-      portalType: 'TEACHER',
-      email: 'teacher@example.com',
+      subject: "teacher-1",
+      portalType: "TEACHER",
+      email: "teacher@example.com",
       username: null,
       authorities: [],
       pupilProfile: null,
       teacherProfile: null,
-    }
+    };
 
-    const router = createAppRouter(createMemoryHistory(), pinia)
-    await router.push('/missing-page')
-    await router.isReady()
+    const router = createAppRouter(createMemoryHistory(), pinia);
+    await router.push("/missing-page");
+    await router.isReady();
 
     const wrapper = mount(NotFoundPage, {
       global: {
         plugins: [pinia, router, createAppI18n()],
       },
-    })
+    });
 
-    const link = wrapper.get('a')
+    const link = wrapper.get("a");
 
-    expect(link.attributes('href')).toBe('/teacher/home')
-    expect(link.text()).toBe('Hjemskjerm')
-  })
-})
+    expect(link.attributes("href")).toBe("/teacher/home");
+    expect(link.text()).toBe("Hjemskjerm");
+  });
+});
diff --git a/src/app/audio/__tests__/celebrationSound.spec.ts b/src/app/audio/__tests__/celebrationSound.spec.ts
index 1ec0606e..c3b77ba4 100644
--- a/src/app/audio/__tests__/celebrationSound.spec.ts
+++ b/src/app/audio/__tests__/celebrationSound.spec.ts
@@ -1,46 +1,46 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import { playCelebrationSound } from '@/app/audio/celebrationSound'
-import { getPupilSfxVolume } from '@/app/audio/pupilSfx'
+import { playCelebrationSound } from "@/app/audio/celebrationSound";
+import { getPupilSfxVolume } from "@/app/audio/pupilSfx";
 
-vi.mock('@/app/audio/pupilSfx', () => ({
+vi.mock("@/app/audio/pupilSfx", () => ({
   getPupilSfxVolume: vi.fn(() => 25),
-}))
+}));
 
-describe('playCelebrationSound', () => {
+describe("playCelebrationSound", () => {
   beforeEach(() => {
-    vi.restoreAllMocks()
-    vi.clearAllMocks()
-  })
+    vi.restoreAllMocks();
+    vi.clearAllMocks();
+  });
 
-  it('applies the stored sfx volume before playback', async () => {
+  it("applies the stored sfx volume before playback", async () => {
     const createdAudio: Array<{
-      currentTime: number
-      play: ReturnType<typeof vi.fn>
-      preload: string
-      volume: number
-    }> = []
+      currentTime: number;
+      play: ReturnType<typeof vi.fn>;
+      preload: string;
+      volume: number;
+    }> = [];
 
     class FakeAudio {
-      currentTime = 99
-      preload = ''
-      volume = 1
-      play = vi.fn().mockResolvedValue(undefined)
+      currentTime = 99;
+      preload = "";
+      volume = 1;
+      play = vi.fn().mockResolvedValue(undefined);
 
       constructor() {
-        createdAudio.push(this)
+        createdAudio.push(this);
       }
     }
 
-    vi.stubGlobal('Audio', FakeAudio)
+    vi.stubGlobal("Audio", FakeAudio);
 
-    await playCelebrationSound()
+    await playCelebrationSound();
 
-    expect(getPupilSfxVolume).toHaveBeenCalledTimes(1)
-    expect(createdAudio).toHaveLength(1)
-    expect(createdAudio[0]?.preload).toBe('auto')
-    expect(createdAudio[0]?.currentTime).toBe(0)
-    expect(createdAudio[0]?.volume).toBe(0.25)
-    expect(createdAudio[0]?.play).toHaveBeenCalledTimes(1)
-  })
-})
+    expect(getPupilSfxVolume).toHaveBeenCalledTimes(1);
+    expect(createdAudio).toHaveLength(1);
+    expect(createdAudio[0]?.preload).toBe("auto");
+    expect(createdAudio[0]?.currentTime).toBe(0);
+    expect(createdAudio[0]?.volume).toBe(0.25);
+    expect(createdAudio[0]?.play).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/app/audio/__tests__/pupilSoundtrack.spec.ts b/src/app/audio/__tests__/pupilSoundtrack.spec.ts
index 767421a1..c6ef1ad1 100644
--- a/src/app/audio/__tests__/pupilSoundtrack.spec.ts
+++ b/src/app/audio/__tests__/pupilSoundtrack.spec.ts
@@ -1,139 +1,148 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
-vi.mock('@/assets/music/background_music.mp3', () => ({
-  default: '/src/assets/music/background_music.mp3',
-}))
+vi.mock("@/assets/music/background_music.mp3", () => ({
+  default: "/src/assets/music/background_music.mp3",
+}));
 
-const PUPIL_SOUNDTRACK_VOLUME_STORAGE_KEY = 'nettdetektivene.pupil.soundtrack.volume'
-const PUPIL_SOUNDTRACK_POSITION_STORAGE_KEY = 'nettdetektivene.pupil.soundtrack.position'
+const PUPIL_SOUNDTRACK_VOLUME_STORAGE_KEY =
+  "nettdetektivene.pupil.soundtrack.volume";
+const PUPIL_SOUNDTRACK_POSITION_STORAGE_KEY =
+  "nettdetektivene.pupil.soundtrack.position";
 
-describe('pupil soundtrack', () => {
+describe("pupil soundtrack", () => {
   beforeEach(() => {
-    window.localStorage.clear()
-    window.sessionStorage.clear()
-    vi.resetModules()
-  })
-
-  it('applies configured volume to the playing soundtrack and persists it', async () => {
-    const playMock = vi.fn().mockResolvedValue(undefined)
-    const pauseMock = vi.fn()
+    window.localStorage.clear();
+    window.sessionStorage.clear();
+    vi.resetModules();
+  });
+
+  it("applies configured volume to the playing soundtrack and persists it", async () => {
+    const playMock = vi.fn().mockResolvedValue(undefined);
+    const pauseMock = vi.fn();
     const createdAudio: Array<{
-      volume: number
-      loop: boolean
-      preload: string
-      currentTime: number
-      play: typeof playMock
-      pause: typeof pauseMock
-      addEventListener: (event: string, callback: () => void) => void
-    }> = []
+      volume: number;
+      loop: boolean;
+      preload: string;
+      currentTime: number;
+      play: typeof playMock;
+      pause: typeof pauseMock;
+      addEventListener: (event: string, callback: () => void) => void;
+    }> = [];
 
     class FakeAudio {
-      volume = 1
-      loop = false
-      preload = 'none'
-      currentTime = 0
-      play = playMock
-      pause = pauseMock
-      addEventListener = vi.fn()
+      volume = 1;
+      loop = false;
+      preload = "none";
+      currentTime = 0;
+      play = playMock;
+      pause = pauseMock;
+      addEventListener = vi.fn();
 
       constructor() {
-        createdAudio.push(this)
+        createdAudio.push(this);
       }
     }
 
-    vi.stubGlobal('Audio', FakeAudio)
+    vi.stubGlobal("Audio", FakeAudio);
 
     const {
       getPupilSoundtrackVolume,
       setPupilSoundtrackVolume,
       startPupilSoundtrack,
-    } = await import('@/app/audio/pupilSoundtrack')
-
-    expect(getPupilSoundtrackVolume()).toBe(50)
-
-    setPupilSoundtrackVolume(25)
-    await startPupilSoundtrack()
-
-    expect(getPupilSoundtrackVolume()).toBe(25)
-    expect(window.localStorage.getItem(PUPIL_SOUNDTRACK_VOLUME_STORAGE_KEY)).toBe('25')
-    expect(playMock).toHaveBeenCalledTimes(1)
-    expect(createdAudio).toHaveLength(1)
-    expect(createdAudio[0]?.loop).toBe(true)
-    expect(createdAudio[0]?.preload).toBe('auto')
-    expect(createdAudio[0]?.volume).toBe(0.25)
-  })
-
-  it('restores the saved playback position after a refresh', async () => {
-    const playMock = vi.fn().mockResolvedValue(undefined)
+    } = await import("@/app/audio/pupilSoundtrack");
+
+    expect(getPupilSoundtrackVolume()).toBe(50);
+
+    setPupilSoundtrackVolume(25);
+    await startPupilSoundtrack();
+
+    expect(getPupilSoundtrackVolume()).toBe(25);
+    expect(
+      window.localStorage.getItem(PUPIL_SOUNDTRACK_VOLUME_STORAGE_KEY),
+    ).toBe("25");
+    expect(playMock).toHaveBeenCalledTimes(1);
+    expect(createdAudio).toHaveLength(1);
+    expect(createdAudio[0]?.loop).toBe(true);
+    expect(createdAudio[0]?.preload).toBe("auto");
+    expect(createdAudio[0]?.volume).toBe(0.25);
+  });
+
+  it("restores the saved playback position after a refresh", async () => {
+    const playMock = vi.fn().mockResolvedValue(undefined);
     const createdAudio: Array<{
-      currentTime: number
-      loop: boolean
-      play: typeof playMock
-    }> = []
+      currentTime: number;
+      loop: boolean;
+      play: typeof playMock;
+    }> = [];
 
     class FakeAudio {
-      volume = 1
-      loop = false
-      preload = 'none'
-      currentTime = 0
-      play = playMock
-      pause = vi.fn()
-      addEventListener = vi.fn()
+      volume = 1;
+      loop = false;
+      preload = "none";
+      currentTime = 0;
+      play = playMock;
+      pause = vi.fn();
+      addEventListener = vi.fn();
 
       constructor() {
-        createdAudio.push(this)
+        createdAudio.push(this);
       }
     }
 
-    window.sessionStorage.setItem(PUPIL_SOUNDTRACK_POSITION_STORAGE_KEY, '42.5')
-    vi.stubGlobal('Audio', FakeAudio)
+    window.sessionStorage.setItem(
+      PUPIL_SOUNDTRACK_POSITION_STORAGE_KEY,
+      "42.5",
+    );
+    vi.stubGlobal("Audio", FakeAudio);
 
-    const { startPupilSoundtrack } = await import('@/app/audio/pupilSoundtrack')
+    const { startPupilSoundtrack } =
+      await import("@/app/audio/pupilSoundtrack");
 
-    await startPupilSoundtrack()
+    await startPupilSoundtrack();
 
-    expect(playMock).toHaveBeenCalledTimes(1)
-    expect(createdAudio).toHaveLength(1)
-    expect(createdAudio[0]?.loop).toBe(true)
-    expect(createdAudio[0]?.currentTime).toBe(42.5)
-  })
+    expect(playMock).toHaveBeenCalledTimes(1);
+    expect(createdAudio).toHaveLength(1);
+    expect(createdAudio[0]?.loop).toBe(true);
+    expect(createdAudio[0]?.currentTime).toBe(42.5);
+  });
 
-  it('retries playback after refresh when autoplay is blocked until the next interaction', async () => {
+  it("retries playback after refresh when autoplay is blocked until the next interaction", async () => {
     const playMock = vi
       .fn()
-      .mockRejectedValueOnce(new Error('Autoplay blocked'))
-      .mockResolvedValue(undefined)
+      .mockRejectedValueOnce(new Error("Autoplay blocked"))
+      .mockResolvedValue(undefined);
 
     class FakeAudio {
-      volume = 1
-      loop = false
-      preload = 'none'
-      currentTime = 0
-      play = playMock
-      pause = vi.fn()
-      addEventListener = vi.fn()
+      volume = 1;
+      loop = false;
+      preload = "none";
+      currentTime = 0;
+      play = playMock;
+      pause = vi.fn();
+      addEventListener = vi.fn();
 
       constructor() {}
     }
 
-    vi.stubGlobal('Audio', FakeAudio)
+    vi.stubGlobal("Audio", FakeAudio);
 
-    const addEventListenerSpy = vi.spyOn(window, 'addEventListener')
+    const addEventListenerSpy = vi.spyOn(window, "addEventListener");
 
-    const { startPupilSoundtrack } = await import('@/app/audio/pupilSoundtrack')
+    const { startPupilSoundtrack } =
+      await import("@/app/audio/pupilSoundtrack");
 
-    await startPupilSoundtrack()
+    await startPupilSoundtrack();
 
-    expect(playMock).toHaveBeenCalledTimes(1)
+    expect(playMock).toHaveBeenCalledTimes(1);
     expect(addEventListenerSpy).toHaveBeenCalledWith(
-      'pointerdown',
+      "pointerdown",
       expect.any(Function),
       { once: true },
-    )
+    );
 
-    window.dispatchEvent(new Event('pointerdown'))
-    await Promise.resolve()
+    window.dispatchEvent(new Event("pointerdown"));
+    await Promise.resolve();
 
-    expect(playMock).toHaveBeenCalledTimes(2)
-  })
-})
+    expect(playMock).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/src/app/audio/celebrationSound.ts b/src/app/audio/celebrationSound.ts
index 9042e260..e134de35 100644
--- a/src/app/audio/celebrationSound.ts
+++ b/src/app/audio/celebrationSound.ts
@@ -1,36 +1,36 @@
-import confettiSound from '@/assets/music/confetti_sfx.mp3'
-import { getPupilSfxVolume } from '@/app/audio/pupilSfx'
+import confettiSound from "@/assets/music/confetti_sfx.mp3";
+import { getPupilSfxVolume } from "@/app/audio/pupilSfx";
 
-let celebrationSound: HTMLAudioElement | null = null
+let celebrationSound: HTMLAudioElement | null = null;
 
 function canUseAudio() {
-  return typeof Audio !== 'undefined'
+  return typeof Audio !== "undefined";
 }
 
 function getCelebrationSound() {
   if (!canUseAudio()) {
-    return null
+    return null;
   }
 
   if (!celebrationSound) {
-    celebrationSound = new Audio(confettiSound)
-    celebrationSound.preload = 'auto'
+    celebrationSound = new Audio(confettiSound);
+    celebrationSound.preload = "auto";
   }
 
-  return celebrationSound
+  return celebrationSound;
 }
 
 export async function playCelebrationSound() {
-  const audio = getCelebrationSound()
+  const audio = getCelebrationSound();
   if (!audio) {
-    return
+    return;
   }
 
-  audio.volume = getPupilSfxVolume() / 100
-  audio.currentTime = 0
+  audio.volume = getPupilSfxVolume() / 100;
+  audio.currentTime = 0;
 
   try {
-    await audio.play()
+    await audio.play();
   } catch {
     // Ignore autoplay restrictions so the celebration UI still completes.
   }
diff --git a/src/app/audio/pupilSfx.ts b/src/app/audio/pupilSfx.ts
index d00deabb..61c67907 100644
--- a/src/app/audio/pupilSfx.ts
+++ b/src/app/audio/pupilSfx.ts
@@ -1,46 +1,50 @@
-const PUPIL_SFX_VOLUME_STORAGE_KEY = 'nettdetektivene.pupil.sfx.volume'
-const DEFAULT_PUPIL_SFX_VOLUME = 60
+const PUPIL_SFX_VOLUME_STORAGE_KEY = "nettdetektivene.pupil.sfx.volume";
+const DEFAULT_PUPIL_SFX_VOLUME = 60;
 
-let sfxVolume = loadStoredSfxVolume()
+let sfxVolume = loadStoredSfxVolume();
 
 function canUseLocalStorage() {
-  return typeof window !== 'undefined' && typeof window.localStorage !== 'undefined'
+  return (
+    typeof window !== "undefined" && typeof window.localStorage !== "undefined"
+  );
 }
 
 function clampSfxVolume(value: number) {
   if (!Number.isFinite(value)) {
-    return DEFAULT_PUPIL_SFX_VOLUME
+    return DEFAULT_PUPIL_SFX_VOLUME;
   }
 
-  return Math.min(100, Math.max(0, Math.round(value)))
+  return Math.min(100, Math.max(0, Math.round(value)));
 }
 
 function loadStoredSfxVolume() {
   if (!canUseLocalStorage()) {
-    return DEFAULT_PUPIL_SFX_VOLUME
+    return DEFAULT_PUPIL_SFX_VOLUME;
   }
 
-  const storedVolume = window.localStorage.getItem(PUPIL_SFX_VOLUME_STORAGE_KEY)
+  const storedVolume = window.localStorage.getItem(
+    PUPIL_SFX_VOLUME_STORAGE_KEY,
+  );
   if (storedVolume === null) {
-    return DEFAULT_PUPIL_SFX_VOLUME
+    return DEFAULT_PUPIL_SFX_VOLUME;
   }
 
-  return clampSfxVolume(Number(storedVolume))
+  return clampSfxVolume(Number(storedVolume));
 }
 
 function persistSfxVolume() {
   if (!canUseLocalStorage()) {
-    return
+    return;
   }
 
-  window.localStorage.setItem(PUPIL_SFX_VOLUME_STORAGE_KEY, String(sfxVolume))
+  window.localStorage.setItem(PUPIL_SFX_VOLUME_STORAGE_KEY, String(sfxVolume));
 }
 
 export function getPupilSfxVolume() {
-  return sfxVolume
+  return sfxVolume;
 }
 
 export function setPupilSfxVolume(volume: number) {
-  sfxVolume = clampSfxVolume(volume)
-  persistSfxVolume()
+  sfxVolume = clampSfxVolume(volume);
+  persistSfxVolume();
 }
diff --git a/src/app/audio/pupilSoundtrack.ts b/src/app/audio/pupilSoundtrack.ts
index edbbfeed..e8677e2c 100644
--- a/src/app/audio/pupilSoundtrack.ts
+++ b/src/app/audio/pupilSoundtrack.ts
@@ -1,182 +1,202 @@
-import backgroundMusic from '@/assets/music/background_music.mp3'
+import backgroundMusic from "@/assets/music/background_music.mp3";
 
-const PUPIL_SOUNDTRACK_VOLUME_STORAGE_KEY = 'nettdetektivene.pupil.soundtrack.volume'
-const PUPIL_SOUNDTRACK_POSITION_STORAGE_KEY = 'nettdetektivene.pupil.soundtrack.position'
-const DEFAULT_PUPIL_SOUNDTRACK_VOLUME = 50
+const PUPIL_SOUNDTRACK_VOLUME_STORAGE_KEY =
+  "nettdetektivene.pupil.soundtrack.volume";
+const PUPIL_SOUNDTRACK_POSITION_STORAGE_KEY =
+  "nettdetektivene.pupil.soundtrack.position";
+const DEFAULT_PUPIL_SOUNDTRACK_VOLUME = 50;
 
-let soundtrack: HTMLAudioElement | null = null
-let soundtrackVolume = loadStoredSoundtrackVolume()
-let pageLifecycleRegistered = false
-let playbackUnlockRegistered = false
+let soundtrack: HTMLAudioElement | null = null;
+let soundtrackVolume = loadStoredSoundtrackVolume();
+let pageLifecycleRegistered = false;
+let playbackUnlockRegistered = false;
 
 function canUseAudio() {
-  return typeof Audio !== 'undefined'
+  return typeof Audio !== "undefined";
 }
 
 function canUseLocalStorage() {
-  return typeof window !== 'undefined' && typeof window.localStorage !== 'undefined'
+  return (
+    typeof window !== "undefined" && typeof window.localStorage !== "undefined"
+  );
 }
 
 function canUseSessionStorage() {
-  return typeof window !== 'undefined' && typeof window.sessionStorage !== 'undefined'
+  return (
+    typeof window !== "undefined" &&
+    typeof window.sessionStorage !== "undefined"
+  );
 }
 
 function clampSoundtrackVolume(value: number) {
   if (!Number.isFinite(value)) {
-    return DEFAULT_PUPIL_SOUNDTRACK_VOLUME
+    return DEFAULT_PUPIL_SOUNDTRACK_VOLUME;
   }
 
-  return Math.min(100, Math.max(0, Math.round(value)))
+  return Math.min(100, Math.max(0, Math.round(value)));
 }
 
 function loadStoredSoundtrackVolume() {
   if (!canUseLocalStorage()) {
-    return DEFAULT_PUPIL_SOUNDTRACK_VOLUME
+    return DEFAULT_PUPIL_SOUNDTRACK_VOLUME;
   }
 
-  const storedVolume = window.localStorage.getItem(PUPIL_SOUNDTRACK_VOLUME_STORAGE_KEY)
+  const storedVolume = window.localStorage.getItem(
+    PUPIL_SOUNDTRACK_VOLUME_STORAGE_KEY,
+  );
   if (storedVolume === null) {
-    return DEFAULT_PUPIL_SOUNDTRACK_VOLUME
+    return DEFAULT_PUPIL_SOUNDTRACK_VOLUME;
   }
 
-  return clampSoundtrackVolume(Number(storedVolume))
+  return clampSoundtrackVolume(Number(storedVolume));
 }
 
 function persistSoundtrackVolume() {
   if (!canUseLocalStorage()) {
-    return
+    return;
   }
 
-  window.localStorage.setItem(PUPIL_SOUNDTRACK_VOLUME_STORAGE_KEY, String(soundtrackVolume))
+  window.localStorage.setItem(
+    PUPIL_SOUNDTRACK_VOLUME_STORAGE_KEY,
+    String(soundtrackVolume),
+  );
 }
 
 function loadStoredSoundtrackPosition() {
   if (!canUseSessionStorage()) {
-    return 0
+    return 0;
   }
 
-  const storedPosition = window.sessionStorage.getItem(PUPIL_SOUNDTRACK_POSITION_STORAGE_KEY)
+  const storedPosition = window.sessionStorage.getItem(
+    PUPIL_SOUNDTRACK_POSITION_STORAGE_KEY,
+  );
   if (storedPosition === null) {
-    return 0
+    return 0;
   }
 
-  const parsedPosition = Number(storedPosition)
-  return Number.isFinite(parsedPosition) && parsedPosition >= 0 ? parsedPosition : 0
+  const parsedPosition = Number(storedPosition);
+  return Number.isFinite(parsedPosition) && parsedPosition >= 0
+    ? parsedPosition
+    : 0;
 }
 
 function persistSoundtrackPosition() {
   if (!canUseSessionStorage() || !soundtrack) {
-    return
+    return;
   }
 
   window.sessionStorage.setItem(
     PUPIL_SOUNDTRACK_POSITION_STORAGE_KEY,
     String(soundtrack.currentTime),
-  )
+  );
 }
 
 function clearStoredSoundtrackPosition() {
   if (!canUseSessionStorage()) {
-    return
+    return;
   }
 
-  window.sessionStorage.removeItem(PUPIL_SOUNDTRACK_POSITION_STORAGE_KEY)
+  window.sessionStorage.removeItem(PUPIL_SOUNDTRACK_POSITION_STORAGE_KEY);
 }
 
 function applySoundtrackVolume(audio: HTMLAudioElement) {
-  audio.volume = soundtrackVolume / 100
+  audio.volume = soundtrackVolume / 100;
 }
 
 function clearPlaybackUnlockListeners() {
-  if (!playbackUnlockRegistered || typeof window === 'undefined') {
-    return
+  if (!playbackUnlockRegistered || typeof window === "undefined") {
+    return;
   }
 
-  window.removeEventListener('pointerdown', retryPupilSoundtrackPlayback)
-  window.removeEventListener('keydown', retryPupilSoundtrackPlayback)
-  playbackUnlockRegistered = false
+  window.removeEventListener("pointerdown", retryPupilSoundtrackPlayback);
+  window.removeEventListener("keydown", retryPupilSoundtrackPlayback);
+  playbackUnlockRegistered = false;
 }
 
 function registerPlaybackUnlockListeners() {
-  if (playbackUnlockRegistered || typeof window === 'undefined') {
-    return
+  if (playbackUnlockRegistered || typeof window === "undefined") {
+    return;
   }
 
-  window.addEventListener('pointerdown', retryPupilSoundtrackPlayback, { once: true })
-  window.addEventListener('keydown', retryPupilSoundtrackPlayback, { once: true })
-  playbackUnlockRegistered = true
+  window.addEventListener("pointerdown", retryPupilSoundtrackPlayback, {
+    once: true,
+  });
+  window.addEventListener("keydown", retryPupilSoundtrackPlayback, {
+    once: true,
+  });
+  playbackUnlockRegistered = true;
 }
 
 function registerPageLifecyclePersistence() {
-  if (pageLifecycleRegistered || typeof window === 'undefined') {
-    return
+  if (pageLifecycleRegistered || typeof window === "undefined") {
+    return;
   }
 
   const persistPlaybackPosition = () => {
-    persistSoundtrackPosition()
-  }
+    persistSoundtrackPosition();
+  };
 
-  window.addEventListener('pagehide', persistPlaybackPosition)
-  pageLifecycleRegistered = true
+  window.addEventListener("pagehide", persistPlaybackPosition);
+  pageLifecycleRegistered = true;
 }
 
 function getSoundtrack() {
   if (!canUseAudio()) {
-    return null
+    return null;
   }
 
   if (!soundtrack) {
-    soundtrack = new Audio(backgroundMusic)
-    soundtrack.loop = true
-    soundtrack.preload = 'auto'
-    soundtrack.currentTime = loadStoredSoundtrackPosition()
-    soundtrack.addEventListener('timeupdate', persistSoundtrackPosition)
-    registerPageLifecyclePersistence()
+    soundtrack = new Audio(backgroundMusic);
+    soundtrack.loop = true;
+    soundtrack.preload = "auto";
+    soundtrack.currentTime = loadStoredSoundtrackPosition();
+    soundtrack.addEventListener("timeupdate", persistSoundtrackPosition);
+    registerPageLifecyclePersistence();
   }
 
-  applySoundtrackVolume(soundtrack)
-  return soundtrack
+  applySoundtrackVolume(soundtrack);
+  return soundtrack;
 }
 
 export function getPupilSoundtrackVolume() {
-  return soundtrackVolume
+  return soundtrackVolume;
 }
 
 export function setPupilSoundtrackVolume(volume: number) {
-  soundtrackVolume = clampSoundtrackVolume(volume)
-  persistSoundtrackVolume()
+  soundtrackVolume = clampSoundtrackVolume(volume);
+  persistSoundtrackVolume();
 
   if (soundtrack) {
-    applySoundtrackVolume(soundtrack)
+    applySoundtrackVolume(soundtrack);
   }
 }
 
 async function retryPupilSoundtrackPlayback() {
-  playbackUnlockRegistered = false
-  await startPupilSoundtrack()
+  playbackUnlockRegistered = false;
+  await startPupilSoundtrack();
 }
 
 export async function startPupilSoundtrack() {
-  const audio = getSoundtrack()
+  const audio = getSoundtrack();
   if (!audio) {
-    return
+    return;
   }
 
   try {
-    await audio.play()
-    clearPlaybackUnlockListeners()
+    await audio.play();
+    clearPlaybackUnlockListeners();
   } catch {
-    registerPlaybackUnlockListeners()
+    registerPlaybackUnlockListeners();
   }
 }
 
 export function stopPupilSoundtrack() {
   if (!soundtrack) {
-    return
+    return;
   }
 
-  clearPlaybackUnlockListeners()
-  soundtrack.pause()
-  soundtrack.currentTime = 0
-  clearStoredSoundtrackPosition()
+  clearPlaybackUnlockListeners();
+  soundtrack.pause();
+  soundtrack.currentTime = 0;
+  clearStoredSoundtrackPosition();
 }
diff --git a/src/app/i18n/index.ts b/src/app/i18n/index.ts
index b1bece76..358455bf 100644
--- a/src/app/i18n/index.ts
+++ b/src/app/i18n/index.ts
@@ -3,7 +3,7 @@ import { createI18n } from "vue-i18n";
 import { en } from "@/locales/en";
 import { nb } from "@/locales/nb";
 
-export const defaultLocale = 'nb'
+export const defaultLocale = "nb";
 
 export const supportedLocales = ["en", "nb"] as const;
 
@@ -40,7 +40,7 @@ function detectLocale(): AppLocale {
     return savedLocale;
   }
 
-  return defaultLocale
+  return defaultLocale;
 }
 
 export function createAppI18n() {
diff --git a/src/app/pages/NotFoundPage.vue b/src/app/pages/NotFoundPage.vue
index 3a79f226..db147abc 100644
--- a/src/app/pages/NotFoundPage.vue
+++ b/src/app/pages/NotFoundPage.vue
@@ -1,32 +1,39 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { resolveAuthenticatedLanding } from '@/app/router/auth-routing'
-import { useAuthStore } from '@/auth/model/auth.store'
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { resolveAuthenticatedLanding } from "@/app/router/auth-routing";
+import { useAuthStore } from "@/auth/model/auth.store";
 
-const { t } = useI18n()
-const authStore = useAuthStore()
+const { t } = useI18n();
+const authStore = useAuthStore();
 
 const actionTarget = computed(() =>
   authStore.isAuthenticated
     ? resolveAuthenticatedLanding({
         portalType: authStore.portalType,
-        hasCompletedOnboarding: authStore.user?.pupilProfile?.hasCompletedOnboarding,
+        hasCompletedOnboarding:
+          authStore.user?.pupilProfile?.hasCompletedOnboarding,
       })
-    : { name: 'root' },
-)
+    : { name: "root" },
+);
 
 const actionLabel = computed(() =>
-  authStore.isAuthenticated ? t('notFound.dashboardAction') : t('notFound.action'),
-)
+  authStore.isAuthenticated
+    ? t("notFound.dashboardAction")
+    : t("notFound.action"),
+);
 </script>
 
 <template>
   <main class="flex min-h-screen items-center justify-center px-6 py-16">
     <div class="text-center">
-      <p class="text-6xl font-medium text-slate-500">{{ t('notFound.label') }}</p>
-      <h1 class="mt-2 text-3xl font-semibold text-slate-900">{{ t('notFound.title') }}</h1>
-      <p class="mt-3 text-sm text-slate-600">{{ t('notFound.description') }}</p>
+      <p class="text-6xl font-medium text-slate-500">
+        {{ t("notFound.label") }}
+      </p>
+      <h1 class="mt-2 text-3xl font-semibold text-slate-900">
+        {{ t("notFound.title") }}
+      </h1>
+      <p class="mt-3 text-sm text-slate-600">{{ t("notFound.description") }}</p>
       <RouterLink
         :to="actionTarget"
         class="mt-6 inline-flex rounded border border-slate-300 px-4 py-2 text-sm text-slate-900"
diff --git a/src/app/router/__tests__/auth-routing.spec.ts b/src/app/router/__tests__/auth-routing.spec.ts
index d47b6fe7..2734136d 100644
--- a/src/app/router/__tests__/auth-routing.spec.ts
+++ b/src/app/router/__tests__/auth-routing.spec.ts
@@ -26,15 +26,16 @@ function authenticatedUser(
     email: portalType === "TEACHER" ? "teacher@example.com" : null,
     username: null,
     authorities: [],
-    pupilProfile: portalType === "PUPIL"
-      ? {
-          displayName: "Ada",
-          totalXp: 0,
-          currentLevel: 1,
-          currentClassroomId: null,
-          hasCompletedOnboarding: true,
-        }
-      : null,
+    pupilProfile:
+      portalType === "PUPIL"
+        ? {
+            displayName: "Ada",
+            totalXp: 0,
+            currentLevel: 1,
+            currentClassroomId: null,
+            hasCompletedOnboarding: true,
+          }
+        : null,
     teacherProfile: null,
     ...overrides,
   };
@@ -55,7 +56,9 @@ describe("authenticated routing", () => {
     await router.push("/pupil/map");
     await router.isReady();
 
-    expect(router.currentRoute.value.fullPath).toBe("/login?redirect=/pupil/map");
+    expect(router.currentRoute.value.fullPath).toBe(
+      "/login?redirect=/pupil/map",
+    );
   });
 
   it("allows anonymous users to access auth pages", async () => {
@@ -122,7 +125,9 @@ describe("authenticated routing", () => {
     await router.push("/teacher/classrooms/7/playtest");
     await router.isReady();
 
-    expect(router.currentRoute.value.fullPath).toBe("/teacher/classrooms/7/playtest");
+    expect(router.currentRoute.value.fullPath).toBe(
+      "/teacher/classrooms/7/playtest",
+    );
   });
 
   it("routes classroom notification URLs to the shared notifications page for teachers", async () => {
@@ -137,7 +142,9 @@ describe("authenticated routing", () => {
     await router.isReady();
 
     expect(router.currentRoute.value.name).toBe("classroom-notifications");
-    expect(router.currentRoute.value.fullPath).toBe("/teacher/classrooms/7/notifications");
+    expect(router.currentRoute.value.fullPath).toBe(
+      "/teacher/classrooms/7/notifications",
+    );
   });
 
   it("allows authenticated teachers to access pupil notebook routes", async () => {
@@ -152,7 +159,9 @@ describe("authenticated routing", () => {
     await router.isReady();
 
     expect(router.currentRoute.value.name).toBe("classroom-pupil-notebook");
-    expect(router.currentRoute.value.fullPath).toBe("/teacher/classrooms/7/pupils/15/notebook");
+    expect(router.currentRoute.value.fullPath).toBe(
+      "/teacher/classrooms/7/pupils/15/notebook",
+    );
   });
 
   it("redirects authenticated pupils away from teacher pupil notebook routes", async () => {
diff --git a/src/app/router/auth-routing.ts b/src/app/router/auth-routing.ts
index f5d408a8..6251747c 100644
--- a/src/app/router/auth-routing.ts
+++ b/src/app/router/auth-routing.ts
@@ -19,8 +19,7 @@ export interface AppEntryContext {
 
 function requiresOnboarding(context: AppEntryContext) {
   return (
-    context.portalType === "PUPIL" &&
-    context.hasCompletedOnboarding === false
+    context.portalType === "PUPIL" && context.hasCompletedOnboarding === false
   );
 }
 
diff --git a/src/app/router/index.ts b/src/app/router/index.ts
index 6bf328f3..dc4babbe 100644
--- a/src/app/router/index.ts
+++ b/src/app/router/index.ts
@@ -1,19 +1,19 @@
-import { type Pinia } from 'pinia'
-import { createRouter, createWebHistory, type RouterHistory } from 'vue-router'
-import RootLandingPage from '@/app/pages/RootLandingPage.vue'
-import NotFoundPage from '@/app/pages/NotFoundPage.vue'
-import { pinia } from '@/app/pinia'
-import PortalLayout from '@/app/layouts/PortalLayout.vue'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { authRoutes } from '@/auth/routes'
-import { createPupilPortalChildRoutes } from '@/pupil-portal/routes'
-import { createTeacherPortalChildRoutes } from '@/teacher-portal/routes'
+import { type Pinia } from "pinia";
+import { createRouter, createWebHistory, type RouterHistory } from "vue-router";
+import RootLandingPage from "@/app/pages/RootLandingPage.vue";
+import NotFoundPage from "@/app/pages/NotFoundPage.vue";
+import { pinia } from "@/app/pinia";
+import PortalLayout from "@/app/layouts/PortalLayout.vue";
+import { useAuthStore } from "@/auth/model/auth.store";
+import { authRoutes } from "@/auth/routes";
+import { createPupilPortalChildRoutes } from "@/pupil-portal/routes";
+import { createTeacherPortalChildRoutes } from "@/teacher-portal/routes";
 import {
   canAccessRoute,
   getRouteAccess,
   resolveAuthenticatedLanding,
   resolvePostLoginLocation,
-} from './auth-routing'
+} from "./auth-routing";
 
 export function createAppRouter(
   history: RouterHistory = createWebHistory(import.meta.env.BASE_URL),
@@ -23,74 +23,79 @@ export function createAppRouter(
     history,
     routes: [
       {
-        path: '/',
-        name: 'root',
+        path: "/",
+        name: "root",
         component: RootLandingPage,
         meta: {
-          access: 'public',
+          access: "public",
           hideBackButton: true,
         },
       },
       {
-        path: '/pupil',
+        path: "/pupil",
         component: PortalLayout,
         meta: {
-          access: 'pupil',
+          access: "pupil",
         },
         children: createPupilPortalChildRoutes(),
       },
       {
-        path: '/teacher',
+        path: "/teacher",
         component: PortalLayout,
         meta: {
-          access: 'teacher',
+          access: "teacher",
         },
         children: createTeacherPortalChildRoutes(),
       },
       ...authRoutes,
       {
-        path: '/:pathMatch(.*)*',
-        name: 'not-found',
+        path: "/:pathMatch(.*)*",
+        name: "not-found",
         component: NotFoundPage,
         meta: {
-          access: 'public',
+          access: "public",
         },
       },
     ],
-  })
+  });
 
   router.beforeEach(async (to) => {
-    const authStore = useAuthStore(authPinia)
-    const routeAccess = getRouteAccess(to)
+    const authStore = useAuthStore(authPinia);
+    const routeAccess = getRouteAccess(to);
 
-    if (authStore.status === 'idle' || authStore.status === 'restoring') {
-      await authStore.restoreSession()
+    if (authStore.status === "idle" || authStore.status === "restoring") {
+      await authStore.restoreSession();
     }
 
-    if (routeAccess !== null && routeAccess !== 'public' && !authStore.isAuthenticated) {
+    if (
+      routeAccess !== null &&
+      routeAccess !== "public" &&
+      !authStore.isAuthenticated
+    ) {
       return {
-        name: 'login',
+        name: "login",
         query: {
           redirect: to.fullPath,
         },
-      }
+      };
     }
 
     if (!authStore.isAuthenticated) {
-      return true
+      return true;
     }
 
-    const hasCompletedOnboarding = authStore.user?.pupilProfile?.hasCompletedOnboarding
-    const classroomId = authStore.user?.pupilProfile?.currentClassroomId
-    const hasClassroom = classroomId !== null && classroomId !== undefined
+    const hasCompletedOnboarding =
+      authStore.user?.pupilProfile?.hasCompletedOnboarding;
+    const classroomId = authStore.user?.pupilProfile?.currentClassroomId;
+    const hasClassroom = classroomId !== null && classroomId !== undefined;
 
-    const isGuestOnly = to.matched.some((record) => record.meta.guestOnly)
-    if (routeAccess === 'public' && isGuestOnly) {
+    const isGuestOnly = to.matched.some((record) => record.meta.guestOnly);
+    if (routeAccess === "public" && isGuestOnly) {
       return resolvePostLoginLocation(router, to.query.redirect, {
         portalType: authStore.portalType,
         hasCompletedOnboarding,
         hasClassroom,
-      })
+      });
     }
 
     if (!canAccessRoute(to, authStore.portalType)) {
@@ -98,31 +103,31 @@ export function createAppRouter(
         portalType: authStore.portalType,
         hasCompletedOnboarding,
         hasClassroom,
-      })
+      });
     }
 
     if (
-      authStore.portalType === 'PUPIL' &&
+      authStore.portalType === "PUPIL" &&
       !hasClassroom &&
-      to.name !== 'pupil-join-classroom'
+      to.name !== "pupil-join-classroom"
     ) {
-      return { name: 'pupil-join-classroom' }
+      return { name: "pupil-join-classroom" };
     }
 
     if (
-      authStore.portalType === 'PUPIL' &&
+      authStore.portalType === "PUPIL" &&
       hasCompletedOnboarding === true &&
-      to.name === 'pupil-onboarding'
+      to.name === "pupil-onboarding"
     ) {
       return resolveAuthenticatedLanding({
         portalType: authStore.portalType,
         hasCompletedOnboarding,
         hasClassroom,
-      })
+      });
     }
 
     if (
-      authStore.portalType === 'PUPIL' &&
+      authStore.portalType === "PUPIL" &&
       hasCompletedOnboarding === false &&
       hasClassroom &&
       !to.matched.some((record) => record.meta.allowIncompleteOnboarding)
@@ -131,34 +136,34 @@ export function createAppRouter(
         portalType: authStore.portalType,
         hasCompletedOnboarding,
         hasClassroom,
-      })
+      });
     }
 
     if (
       authStore.isAuthenticated &&
-      authStore.portalType === 'PUPIL' &&
+      authStore.portalType === "PUPIL" &&
       hasCompletedOnboarding !== false
     ) {
-      const user = authStore.user
-      if (!user) return true
+      const user = authStore.user;
+      if (!user) return true;
 
-      const isJoinPage = to.name === 'pupil-join-classroom'
+      const isJoinPage = to.name === "pupil-join-classroom";
 
       if (!hasClassroom && !isJoinPage) {
-        return { name: 'pupil-join-classroom' }
+        return { name: "pupil-join-classroom" };
       }
 
       if (hasClassroom && isJoinPage) {
-        return { name: 'pupil-home' }
+        return { name: "pupil-home" };
       }
     }
 
-    return true
-  })
+    return true;
+  });
 
-  return router
+  return router;
 }
 
-const router = createAppRouter()
+const router = createAppRouter();
 
-export default router
+export default router;
diff --git a/src/app/router/route-meta.d.ts b/src/app/router/route-meta.d.ts
index 4427af7e..9d9d22ab 100644
--- a/src/app/router/route-meta.d.ts
+++ b/src/app/router/route-meta.d.ts
@@ -1,14 +1,19 @@
 import "vue-router";
-import type { RouteLocationNormalizedLoaded, RouteLocationRaw } from "vue-router";
+import type {
+  RouteLocationNormalizedLoaded,
+  RouteLocationRaw,
+} from "vue-router";
 import type { RouteAccess } from "./route-access";
 
 declare module "vue-router" {
   interface RouteMeta {
-    access?: RouteAccess
-    guestOnly?: boolean
-    hideBackButton?: boolean
-    hideHomeButton?: boolean
-    allowIncompleteOnboarding?: boolean
-    backTarget?: RouteLocationRaw | ((route: RouteLocationNormalizedLoaded) => RouteLocationRaw)
+    access?: RouteAccess;
+    guestOnly?: boolean;
+    hideBackButton?: boolean;
+    hideHomeButton?: boolean;
+    allowIncompleteOnboarding?: boolean;
+    backTarget?:
+      | RouteLocationRaw
+      | ((route: RouteLocationNormalizedLoaded) => RouteLocationRaw);
   }
 }
diff --git a/src/app/styles/main.css b/src/app/styles/main.css
index 4a0135c3..ac91faec 100644
--- a/src/app/styles/main.css
+++ b/src/app/styles/main.css
@@ -10,59 +10,54 @@ We could add more later*/
   /* More colors needed */
 
   /* Beige ~ ish, used for page background*/
-  --color-bg: #E2D49F;
+  --color-bg: #e2d49f;
   /* Card/panel background, sits on top of beige*/
-  --color-bg-card: #FFFFFF;
+  --color-bg-card: #ffffff;
   /* Pale blue-grey, locked tiles, diabled states*/
   --color-bg-dark: #d6dae3;
   /* Used for dimming things */
   --color-bg-overlay: rgba(54, 74, 112, 0.85);
 
-
   /* Main brand color, used for buttons, active state, key highligts */
   --color-primary: #b08018;
   /* Can be used for headers idk yet */
-  --color-primary-dark: #1A4A7A;
+  --color-primary-dark: #1a4a7a;
   /* hovers*/
-  --color-primary-light: #C8DFF5;
+  --color-primary-light: #c8dff5;
 
   /* buttons or pins */
-  --color-secondary: #F5A623;
-  --color-secondary-dark: #C47D0E;
-  --color-secondary-light: #FDE8B8;
+  --color-secondary: #f5a623;
+  --color-secondary-dark: #c47d0e;
+  --color-secondary-light: #fde8b8;
 
-  --color-accent: #F5A623;
-  --color-accent-dark: #C47D0E;
-  --color-accent-light: #FDE8B8;
+  --color-accent: #f5a623;
+  --color-accent-dark: #c47d0e;
+  --color-accent-light: #fde8b8;
 
   /* -----------------------------------------*/
 
   /* Delete or logout, wrong answer, aka DANGER duh*/
   --color-danger: #b93021;
   /* Completed stops, correct answers */
-  --color-success: #27AE60;
+  --color-success: #27ae60;
   /* unavailable things */
   --color-locked: #7d8c8d;
 
-
-
   --color-text: #1f3f60;
-  --color-text-heading: #0A1628;
+  --color-text-heading: #0a1628;
   --color-text-body: #1f3f60;
-  --color-text-muted: #7F8C8D;
-  --color-text-on-dark: #FFFFFF;
-  --color-text-on-accent: #4A2D00;
+  --color-text-muted: #7f8c8d;
+  --color-text-on-dark: #ffffff;
+  --color-text-on-accent: #4a2d00;
 
-  --color-surface: #FFFFFF;
-  --color-muted: #7F8C8D;
+  --color-surface: #ffffff;
+  --color-muted: #7f8c8d;
 
   /* Fronts*/
-  --font-display: 'Bubblegum Sans', cursive;
-  --font-display-2: 'Fredoka One', cursive;
+  --font-display: "Bubblegum Sans", cursive;
+  --font-display-2: "Fredoka One", cursive;
   /* Thinking of changing this.. */
-  --font-body: 'Nunito', sans-serif;
-
-
+  --font-body: "Nunito", sans-serif;
 
   /* Radius */
 
@@ -77,7 +72,6 @@ We could add more later*/
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
 
-
   /* Spacing */
   --space-xs: 0.25rem;
   --space-sm: 0.5rem;
@@ -122,7 +116,9 @@ p {
 
 /* Layout */
 @layer base {
-  button, select, a {
+  button,
+  select,
+  a {
     cursor: pointer;
   }
 }
diff --git a/src/assets/medals/README.md b/src/assets/medals/README.md
index 5bbffe09..7c64155b 100644
--- a/src/assets/medals/README.md
+++ b/src/assets/medals/README.md
@@ -10,4 +10,3 @@ Suggested convention:
 The medals page already has a single asset resolver in
 `src/medals/model/medalAssets.ts`, so adding a new icon later should only
 require updating that file or wiring the backend `iconUrl` field.
-
diff --git a/src/auth/api/auth.api.ts b/src/auth/api/auth.api.ts
index 89411fae..b53a8d33 100644
--- a/src/auth/api/auth.api.ts
+++ b/src/auth/api/auth.api.ts
@@ -8,11 +8,14 @@ import type {
   TeacherLoginCredentials,
   TeacherRegistrationCredentials,
 } from "@/auth/model/auth.types";
-import { readJsonErrorMessage } from '@/shared/api/response-errors'
+import { readJsonErrorMessage } from "@/shared/api/response-errors";
 
-const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
-const AUTH_API_BASE = `${API_BASE_URL}/api/v1/auth`
-const USERS_API_BASE = `${API_BASE_URL}/api/v1/users`
+const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? "").replace(
+  /\/$/,
+  "",
+);
+const AUTH_API_BASE = `${API_BASE_URL}/api/v1/auth`;
+const USERS_API_BASE = `${API_BASE_URL}/api/v1/users`;
 
 export const portalEndpointByType: Record<PortalType, "teacher" | "pupil"> = {
   TEACHER: "teacher",
@@ -25,10 +28,10 @@ async function getResponseErrorMessage(response: Response) {
       ? "Invalid login credentials or expired session."
       : `Authentication request failed with status ${response.status}.`;
 
-  const errorMessage = await readJsonErrorMessage(response)
+  const errorMessage = await readJsonErrorMessage(response);
 
   if (errorMessage) {
-    return errorMessage
+    return errorMessage;
   }
 
   const text = await response.text().catch(() => "");
@@ -189,13 +192,16 @@ export function requestLogout(
   csrfToken: CsrfTokenResponse,
   authorizationHeader?: string | null,
 ) {
-  return fetchAuthJson<void>(`/${portalEndpointByType[targetPortalType]}/logout`, {
-    method: "POST",
-    headers: {
-      [csrfToken.headerName]: csrfToken.token,
-      ...(authorizationHeader ? {Authorization: authorizationHeader} : {}),
+  return fetchAuthJson<void>(
+    `/${portalEndpointByType[targetPortalType]}/logout`,
+    {
+      method: "POST",
+      headers: {
+        [csrfToken.headerName]: csrfToken.token,
+        ...(authorizationHeader ? { Authorization: authorizationHeader } : {}),
+      },
     },
-  });
+  );
 }
 
 export function requestPasswordChange(
diff --git a/src/auth/components/AuthPortalShell.vue b/src/auth/components/AuthPortalShell.vue
index cca415b3..ae7c4aa7 100644
--- a/src/auth/components/AuthPortalShell.vue
+++ b/src/auth/components/AuthPortalShell.vue
@@ -1,27 +1,33 @@
 <script setup lang="ts">
-
-withDefaults(defineProps<{
-  title: string
-  subtitle?: string | null
-  cardClass?: string
-}>(), {
-  subtitle: null,
-  cardClass: 'max-w-[28rem]',
-})
+withDefaults(
+  defineProps<{
+    title: string;
+    subtitle?: string | null;
+    cardClass?: string;
+  }>(),
+  {
+    subtitle: null,
+    cardClass: "max-w-[28rem]",
+  },
+);
 </script>
 
 <template>
   <section class="relative min-h-screen overflow-hidden bg-(--color-bg)">
     <div class="pointer-events-none absolute inset-0"></div>
 
-    <div class="relative mx-auto flex min-h-screen max-w-6xl items-center justify-center px-4 py-20 sm:px-6">
+    <div
+      class="relative mx-auto flex min-h-screen max-w-6xl items-center justify-center px-4 py-20 sm:px-6"
+    >
       <div
         :class="[
           'w-full rounded-xl border border-(--color-accent-dark) bg-(--color-surface)/95 px-7 py-8 shadow-(--shadow-md) backdrop-blur-sm sm:px-9 sm:py-10',
           cardClass,
         ]"
       >
-        <h1 class="font-(--font-display-2) text-4xl text-(--color-text-heading) sm:text-[2.6rem]">
+        <h1
+          class="font-(--font-display-2) text-4xl text-(--color-text-heading) sm:text-[2.6rem]"
+        >
           {{ title }}
         </h1>
         <p
diff --git a/src/auth/model/__tests__/auth.store.spec.ts b/src/auth/model/__tests__/auth.store.spec.ts
index ce8195e6..d3a6948e 100644
--- a/src/auth/model/__tests__/auth.store.spec.ts
+++ b/src/auth/model/__tests__/auth.store.spec.ts
@@ -1,6 +1,6 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createPinia, setActivePinia } from 'pinia'
-import { useAuthStore } from '@/auth/model/auth.store'
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+import { useAuthStore } from "@/auth/model/auth.store";
 
 const AUTH_SESSION_STORAGE_KEY = "nettdetektivene.auth.session";
 
@@ -16,7 +16,7 @@ function jsonResponse(body: unknown, init: ResponseInit = {}) {
 
 describe("useAuthStore", () => {
   beforeEach(() => {
-    vi.useRealTimers()
+    vi.useRealTimers();
     setActivePinia(createPinia());
     window.sessionStorage.clear();
     vi.restoreAllMocks();
@@ -56,16 +56,16 @@ describe("useAuthStore", () => {
       .mockResolvedValueOnce(
         jsonResponse({
           userId: 1,
-          role: 'TEACHER',
-          email: 'teacher@example.com',
+          role: "TEACHER",
+          email: "teacher@example.com",
           username: null,
           pupilProfile: null,
           teacherProfile: {
-            teacherName: 'Teacher One',
-            schoolName: 'Example School',
+            teacherName: "Teacher One",
+            schoolName: "Example School",
           },
         }),
-      )
+      );
 
     vi.stubGlobal("fetch", fetchMock);
 
@@ -92,16 +92,18 @@ describe("useAuthStore", () => {
     expect(loginOptions.credentials).toBe("include");
 
     expect(
-      JSON.parse(window.sessionStorage.getItem(AUTH_SESSION_STORAGE_KEY) ?? '{}'),
+      JSON.parse(
+        window.sessionStorage.getItem(AUTH_SESSION_STORAGE_KEY) ?? "{}",
+      ),
     ).toMatchObject({
-      accessToken: 'access-token',
-      portalType: 'TEACHER',
+      accessToken: "access-token",
+      portalType: "TEACHER",
       user: {
-        subject: 'teacher-1',
-        email: 'teacher@example.com',
+        subject: "teacher-1",
+        email: "teacher@example.com",
       },
-    })
-  })
+    });
+  });
 
   it("restores the session by refreshing an expired cached token", async () => {
     window.sessionStorage.setItem(
@@ -158,321 +160,324 @@ describe("useAuthStore", () => {
     const authStore = useAuthStore();
     const restored = await authStore.restoreSession();
 
-    expect(restored).toBe(true)
-    expect(authStore.isAuthenticated).toBe(true)
-    expect(authStore.portalType).toBe('PUPIL')
-    expect(authStore.user?.authorities).toEqual(['PORTAL_PUPIL', 'ROLE_STUDENT'])
-    expect(fetchMock.mock.calls[1]?.[0]).toBe('/api/v1/auth/pupil/refresh')
-  })
+    expect(restored).toBe(true);
+    expect(authStore.isAuthenticated).toBe(true);
+    expect(authStore.portalType).toBe("PUPIL");
+    expect(authStore.user?.authorities).toEqual([
+      "PORTAL_PUPIL",
+      "ROLE_STUDENT",
+    ]);
+    expect(fetchMock.mock.calls[1]?.[0]).toBe("/api/v1/auth/pupil/refresh");
+  });
 
-  it('refreshes the access token before it expires during an active session', async () => {
-    vi.useFakeTimers()
-    vi.setSystemTime(new Date('2026-01-01T12:00:00.000Z'))
+  it("refreshes the access token before it expires during an active session", async () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-01-01T12:00:00.000Z"));
 
     const fetchMock = vi
       .fn()
       .mockResolvedValueOnce(
         jsonResponse({
-          headerName: 'X-XSRF-TOKEN',
-          parameterName: '_csrf',
-          token: 'csrf-token',
+          headerName: "X-XSRF-TOKEN",
+          parameterName: "_csrf",
+          token: "csrf-token",
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
-          accessToken: 'initial-access-token',
-          tokenType: 'Bearer',
+          accessToken: "initial-access-token",
+          tokenType: "Bearer",
           expiresInSeconds: 60,
           refreshHandledViaCookie: true,
-          portalType: 'PUPIL',
+          portalType: "PUPIL",
           user: {
-            subject: 'pupil-1',
+            subject: "pupil-1",
             email: null,
           },
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
-          subject: 'pupil-1',
-          portalType: 'PUPIL',
+          subject: "pupil-1",
+          portalType: "PUPIL",
           email: null,
-          authorities: ['PORTAL_PUPIL', 'ROLE_STUDENT'],
+          authorities: ["PORTAL_PUPIL", "ROLE_STUDENT"],
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
           userId: 1,
-          role: 'STUDENT',
+          role: "STUDENT",
           email: null,
-          username: 'pupil-1',
+          username: "pupil-1",
           pupilProfile: null,
           teacherProfile: null,
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
-          accessToken: 'refreshed-access-token',
-          tokenType: 'Bearer',
+          accessToken: "refreshed-access-token",
+          tokenType: "Bearer",
           expiresInSeconds: 60,
           refreshHandledViaCookie: true,
-          portalType: 'PUPIL',
+          portalType: "PUPIL",
           user: {
-            subject: 'pupil-1',
+            subject: "pupil-1",
             email: null,
           },
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
-          subject: 'pupil-1',
-          portalType: 'PUPIL',
+          subject: "pupil-1",
+          portalType: "PUPIL",
           email: null,
-          authorities: ['PORTAL_PUPIL', 'ROLE_STUDENT'],
+          authorities: ["PORTAL_PUPIL", "ROLE_STUDENT"],
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
           userId: 1,
-          role: 'STUDENT',
+          role: "STUDENT",
           email: null,
-          username: 'pupil-1',
+          username: "pupil-1",
           pupilProfile: null,
           teacherProfile: null,
         }),
-      )
+      );
 
-    vi.stubGlobal('fetch', fetchMock)
+    vi.stubGlobal("fetch", fetchMock);
 
-    const authStore = useAuthStore()
+    const authStore = useAuthStore();
     await authStore.loginPupil({
-      username: 'pupil-1',
-      password: 'secret123',
-    })
+      username: "pupil-1",
+      password: "secret123",
+    });
 
-    expect(authStore.accessToken).toBe('initial-access-token')
+    expect(authStore.accessToken).toBe("initial-access-token");
 
-    await vi.advanceTimersByTimeAsync(30_000)
+    await vi.advanceTimersByTimeAsync(30_000);
 
-    expect(fetchMock.mock.calls[4]?.[0]).toBe('/api/v1/auth/pupil/refresh')
-    expect(authStore.accessToken).toBe('refreshed-access-token')
-    expect(authStore.authorizationHeader).toBe('Bearer refreshed-access-token')
-    expect(authStore.status).toBe('authenticated')
-  })
+    expect(fetchMock.mock.calls[4]?.[0]).toBe("/api/v1/auth/pupil/refresh");
+    expect(authStore.accessToken).toBe("refreshed-access-token");
+    expect(authStore.authorizationHeader).toBe("Bearer refreshed-access-token");
+    expect(authStore.status).toBe("authenticated");
+  });
 
-  it('fetches a fresh CSRF token and retries when active-session refresh fails', async () => {
-    vi.useFakeTimers()
-    vi.setSystemTime(new Date('2026-01-01T12:00:00.000Z'))
+  it("fetches a fresh CSRF token and retries when active-session refresh fails", async () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-01-01T12:00:00.000Z"));
 
     const fetchMock = vi
       .fn()
       .mockResolvedValueOnce(
         jsonResponse({
-          headerName: 'X-XSRF-TOKEN',
-          parameterName: '_csrf',
-          token: 'initial-csrf-token',
+          headerName: "X-XSRF-TOKEN",
+          parameterName: "_csrf",
+          token: "initial-csrf-token",
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
-          accessToken: 'initial-access-token',
-          tokenType: 'Bearer',
+          accessToken: "initial-access-token",
+          tokenType: "Bearer",
           expiresInSeconds: 60,
           refreshHandledViaCookie: true,
-          portalType: 'PUPIL',
+          portalType: "PUPIL",
           user: {
-            subject: 'pupil-1',
+            subject: "pupil-1",
             email: null,
           },
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
-          subject: 'pupil-1',
-          portalType: 'PUPIL',
+          subject: "pupil-1",
+          portalType: "PUPIL",
           email: null,
-          authorities: ['PORTAL_PUPIL', 'ROLE_STUDENT'],
+          authorities: ["PORTAL_PUPIL", "ROLE_STUDENT"],
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
           userId: 1,
-          role: 'STUDENT',
+          role: "STUDENT",
           email: null,
-          username: 'pupil-1',
+          username: "pupil-1",
           pupilProfile: null,
           teacherProfile: null,
         }),
       )
       .mockResolvedValueOnce(
-        jsonResponse({ message: 'Forbidden' }, { status: 403 }),
+        jsonResponse({ message: "Forbidden" }, { status: 403 }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
-          headerName: 'X-XSRF-TOKEN',
-          parameterName: '_csrf',
-          token: 'fresh-csrf-token',
+          headerName: "X-XSRF-TOKEN",
+          parameterName: "_csrf",
+          token: "fresh-csrf-token",
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
-          accessToken: 'refreshed-access-token',
-          tokenType: 'Bearer',
+          accessToken: "refreshed-access-token",
+          tokenType: "Bearer",
           expiresInSeconds: 60,
           refreshHandledViaCookie: true,
-          portalType: 'PUPIL',
+          portalType: "PUPIL",
           user: {
-            subject: 'pupil-1',
+            subject: "pupil-1",
             email: null,
           },
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
-          subject: 'pupil-1',
-          portalType: 'PUPIL',
+          subject: "pupil-1",
+          portalType: "PUPIL",
           email: null,
-          authorities: ['PORTAL_PUPIL', 'ROLE_STUDENT'],
+          authorities: ["PORTAL_PUPIL", "ROLE_STUDENT"],
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
           userId: 1,
-          role: 'STUDENT',
+          role: "STUDENT",
           email: null,
-          username: 'pupil-1',
+          username: "pupil-1",
           pupilProfile: null,
           teacherProfile: null,
         }),
-      )
+      );
 
-    vi.stubGlobal('fetch', fetchMock)
+    vi.stubGlobal("fetch", fetchMock);
 
-    const authStore = useAuthStore()
+    const authStore = useAuthStore();
     await authStore.loginPupil({
-      username: 'pupil-1',
-      password: 'secret123',
-    })
+      username: "pupil-1",
+      password: "secret123",
+    });
 
-    await vi.advanceTimersByTimeAsync(30_000)
+    await vi.advanceTimersByTimeAsync(30_000);
 
-    expect(fetchMock.mock.calls[4]?.[0]).toBe('/api/v1/auth/pupil/refresh')
-    expect(fetchMock.mock.calls[5]?.[0]).toBe('/api/v1/auth/csrf')
-    expect(fetchMock.mock.calls[6]?.[0]).toBe('/api/v1/auth/pupil/refresh')
+    expect(fetchMock.mock.calls[4]?.[0]).toBe("/api/v1/auth/pupil/refresh");
+    expect(fetchMock.mock.calls[5]?.[0]).toBe("/api/v1/auth/csrf");
+    expect(fetchMock.mock.calls[6]?.[0]).toBe("/api/v1/auth/pupil/refresh");
 
-    const retryOptions = fetchMock.mock.calls[6]?.[1] as RequestInit
-    expect(new Headers(retryOptions.headers).get('X-XSRF-TOKEN')).toBe(
-      'fresh-csrf-token',
-    )
-    expect(authStore.accessToken).toBe('refreshed-access-token')
-    expect(authStore.isAuthenticated).toBe(true)
-  })
+    const retryOptions = fetchMock.mock.calls[6]?.[1] as RequestInit;
+    expect(new Headers(retryOptions.headers).get("X-XSRF-TOKEN")).toBe(
+      "fresh-csrf-token",
+    );
+    expect(authStore.accessToken).toBe("refreshed-access-token");
+    expect(authStore.isAuthenticated).toBe(true);
+  });
 
-  it('sends the bearer token when logging out and clears the stored session', async () => {
+  it("sends the bearer token when logging out and clears the stored session", async () => {
     const fetchMock = vi
       .fn()
       .mockResolvedValueOnce(
         jsonResponse({
-          headerName: 'X-XSRF-TOKEN',
-          parameterName: '_csrf',
-          token: 'csrf-token',
+          headerName: "X-XSRF-TOKEN",
+          parameterName: "_csrf",
+          token: "csrf-token",
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
-          accessToken: 'access-token',
-          tokenType: 'Bearer',
+          accessToken: "access-token",
+          tokenType: "Bearer",
           expiresInSeconds: 300,
           refreshHandledViaCookie: true,
-          portalType: 'PUPIL',
+          portalType: "PUPIL",
           user: {
-            subject: 'pupil-1',
+            subject: "pupil-1",
             email: null,
           },
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
-          subject: 'pupil-1',
-          portalType: 'PUPIL',
+          subject: "pupil-1",
+          portalType: "PUPIL",
           email: null,
-          authorities: ['PORTAL_PUPIL', 'ROLE_STUDENT'],
+          authorities: ["PORTAL_PUPIL", "ROLE_STUDENT"],
         }),
       )
-      .mockResolvedValueOnce(new Response(null, { status: 204 }))
+      .mockResolvedValueOnce(new Response(null, { status: 204 }));
 
-    vi.stubGlobal('fetch', fetchMock)
+    vi.stubGlobal("fetch", fetchMock);
 
-    const authStore = useAuthStore()
+    const authStore = useAuthStore();
     await authStore.loginPupil({
-      username: 'pupil-1',
-      password: 'secret123',
-    })
-    await authStore.logout()
-
-    const logoutCall = fetchMock.mock.calls[fetchMock.mock.calls.length - 1]
-    expect(logoutCall?.[0]).toBe('/api/v1/auth/pupil/logout')
-
-    const logoutOptions = logoutCall?.[1] as RequestInit
-    const headers = new Headers(logoutOptions.headers)
-    expect(headers.get('X-XSRF-TOKEN')).toBe('csrf-token')
-    expect(headers.get('Authorization')).toBe('Bearer access-token')
-    expect(window.sessionStorage.getItem(AUTH_SESSION_STORAGE_KEY)).toBeNull()
-    expect(authStore.isAuthenticated).toBe(false)
-    expect(authStore.status).toBe('anonymous')
-  })
-
-  it('clears the local session even when logout returns forbidden', async () => {
+      username: "pupil-1",
+      password: "secret123",
+    });
+    await authStore.logout();
+
+    const logoutCall = fetchMock.mock.calls[fetchMock.mock.calls.length - 1];
+    expect(logoutCall?.[0]).toBe("/api/v1/auth/pupil/logout");
+
+    const logoutOptions = logoutCall?.[1] as RequestInit;
+    const headers = new Headers(logoutOptions.headers);
+    expect(headers.get("X-XSRF-TOKEN")).toBe("csrf-token");
+    expect(headers.get("Authorization")).toBe("Bearer access-token");
+    expect(window.sessionStorage.getItem(AUTH_SESSION_STORAGE_KEY)).toBeNull();
+    expect(authStore.isAuthenticated).toBe(false);
+    expect(authStore.status).toBe("anonymous");
+  });
+
+  it("clears the local session even when logout returns forbidden", async () => {
     const fetchMock = vi
       .fn()
       .mockResolvedValueOnce(
         jsonResponse({
-          headerName: 'X-XSRF-TOKEN',
-          parameterName: '_csrf',
-          token: 'csrf-token',
+          headerName: "X-XSRF-TOKEN",
+          parameterName: "_csrf",
+          token: "csrf-token",
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
-          accessToken: 'access-token',
-          tokenType: 'Bearer',
+          accessToken: "access-token",
+          tokenType: "Bearer",
           expiresInSeconds: 300,
           refreshHandledViaCookie: true,
-          portalType: 'PUPIL',
+          portalType: "PUPIL",
           user: {
-            subject: 'pupil-1',
+            subject: "pupil-1",
             email: null,
           },
         }),
       )
       .mockResolvedValueOnce(
         jsonResponse({
-          subject: 'pupil-1',
-          portalType: 'PUPIL',
+          subject: "pupil-1",
+          portalType: "PUPIL",
           email: null,
-          authorities: ['PORTAL_PUPIL', 'ROLE_STUDENT'],
+          authorities: ["PORTAL_PUPIL", "ROLE_STUDENT"],
         }),
       )
       .mockResolvedValueOnce(
-        new Response(JSON.stringify({ message: 'Forbidden' }), {
+        new Response(JSON.stringify({ message: "Forbidden" }), {
           status: 403,
           headers: {
-            'Content-Type': 'application/json',
+            "Content-Type": "application/json",
           },
         }),
-      )
+      );
 
-    vi.stubGlobal('fetch', fetchMock)
+    vi.stubGlobal("fetch", fetchMock);
 
-    const authStore = useAuthStore()
+    const authStore = useAuthStore();
     await authStore.loginPupil({
-      username: 'pupil-1',
-      password: 'secret123',
-    })
-
-    await expect(authStore.logout()).resolves.toBeUndefined()
-    expect(window.sessionStorage.getItem(AUTH_SESSION_STORAGE_KEY)).toBeNull()
-    expect(authStore.accessToken).toBeNull()
-    expect(authStore.user).toBeNull()
-    expect(authStore.status).toBe('anonymous')
-  })
-})
+      username: "pupil-1",
+      password: "secret123",
+    });
+
+    await expect(authStore.logout()).resolves.toBeUndefined();
+    expect(window.sessionStorage.getItem(AUTH_SESSION_STORAGE_KEY)).toBeNull();
+    expect(authStore.accessToken).toBeNull();
+    expect(authStore.user).toBeNull();
+    expect(authStore.status).toBe("anonymous");
+  });
+});
diff --git a/src/auth/model/auth.store.ts b/src/auth/model/auth.store.ts
index 5a25880d..1acfa241 100644
--- a/src/auth/model/auth.store.ts
+++ b/src/auth/model/auth.store.ts
@@ -113,7 +113,10 @@ export const useAuthStore = defineStore("auth", () => {
   }
 
   function registerSessionActivityListeners() {
-    if (typeof window === "undefined" || hasRegisteredSessionActivityListeners) {
+    if (
+      typeof window === "undefined" ||
+      hasRegisteredSessionActivityListeners
+    ) {
       return;
     }
 
@@ -214,10 +217,12 @@ export const useAuthStore = defineStore("auth", () => {
         return false;
       }
 
-      accessToken.value = snapshot.accessToken
-      accessTokenExpiresAt.value = snapshot.accessTokenExpiresAt
-      user.value = snapshot.user ? { ...snapshot.user, portalType: snapshot.portalType } : null
-      return true
+      accessToken.value = snapshot.accessToken;
+      accessTokenExpiresAt.value = snapshot.accessTokenExpiresAt;
+      user.value = snapshot.user
+        ? { ...snapshot.user, portalType: snapshot.portalType }
+        : null;
+      return true;
     } catch {
       clearPersistedSession();
       return false;
@@ -287,12 +292,12 @@ export const useAuthStore = defineStore("auth", () => {
   }
 
   function applyCurrentUserProfile(response: CurrentUserProfileResponse) {
-    setCurrentUserProfile(response)
+    setCurrentUserProfile(response);
   }
 
   function updatePupilDisplayName(displayName: string) {
     if (!user.value?.pupilProfile) {
-      return
+      return;
     }
 
     user.value = {
@@ -301,14 +306,14 @@ export const useAuthStore = defineStore("auth", () => {
         ...user.value.pupilProfile,
         displayName,
       },
-    }
+    };
 
-    persistSession()
+    persistSession();
   }
 
   function markOnboardingCompleted() {
     if (!user.value?.pupilProfile) {
-      return
+      return;
     }
 
     user.value = {
@@ -317,9 +322,9 @@ export const useAuthStore = defineStore("auth", () => {
         ...user.value.pupilProfile,
         hasCompletedOnboarding: true,
       },
-    }
+    };
 
-    persistSession()
+    persistSession();
   }
 
   function clearLocalSession() {
@@ -355,7 +360,10 @@ export const useAuthStore = defineStore("auth", () => {
     targetPortalType: PortalType,
   ) {
     try {
-      return await requestPortalRefresh(targetPortalType, await ensureCsrfToken());
+      return await requestPortalRefresh(
+        targetPortalType,
+        await ensureCsrfToken(),
+      );
     } catch (error) {
       csrfToken.value = null;
 
@@ -549,11 +557,15 @@ export const useAuthStore = defineStore("auth", () => {
 
     try {
       if (activePortalType) {
-        await requestLogout(activePortalType, await ensureCsrfToken(), authorizationHeader.value);
+        await requestLogout(
+          activePortalType,
+          await ensureCsrfToken(),
+          authorizationHeader.value,
+        );
       }
     } catch {
     } finally {
-      clearLocalSession()
+      clearLocalSession();
     }
   }
 
diff --git a/src/auth/pages/LoginPage.vue b/src/auth/pages/LoginPage.vue
index dcb112f1..8f82438e 100644
--- a/src/auth/pages/LoginPage.vue
+++ b/src/auth/pages/LoginPage.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute } from 'vue-router'
-import AuthPortalShell from '@/auth/components/AuthPortalShell.vue'
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import AuthPortalShell from "@/auth/components/AuthPortalShell.vue";
 
 const route = useRoute();
 const { t } = useI18n();
@@ -17,10 +17,7 @@ const authLinkQuery = computed(() => {
 </script>
 
 <template>
-  <AuthPortalShell
-    :title="t('auth.login.title')"
-    card-class="max-w-[32rem]"
-  >
+  <AuthPortalShell :title="t('auth.login.title')" card-class="max-w-[32rem]">
     <div class="space-y-5">
       <p
         v-if="registrationSuccessMessage"
@@ -35,8 +32,12 @@ const authLinkQuery = computed(() => {
           data-testid="pupil-login-option"
           class="flex min-h-20 flex-col items-center justify-center gap-2 rounded-2xl bg-(--color-danger) px-4 py-2 text-center text-(--color-text-on-dark) shadow-(--shadow-md) transition hover:-translate-y-px hover:brightness-95 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-(--color-primary-dark)"
         >
-          <span class="text-2xl font-bold">{{ t('auth.login.pupilCardTitle') }}</span>
-          <span class="text-sm font-medium opacity-95">{{ t('auth.login.pupilCardDescription') }}</span>
+          <span class="text-2xl font-bold">{{
+            t("auth.login.pupilCardTitle")
+          }}</span>
+          <span class="text-sm font-medium opacity-95">{{
+            t("auth.login.pupilCardDescription")
+          }}</span>
         </RouterLink>
 
         <RouterLink
@@ -44,8 +45,12 @@ const authLinkQuery = computed(() => {
           data-testid="teacher-login-option"
           class="flex min-h-15 flex-col items-center justify-center gap-1 rounded-2xl border border-(--color-accent-dark) bg-(--color-surface) px-4 py-2 text-center text-(--color-text-on-accent) shadow-(--shadow-sm) transition hover:-translate-y-px hover:bg-(--color-secondary-light) focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-(--color-primary-dark)"
         >
-          <span class="text-lg font-semibold">{{ t('auth.login.teacherCardTitle') }}</span>
-          <span class="text-sm">{{ t('auth.login.teacherCardDescription') }}</span>
+          <span class="text-lg font-semibold">{{
+            t("auth.login.teacherCardTitle")
+          }}</span>
+          <span class="text-sm">{{
+            t("auth.login.teacherCardDescription")
+          }}</span>
         </RouterLink>
       </div>
 
@@ -54,7 +59,7 @@ const authLinkQuery = computed(() => {
           :to="{ name: 'register', query: authLinkQuery }"
           class="text-sm font-medium text-(--color-text-on-accent) underline decoration-(--color-secondary-dark) underline-offset-4 transition hover:text-(--color-text-heading)"
         >
-          {{ t('auth.login.register') }}
+          {{ t("auth.login.register") }}
         </RouterLink>
       </div>
     </div>
diff --git a/src/auth/pages/PupilLoginPage.vue b/src/auth/pages/PupilLoginPage.vue
index afe2826f..90414d90 100644
--- a/src/auth/pages/PupilLoginPage.vue
+++ b/src/auth/pages/PupilLoginPage.vue
@@ -3,10 +3,10 @@ import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 
-import AuthPortalShell from '@/auth/components/AuthPortalShell.vue'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { resolvePostLoginLocation } from '@/app/router/auth-routing'
-import { startPupilSoundtrack } from '@/app/audio/pupilSoundtrack'
+import AuthPortalShell from "@/auth/components/AuthPortalShell.vue";
+import { useAuthStore } from "@/auth/model/auth.store";
+import { resolvePostLoginLocation } from "@/app/router/auth-routing";
+import { startPupilSoundtrack } from "@/app/audio/pupilSoundtrack";
 
 const authStore = useAuthStore();
 const route = useRoute();
@@ -40,13 +40,14 @@ async function attemptLogin() {
     await authStore.loginPupil({
       username: username.value,
       password: password.value,
-    })
-    await startPupilSoundtrack()
+    });
+    await startPupilSoundtrack();
 
     await router.replace(
       resolvePostLoginLocation(router, route.query.redirect, {
         portalType: authStore.portalType,
-        hasCompletedOnboarding: authStore.user?.pupilProfile?.hasCompletedOnboarding,
+        hasCompletedOnboarding:
+          authStore.user?.pupilProfile?.hasCompletedOnboarding,
       }),
     );
   } catch {}
@@ -65,7 +66,7 @@ async function attemptLogin() {
           for="pupil-username"
           class="block text-sm font-medium text-(--color-text-on-accent)"
         >
-          {{ t('auth.login.usernameLabel') }}
+          {{ t("auth.login.usernameLabel") }}
         </label>
         <input
           id="pupil-username"
@@ -82,7 +83,7 @@ async function attemptLogin() {
           for="pupil-password"
           class="block text-sm font-medium text-(--color-text-on-accent)"
         >
-          {{ t('auth.login.passwordLabel') }}
+          {{ t("auth.login.passwordLabel") }}
         </label>
         <input
           id="pupil-password"
@@ -100,15 +101,17 @@ async function attemptLogin() {
           type="submit"
           class="flex h-12 w-full items-center justify-center rounded-xl bg-(--color-danger) px-4 text-center font-semibold text-(--color-text-on-dark) shadow-(--shadow-md) transition hover:-translate-y-px hover:brightness-95 disabled:cursor-not-allowed disabled:bg-(--color-bg-dark) disabled:text-(--color-text-muted) disabled:shadow-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-(--color-primary-dark)"
         >
-          {{ t('auth.login.submit') }}
+          {{ t("auth.login.submit") }}
         </button>
 
         <p
           v-if="statusMessage"
           class="rounded-2xl border px-4 py-3 text-sm"
-          :class="authStore.errorMessage
-            ? 'border-(--color-danger) bg-(--color-bg-card) text-(--color-danger)'
-            : 'border-(--color-secondary-dark) bg-(--color-secondary-light) text-(--color-text-on-accent)'"
+          :class="
+            authStore.errorMessage
+              ? 'border-(--color-danger) bg-(--color-bg-card) text-(--color-danger)'
+              : 'border-(--color-secondary-dark) bg-(--color-secondary-light) text-(--color-text-on-accent)'
+          "
         >
           {{ statusMessage }}
         </p>
@@ -118,7 +121,7 @@ async function attemptLogin() {
             :to="{ name: 'login', query: route.query }"
             class="text-sm font-medium text-(--color-text-on-accent) underline decoration-(--color-secondary-dark) underline-offset-4 transition hover:text-(--color-text-heading)"
           >
-            {{ t('common.back') }}
+            {{ t("common.back") }}
           </RouterLink>
         </div>
       </div>
diff --git a/src/auth/pages/RegisterPage.vue b/src/auth/pages/RegisterPage.vue
index 1b79993d..b5526e7f 100644
--- a/src/auth/pages/RegisterPage.vue
+++ b/src/auth/pages/RegisterPage.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { computed, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
 
-import AuthPortalShell from '@/auth/components/AuthPortalShell.vue'
-import { useAuthStore } from '@/auth/model/auth.store'
+import AuthPortalShell from "@/auth/components/AuthPortalShell.vue";
+import { useAuthStore } from "@/auth/model/auth.store";
 
 const route = useRoute();
 const router = useRouter();
@@ -133,7 +133,7 @@ async function attemptRegistration() {
           for="register-name"
           class="block text-sm font-medium text-(--color-text-on-accent)"
         >
-          {{ t('auth.register.fullNameLabel') }}
+          {{ t("auth.register.fullNameLabel") }}
         </label>
         <input
           id="register-name"
@@ -149,7 +149,7 @@ async function attemptRegistration() {
           for="register-email"
           class="block text-sm font-medium text-(--color-text-on-accent)"
         >
-          {{ t('auth.register.emailLabel') }}
+          {{ t("auth.register.emailLabel") }}
         </label>
         <input
           id="register-email"
@@ -165,7 +165,7 @@ async function attemptRegistration() {
           for="register-school"
           class="block text-sm font-medium text-(--color-text-on-accent)"
         >
-          {{ t('auth.register.schoolNameLabel') }}
+          {{ t("auth.register.schoolNameLabel") }}
         </label>
         <input
           id="register-school"
@@ -181,7 +181,7 @@ async function attemptRegistration() {
           for="register-password"
           class="block text-sm font-medium text-(--color-text-on-accent)"
         >
-          {{ t('auth.register.passwordLabel') }}
+          {{ t("auth.register.passwordLabel") }}
         </label>
         <input
           id="register-password"
@@ -196,7 +196,7 @@ async function attemptRegistration() {
           for="register-confirm-password"
           class="block text-sm font-medium text-(--color-text-on-accent)"
         >
-          {{ t('auth.register.confirmPasswordLabel') }}
+          {{ t("auth.register.confirmPasswordLabel") }}
         </label>
         <input
           id="register-confirm-password"
@@ -213,7 +213,7 @@ async function attemptRegistration() {
           type="submit"
           class="flex h-12 w-full items-center justify-center rounded-xl bg-(--color-danger) px-4 text-center font-semibold text-(--color-text-on-dark) shadow-(--shadow-md) transition hover:-translate-y-px hover:brightness-95 disabled:cursor-not-allowed disabled:bg-(--color-bg-dark) disabled:text-(--color-text-muted) disabled:shadow-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-(--color-primary-dark)"
         >
-          {{ t('auth.register.submit') }}
+          {{ t("auth.register.submit") }}
         </button>
 
         <p
@@ -235,7 +235,7 @@ async function attemptRegistration() {
             :to="{ name: 'login', query: authLinkQuery }"
             class="text-sm font-medium text-(--color-text-on-accent) underline decoration-(--color-secondary-dark) underline-offset-4 transition hover:text-(--color-text-heading)"
           >
-            {{ t('common.back') }}
+            {{ t("common.back") }}
           </RouterLink>
         </div>
       </div>
diff --git a/src/auth/pages/TeacherLoginPage.vue b/src/auth/pages/TeacherLoginPage.vue
index b5341467..86329d45 100644
--- a/src/auth/pages/TeacherLoginPage.vue
+++ b/src/auth/pages/TeacherLoginPage.vue
@@ -3,9 +3,9 @@ import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 
-import AuthPortalShell from '@/auth/components/AuthPortalShell.vue'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { resolvePostLoginLocation } from '@/app/router/auth-routing'
+import AuthPortalShell from "@/auth/components/AuthPortalShell.vue";
+import { useAuthStore } from "@/auth/model/auth.store";
+import { resolvePostLoginLocation } from "@/app/router/auth-routing";
 
 const authStore = useAuthStore();
 const route = useRoute();
@@ -45,7 +45,8 @@ async function attemptLogin() {
     await router.replace(
       resolvePostLoginLocation(router, route.query.redirect, {
         portalType: authStore.portalType,
-        hasCompletedOnboarding: authStore.user?.pupilProfile?.hasCompletedOnboarding,
+        hasCompletedOnboarding:
+          authStore.user?.pupilProfile?.hasCompletedOnboarding,
       }),
     );
   } catch (error) {
@@ -66,7 +67,7 @@ async function attemptLogin() {
           for="teacher-email"
           class="block text-sm font-medium text-(--color-text-on-accent)"
         >
-          {{ t('auth.login.emailLabel') }}
+          {{ t("auth.login.emailLabel") }}
         </label>
         <input
           id="teacher-email"
@@ -82,7 +83,7 @@ async function attemptLogin() {
           for="teacher-password"
           class="block text-sm font-medium text-(--color-text-on-accent)"
         >
-          {{ t('auth.login.passwordLabel') }}
+          {{ t("auth.login.passwordLabel") }}
         </label>
         <input
           id="teacher-password"
@@ -100,15 +101,17 @@ async function attemptLogin() {
           type="submit"
           class="flex h-12 w-full items-center justify-center rounded-xl bg-(--color-danger) px-4 text-center font-semibold text-(--color-text-on-dark) shadow-(--shadow-md) transition hover:-translate-y-px hover:brightness-95 disabled:cursor-not-allowed disabled:bg-(--color-bg-dark) disabled:text-(--color-text-muted) disabled:shadow-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-(--color-primary-dark)"
         >
-          {{ t('auth.login.submit') }}
+          {{ t("auth.login.submit") }}
         </button>
 
         <p
           v-if="statusMessage"
           class="rounded-2xl border px-4 py-3 text-sm"
-          :class="authStore.errorMessage
-            ? 'border-(--color-danger) bg-(--color-bg-card) text-(--color-danger)'
-            : 'border-(--color-secondary-dark) bg-(--color-secondary-light) text-(--color-text-on-accent)'"
+          :class="
+            authStore.errorMessage
+              ? 'border-(--color-danger) bg-(--color-bg-card) text-(--color-danger)'
+              : 'border-(--color-secondary-dark) bg-(--color-secondary-light) text-(--color-text-on-accent)'
+          "
         >
           {{ statusMessage }}
         </p>
@@ -118,7 +121,7 @@ async function attemptLogin() {
             :to="{ name: 'login', query: route.query }"
             class="text-sm font-medium text-(--color-text-on-accent) underline decoration-(--color-secondary-dark) underline-offset-4 transition hover:text-(--color-text-heading)"
           >
-            {{ t('common.back') }}
+            {{ t("common.back") }}
           </RouterLink>
         </div>
       </div>
diff --git a/src/auth/pages/__tests__/login-pages.spec.ts b/src/auth/pages/__tests__/login-pages.spec.ts
index 7ad679d0..dcb72a92 100644
--- a/src/auth/pages/__tests__/login-pages.spec.ts
+++ b/src/auth/pages/__tests__/login-pages.spec.ts
@@ -3,17 +3,17 @@ import { flushPromises, mount } from "@vue/test-utils";
 import { createPinia, setActivePinia } from "pinia";
 import { createMemoryHistory } from "vue-router";
 
-import LoginPage from '@/auth/pages/LoginPage.vue'
-import PupilLoginPage from '@/auth/pages/PupilLoginPage.vue'
-import TeacherLoginPage from '@/auth/pages/TeacherLoginPage.vue'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { createAppRouter } from '@/app/router'
-import { createAppI18n } from '@/app/i18n'
-import { startPupilSoundtrack } from '@/app/audio/pupilSoundtrack'
-
-vi.mock('@/app/audio/pupilSoundtrack', () => ({
+import LoginPage from "@/auth/pages/LoginPage.vue";
+import PupilLoginPage from "@/auth/pages/PupilLoginPage.vue";
+import TeacherLoginPage from "@/auth/pages/TeacherLoginPage.vue";
+import { useAuthStore } from "@/auth/model/auth.store";
+import { createAppRouter } from "@/app/router";
+import { createAppI18n } from "@/app/i18n";
+import { startPupilSoundtrack } from "@/app/audio/pupilSoundtrack";
+
+vi.mock("@/app/audio/pupilSoundtrack", () => ({
   startPupilSoundtrack: vi.fn().mockResolvedValue(undefined),
-}))
+}));
 
 async function mountWithRouter(
   component: typeof TeacherLoginPage | typeof PupilLoginPage,
@@ -42,10 +42,10 @@ async function mountWithRouter(
 
 describe("login form validation", () => {
   beforeEach(() => {
-    setActivePinia(createPinia())
-    vi.restoreAllMocks()
-    vi.mocked(startPupilSoundtrack).mockClear()
-  })
+    setActivePinia(createPinia());
+    vi.restoreAllMocks();
+    vi.mocked(startPupilSoundtrack).mockClear();
+  });
 
   it("only enables teacher login submit for valid email and password", async () => {
     const { authStore, wrapper } = await mountWithRouter(
@@ -55,14 +55,16 @@ describe("login form validation", () => {
     const loginTeacherSpy = vi
       .spyOn(authStore, "loginTeacher")
       .mockResolvedValue(null);
-    
-    expect(wrapper.text()).toContain('Lærerinnlogging')
-    expect(wrapper.text()).toContain('For lærere som skal logge inn med e-post og passord.')
 
-    const inputs = wrapper.findAll('input')
-    const submitButton = wrapper.get('button[type="submit"]')
-    const emailInput = inputs[0]!
-    const passwordInput = inputs[1]!
+    expect(wrapper.text()).toContain("Lærerinnlogging");
+    expect(wrapper.text()).toContain(
+      "For lærere som skal logge inn med e-post og passord.",
+    );
+
+    const inputs = wrapper.findAll("input");
+    const submitButton = wrapper.get('button[type="submit"]');
+    const emailInput = inputs[0]!;
+    const passwordInput = inputs[1]!;
 
     expect(submitButton.attributes("disabled")).toBeDefined();
 
@@ -92,13 +94,15 @@ describe("login form validation", () => {
       .spyOn(authStore, "loginPupil")
       .mockResolvedValue(null);
 
-    expect(wrapper.text()).toContain('Elevinnlogging')
-    expect(wrapper.text()).toContain('For elever som skal logge inn med Feide.')
+    expect(wrapper.text()).toContain("Elevinnlogging");
+    expect(wrapper.text()).toContain(
+      "For elever som skal logge inn med Feide.",
+    );
 
-    const inputs = wrapper.findAll('input')
-    const submitButton = wrapper.get('button[type="submit"]')
-    const usernameInput = inputs[0]!
-    const passwordInput = inputs[1]!
+    const inputs = wrapper.findAll("input");
+    const submitButton = wrapper.get('button[type="submit"]');
+    const usernameInput = inputs[0]!;
+    const passwordInput = inputs[1]!;
 
     expect(submitButton.attributes("disabled")).toBeDefined();
 
@@ -147,9 +151,9 @@ describe("login form validation", () => {
     await wrapper.get("form").trigger("submit");
     await flushPromises();
 
-    expect(startPupilSoundtrack).toHaveBeenCalledTimes(1)
-    expect(router.currentRoute.value.name).toBe('pupil-join-classroom')
-  })
+    expect(startPupilSoundtrack).toHaveBeenCalledTimes(1);
+    expect(router.currentRoute.value.name).toBe("pupil-join-classroom");
+  });
 
   it("preserves redirect when choosing pupil login from the login page", async () => {
     const pinia = createPinia();
@@ -168,13 +172,13 @@ describe("login form validation", () => {
       },
     });
 
-    expect(chooser.text()).toContain('Jeg er elev')
-    expect(chooser.text()).toContain('Logg inn med Feide')
-    expect(chooser.text()).toContain('Jeg er lærer')
-    expect(chooser.text()).toContain('Logg inn med e-post og passord')
+    expect(chooser.text()).toContain("Jeg er elev");
+    expect(chooser.text()).toContain("Logg inn med Feide");
+    expect(chooser.text()).toContain("Jeg er lærer");
+    expect(chooser.text()).toContain("Logg inn med e-post og passord");
 
-    await chooser.get('[data-testid="pupil-login-option"]').trigger('click')
-    await flushPromises()
+    await chooser.get('[data-testid="pupil-login-option"]').trigger("click");
+    await flushPromises();
 
     const wrapper = mount(PupilLoginPage, {
       global: {
@@ -193,52 +197,57 @@ describe("login form validation", () => {
         authorities: [],
         pupilProfile: {
           currentClassroomId: 1,
-          displayName: '',
+          displayName: "",
           totalXp: 0,
           currentLevel: 0,
           hasCompletedOnboarding: true,
         },
         teacherProfile: null,
-      }
-      return authStore.user
-    })
+      };
+      return authStore.user;
+    });
 
-    const inputs = wrapper.findAll('input')
-    const usernameInput = inputs[0]!
-    const passwordInput = inputs[1]!
-    await usernameInput.setValue('student1')
-    await passwordInput.setValue('secret123')
-    await wrapper.get('form').trigger('submit')
-    await flushPromises()
+    const inputs = wrapper.findAll("input");
+    const usernameInput = inputs[0]!;
+    const passwordInput = inputs[1]!;
+    await usernameInput.setValue("student1");
+    await passwordInput.setValue("secret123");
+    await wrapper.get("form").trigger("submit");
+    await flushPromises();
 
-    expect(router.currentRoute.value.fullPath).toBe('/pupil/map')
-  })
+    expect(router.currentRoute.value.fullPath).toBe("/pupil/map");
+  });
 
-  it('preserves redirect when choosing teacher login from the login page', async () => {
-    const pinia = createPinia()
-    setActivePinia(pinia)
+  it("preserves redirect when choosing teacher login from the login page", async () => {
+    const pinia = createPinia();
+    setActivePinia(pinia);
 
-    const authStore = useAuthStore(pinia)
-    authStore.status = 'anonymous'
+    const authStore = useAuthStore(pinia);
+    authStore.status = "anonymous";
 
-    const router = createAppRouter(createMemoryHistory(), pinia)
-    await router.push('/teacher/classrooms')
-    await router.isReady()
+    const router = createAppRouter(createMemoryHistory(), pinia);
+    await router.push("/teacher/classrooms");
+    await router.isReady();
 
     const chooser = mount(LoginPage, {
       global: {
         plugins: [pinia, router, createAppI18n()],
       },
-    })
+    });
 
-    await chooser.get('[data-testid="teacher-login-option"]').trigger('click')
-    await flushPromises()
+    await chooser.get('[data-testid="teacher-login-option"]').trigger("click");
+    await flushPromises();
 
-    expect(router.currentRoute.value.fullPath).toBe('/login/user?redirect=/teacher/classrooms')
-  })
+    expect(router.currentRoute.value.fullPath).toBe(
+      "/login/user?redirect=/teacher/classrooms",
+    );
+  });
 
-  it('redirects teachers to the placeholder home after login', async () => {
-    const { authStore, router, wrapper } = await mountWithRouter(TeacherLoginPage, '/login/user')
+  it("redirects teachers to the placeholder home after login", async () => {
+    const { authStore, router, wrapper } = await mountWithRouter(
+      TeacherLoginPage,
+      "/login/user",
+    );
 
     vi.spyOn(authStore, "loginTeacher").mockImplementation(async () => {
       authStore.status = "authenticated";
diff --git a/src/avatar/api/avatar.api.ts b/src/avatar/api/avatar.api.ts
index da834dfe..fffd8dc6 100644
--- a/src/avatar/api/avatar.api.ts
+++ b/src/avatar/api/avatar.api.ts
@@ -1,54 +1,59 @@
-import type { UpdateUserAvatarPayload, UserAvatar, UserAvatarAssets } from '@/avatar/model/avatar.types'
-import { readJsonErrorMessage } from '@/shared/api/response-errors'
+import type {
+  UpdateUserAvatarPayload,
+  UserAvatar,
+  UserAvatarAssets,
+} from "@/avatar/model/avatar.types";
+import { readJsonErrorMessage } from "@/shared/api/response-errors";
 
-const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
-const AVATAR_API_BASE = `${API_BASE_URL}/api/v1/users/me/avatar`
-const AVATAR_ASSETS_API_BASE = `${AVATAR_API_BASE}/assets`
+const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? "").replace(
+  /\/$/,
+  "",
+);
+const AVATAR_API_BASE = `${API_BASE_URL}/api/v1/users/me/avatar`;
+const AVATAR_ASSETS_API_BASE = `${AVATAR_API_BASE}/assets`;
 
 async function getResponseErrorMessage(response: Response) {
-  const fallbackMessage = `Avatar request failed with status ${response.status}.`
-  const errorMessage = await readJsonErrorMessage(response)
+  const fallbackMessage = `Avatar request failed with status ${response.status}.`;
+  const errorMessage = await readJsonErrorMessage(response);
 
-  if (errorMessage) return errorMessage
+  if (errorMessage) return errorMessage;
 
-  const text = await response.text().catch(() => '')
-  return text || fallbackMessage
+  const text = await response.text().catch(() => "");
+  return text || fallbackMessage;
 }
 
-async function fetchAvatarJson<T>(
-  options: {
-    method?: string
-    body?: unknown
-    authorizationHeader: string
-    url?: string
-  },
-) {
+async function fetchAvatarJson<T>(options: {
+  method?: string;
+  body?: unknown;
+  authorizationHeader: string;
+  url?: string;
+}) {
   const headers = new Headers({
     Authorization: options.authorizationHeader,
-  })
+  });
 
   if (options.body !== undefined) {
-    headers.set('Content-Type', 'application/json')
+    headers.set("Content-Type", "application/json");
   }
 
   const response = await fetch(options.url ?? AVATAR_API_BASE, {
-    method: options.method ?? 'GET',
+    method: options.method ?? "GET",
     headers,
     body: options.body !== undefined ? JSON.stringify(options.body) : undefined,
-    credentials: 'include',
-  })
+    credentials: "include",
+  });
 
   if (!response.ok) {
-    throw new Error(await getResponseErrorMessage(response))
+    throw new Error(await getResponseErrorMessage(response));
   }
 
-  return (await response.json()) as T
+  return (await response.json()) as T;
 }
 
 export function requestUserAvatar(authorizationHeader: string) {
   return fetchAvatarJson<UserAvatar>({
     authorizationHeader,
-  })
+  });
 }
 
 export function requestUpdateUserAvatar(
@@ -56,15 +61,15 @@ export function requestUpdateUserAvatar(
   payload: UpdateUserAvatarPayload,
 ) {
   return fetchAvatarJson<UserAvatar>({
-    method: 'PUT',
+    method: "PUT",
     authorizationHeader,
     body: payload,
-  })
+  });
 }
 
 export function requestUserAvatarAssets(authorizationHeader: string) {
   return fetchAvatarJson<UserAvatarAssets>({
     authorizationHeader,
     url: AVATAR_ASSETS_API_BASE,
-  })
+  });
 }
diff --git a/src/avatar/components/AvatarAssetComponent.vue b/src/avatar/components/AvatarAssetComponent.vue
index 48f88aa6..649b1003 100644
--- a/src/avatar/components/AvatarAssetComponent.vue
+++ b/src/avatar/components/AvatarAssetComponent.vue
@@ -1,20 +1,23 @@
 <script setup lang="ts">
-import type { AvatarAsset } from '@/avatar/model/avatar.types'
+import type { AvatarAsset } from "@/avatar/model/avatar.types";
 
-const props = withDefaults(defineProps<{
-  avatarAsset: AvatarAsset
-  isSelected?: boolean
-  disabled?: boolean
-  lockText?: string | null
-}>(), {
-  isSelected: false,
-  disabled: false,
-  lockText: null,
-})
+const props = withDefaults(
+  defineProps<{
+    avatarAsset: AvatarAsset;
+    isSelected?: boolean;
+    disabled?: boolean;
+    lockText?: string | null;
+  }>(),
+  {
+    isSelected: false,
+    disabled: false,
+    lockText: null,
+  },
+);
 
 const emit = defineEmits<{
-  select: []
-}>()
+  select: [];
+}>();
 </script>
 
 <template>
@@ -31,10 +34,7 @@ const emit = defineEmits<{
       :src="props.avatarAsset.imageUrl"
       :alt="props.avatarAsset.label ?? props.avatarAsset.key"
     />
-    <span
-      v-if="props.lockText"
-      class="avatar-asset-lock-text"
-    >
+    <span v-if="props.lockText" class="avatar-asset-lock-text">
       {{ props.lockText }}
     </span>
   </button>
diff --git a/src/avatar/components/AvatarComponent.vue b/src/avatar/components/AvatarComponent.vue
index 1f9bc066..dc6b7905 100644
--- a/src/avatar/components/AvatarComponent.vue
+++ b/src/avatar/components/AvatarComponent.vue
@@ -1,52 +1,64 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useI18n } from 'vue-i18n'
-import { useAvatarStore } from '@/avatar/model/avatar.store'
-import { hatAssets, outfitImageByKey, skinToneImageByKey } from '@/avatar/model/avatarAssets'
+import { computed, onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import { useI18n } from "vue-i18n";
+import { useAvatarStore } from "@/avatar/model/avatar.store";
+import {
+  hatAssets,
+  outfitImageByKey,
+  skinToneImageByKey,
+} from "@/avatar/model/avatarAssets";
 
 const props = withDefaults(
   defineProps<{
-    size?: number | string
+    size?: number | string;
   }>(),
   {
     size: 200,
   },
-)
+);
 
-const avatarStore = useAvatarStore()
-const { avatar } = storeToRefs(avatarStore)
-const { t } = useI18n()
+const avatarStore = useAvatarStore();
+const { avatar } = storeToRefs(avatarStore);
+const { t } = useI18n();
 
 const componentSize = computed(() =>
-  typeof props.size === 'number' ? `${props.size}px` : props.size,
-)
+  typeof props.size === "number" ? `${props.size}px` : props.size,
+);
 
 const containerStyle = computed(() => ({
   width: componentSize.value,
   height: componentSize.value,
-}))
+}));
 
 const skinToneImage = computed(() => {
-  const skinToneKey = avatar.value?.skinColorId?.trim().toLowerCase()
-  return (skinToneKey && skinToneImageByKey[skinToneKey]) || skinToneImageByKey.light
-})
+  const skinToneKey = avatar.value?.skinColorId?.trim().toLowerCase();
+  return (
+    (skinToneKey && skinToneImageByKey[skinToneKey]) || skinToneImageByKey.light
+  );
+});
 
 const outfitImage = computed(() => {
-  const outfitStyleKey = avatar.value?.outfitId?.trim().toLowerCase()
-  return (outfitStyleKey && outfitImageByKey[outfitStyleKey]) || outfitImageByKey.standard
-})
+  const outfitStyleKey = avatar.value?.outfitId?.trim().toLowerCase();
+  return (
+    (outfitStyleKey && outfitImageByKey[outfitStyleKey]) ||
+    outfitImageByKey.standard
+  );
+});
 
 const hatImage = computed(() => {
-  const hatKey = avatar.value?.hatId?.trim().toLowerCase()
-  return hatAssets.find(asset => asset.key.toLowerCase() === hatKey)?.imageUrl ?? null
-})
+  const hatKey = avatar.value?.hatId?.trim().toLowerCase();
+  return (
+    hatAssets.find((asset) => asset.key.toLowerCase() === hatKey)?.imageUrl ??
+    null
+  );
+});
 
 onMounted(() => {
   if (!avatarStore.hasAvatar && !avatarStore.isBusy) {
-    void avatarStore.fetchAvatar().catch(() => {})
+    void avatarStore.fetchAvatar().catch(() => {});
   }
-})
+});
 </script>
 
 <template>
diff --git a/src/avatar/components/__tests__/AvatarAssetComponent.spec.ts b/src/avatar/components/__tests__/AvatarAssetComponent.spec.ts
index 9f413c60..d7753977 100644
--- a/src/avatar/components/__tests__/AvatarAssetComponent.spec.ts
+++ b/src/avatar/components/__tests__/AvatarAssetComponent.spec.ts
@@ -1,69 +1,71 @@
-import { describe, expect, it } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
 
-import AvatarAssetComponent from '@/avatar/components/AvatarAssetComponent.vue'
+import AvatarAssetComponent from "@/avatar/components/AvatarAssetComponent.vue";
 
-describe('AvatarAssetComponent', () => {
+describe("AvatarAssetComponent", () => {
   const avatarAsset = {
-    key: 'light',
-    imageUrl: '/assets/light.png',
-    label: 'Light skin tone',
-  }
+    key: "light",
+    imageUrl: "/assets/light.png",
+    label: "Light skin tone",
+  };
 
-  it('renders the asset image and alt text', () => {
+  it("renders the asset image and alt text", () => {
     const wrapper = mount(AvatarAssetComponent, {
       props: {
         avatarAsset,
       },
-    })
+    });
 
-    const image = wrapper.get('img')
-    expect(image.attributes('src')).toBe('/assets/light.png')
-    expect(image.attributes('alt')).toBe('Light skin tone')
-  })
+    const image = wrapper.get("img");
+    expect(image.attributes("src")).toBe("/assets/light.png");
+    expect(image.attributes("alt")).toBe("Light skin tone");
+  });
 
-  it('emits select when clicked and marks the selected state', async () => {
+  it("emits select when clicked and marks the selected state", async () => {
     const wrapper = mount(AvatarAssetComponent, {
       props: {
         avatarAsset,
         isSelected: true,
       },
-    })
+    });
 
-    const button = wrapper.get('button')
-    expect(button.classes()).toContain('avatar-asset-box--selected')
+    const button = wrapper.get("button");
+    expect(button.classes()).toContain("avatar-asset-box--selected");
 
-    await button.trigger('click')
+    await button.trigger("click");
 
-    expect(wrapper.emitted('select')).toHaveLength(1)
-  })
+    expect(wrapper.emitted("select")).toHaveLength(1);
+  });
 
-  it('does not emit select when disabled', async () => {
+  it("does not emit select when disabled", async () => {
     const wrapper = mount(AvatarAssetComponent, {
       props: {
         avatarAsset,
         disabled: true,
       },
-    })
+    });
 
-    const button = wrapper.get('button')
-    expect(button.attributes('disabled')).toBeDefined()
+    const button = wrapper.get("button");
+    expect(button.attributes("disabled")).toBeDefined();
 
-    await button.trigger('click')
+    await button.trigger("click");
 
-    expect(wrapper.emitted('select')).toBeUndefined()
-  })
+    expect(wrapper.emitted("select")).toBeUndefined();
+  });
 
-  it('renders a visible locked state when lock text is provided', () => {
+  it("renders a visible locked state when lock text is provided", () => {
     const wrapper = mount(AvatarAssetComponent, {
       props: {
         avatarAsset,
         disabled: true,
-        lockText: 'Unlocks at level 4',
+        lockText: "Unlocks at level 4",
       },
-    })
+    });
 
-    expect(wrapper.text()).toContain('Unlocks at level 4')
-    expect(wrapper.get('img').classes()).toContain('avatar-asset-image--locked')
-  })
-})
+    expect(wrapper.text()).toContain("Unlocks at level 4");
+    expect(wrapper.get("img").classes()).toContain(
+      "avatar-asset-image--locked",
+    );
+  });
+});
diff --git a/src/avatar/components/__tests__/AvatarComponent.spec.ts b/src/avatar/components/__tests__/AvatarComponent.spec.ts
index 271c0d0e..8ed82dba 100644
--- a/src/avatar/components/__tests__/AvatarComponent.spec.ts
+++ b/src/avatar/components/__tests__/AvatarComponent.spec.ts
@@ -1,27 +1,27 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
 
-import AvatarComponent from '@/avatar/components/AvatarComponent.vue'
-import { createAppI18n } from '@/app/i18n'
-import { useAvatarStore } from '@/avatar/model/avatar.store'
+import AvatarComponent from "@/avatar/components/AvatarComponent.vue";
+import { createAppI18n } from "@/app/i18n";
+import { useAvatarStore } from "@/avatar/model/avatar.store";
 
-describe('AvatarComponent', () => {
+describe("AvatarComponent", () => {
   beforeEach(() => {
-    setActivePinia(createPinia())
-    vi.restoreAllMocks()
-  })
+    setActivePinia(createPinia());
+    vi.restoreAllMocks();
+  });
 
-  it('renders the saved avatar layers and applies the requested size', () => {
-    const avatarStore = useAvatarStore()
+  it("renders the saved avatar layers and applies the requested size", () => {
+    const avatarStore = useAvatarStore();
     avatarStore.avatar = {
-      hatId: 'detective-default',
-      skinColorId: 'dark',
-      outfitId: 'standard2',
-    }
-    avatarStore.status = 'ready'
+      hatId: "detective-default",
+      skinColorId: "dark",
+      outfitId: "standard2",
+    };
+    avatarStore.status = "ready";
 
-    const fetchAvatarSpy = vi.spyOn(avatarStore, 'fetchAvatar')
+    const fetchAvatarSpy = vi.spyOn(avatarStore, "fetchAvatar");
 
     const wrapper = mount(AvatarComponent, {
       props: {
@@ -30,55 +30,59 @@ describe('AvatarComponent', () => {
       global: {
         plugins: [createAppI18n()],
       },
-    })
+    });
 
-    const images = wrapper.findAll('img')
-    expect(images).toHaveLength(3)
-    expect(images[0]?.attributes('src')).toContain('dark.png')
-    expect(images[1]?.attributes('src')).toContain('standard2.png')
-    expect(images[2]?.attributes('src')).toContain('detective-default.png')
-    expect(images[0]?.attributes('alt')).toBe('Avatar hudfarge')
-    expect(images[1]?.attributes('alt')).toBe('Avatar antrekk')
-    expect(wrapper.get('.body').attributes('style')).toContain('width: 320px;')
-    expect(wrapper.get('.body').attributes('style')).toContain('height: 320px;')
-    expect(fetchAvatarSpy).not.toHaveBeenCalled()
-  })
+    const images = wrapper.findAll("img");
+    expect(images).toHaveLength(3);
+    expect(images[0]?.attributes("src")).toContain("dark.png");
+    expect(images[1]?.attributes("src")).toContain("standard2.png");
+    expect(images[2]?.attributes("src")).toContain("detective-default.png");
+    expect(images[0]?.attributes("alt")).toBe("Avatar hudfarge");
+    expect(images[1]?.attributes("alt")).toBe("Avatar antrekk");
+    expect(wrapper.get(".body").attributes("style")).toContain("width: 320px;");
+    expect(wrapper.get(".body").attributes("style")).toContain(
+      "height: 320px;",
+    );
+    expect(fetchAvatarSpy).not.toHaveBeenCalled();
+  });
 
-  it('falls back to default assets when the saved keys are unknown', () => {
-    const avatarStore = useAvatarStore()
+  it("falls back to default assets when the saved keys are unknown", () => {
+    const avatarStore = useAvatarStore();
     avatarStore.avatar = {
-      hatId: 'missing-hat',
-      skinColorId: 'missing-tone',
-      outfitId: 'missing-outfit',
-    }
-    avatarStore.status = 'ready'
+      hatId: "missing-hat",
+      skinColorId: "missing-tone",
+      outfitId: "missing-outfit",
+    };
+    avatarStore.status = "ready";
 
     const wrapper = mount(AvatarComponent, {
       global: {
         plugins: [createAppI18n()],
       },
-    })
+    });
 
-    const images = wrapper.findAll('img')
-    expect(images[0]?.attributes('src')).toContain('light.png')
-    expect(images[1]?.attributes('src')).toContain('standard.png')
-    expect(images).toHaveLength(2)
-  })
+    const images = wrapper.findAll("img");
+    expect(images[0]?.attributes("src")).toContain("light.png");
+    expect(images[1]?.attributes("src")).toContain("standard.png");
+    expect(images).toHaveLength(2);
+  });
 
-  it('fetches the avatar on mount when no avatar is loaded yet', () => {
-    const avatarStore = useAvatarStore()
-    const fetchAvatarSpy = vi.spyOn(avatarStore, 'fetchAvatar').mockResolvedValue({
-      hatId: 'detective-default',
-      skinColorId: 'light',
-      outfitId: 'standard',
-    })
+  it("fetches the avatar on mount when no avatar is loaded yet", () => {
+    const avatarStore = useAvatarStore();
+    const fetchAvatarSpy = vi
+      .spyOn(avatarStore, "fetchAvatar")
+      .mockResolvedValue({
+        hatId: "detective-default",
+        skinColorId: "light",
+        outfitId: "standard",
+      });
 
     mount(AvatarComponent, {
       global: {
         plugins: [createAppI18n()],
       },
-    })
+    });
 
-    expect(fetchAvatarSpy).toHaveBeenCalledTimes(1)
-  })
-})
+    expect(fetchAvatarSpy).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/avatar/model/__tests__/avatar.store.spec.ts b/src/avatar/model/__tests__/avatar.store.spec.ts
index b5d64ddc..66006a6b 100644
--- a/src/avatar/model/__tests__/avatar.store.spec.ts
+++ b/src/avatar/model/__tests__/avatar.store.spec.ts
@@ -1,171 +1,177 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createPinia, setActivePinia } from 'pinia'
-import { nextTick } from 'vue'
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+import { nextTick } from "vue";
 
-import { useAuthStore } from '@/auth/model/auth.store'
-import { useAvatarStore } from '@/avatar/model/avatar.store'
+import { useAuthStore } from "@/auth/model/auth.store";
+import { useAvatarStore } from "@/avatar/model/avatar.store";
 
 function jsonResponse(body: unknown, init: ResponseInit = {}) {
   return new Response(JSON.stringify(body), {
     status: 200,
     headers: {
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json",
     },
     ...init,
-  })
+  });
 }
 
-describe('useAvatarStore', () => {
+describe("useAvatarStore", () => {
   beforeEach(() => {
-    setActivePinia(createPinia())
-    vi.restoreAllMocks()
-  })
+    setActivePinia(createPinia());
+    vi.restoreAllMocks();
+  });
 
-  it('fetches the current avatar using the auth bearer token', async () => {
+  it("fetches the current avatar using the auth bearer token", async () => {
     const fetchMock = vi.fn().mockResolvedValue(
       jsonResponse({
-        hatId: 'detective-default',
-        skinColorId: 'dark',
-        outfitId: 'standard2',
+        hatId: "detective-default",
+        skinColorId: "dark",
+        outfitId: "standard2",
       }),
-    )
+    );
 
-    vi.stubGlobal('fetch', fetchMock)
+    vi.stubGlobal("fetch", fetchMock);
 
-    const authStore = useAuthStore()
-    authStore.accessToken = 'access-token'
+    const authStore = useAuthStore();
+    authStore.accessToken = "access-token";
 
-    const avatarStore = useAvatarStore()
-    const avatar = await avatarStore.fetchAvatar()
+    const avatarStore = useAvatarStore();
+    const avatar = await avatarStore.fetchAvatar();
 
     expect(avatar).toEqual({
-      hatId: 'detective-default',
-      skinColorId: 'dark',
-      outfitId: 'standard2',
-    })
-    expect(avatarStore.avatar).toEqual(avatar)
-    expect(avatarStore.status).toBe('ready')
-
-    expect(fetchMock).toHaveBeenCalledTimes(1)
-    expect(fetchMock.mock.calls[0]?.[0]).toBe('/api/v1/users/me/avatar')
-
-    const requestOptions = fetchMock.mock.calls[0]?.[1] as RequestInit
-    expect(new Headers(requestOptions.headers).get('Authorization')).toBe('Bearer access-token')
-    expect(requestOptions.method).toBe('GET')
-    expect(requestOptions.credentials).toBe('include')
-  })
-
-  it('updates the avatar and persists the response in store state', async () => {
+      hatId: "detective-default",
+      skinColorId: "dark",
+      outfitId: "standard2",
+    });
+    expect(avatarStore.avatar).toEqual(avatar);
+    expect(avatarStore.status).toBe("ready");
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(fetchMock.mock.calls[0]?.[0]).toBe("/api/v1/users/me/avatar");
+
+    const requestOptions = fetchMock.mock.calls[0]?.[1] as RequestInit;
+    expect(new Headers(requestOptions.headers).get("Authorization")).toBe(
+      "Bearer access-token",
+    );
+    expect(requestOptions.method).toBe("GET");
+    expect(requestOptions.credentials).toBe("include");
+  });
+
+  it("updates the avatar and persists the response in store state", async () => {
     const fetchMock = vi.fn().mockResolvedValue(
       jsonResponse({
-        hatId: 'detective-default',
-        skinColorId: 'light',
-        outfitId: 'standard2',
+        hatId: "detective-default",
+        skinColorId: "light",
+        outfitId: "standard2",
       }),
-    )
+    );
 
-    vi.stubGlobal('fetch', fetchMock)
+    vi.stubGlobal("fetch", fetchMock);
 
-    const authStore = useAuthStore()
-    authStore.accessToken = 'access-token'
+    const authStore = useAuthStore();
+    authStore.accessToken = "access-token";
 
-    const avatarStore = useAvatarStore()
+    const avatarStore = useAvatarStore();
     const avatar = await avatarStore.updateAvatar({
-      hatId: 'detective-default',
-      skinColorId: 'light',
-      outfitId: 'standard2',
-    })
-
-    expect(avatarStore.avatar).toEqual(avatar)
-    expect(avatarStore.status).toBe('ready')
-
-    const requestOptions = fetchMock.mock.calls[0]?.[1] as RequestInit
-    expect(requestOptions.method).toBe('PUT')
-    expect(new Headers(requestOptions.headers).get('Authorization')).toBe('Bearer access-token')
+      hatId: "detective-default",
+      skinColorId: "light",
+      outfitId: "standard2",
+    });
+
+    expect(avatarStore.avatar).toEqual(avatar);
+    expect(avatarStore.status).toBe("ready");
+
+    const requestOptions = fetchMock.mock.calls[0]?.[1] as RequestInit;
+    expect(requestOptions.method).toBe("PUT");
+    expect(new Headers(requestOptions.headers).get("Authorization")).toBe(
+      "Bearer access-token",
+    );
     expect(requestOptions.body).toBe(
       JSON.stringify({
-        hatId: 'detective-default',
-        skinColorId: 'light',
-        outfitId: 'standard2',
+        hatId: "detective-default",
+        skinColorId: "light",
+        outfitId: "standard2",
       }),
-    )
-  })
+    );
+  });
 
-  it('fetches avatar assets and persists them in store state', async () => {
+  it("fetches avatar assets and persists them in store state", async () => {
     const fetchMock = vi.fn().mockResolvedValue(
       jsonResponse({
         currentLevel: 2,
-        hats: [{ id: 'detective-default', unlocksAtLevel: 0, unlocked: true }],
-        outfits: [{ id: 'standard2', unlocksAtLevel: 2, unlocked: true }],
-        skinColors: [{ id: 'dark', unlocksAtLevel: 1, unlocked: true }],
+        hats: [{ id: "detective-default", unlocksAtLevel: 0, unlocked: true }],
+        outfits: [{ id: "standard2", unlocksAtLevel: 2, unlocked: true }],
+        skinColors: [{ id: "dark", unlocksAtLevel: 1, unlocked: true }],
       }),
-    )
+    );
 
-    vi.stubGlobal('fetch', fetchMock)
+    vi.stubGlobal("fetch", fetchMock);
 
-    const authStore = useAuthStore()
-    authStore.accessToken = 'access-token'
+    const authStore = useAuthStore();
+    authStore.accessToken = "access-token";
 
-    const avatarStore = useAvatarStore()
-    const avatarAssets = await avatarStore.fetchAvatarAssets()
+    const avatarStore = useAvatarStore();
+    const avatarAssets = await avatarStore.fetchAvatarAssets();
 
-    expect(avatarAssets.currentLevel).toBe(2)
-    expect(avatarStore.avatarAssets).toEqual(avatarAssets)
-    expect(avatarStore.status).toBe('ready')
-    expect(fetchMock.mock.calls[0]?.[0]).toBe('/api/v1/users/me/avatar/assets')
-  })
+    expect(avatarAssets.currentLevel).toBe(2);
+    expect(avatarStore.avatarAssets).toEqual(avatarAssets);
+    expect(avatarStore.status).toBe("ready");
+    expect(fetchMock.mock.calls[0]?.[0]).toBe("/api/v1/users/me/avatar/assets");
+  });
 
-  it('fails fast when trying to fetch without an authenticated session', async () => {
-    const avatarStore = useAvatarStore()
+  it("fails fast when trying to fetch without an authenticated session", async () => {
+    const avatarStore = useAvatarStore();
 
-    await expect(avatarStore.fetchAvatar()).rejects.toThrow('Avatar request failed.')
+    await expect(avatarStore.fetchAvatar()).rejects.toThrow(
+      "Avatar request failed.",
+    );
 
-    expect(avatarStore.status).toBe('error')
-    expect(avatarStore.errorMessage).toBe('Avatar request failed.')
-  })
+    expect(avatarStore.status).toBe("error");
+    expect(avatarStore.errorMessage).toBe("Avatar request failed.");
+  });
 
-  it('refreshes avatar assets when the authenticated pupil levels up', async () => {
+  it("refreshes avatar assets when the authenticated pupil levels up", async () => {
     const fetchMock = vi.fn().mockResolvedValue(
       jsonResponse({
         currentLevel: 2,
-        hats: [{ id: 'detective-default', unlocksAtLevel: 0, unlocked: true }],
-        outfits: [{ id: 'standard2', unlocksAtLevel: 2, unlocked: true }],
-        skinColors: [{ id: 'dark', unlocksAtLevel: 1, unlocked: true }],
+        hats: [{ id: "detective-default", unlocksAtLevel: 0, unlocked: true }],
+        outfits: [{ id: "standard2", unlocksAtLevel: 2, unlocked: true }],
+        skinColors: [{ id: "dark", unlocksAtLevel: 1, unlocked: true }],
       }),
-    )
+    );
 
-    vi.stubGlobal('fetch', fetchMock)
+    vi.stubGlobal("fetch", fetchMock);
 
-    const authStore = useAuthStore()
-    authStore.accessToken = 'access-token'
+    const authStore = useAuthStore();
+    authStore.accessToken = "access-token";
     authStore.user = {
-      subject: '99',
-      portalType: 'PUPIL',
+      subject: "99",
+      portalType: "PUPIL",
       email: null,
-      username: 'pupil-one',
-      authorities: ['ROLE_PUPIL'],
+      username: "pupil-one",
+      authorities: ["ROLE_PUPIL"],
       pupilProfile: {
-        displayName: 'Pupil One',
+        displayName: "Pupil One",
         totalXp: 0,
         currentLevel: 1,
         currentClassroomId: 2,
         hasCompletedOnboarding: true,
       },
       teacherProfile: null,
-    }
+    };
 
-    const avatarStore = useAvatarStore()
+    const avatarStore = useAvatarStore();
     avatarStore.avatar = {
-      hatId: 'detective-default',
-      skinColorId: 'dark',
-      outfitId: 'standard',
-    }
+      hatId: "detective-default",
+      skinColorId: "dark",
+      outfitId: "standard",
+    };
     avatarStore.avatarAssets = {
       currentLevel: 1,
-      hats: [{ id: 'detective-default', unlocksAtLevel: 0, unlocked: true }],
-      outfits: [{ id: 'standard', unlocksAtLevel: 0, unlocked: true }],
-      skinColors: [{ id: 'dark', unlocksAtLevel: 1, unlocked: true }],
-    }
+      hats: [{ id: "detective-default", unlocksAtLevel: 0, unlocked: true }],
+      outfits: [{ id: "standard", unlocksAtLevel: 0, unlocked: true }],
+      skinColors: [{ id: "dark", unlocksAtLevel: 1, unlocked: true }],
+    };
 
     authStore.user = {
       ...authStore.user,
@@ -173,14 +179,14 @@ describe('useAvatarStore', () => {
         ...authStore.user!.pupilProfile!,
         currentLevel: 2,
       },
-    }
+    };
 
-    await nextTick()
+    await nextTick();
     await vi.waitFor(() => {
-      expect(avatarStore.avatarAssets?.currentLevel).toBe(2)
-    })
+      expect(avatarStore.avatarAssets?.currentLevel).toBe(2);
+    });
 
-    expect(fetchMock).toHaveBeenCalledTimes(1)
-    expect(fetchMock.mock.calls[0]?.[0]).toBe('/api/v1/users/me/avatar/assets')
-  })
-})
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(fetchMock.mock.calls[0]?.[0]).toBe("/api/v1/users/me/avatar/assets");
+  });
+});
diff --git a/src/avatar/model/avatar.store.ts b/src/avatar/model/avatar.store.ts
index 4186e84b..e7e6449b 100644
--- a/src/avatar/model/avatar.store.ts
+++ b/src/avatar/model/avatar.store.ts
@@ -1,133 +1,153 @@
-import { defineStore } from 'pinia'
-import { computed, ref, watch } from 'vue'
-import { requestUpdateUserAvatar, requestUserAvatar, requestUserAvatarAssets } from '@/avatar/api/avatar.api'
-import type { AvatarStatus, UpdateUserAvatarPayload, UserAvatar, UserAvatarAssets } from '@/avatar/model/avatar.types'
-import { useAuthStore } from '@/auth/model/auth.store'
+import { defineStore } from "pinia";
+import { computed, ref, watch } from "vue";
+import {
+  requestUpdateUserAvatar,
+  requestUserAvatar,
+  requestUserAvatarAssets,
+} from "@/avatar/api/avatar.api";
+import type {
+  AvatarStatus,
+  UpdateUserAvatarPayload,
+  UserAvatar,
+  UserAvatarAssets,
+} from "@/avatar/model/avatar.types";
+import { useAuthStore } from "@/auth/model/auth.store";
 
 function asErrorMessage(error: unknown) {
   if (error instanceof Error && error.message.trim().length > 0) {
-    return error.message
+    return error.message;
   }
 
-  return 'Avatar request failed.'
+  return "Avatar request failed.";
 }
 
-export const useAvatarStore = defineStore('avatar', () => {
-  const authStore = useAuthStore()
+export const useAvatarStore = defineStore("avatar", () => {
+  const authStore = useAuthStore();
 
-  const status = ref<AvatarStatus>('idle')
-  const errorMessage = ref<string | null>(null)
-  const avatar = ref<UserAvatar | null>(null)
-  const avatarAssets = ref<UserAvatarAssets | null>(null)
+  const status = ref<AvatarStatus>("idle");
+  const errorMessage = ref<string | null>(null);
+  const avatar = ref<UserAvatar | null>(null);
+  const avatarAssets = ref<UserAvatarAssets | null>(null);
 
-  const isLoading = computed(() => status.value === 'loading')
-  const isSaving = computed(() => status.value === 'saving')
-  const isBusy = computed(() => isLoading.value || isSaving.value)
-  const hasAvatar = computed(() => avatar.value !== null)
-  const authenticatedSubject = computed(() => authStore.user?.subject ?? null)
-  const currentLevel = computed(() => authStore.user?.pupilProfile?.currentLevel ?? null)
+  const isLoading = computed(() => status.value === "loading");
+  const isSaving = computed(() => status.value === "saving");
+  const isBusy = computed(() => isLoading.value || isSaving.value);
+  const hasAvatar = computed(() => avatar.value !== null);
+  const authenticatedSubject = computed(() => authStore.user?.subject ?? null);
+  const currentLevel = computed(
+    () => authStore.user?.pupilProfile?.currentLevel ?? null,
+  );
 
   function clearAvatar() {
-    avatar.value = null
-    avatarAssets.value = null
-    errorMessage.value = null
-    status.value = 'idle'
+    avatar.value = null;
+    avatarAssets.value = null;
+    errorMessage.value = null;
+    status.value = "idle";
   }
 
   function clearAvatarAssets() {
-    avatarAssets.value = null
-    errorMessage.value = null
+    avatarAssets.value = null;
+    errorMessage.value = null;
 
-    if (status.value === 'error') {
-      status.value = avatar.value ? 'ready' : 'idle'
+    if (status.value === "error") {
+      status.value = avatar.value ? "ready" : "idle";
     }
   }
 
   watch(authenticatedSubject, (subject, previousSubject) => {
     if (subject !== previousSubject) {
-      clearAvatar()
+      clearAvatar();
     }
-  })
+  });
 
   watch(currentLevel, (level, previousLevel) => {
-    if (level === previousLevel || level == null || !authStore.authorizationHeader) {
-      return
+    if (
+      level === previousLevel ||
+      level == null ||
+      !authStore.authorizationHeader
+    ) {
+      return;
     }
 
-    clearAvatarAssets()
-    void fetchAvatarAssets().catch(() => {})
-  })
+    clearAvatarAssets();
+    void fetchAvatarAssets().catch(() => {});
+  });
 
   async function fetchAvatar() {
     if (!authStore.authorizationHeader) {
-      const message = 'Avatar request failed.'
-      errorMessage.value = message
-      status.value = 'error'
-      throw new Error(message)
+      const message = "Avatar request failed.";
+      errorMessage.value = message;
+      status.value = "error";
+      throw new Error(message);
     }
 
-    status.value = 'loading'
-    errorMessage.value = null
+    status.value = "loading";
+    errorMessage.value = null;
 
     try {
-      const response = await requestUserAvatar(authStore.authorizationHeader)
-      avatar.value = response
-      status.value = 'ready'
-      return response
+      const response = await requestUserAvatar(authStore.authorizationHeader);
+      avatar.value = response;
+      status.value = "ready";
+      return response;
     } catch (error) {
-      status.value = 'error'
-      errorMessage.value = asErrorMessage(error)
-      throw error
+      status.value = "error";
+      errorMessage.value = asErrorMessage(error);
+      throw error;
     }
   }
 
   async function updateAvatar(payload: UpdateUserAvatarPayload) {
     if (!authStore.authorizationHeader) {
-      const message = 'Avatar request failed.'
-      errorMessage.value = message
-      status.value = 'error'
-      throw new Error(message)
+      const message = "Avatar request failed.";
+      errorMessage.value = message;
+      status.value = "error";
+      throw new Error(message);
     }
 
-    status.value = 'saving'
-    errorMessage.value = null
+    status.value = "saving";
+    errorMessage.value = null;
 
     try {
-      const response = await requestUpdateUserAvatar(authStore.authorizationHeader, payload)
-      avatar.value = response
-      status.value = 'ready'
-      return response
+      const response = await requestUpdateUserAvatar(
+        authStore.authorizationHeader,
+        payload,
+      );
+      avatar.value = response;
+      status.value = "ready";
+      return response;
     } catch (error) {
-      status.value = 'error'
-      errorMessage.value = asErrorMessage(error)
-      throw error
+      status.value = "error";
+      errorMessage.value = asErrorMessage(error);
+      throw error;
     }
   }
 
   async function fetchAvatarAssets() {
     if (!authStore.authorizationHeader) {
-      const message = 'Avatar request failed.'
-      errorMessage.value = message
-      status.value = 'error'
-      throw new Error(message)
+      const message = "Avatar request failed.";
+      errorMessage.value = message;
+      status.value = "error";
+      throw new Error(message);
     }
 
     if (!isSaving.value) {
-      status.value = 'loading'
+      status.value = "loading";
     }
-    errorMessage.value = null
+    errorMessage.value = null;
 
     try {
-      const response = await requestUserAvatarAssets(authStore.authorizationHeader)
-      avatarAssets.value = response
+      const response = await requestUserAvatarAssets(
+        authStore.authorizationHeader,
+      );
+      avatarAssets.value = response;
       if (!isSaving.value) {
-        status.value = 'ready'
+        status.value = "ready";
       }
-      return response
+      return response;
     } catch (error) {
-      status.value = 'error'
-      errorMessage.value = asErrorMessage(error)
-      throw error
+      status.value = "error";
+      errorMessage.value = asErrorMessage(error);
+      throw error;
     }
   }
 
@@ -145,5 +165,5 @@ export const useAvatarStore = defineStore('avatar', () => {
     fetchAvatar,
     fetchAvatarAssets,
     updateAvatar,
-  }
-})
+  };
+});
diff --git a/src/avatar/model/avatar.types.ts b/src/avatar/model/avatar.types.ts
index 1207593d..d2e3ddff 100644
--- a/src/avatar/model/avatar.types.ts
+++ b/src/avatar/model/avatar.types.ts
@@ -1,32 +1,32 @@
 export interface UserAvatar {
-  hatId: string
-  skinColorId: string
-  outfitId: string
+  hatId: string;
+  skinColorId: string;
+  outfitId: string;
 }
 
 export interface UpdateUserAvatarPayload {
-  hatId: string
-  skinColorId: string
-  outfitId: string
+  hatId: string;
+  skinColorId: string;
+  outfitId: string;
 }
 
 export interface AvatarAsset {
-  key: string
-  imageUrl: string
-  label?: string
+  key: string;
+  imageUrl: string;
+  label?: string;
 }
 
 export interface AvatarAssetAvailability {
-  id: string
-  unlocksAtLevel: number
-  unlocked: boolean
+  id: string;
+  unlocksAtLevel: number;
+  unlocked: boolean;
 }
 
 export interface UserAvatarAssets {
-  currentLevel: number
-  hats: AvatarAssetAvailability[]
-  outfits: AvatarAssetAvailability[]
-  skinColors: AvatarAssetAvailability[]
+  currentLevel: number;
+  hats: AvatarAssetAvailability[];
+  outfits: AvatarAssetAvailability[];
+  skinColors: AvatarAssetAvailability[];
 }
 
-export type AvatarStatus = 'idle' | 'loading' | 'saving' | 'ready' | 'error'
+export type AvatarStatus = "idle" | "loading" | "saving" | "ready" | "error";
diff --git a/src/avatar/model/avatarAssets.ts b/src/avatar/model/avatarAssets.ts
index b53b9391..388cf3f6 100644
--- a/src/avatar/model/avatarAssets.ts
+++ b/src/avatar/model/avatarAssets.ts
@@ -1,63 +1,63 @@
-import type { AvatarAsset } from '@/avatar/model/avatar.types'
-import lightSkin from '@/assets/avatar/skin-tones/light.png'
-import darkSkin from '@/assets/avatar/skin-tones/dark.png'
-import eilif from '@/assets/avatar/skin-tones/eilif.png'
-import standardFit from '@/assets/avatar/outfit-styles/standard.png'
-import standardFit2 from '@/assets/avatar/outfit-styles/standard2.png'
-import hat1 from '@/assets/avatar/hats/detective-default.png'
-import hat2 from '@/assets/avatar/hats/wizard-hat.png'
+import type { AvatarAsset } from "@/avatar/model/avatar.types";
+import lightSkin from "@/assets/avatar/skin-tones/light.png";
+import darkSkin from "@/assets/avatar/skin-tones/dark.png";
+import eilif from "@/assets/avatar/skin-tones/eilif.png";
+import standardFit from "@/assets/avatar/outfit-styles/standard.png";
+import standardFit2 from "@/assets/avatar/outfit-styles/standard2.png";
+import hat1 from "@/assets/avatar/hats/detective-default.png";
+import hat2 from "@/assets/avatar/hats/wizard-hat.png";
 
 export const skinToneImageByKey: Record<string, string> = {
   light: lightSkin,
   dark: darkSkin,
   eilif,
-}
+};
 
 export const outfitImageByKey: Record<string, string> = {
   standard: standardFit,
   standard2: standardFit2,
-}
+};
 
 export const hatAssets: AvatarAsset[] = [
   {
-    key: 'detective-default',
+    key: "detective-default",
     imageUrl: hat1,
-    label: 'Top hat',
+    label: "Top hat",
   },
   {
-    key: 'wizard-hat',
+    key: "wizard-hat",
     imageUrl: hat2,
-    label: 'Wizard hat',
+    label: "Wizard hat",
   },
-]
+];
 
 export const outfitAssets: AvatarAsset[] = [
   {
-    key: 'starter',
+    key: "starter",
     imageUrl: standardFit,
-    label: 'Standard outfit',
+    label: "Standard outfit",
   },
   {
-    key: 'standard2',
+    key: "standard2",
     imageUrl: standardFit2,
-    label: 'Standard outfit 2',
+    label: "Standard outfit 2",
   },
-]
+];
 
 export const skinToneAssets: AvatarAsset[] = [
   {
-    key: 'light',
+    key: "light",
     imageUrl: lightSkin,
-    label: 'Light skin tone',
+    label: "Light skin tone",
   },
   {
-    key: 'dark',
+    key: "dark",
     imageUrl: darkSkin,
-    label: 'Dark skin tone',
+    label: "Dark skin tone",
   },
   {
-    key: 'eilif',
+    key: "eilif",
     imageUrl: eilif,
-    label: 'Ginger boy'
-  }
-]
+    label: "Ginger boy",
+  },
+];
diff --git a/src/avatar/pages/AvatarEditPage.vue b/src/avatar/pages/AvatarEditPage.vue
index 6030e7b1..2cba8636 100644
--- a/src/avatar/pages/AvatarEditPage.vue
+++ b/src/avatar/pages/AvatarEditPage.vue
@@ -1,31 +1,37 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useI18n } from 'vue-i18n'
-import { useAvatarStore } from '@/avatar/model/avatar.store'
-import { hatAssets, outfitAssets, skinToneAssets } from '@/avatar/model/avatarAssets'
-import { useAuthStore } from '@/auth/model/auth.store.ts'
-import AvatarComponent from '@/avatar/components/AvatarComponent.vue'
-import AvatarAssetComponent from '@/avatar/components/AvatarAssetComponent.vue'
-import type { AvatarAssetAvailability } from '@/avatar/model/avatar.types'
-
-const avatarStore = useAvatarStore()
-const authStore = useAuthStore()
-const { avatar, avatarAssets } = storeToRefs(avatarStore)
-const { t } = useI18n()
+import { computed, onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import { useI18n } from "vue-i18n";
+import { useAvatarStore } from "@/avatar/model/avatar.store";
+import {
+  hatAssets,
+  outfitAssets,
+  skinToneAssets,
+} from "@/avatar/model/avatarAssets";
+import { useAuthStore } from "@/auth/model/auth.store.ts";
+import AvatarComponent from "@/avatar/components/AvatarComponent.vue";
+import AvatarAssetComponent from "@/avatar/components/AvatarAssetComponent.vue";
+import type { AvatarAssetAvailability } from "@/avatar/model/avatar.types";
+
+const avatarStore = useAvatarStore();
+const authStore = useAuthStore();
+const { avatar, avatarAssets } = storeToRefs(avatarStore);
+const { t } = useI18n();
 
 const displayName = computed(() =>
-  authStore.portalType === 'PUPIL'
-    ? authStore.user?.pupilProfile?.displayName ?? t('avatarEditor.fallbackDisplayName')
-    : t('avatarEditor.fallbackDisplayName'))
+  authStore.portalType === "PUPIL"
+    ? (authStore.user?.pupilProfile?.displayName ??
+      t("avatarEditor.fallbackDisplayName"))
+    : t("avatarEditor.fallbackDisplayName"),
+);
 
 async function ensureAvatarLoaded() {
   if (!avatar.value && !avatarStore.isBusy) {
-    await avatarStore.fetchAvatar()
+    await avatarStore.fetchAvatar();
   }
 
   if (!avatarAssets.value) {
-    await avatarStore.fetchAvatarAssets()
+    await avatarStore.fetchAvatarAssets();
   }
 }
 
@@ -33,109 +39,125 @@ function resolveAssetAvailability(
   options: AvatarAssetAvailability[] | undefined,
   assetId: string,
 ): AvatarAssetAvailability | undefined {
-  return options?.find(option => option.id === assetId)
+  return options?.find((option) => option.id === assetId);
 }
 
-function isAssetLocked(options: AvatarAssetAvailability[] | undefined, assetId: string): boolean {
-  const option = resolveAssetAvailability(options, assetId)
-  return option ? !option.unlocked : true
+function isAssetLocked(
+  options: AvatarAssetAvailability[] | undefined,
+  assetId: string,
+): boolean {
+  const option = resolveAssetAvailability(options, assetId);
+  return option ? !option.unlocked : true;
 }
 
-function getLockedText(options: AvatarAssetAvailability[] | undefined, assetId: string): string | null {
-  const option = resolveAssetAvailability(options, assetId)
+function getLockedText(
+  options: AvatarAssetAvailability[] | undefined,
+  assetId: string,
+): string | null {
+  const option = resolveAssetAvailability(options, assetId);
   if (!option || option.unlocked) {
-    return null
+    return null;
   }
 
-  return t('avatarEditor.unlocksAtLevel', { level: option.unlocksAtLevel })
+  return t("avatarEditor.unlocksAtLevel", { level: option.unlocksAtLevel });
 }
 
 async function selectSkinTone(skinTone: string) {
-  await ensureAvatarLoaded()
+  await ensureAvatarLoaded();
   if (
     !avatar.value ||
     avatar.value.skinColorId === skinTone ||
     isAssetLocked(avatarAssets.value?.skinColors, skinTone)
   ) {
-    return
+    return;
   }
 
   await avatarStore.updateAvatar({
-    hatId: avatar.value.hatId || 'detective-default',
+    hatId: avatar.value.hatId || "detective-default",
     skinColorId: skinTone,
     outfitId: avatar.value.outfitId,
-  })
+  });
 }
 
 async function selectOutfitStyle(outfitStyle: string) {
-  await ensureAvatarLoaded()
+  await ensureAvatarLoaded();
   if (
     !avatar.value ||
     avatar.value.outfitId === outfitStyle ||
     isAssetLocked(avatarAssets.value?.outfits, outfitStyle)
   ) {
-    return
+    return;
   }
 
   await avatarStore.updateAvatar({
-    hatId: avatar.value.hatId || 'detective-default',
+    hatId: avatar.value.hatId || "detective-default",
     skinColorId: avatar.value.skinColorId,
     outfitId: outfitStyle,
-  })
+  });
 }
 
 async function selectHat(hatId: string) {
-  await ensureAvatarLoaded()
+  await ensureAvatarLoaded();
   if (
     !avatar.value ||
     avatar.value.hatId === hatId ||
     isAssetLocked(avatarAssets.value?.hats, hatId)
   ) {
-    return
+    return;
   }
 
   await avatarStore.updateAvatar({
     hatId,
     skinColorId: avatar.value.skinColorId,
     outfitId: avatar.value.outfitId,
-  })
+  });
 }
 
 onMounted(() => {
-  void ensureAvatarLoaded().catch(() => {})
-})
+  void ensureAvatarLoaded().catch(() => {});
+});
 </script>
 
 <template>
   <div class="flex h-screen w-full items-center justify-center gap-12">
     <div>
-      <AvatarComponent size="30rem"/>
+      <AvatarComponent size="30rem" />
     </div>
     <div class="flex flex-col gap-6">
-      <h2 class="text-[4rem]">{{ t('avatarEditor.detectiveName', { name: displayName }) }}</h2>
+      <h2 class="text-[4rem]">
+        {{ t("avatarEditor.detectiveName", { name: displayName }) }}
+      </h2>
 
       <div class="flex flex-col gap-4">
-        <h3>{{ t('avatarEditor.sections.skinColor') }}</h3>
+        <h3>{{ t("avatarEditor.sections.skinColor") }}</h3>
         <div class="flex flex-wrap gap-4">
           <AvatarAssetComponent
             v-for="skinToneAsset in skinToneAssets"
             :key="skinToneAsset.key"
             :avatar-asset="skinToneAsset"
-            :disabled="avatarStore.isBusy || isAssetLocked(avatarAssets?.skinColors, skinToneAsset.key)"
-            :lock-text="getLockedText(avatarAssets?.skinColors, skinToneAsset.key)"
+            :disabled="
+              avatarStore.isBusy ||
+              isAssetLocked(avatarAssets?.skinColors, skinToneAsset.key)
+            "
+            :lock-text="
+              getLockedText(avatarAssets?.skinColors, skinToneAsset.key)
+            "
             :is-selected="avatar?.skinColorId === skinToneAsset.key"
             @select="void selectSkinTone(skinToneAsset.key)"
           />
         </div>
       </div>
       <div class="flex flex-col gap-4">
-        <h3>{{ t('avatarEditor.sections.hats') }}</h3>
+        <h3>{{ t("avatarEditor.sections.hats") }}</h3>
         <div class="flex flex-wrap gap-4">
           <AvatarAssetComponent
             v-for="hatAsset in hatAssets"
             :key="hatAsset.key"
             :avatar-asset="hatAsset"
-            :disabled="avatarStore.isBusy || isAssetLocked(avatarAssets?.hats, hatAsset.key)"
+            :disabled="
+              avatarStore.isBusy ||
+              isAssetLocked(avatarAssets?.hats, hatAsset.key)
+            "
             :lock-text="getLockedText(avatarAssets?.hats, hatAsset.key)"
             :is-selected="avatar?.hatId === hatAsset.key"
             @select="void selectHat(hatAsset.key)"
@@ -143,20 +165,25 @@ onMounted(() => {
         </div>
       </div>
       <div class="flex flex-col gap-4">
-        <h3>{{ t('avatarEditor.sections.outfits') }}</h3>
+        <h3>{{ t("avatarEditor.sections.outfits") }}</h3>
         <div class="flex flex-wrap gap-4">
           <AvatarAssetComponent
             v-for="outfitAsset in outfitAssets"
             :key="outfitAsset.key"
             :avatar-asset="outfitAsset"
-            :disabled="avatarStore.isBusy || isAssetLocked(avatarAssets?.outfits, outfitAsset.key)"
+            :disabled="
+              avatarStore.isBusy ||
+              isAssetLocked(avatarAssets?.outfits, outfitAsset.key)
+            "
             :lock-text="getLockedText(avatarAssets?.outfits, outfitAsset.key)"
             :is-selected="avatar?.outfitId === outfitAsset.key"
             @select="void selectOutfitStyle(outfitAsset.key)"
           />
         </div>
       </div>
-      <p v-if="avatarStore.errorMessage" class="m-0 text-[#9a1f1f]">{{ avatarStore.errorMessage }}</p>
+      <p v-if="avatarStore.errorMessage" class="m-0 text-[#9a1f1f]">
+        {{ avatarStore.errorMessage }}
+      </p>
     </div>
   </div>
 </template>
diff --git a/src/avatar/routes.ts b/src/avatar/routes.ts
index d7133653..ce0358dc 100644
--- a/src/avatar/routes.ts
+++ b/src/avatar/routes.ts
@@ -1,15 +1,15 @@
-import type { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from "vue-router";
 
-import AvatarEditPage from '@/avatar/pages/AvatarEditPage.vue'
+import AvatarEditPage from "@/avatar/pages/AvatarEditPage.vue";
 
 export const avatarRoutes: RouteRecordRaw[] = [
   {
-    path: 'avatar',
-    name: 'avatar-edit',
+    path: "avatar",
+    name: "avatar-edit",
     component: AvatarEditPage,
     meta: {
       allowIncompleteOnboarding: true,
-      backTarget: { name: 'pupil-profile' },
+      backTarget: { name: "pupil-profile" },
     },
   },
-]
+];
diff --git a/src/classrooms/_tests_/classrooms.store.spec.ts b/src/classrooms/_tests_/classrooms.store.spec.ts
index 4d3fb17d..57ddeabf 100644
--- a/src/classrooms/_tests_/classrooms.store.spec.ts
+++ b/src/classrooms/_tests_/classrooms.store.spec.ts
@@ -74,15 +74,13 @@ describe("classrooms store", () => {
   it("joins classroom", async () => {
     mockAuth();
 
-    const spy = vi
-      .spyOn(api, "requestJoinClassroom")
-      .mockResolvedValue({
-        classroomId: 1,
-        title: "Joined",
-        description: "",
-        teacherEmails: [],
-        joinCode: "ABC123",
-      });
+    const spy = vi.spyOn(api, "requestJoinClassroom").mockResolvedValue({
+      classroomId: 1,
+      title: "Joined",
+      description: "",
+      teacherEmails: [],
+      joinCode: "ABC123",
+    });
 
     const store = useClassroomsStore();
 
@@ -104,7 +102,6 @@ describe("classrooms store", () => {
     expect(store.errorMessage).toBe("fail");
   });
 
-
   it("handles join classroom error", async () => {
     mockAuth();
 
@@ -119,8 +116,24 @@ describe("classrooms store", () => {
     mockAuth();
 
     vi.spyOn(api, "requestGetClassrooms")
-    .mockResolvedValueOnce([{ classroomId: 1, title: "Old", description: "", teacherEmails: [], joinCode: "A" }])
-    .mockResolvedValueOnce([{ classroomId: 2, title: "New", description: "", teacherEmails: [], joinCode: "B" }]);
+      .mockResolvedValueOnce([
+        {
+          classroomId: 1,
+          title: "Old",
+          description: "",
+          teacherEmails: [],
+          joinCode: "A",
+        },
+      ])
+      .mockResolvedValueOnce([
+        {
+          classroomId: 2,
+          title: "New",
+          description: "",
+          teacherEmails: [],
+          joinCode: "B",
+        },
+      ]);
 
     const store = useClassroomsStore();
 
diff --git a/src/classrooms/_tests_/teacher-routing.spec.ts b/src/classrooms/_tests_/teacher-routing.spec.ts
index 9afae919..621decc0 100644
--- a/src/classrooms/_tests_/teacher-routing.spec.ts
+++ b/src/classrooms/_tests_/teacher-routing.spec.ts
@@ -68,6 +68,8 @@ describe("teacher classroom navigation", () => {
     await router.push("/teacher/classrooms/7/moderation");
     await router.isReady();
 
-    expect(router.currentRoute.value.fullPath).toBe("/teacher/classrooms/7/moderation");
+    expect(router.currentRoute.value.fullPath).toBe(
+      "/teacher/classrooms/7/moderation",
+    );
   });
 });
diff --git a/src/classrooms/api/classrooms.api.ts b/src/classrooms/api/classrooms.api.ts
index d6baf640..efb4ed51 100644
--- a/src/classrooms/api/classrooms.api.ts
+++ b/src/classrooms/api/classrooms.api.ts
@@ -1,6 +1,9 @@
 import { fetchJson } from "@/auth/api/auth.api";
 
-const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
+const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? "").replace(
+  /\/$/,
+  "",
+);
 const CLASSROOMS_BASE = `${API_BASE_URL}/api/v1/classrooms`;
 
 export type CreateClassroomRequest = {
@@ -38,7 +41,7 @@ export type ClassroomResponse = {
   description?: string;
   teacherEmails: string[];
   joinCode: string;
-}
+};
 
 export type Classroom = {
   classroomId: number;
@@ -255,18 +258,18 @@ export function requestUpdateClassroom(
 }
 
 export function getClassroomDetail(
-    classroomId: number,
-    authorizationHeader: string,
+  classroomId: number,
+  authorizationHeader: string,
 ): Promise<ClassroomDetailResponse> {
   return fetchClassroomJson<ClassroomDetailResponse>(
-      `/${classroomId}`,
-      authorizationHeader,
+    `/${classroomId}`,
+    authorizationHeader,
   );
 }
 
 async function fetchClassroomJson<T>(
-    path: string,
-    authorizationHeader: string,
+  path: string,
+  authorizationHeader: string,
 ): Promise<T> {
   const response = await fetch(`${CLASSROOMS_BASE}${path}`, {
     headers: {
@@ -276,7 +279,7 @@ async function fetchClassroomJson<T>(
   });
 
   if (!response.ok) {
-    throw new Error;
+    throw new Error();
   }
 
   return (await response.json()) as T;
@@ -288,7 +291,10 @@ export async function getPupilsForClassroom(
 ): Promise<ClassroomPupil[]> {
   const numericClassroomId = Number(classroomId);
   if (authorizationHeader && Number.isFinite(numericClassroomId)) {
-    const classroom = await getClassroomDetail(numericClassroomId, authorizationHeader);
+    const classroom = await getClassroomDetail(
+      numericClassroomId,
+      authorizationHeader,
+    );
 
     return classroom.pupils.map((pupil) => ({
       userId: String(pupil.userId),
@@ -303,27 +309,27 @@ export async function getPupilsForClassroom(
 }
 
 export function requestRemovePupil(
-    authorizationHeader: string,
-    classroomId: number,
-    pupilId: number,
+  authorizationHeader: string,
+  classroomId: number,
+  pupilId: number,
 ) {
   return fetchJson<void>(
-      `${CLASSROOMS_BASE}/${classroomId}/pupils/${pupilId}`,
-      {
-        method: "DELETE",
-        headers: {
-          Authorization: authorizationHeader,
-        },
+    `${CLASSROOMS_BASE}/${classroomId}/pupils/${pupilId}`,
+    {
+      method: "DELETE",
+      headers: {
+        Authorization: authorizationHeader,
       },
+    },
   );
 }
 
 export async function getClassrooms(
-    authorizationHeader: string,
+  authorizationHeader: string,
 ): Promise<Classroom[]> {
   const classrooms = await fetchClassroomJson<OwnedClassroomResponse[]>(
-      "/owned",
-      authorizationHeader,
+    "/owned",
+    authorizationHeader,
   );
 
   return classrooms.map((c) => ({
@@ -336,5 +342,3 @@ export async function getClassrooms(
     taskCount: c.taskCount,
   }));
 }
-
-
diff --git a/src/classrooms/components/ClassroomTable.vue b/src/classrooms/components/ClassroomTable.vue
index f07ed142..09fa3341 100644
--- a/src/classrooms/components/ClassroomTable.vue
+++ b/src/classrooms/components/ClassroomTable.vue
@@ -10,12 +10,12 @@ const store = useClassroomsStore();
 onMounted(() => {
   store.fetchClassrooms();
 });
-
 </script>
 
 <template>
-  <div class ="mx-auto max-h-170 w-full max-w-7xl overflow-y-auto bg-white drop-shadow-lg scrollbar-thin">
-
+  <div
+    class="mx-auto max-h-170 w-full max-w-7xl overflow-y-auto bg-white drop-shadow-lg scrollbar-thin"
+  >
     <div v-if="store.isLoading" class="p-4 text-gray-500">
       Loading classrooms...
     </div>
@@ -26,17 +26,17 @@ onMounted(() => {
 
     <table class="min-w-full">
       <thead class="sticky top-0 z-10 bg-gray-100">
-      <tr>
-        <th class="px-4 py-2 text-left">
-          {{  t("classroomTable.classroom") }}
-        </th>
-        <th class="px py-2 text-left">
-          {{ t("classroomTable.description") }}
-        </th>
-        <th class="px-4 py-2 text-left">
-          {{ t("classroomTable.joinCode") }}
-        </th>
-        <!-- NOTE:
+        <tr>
+          <th class="px-4 py-2 text-left">
+            {{ t("classroomTable.classroom") }}
+          </th>
+          <th class="px py-2 text-left">
+            {{ t("classroomTable.description") }}
+          </th>
+          <th class="px-4 py-2 text-left">
+            {{ t("classroomTable.joinCode") }}
+          </th>
+          <!-- NOTE:
             The following columns were removed because they are not currently available in ClassroomResponse:
             - pupils count
             - pending pupils
@@ -44,59 +44,59 @@ onMounted(() => {
             - tasks count
           -->
 
-        <th class="px-4 py-2 text-left">
-          {{ t("classroomTable.teachers") }}
-        </th>
+          <th class="px-4 py-2 text-left">
+            {{ t("classroomTable.teachers") }}
+          </th>
 
-        <th class="px-4 py-2 text-left">
-          {{ t("classroomTable.action") }}
-        </th>
-      </tr>
+          <th class="px-4 py-2 text-left">
+            {{ t("classroomTable.action") }}
+          </th>
+        </tr>
       </thead>
 
       <tbody>
-      <tr
+        <tr
           v-for="classroom in store.classrooms"
           :key="classroom.classroomId"
           class="border-b hover:bg-gray-100"
-          >
-        <td class="px-4 py-3">
-          <RouterLink
-            class="font-medium hover:underline"
-            :to="{
-            name: 'teacher-classroom-details',
-            params: { classroomId: classroom.classroomId }
-            }"
+        >
+          <td class="px-4 py-3">
+            <RouterLink
+              class="font-medium hover:underline"
+              :to="{
+                name: 'teacher-classroom-details',
+                params: { classroomId: classroom.classroomId },
+              }"
             >
-            {{ classroom.title }}
-          </RouterLink>
-        </td>
+              {{ classroom.title }}
+            </RouterLink>
+          </td>
 
-        <td class="px-4 py-3">
-          {{ classroom.description || "-" }}
-        </td>
+          <td class="px-4 py-3">
+            {{ classroom.description || "-" }}
+          </td>
 
-        <td class="px-4 py-3 font-mono tracking-widest">
-          {{ classroom.joinCode }}
-        </td>
+          <td class="px-4 py-3 font-mono tracking-widest">
+            {{ classroom.joinCode }}
+          </td>
 
-        <td class="px-4 py-3">
-          {{ classroom.teacherEmails?.join(", ") || "-" }}
-        </td>
+          <td class="px-4 py-3">
+            {{ classroom.teacherEmails?.join(", ") || "-" }}
+          </td>
 
-        <td class="px-4 py-3 text-right">
-          <RouterLink
+          <td class="px-4 py-3 text-right">
+            <RouterLink
               class="rounded bg-gray-800 px-3 py-1 text-white hover:bg-gray-700"
               :to="{
                 name: 'teacher-classroom-details',
                 params: { classroomId: classroom.classroomId },
               }"
-          >
-            {{ t("classroomTable.open") }}
-          </RouterLink>
-        </td>
-      </tr>
+            >
+              {{ t("classroomTable.open") }}
+            </RouterLink>
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/classrooms/components/PupilTable.vue b/src/classrooms/components/PupilTable.vue
index a15aa5eb..86a36317 100644
--- a/src/classrooms/components/PupilTable.vue
+++ b/src/classrooms/components/PupilTable.vue
@@ -18,58 +18,61 @@ const pupils = computed(() => {
 });
 
 const sortedPupils = computed(() =>
-    pupils.value.slice().sort((a, b) => a.displayName.localeCompare(b.displayName)),
+  pupils.value
+    .slice()
+    .sort((a, b) => a.displayName.localeCompare(b.displayName)),
 );
 
 // NOTE:
 // score / xp / level / avatar are not currently available in ClassroomDetailResponse.
 
-
 async function removePupil(pupilId: number) {
   await store.removePupil(classroomId, pupilId);
 }
 </script>
 
 <template>
-  <div class="mx-auto w-full max-h-170 max-w-7xl overflow-y-auto bg-white drop-shadow-lg scrollbar-thin">
+  <div
+    class="mx-auto w-full max-h-170 max-w-7xl overflow-y-auto bg-white drop-shadow-lg scrollbar-thin"
+  >
     <table class="min-w-full">
       <thead class="sticky top-0 z-10 bg-gray-100">
-      <tr>
-        <th class="px-4 py-2 text-left">
-          {{ t("pupilTable.name") }}
-        </th>
-        <!-- NOT AVAILABLE IN CURRENT API -->
-        <!--
+        <tr>
+          <th class="px-4 py-2 text-left">
+            {{ t("pupilTable.name") }}
+          </th>
+          <!-- NOT AVAILABLE IN CURRENT API -->
+          <!--
         <th class="px-4 py-2 text-left">{{ t("pupilTable.score") }}</th>
         <th class="px-4 py-2 text-left">{{ t("pupilTable.xp") }}</th>
         <th class="px-4 py-2 text-left">{{ t("pupilTable.level") }}</th>
         -->
-        <th class="px-4 py-2 text-right">
-          {{ t("pupilTable.actions") }}
-        </th>
-      </tr>
+          <th class="px-4 py-2 text-right">
+            {{ t("pupilTable.actions") }}
+          </th>
+        </tr>
       </thead>
 
       <tbody>
-      <tr
-        v-for="pupil in sortedPupils"
-        :key="pupil.userId"
-        class="border-b hover:bg-gray-100"
+        <tr
+          v-for="pupil in sortedPupils"
+          :key="pupil.userId"
+          class="border-b hover:bg-gray-100"
         >
-        <td class="border-gray-200 px-4 py-2">
-          <RouterLink
-            class="flex items-center gap-3 font-medium hover:underline"
-            :to="{
-            name: 'classroom-pupil-progress',
-            params: {
-              classroomId,
-              pupilId: pupil.userId,
-            },
-            }"
+          <td class="border-gray-200 px-4 py-2">
+            <RouterLink
+              class="flex items-center gap-3 font-medium hover:underline"
+              :to="{
+                name: 'classroom-pupil-progress',
+                params: {
+                  classroomId,
+                  pupilId: pupil.userId,
+                },
+              }"
             >
-            {{ pupil.displayName }}
-          </RouterLink>
-        </td>
+              {{ pupil.displayName }}
+            </RouterLink>
+          </td>
 
           <td class="px-4 py-3 text-right">
             <div class="flex justify-end gap-2">
@@ -82,17 +85,17 @@ async function removePupil(pupilId: number) {
               >
                 {{ t("pupilTable.seeNotebook") }}
               </RouterLink>
-            <button
-              type="button"
-              class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700"
-              @click="removePupil(pupil.userId)"
-            >
-              {{ t("pupilTable.remove") }}
-            </button>
+              <button
+                type="button"
+                class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700"
+                @click="removePupil(pupil.userId)"
+              >
+                {{ t("pupilTable.remove") }}
+              </button>
             </div>
           </td>
         </tr>
       </tbody>
     </table>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/classrooms/components/__tests__/PupilTable.spec.ts b/src/classrooms/components/__tests__/PupilTable.spec.ts
index 095b84f1..e3393589 100644
--- a/src/classrooms/components/__tests__/PupilTable.spec.ts
+++ b/src/classrooms/components/__tests__/PupilTable.spec.ts
@@ -1,80 +1,80 @@
-import { flushPromises, mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import { createMemoryHistory, createRouter } from 'vue-router'
-import { describe, expect, it, vi } from 'vitest'
-import { createAppI18n } from '@/app/i18n'
-import { useAuthStore } from '@/auth/model/auth.store'
-import PupilTable from '@/classrooms/components/PupilTable.vue'
+import { flushPromises, mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
+import { createMemoryHistory, createRouter } from "vue-router";
+import { describe, expect, it, vi } from "vitest";
+import { createAppI18n } from "@/app/i18n";
+import { useAuthStore } from "@/auth/model/auth.store";
+import PupilTable from "@/classrooms/components/PupilTable.vue";
 
-vi.mock('@/classrooms/store/classrooms.store.ts', () => ({
+vi.mock("@/classrooms/store/classrooms.store.ts", () => ({
   useClassroomsStore: () => ({
     selectedClassroom: {
       pupils: [
         {
           userId: 15,
-          displayName: 'Ada',
+          displayName: "Ada",
         },
       ],
     },
     fetchClassroomById: vi.fn(),
     removePupil: vi.fn(),
   }),
-}))
+}));
 
-describe('PupilTable', () => {
-  it('renders a notebook action with classroom and pupil route params', async () => {
-    const pinia = createPinia()
-    setActivePinia(pinia)
+describe("PupilTable", () => {
+  it("renders a notebook action with classroom and pupil route params", async () => {
+    const pinia = createPinia();
+    setActivePinia(pinia);
 
-    const authStore = useAuthStore(pinia)
-    authStore.status = 'authenticated'
-    authStore.accessToken = 'access-token'
+    const authStore = useAuthStore(pinia);
+    authStore.status = "authenticated";
+    authStore.accessToken = "access-token";
     authStore.user = {
-      subject: 'teacher-1',
-      portalType: 'TEACHER',
-      email: 'teacher@example.com',
+      subject: "teacher-1",
+      portalType: "TEACHER",
+      email: "teacher@example.com",
       username: null,
       authorities: [],
       pupilProfile: null,
       teacherProfile: null,
-    }
+    };
 
     const router = createRouter({
       history: createMemoryHistory(),
       routes: [
         {
-          path: '/teacher/classrooms/:classroomId/pupils',
+          path: "/teacher/classrooms/:classroomId/pupils",
           component: PupilTable,
         },
         {
-          path: '/teacher/classrooms/:classroomId/pupils/:pupilId/notebook',
-          name: 'classroom-pupil-notebook',
-          component: { template: '<div />' },
+          path: "/teacher/classrooms/:classroomId/pupils/:pupilId/notebook",
+          name: "classroom-pupil-notebook",
+          component: { template: "<div />" },
         },
         {
-          path: '/teacher/classrooms/:classroomId/pupils/:pupilId',
-          name: 'classroom-pupil-progress',
-          component: { template: '<div />' },
+          path: "/teacher/classrooms/:classroomId/pupils/:pupilId",
+          name: "classroom-pupil-progress",
+          component: { template: "<div />" },
         },
       ],
-    })
+    });
 
-    await router.push('/teacher/classrooms/7/pupils')
-    await router.isReady()
+    await router.push("/teacher/classrooms/7/pupils");
+    await router.isReady();
 
     const wrapper = mount(PupilTable, {
       global: {
         plugins: [pinia, router, createAppI18n()],
       },
-    })
+    });
 
-    await flushPromises()
+    await flushPromises();
 
-    const links = wrapper.findAll('a')
-    const notebookLink = links[1]
+    const links = wrapper.findAll("a");
+    const notebookLink = links[1];
 
-    expect(notebookLink?.attributes('href')).toBe(
-        '/teacher/classrooms/7/pupils/15/notebook'
-    )
-  })
-})
\ No newline at end of file
+    expect(notebookLink?.attributes("href")).toBe(
+      "/teacher/classrooms/7/pupils/15/notebook",
+    );
+  });
+});
diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index 065da2db..c18d2301 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -46,54 +46,54 @@ onMounted(() => {
 
     <div class="mx-auto grid max-w-7xl grid-cols-2 gap-6">
       <ClassroomCard
-          :title="t('classroomDetails.pupilOverview.title')"
-          :description="t('classroomDetails.pupilOverview.description')"
-          :to="{
+        :title="t('classroomDetails.pupilOverview.title')"
+        :description="t('classroomDetails.pupilOverview.description')"
+        :to="{
           name: 'classroom-pupils',
           params: { classroomId },
         }"
       />
 
       <ClassroomCard
-          :title="t('classroomDetails.taskOverview.title')"
-          :description="t('classroomDetails.taskOverview.description')"
-          :to="{
+        :title="t('classroomDetails.taskOverview.title')"
+        :description="t('classroomDetails.taskOverview.description')"
+        :to="{
           name: 'classroom-tasks',
           params: { classroomId },
         }"
       />
 
       <ClassroomCard
-          :title="t('classroomDetails.mysteryOverview.title')"
-          :description="t('classroomDetails.mysteryOverview.description')"
-          :to="{
+        :title="t('classroomDetails.mysteryOverview.title')"
+        :description="t('classroomDetails.mysteryOverview.description')"
+        :to="{
           name: 'classroom-mystery',
           params: { classroomId },
         }"
       />
 
       <ClassroomCard
-          :title="t('classroomDetails.gameOverview.title')"
-          :description="t('classroomDetails.gameOverview.description')"
-          :to="{
+        :title="t('classroomDetails.gameOverview.title')"
+        :description="t('classroomDetails.gameOverview.description')"
+        :to="{
           name: 'teacher-playtest-map',
           params: { classroomId },
         }"
       />
 
       <ClassroomCard
-          :title="t('classroomDetails.notificationOverview.title')"
-          :description="t('classroomDetails.notificationOverview.description')"
-          :to="{
+        :title="t('classroomDetails.notificationOverview.title')"
+        :description="t('classroomDetails.notificationOverview.description')"
+        :to="{
           name: 'classroom-notifications',
           params: { classroomId },
         }"
       />
 
       <ClassroomCard
-          :title="t('classroomDetails.moderationOverview.title')"
-          :description="t('classroomDetails.moderationOverview.description')"
-          :to="{
+        :title="t('classroomDetails.moderationOverview.title')"
+        :description="t('classroomDetails.moderationOverview.description')"
+        :to="{
           name: 'classroom-moderation',
           params: { classroomId },
         }"
diff --git a/src/classrooms/pages/ClassroomModerationPage.vue b/src/classrooms/pages/ClassroomModerationPage.vue
index 58fab27d..b34bc634 100644
--- a/src/classrooms/pages/ClassroomModerationPage.vue
+++ b/src/classrooms/pages/ClassroomModerationPage.vue
@@ -1,141 +1,146 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useAuthStore } from '@/auth/model/auth.store'
+import { computed, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { useAuthStore } from "@/auth/model/auth.store";
 import {
   requestCreateTeacherClassroomBannedWord,
   requestDeleteTeacherClassroomBannedWord,
   requestTeacherClassroomBannedWords,
   requestUpdateTeacherClassroomBannedWord,
   type ClassroomBannedWordResponse,
-} from '@/shared/moderation/moderation.api'
-import { useProfanityFilter } from '@/shared/composables/useProfanityFilter'
+} from "@/shared/moderation/moderation.api";
+import { useProfanityFilter } from "@/shared/composables/useProfanityFilter";
 
-const route = useRoute()
-const { t } = useI18n()
-const authStore = useAuthStore()
+const route = useRoute();
+const { t } = useI18n();
+const authStore = useAuthStore();
 
-const classroomId = computed(() => Number(route.params.classroomId))
-const bannedWords = ref<ClassroomBannedWordResponse[]>([])
-const status = ref<'idle' | 'loading' | 'saving' | 'ready' | 'error'>('idle')
-const errorMessage = ref<string | null>(null)
-const newWord = ref('')
-const editingId = ref<number | null>(null)
-const editingWord = ref('')
+const classroomId = computed(() => Number(route.params.classroomId));
+const bannedWords = ref<ClassroomBannedWordResponse[]>([]);
+const status = ref<"idle" | "loading" | "saving" | "ready" | "error">("idle");
+const errorMessage = ref<string | null>(null);
+const newWord = ref("");
+const editingId = ref<number | null>(null);
+const editingWord = ref("");
 
-const { hasProfanity } = useProfanityFilter()
+const { hasProfanity } = useProfanityFilter();
 
-const authorizationHeader = computed(() => authStore.authorizationHeader)
+const authorizationHeader = computed(() => authStore.authorizationHeader);
 
 async function loadBannedWords() {
   if (!authorizationHeader.value || !Number.isFinite(classroomId.value)) {
-    status.value = 'error'
-    errorMessage.value = t('classroomModeration.errors.load')
-    return
+    status.value = "error";
+    errorMessage.value = t("classroomModeration.errors.load");
+    return;
   }
 
-  status.value = 'loading'
-  errorMessage.value = null
+  status.value = "loading";
+  errorMessage.value = null;
 
   try {
-    bannedWords.value = await requestTeacherClassroomBannedWords(classroomId.value, authorizationHeader.value)
-    status.value = 'ready'
+    bannedWords.value = await requestTeacherClassroomBannedWords(
+      classroomId.value,
+      authorizationHeader.value,
+    );
+    status.value = "ready";
   } catch (error) {
-    status.value = 'error'
+    status.value = "error";
     errorMessage.value =
       error instanceof Error && error.message.trim().length > 0
         ? error.message
-        : t('classroomModeration.errors.load')
+        : t("classroomModeration.errors.load");
   }
 }
 
 function normalizeWord(word: string) {
-  return word.trim().toLowerCase()
+  return word.trim().toLowerCase();
 }
 
 function startEditing(entry: ClassroomBannedWordResponse) {
-  editingId.value = entry.id
-  editingWord.value = entry.word
-  errorMessage.value = null
+  editingId.value = entry.id;
+  editingWord.value = entry.word;
+  errorMessage.value = null;
 }
 
 function cancelEditing() {
-  editingId.value = null
-  editingWord.value = ''
+  editingId.value = null;
+  editingWord.value = "";
 }
 
 async function createWord() {
   if (!authorizationHeader.value || !Number.isFinite(classroomId.value)) {
-    return
+    return;
   }
 
-  const normalizedWord = normalizeWord(newWord.value)
+  const normalizedWord = normalizeWord(newWord.value);
   if (!normalizedWord) {
-    errorMessage.value = t('classroomModeration.errors.missingWord')
-    return
+    errorMessage.value = t("classroomModeration.errors.missingWord");
+    return;
   }
 
   // check if already banned
   if (hasProfanity(normalizedWord)) {
-    errorMessage.value = t('classroomModeration.errors.alreadyBlockedGlobally')
-    return
+    errorMessage.value = t("classroomModeration.errors.alreadyBlockedGlobally");
+    return;
   }
 
   // avoid duplicates
-  if (bannedWords.value.some(w => normalizeWord(w.word) === normalizedWord)) {
-    errorMessage.value = t('classroomModeration.errors.duplicateWord')
-    return
+  if (bannedWords.value.some((w) => normalizeWord(w.word) === normalizedWord)) {
+    errorMessage.value = t("classroomModeration.errors.duplicateWord");
+    return;
   }
 
-  status.value = 'saving'
-  errorMessage.value = null
+  status.value = "saving";
+  errorMessage.value = null;
 
   try {
     const created = await requestCreateTeacherClassroomBannedWord(
       classroomId.value,
       authorizationHeader.value,
       normalizedWord,
-    )
-    bannedWords.value = [...bannedWords.value, created].sort((left, right) => left.word.localeCompare(right.word))
-    newWord.value = ''
-    status.value = 'ready'
+    );
+    bannedWords.value = [...bannedWords.value, created].sort((left, right) =>
+      left.word.localeCompare(right.word),
+    );
+    newWord.value = "";
+    status.value = "ready";
   } catch (error) {
-    status.value = 'error'
+    status.value = "error";
     errorMessage.value =
       error instanceof Error && error.message.trim().length > 0
         ? error.message
-        : t('classroomModeration.errors.create')
+        : t("classroomModeration.errors.create");
   }
 }
 
 async function saveWord(entryId: number) {
   if (!authorizationHeader.value || !Number.isFinite(classroomId.value)) {
-    return
+    return;
   }
 
-  const normalizedWord = editingWord.value.trim()
+  const normalizedWord = editingWord.value.trim();
   if (!normalizedWord) {
-    errorMessage.value = t('classroomModeration.errors.missingWord')
-    return
+    errorMessage.value = t("classroomModeration.errors.missingWord");
+    return;
   }
 
   if (hasProfanity(normalizedWord)) {
-    errorMessage.value = t('classroomModeration.errors.alreadyBlockedGlobally')
-    return
+    errorMessage.value = t("classroomModeration.errors.alreadyBlockedGlobally");
+    return;
   }
 
   if (
-      bannedWords.value.some(
-          w => w.id !== entryId && normalizeWord(w.word) === normalizedWord
-      )
+    bannedWords.value.some(
+      (w) => w.id !== entryId && normalizeWord(w.word) === normalizedWord,
+    )
   ) {
-    errorMessage.value = t('classroomModeration.errors.duplicateWord')
-    return
+    errorMessage.value = t("classroomModeration.errors.duplicateWord");
+    return;
   }
 
-  status.value = 'saving'
-  errorMessage.value = null
+  status.value = "saving";
+  errorMessage.value = null;
 
   try {
     const updated = await requestUpdateTeacherClassroomBannedWord(
@@ -143,70 +148,80 @@ async function saveWord(entryId: number) {
       entryId,
       authorizationHeader.value,
       normalizedWord,
-    )
+    );
     bannedWords.value = bannedWords.value
       .map((entry) => (entry.id === entryId ? updated : entry))
-      .sort((left, right) => left.word.localeCompare(right.word))
-    cancelEditing()
-    status.value = 'ready'
+      .sort((left, right) => left.word.localeCompare(right.word));
+    cancelEditing();
+    status.value = "ready";
   } catch (error) {
-    status.value = 'error'
+    status.value = "error";
     errorMessage.value =
       error instanceof Error && error.message.trim().length > 0
         ? error.message
-        : t('classroomModeration.errors.update')
+        : t("classroomModeration.errors.update");
   }
 }
 
 async function deleteWord(entryId: number) {
   if (!authorizationHeader.value || !Number.isFinite(classroomId.value)) {
-    return
+    return;
   }
 
-  status.value = 'saving'
-  errorMessage.value = null
+  status.value = "saving";
+  errorMessage.value = null;
 
   try {
     await requestDeleteTeacherClassroomBannedWord(
       classroomId.value,
       entryId,
       authorizationHeader.value,
-    )
-    bannedWords.value = bannedWords.value.filter((entry) => entry.id !== entryId)
+    );
+    bannedWords.value = bannedWords.value.filter(
+      (entry) => entry.id !== entryId,
+    );
     if (editingId.value === entryId) {
-      cancelEditing()
+      cancelEditing();
     }
-    status.value = 'ready'
+    status.value = "ready";
   } catch (error) {
-    status.value = 'error'
+    status.value = "error";
     errorMessage.value =
       error instanceof Error && error.message.trim().length > 0
         ? error.message
-        : t('classroomModeration.errors.delete')
+        : t("classroomModeration.errors.delete");
   }
 }
 
 onMounted(() => {
-  void loadBannedWords()
-})
+  void loadBannedWords();
+});
 </script>
 
 <template>
-  <main class="mx-auto flex min-h-screen w-full max-w-5xl flex-col gap-6 px-6 py-10 pt-30">
+  <main
+    class="mx-auto flex min-h-screen w-full max-w-5xl flex-col gap-6 px-6 py-10 pt-30"
+  >
     <header class="space-y-2">
       <h1 class="text-4xl font-extrabold text-zinc-900">
-        {{ t('classroomModeration.title') }}
+        {{ t("classroomModeration.title") }}
       </h1>
       <p class="max-w-2xl text-sm text-zinc-600">
-        {{ t('classroomModeration.description') }}
+        {{ t("classroomModeration.description") }}
       </p>
     </header>
 
     <section class="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm">
-      <form class="flex flex-col gap-3 sm:flex-row" @submit.prevent="createWord">
+      <form
+        class="flex flex-col gap-3 sm:flex-row"
+        @submit.prevent="createWord"
+      >
         <div class="flex-1">
-          <label for="new-banned-word" class="mb-2 block text-sm font-semibold text-zinc-700">
-            {{ t('classroomModeration.addLabel') }}
+          <label
+            for="new-banned-word"
+            class="mb-2 block text-sm font-semibold text-zinc-700"
+          >
+            {{ t("classroomModeration.addLabel") }}
           </label>
           <input
             id="new-banned-word"
@@ -214,29 +229,32 @@ onMounted(() => {
             :placeholder="t('classroomModeration.addPlaceholder')"
             class="w-full rounded-xl border border-zinc-300 px-4 py-3 text-sm text-zinc-900"
             type="text"
-          >
+          />
         </div>
         <button
           class="self-end rounded-xl bg-zinc-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-zinc-700 disabled:cursor-not-allowed disabled:opacity-50"
           :disabled="status === 'saving'"
           type="submit"
         >
-          {{ t('classroomModeration.addAction') }}
+          {{ t("classroomModeration.addAction") }}
         </button>
       </form>
     </section>
 
-    <p v-if="errorMessage" class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+    <p
+      v-if="errorMessage"
+      class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
+    >
       {{ errorMessage }}
     </p>
 
     <section class="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm">
       <p v-if="status === 'loading'" class="text-sm text-zinc-500">
-        {{ t('classroomModeration.loading') }}
+        {{ t("classroomModeration.loading") }}
       </p>
 
       <p v-else-if="bannedWords.length === 0" class="text-sm text-zinc-500">
-        {{ t('classroomModeration.empty') }}
+        {{ t("classroomModeration.empty") }}
       </p>
 
       <ul v-else class="space-y-3">
@@ -250,7 +268,7 @@ onMounted(() => {
               v-model="editingWord"
               class="flex-1 rounded-xl border border-zinc-300 px-4 py-2 text-sm text-zinc-900"
               type="text"
-            >
+            />
             <div class="flex gap-2">
               <button
                 class="rounded-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white"
@@ -258,7 +276,7 @@ onMounted(() => {
                 type="button"
                 @click="saveWord(entry.id)"
               >
-                {{ t('classroomModeration.saveAction') }}
+                {{ t("classroomModeration.saveAction") }}
               </button>
               <button
                 class="rounded-lg border border-zinc-300 px-4 py-2 text-sm font-semibold text-zinc-700"
@@ -266,14 +284,16 @@ onMounted(() => {
                 type="button"
                 @click="cancelEditing"
               >
-                {{ t('classroomModeration.cancelAction') }}
+                {{ t("classroomModeration.cancelAction") }}
               </button>
             </div>
           </template>
 
           <template v-else>
             <div class="flex-1">
-              <p class="text-base font-semibold text-zinc-900">{{ entry.word }}</p>
+              <p class="text-base font-semibold text-zinc-900">
+                {{ entry.word }}
+              </p>
             </div>
             <div class="flex gap-2">
               <button
@@ -282,7 +302,7 @@ onMounted(() => {
                 type="button"
                 @click="startEditing(entry)"
               >
-                {{ t('classroomModeration.editAction') }}
+                {{ t("classroomModeration.editAction") }}
               </button>
               <button
                 class="rounded-lg border border-red-300 px-4 py-2 text-sm font-semibold text-red-700"
@@ -290,7 +310,7 @@ onMounted(() => {
                 type="button"
                 @click="deleteWord(entry.id)"
               >
-                {{ t('classroomModeration.deleteAction') }}
+                {{ t("classroomModeration.deleteAction") }}
               </button>
             </div>
           </template>
diff --git a/src/classrooms/pages/JoinClassroom.vue b/src/classrooms/pages/JoinClassroom.vue
index 1692c3d8..5daddebd 100644
--- a/src/classrooms/pages/JoinClassroom.vue
+++ b/src/classrooms/pages/JoinClassroom.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import {computed, ref, watch} from "vue";
+import { computed, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useClassroomsStore } from "@/classrooms/store/classrooms.store";
-import {useAuthStore} from "@/auth/model/auth.store.ts";
+import { useAuthStore } from "@/auth/model/auth.store.ts";
 import LogoutButton from "@/shared/components/LogoutButton.vue";
 import { useI18n } from "vue-i18n";
 
@@ -17,17 +17,19 @@ const isJoining = ref(false);
 const { t } = useI18n();
 
 const classroomId = computed(
-    () => authStore.user?.pupilProfile?.currentClassroomId
+  () => authStore.user?.pupilProfile?.currentClassroomId,
 );
 
-watch(classroomId,async (newId) => {
-  console.log("WATCH TRIGGERED:", newId)
+watch(
+  classroomId,
+  async (newId) => {
+    console.log("WATCH TRIGGERED:", newId);
 
-  if (newId !== null && newId !== undefined) {
-    await router.push({ name: "pupil-home" });
-  }
-},
-    {immediate: false }
+    if (newId !== null && newId !== undefined) {
+      await router.push({ name: "pupil-home" });
+    }
+  },
+  { immediate: false },
 );
 
 async function join() {
@@ -66,20 +68,22 @@ async function join() {
 
       <div class="mt-6 space-y-4">
         <input
-            v-model="classroomCode"
-            :placeholder="t('joinClassroom.code')"
-            @keydown.enter.prevent="join"
-            class="w-full rounded-full border-2 border-[#d6c2a3] bg-[#fffdf7] px-4 py-3 uppercase tracking-widest text-[#5e4428] shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)] transition duration-150 placeholder:text-[#b79c7a] focus:border-[#7f6647] focus:outline-none focus:ring-2 focus:ring-[#f3c76a]/40"
+          v-model="classroomCode"
+          :placeholder="t('joinClassroom.code')"
+          @keydown.enter.prevent="join"
+          class="w-full rounded-full border-2 border-[#d6c2a3] bg-[#fffdf7] px-4 py-3 uppercase tracking-widest text-[#5e4428] shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)] transition duration-150 placeholder:text-[#b79c7a] focus:border-[#7f6647] focus:outline-none focus:ring-2 focus:ring-[#f3c76a]/40"
         />
 
         <button
-            :disabled="isJoining"
-            @click="join"
-            type="button"
-            class="inline-flex w-full items-center justify-center rounded-full border-2 border-[#7f6647] bg-white px-4 py-3 font-(--font-display-2) text-[0.95rem] leading-none text-[#5e4428] shadow-[0_4px_10px_rgba(94,68,40,0.12),inset_0_-2px_0_rgba(179,143,94,0.35)] transition duration-150 hover:-translate-y-px hover:border-[#6b5270] hover:shadow-[0_8px_16px_rgba(94,68,40,0.16),inset_0_-2px_0_rgba(179,143,94,0.35)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#1a4a7a] disabled:opacity-50"
+          :disabled="isJoining"
+          @click="join"
+          type="button"
+          class="inline-flex w-full items-center justify-center rounded-full border-2 border-[#7f6647] bg-white px-4 py-3 font-(--font-display-2) text-[0.95rem] leading-none text-[#5e4428] shadow-[0_4px_10px_rgba(94,68,40,0.12),inset_0_-2px_0_rgba(179,143,94,0.35)] transition duration-150 hover:-translate-y-px hover:border-[#6b5270] hover:shadow-[0_8px_16px_rgba(94,68,40,0.16),inset_0_-2px_0_rgba(179,143,94,0.35)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#1a4a7a] disabled:opacity-50"
         >
           <span>
-            {{ isJoining ? t("joinClassroom.joining") : t("joinClassroom.join") }}
+            {{
+              isJoining ? t("joinClassroom.joining") : t("joinClassroom.join")
+            }}
           </span>
         </button>
 
@@ -90,5 +94,4 @@ async function join() {
       </div>
     </div>
   </main>
-
-</template>
\ No newline at end of file
+</template>
diff --git a/src/classrooms/pages/NewClassroom.vue b/src/classrooms/pages/NewClassroom.vue
index 9de238c8..8877bd53 100644
--- a/src/classrooms/pages/NewClassroom.vue
+++ b/src/classrooms/pages/NewClassroom.vue
@@ -85,24 +85,26 @@ async function saveClassroom() {
 
 <template>
   <main class="flex min-h-screen justify-center px-6 py-10 bg-[#f7f3ea]">
-    <div class="w-full max-w-2xl rounded-xl bg-white p-8 shadow-[0_10px_30px_rgba(0,0,0,0.08)]">
-
-      <h1 class="text-2xl font-bold text-[#4a3b18] [font-family:var(--font-display),serif]">
+    <div
+      class="w-full max-w-2xl rounded-xl bg-white p-8 shadow-[0_10px_30px_rgba(0,0,0,0.08)]"
+    >
+      <h1
+        class="text-2xl font-bold text-[#4a3b18] [font-family:var(--font-display),serif]"
+      >
         {{ t("newClassroom.title") }}
       </h1>
 
       <div class="mt-6 space-y-6">
-
         <div>
           <label class="text-sm font-medium text-[#6b5a3a]">
             {{ t("newClassroom.name") }}
           </label>
 
           <input
-              v-model="title"
-              type="text"
-              :placeholder="t('newClassroom.name')"
-              class="mt-1 w-full rounded-full border-2 border-[#d6c2a3] bg-[#fffdf7] px-4 py-3 text-[#5e4428] shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)] focus:border-[#7f6647] focus:outline-none focus:ring-2 focus:ring-[#f3c76a]/40"
+            v-model="title"
+            type="text"
+            :placeholder="t('newClassroom.name')"
+            class="mt-1 w-full rounded-full border-2 border-[#d6c2a3] bg-[#fffdf7] px-4 py-3 text-[#5e4428] shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)] focus:border-[#7f6647] focus:outline-none focus:ring-2 focus:ring-[#f3c76a]/40"
           />
         </div>
 
@@ -112,9 +114,9 @@ async function saveClassroom() {
           </label>
 
           <textarea
-              v-model="description"
-              :placeholder="t('newClassroom.description')"
-              class="mt-1 w-full rounded-xl border-2 border-[#d6c2a3] bg-[#fffdf7] px-4 py-3 text-[#5e4428] shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)] focus:border-[#7f6647] focus:outline-none focus:ring-2 focus:ring-[#f3c76a]/40"
+            v-model="description"
+            :placeholder="t('newClassroom.description')"
+            class="mt-1 w-full rounded-xl border-2 border-[#d6c2a3] bg-[#fffdf7] px-4 py-3 text-[#5e4428] shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)] focus:border-[#7f6647] focus:outline-none focus:ring-2 focus:ring-[#f3c76a]/40"
           />
         </div>
 
@@ -125,17 +127,17 @@ async function saveClassroom() {
 
           <div class="mt-2 flex flex-wrap gap-2">
             <span
-                v-for="email in teacherEmails"
-                :key="email"
-                class="flex items-center gap-2 rounded-full border border-[#d6c2a3] bg-[#fffdf7] px-3 py-1 text-sm text-[#5e4428]"
+              v-for="email in teacherEmails"
+              :key="email"
+              class="flex items-center gap-2 rounded-full border border-[#d6c2a3] bg-[#fffdf7] px-3 py-1 text-sm text-[#5e4428]"
             >
               {{ email }}
 
               <button
-                  type="button"
-                  @click="removeTeacher(email)"
-                  :disabled="email === currentUserEmail"
-                  class="text-[#b04a4a] hover:text-[#7a2f2f] disabled:opacity-30"
+                type="button"
+                @click="removeTeacher(email)"
+                :disabled="email === currentUserEmail"
+                class="text-[#b04a4a] hover:text-[#7a2f2f] disabled:opacity-30"
               >
                 ✕
               </button>
@@ -144,17 +146,17 @@ async function saveClassroom() {
 
           <div class="mt-3 flex gap-2">
             <input
-                v-model="newTeacherEmail"
-                type="email"
-                :placeholder="t('newClassroom.example')"
-                @keydown.enter.prevent="addTeacher"
-                class="flex-1 rounded-full border-2 border-[#d6c2a3] bg-[#fffdf7] px-4 py-2 text-[#5e4428] focus:border-[#7f6647] focus:outline-none focus:ring-2 focus:ring-[#f3c76a]/40"
+              v-model="newTeacherEmail"
+              type="email"
+              :placeholder="t('newClassroom.example')"
+              @keydown.enter.prevent="addTeacher"
+              class="flex-1 rounded-full border-2 border-[#d6c2a3] bg-[#fffdf7] px-4 py-2 text-[#5e4428] focus:border-[#7f6647] focus:outline-none focus:ring-2 focus:ring-[#f3c76a]/40"
             />
 
             <button
-                type="button"
-                @click="addTeacher"
-                class="rounded-full border-2 border-[#7f6647] bg-white px-4 py-2 text-[#5e4428] shadow-[0_4px_10px_rgba(94,68,40,0.12)] transition hover:-translate-y-px hover:shadow-[0_8px_16px_rgba(94,68,40,0.16)]"
+              type="button"
+              @click="addTeacher"
+              class="rounded-full border-2 border-[#7f6647] bg-white px-4 py-2 text-[#5e4428] shadow-[0_4px_10px_rgba(94,68,40,0.12)] transition hover:-translate-y-px hover:shadow-[0_8px_16px_rgba(94,68,40,0.16)]"
             >
               {{ t("newClassroom.add") }}
             </button>
@@ -166,15 +168,14 @@ async function saveClassroom() {
         </p>
 
         <button
-            type="button"
-            :disabled="isSaving"
-            @click="saveClassroom"
-            class="inline-flex w-full items-center justify-center rounded-full border-2 border-[#7f6647] bg-white px-4 py-3 font-(--font-display-2) text-[0.95rem] text-[#5e4428] shadow-[0_4px_10px_rgba(94,68,40,0.12)] transition hover:-translate-y-px hover:shadow-[0_8px_16px_rgba(94,68,40,0.16)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#1a4a7a] disabled:opacity-50"
+          type="button"
+          :disabled="isSaving"
+          @click="saveClassroom"
+          class="inline-flex w-full items-center justify-center rounded-full border-2 border-[#7f6647] bg-white px-4 py-3 font-(--font-display-2) text-[0.95rem] text-[#5e4428] shadow-[0_4px_10px_rgba(94,68,40,0.12)] transition hover:-translate-y-px hover:shadow-[0_8px_16px_rgba(94,68,40,0.16)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#1a4a7a] disabled:opacity-50"
         >
           {{ isSaving ? t("common.saving") : t("newClassroom.create") }}
         </button>
-
       </div>
     </div>
   </main>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/classrooms/routes.ts b/src/classrooms/routes.ts
index f6ad997c..3ef3fb92 100644
--- a/src/classrooms/routes.ts
+++ b/src/classrooms/routes.ts
@@ -12,17 +12,18 @@ import TeacherMystery from "@/teacher-mystery/pages/TeacherMystery.vue";
 import TeacherPupilNotebookPage from "@/notebook/pages/TeacherPupilNotebookPage.vue";
 import ClassroomModerationPage from "@/classrooms/pages/ClassroomModerationPage.vue";
 
-
 export function createClassroomRoutes(
   prefix: string,
   options: {
-    includeModerationRoute?: boolean
+    includeModerationRoute?: boolean;
   } = {},
 ): RouteRecordRaw[] {
-  const classroomDetailsBackTarget = (route: RouteLocationNormalizedLoaded) => ({
+  const classroomDetailsBackTarget = (
+    route: RouteLocationNormalizedLoaded,
+  ) => ({
     name: `${prefix}-classroom-details`,
     params: { classroomId: route.params.classroomId },
-  })
+  });
 
   const routes: RouteRecordRaw[] = [
     {
@@ -48,7 +49,7 @@ export function createClassroomRoutes(
       meta: {
         hideBackButton: true,
         hideHomeButton: true,
-      }
+      },
     },
     {
       path: "classroom-details/:classroomId",
@@ -59,13 +60,13 @@ export function createClassroomRoutes(
       },
     },
     {
-    path: "classrooms/:classroomId/pupils",
-    name: "classroom-pupils",
-    component: PupilOverviewPage,
-    meta: {
-      backTarget: classroomDetailsBackTarget,
+      path: "classrooms/:classroomId/pupils",
+      name: "classroom-pupils",
+      component: PupilOverviewPage,
+      meta: {
+        backTarget: classroomDetailsBackTarget,
+      },
     },
-  },
     {
       path: "classrooms/:classroomId/pupils/:pupilId",
       name: "classroom-pupil-progress",
@@ -77,63 +78,63 @@ export function createClassroomRoutes(
         }),
       },
     },
-  {
-    path: "classrooms/:classroomId/pupils/:pupilId/notebook",
-    name: "classroom-pupil-notebook",
-    component: TeacherPupilNotebookPage,
-    meta: {
-      backTarget: (route: RouteLocationNormalizedLoaded) => ({
-        name: "classroom-pupil-progress",
-        params: {
-          classroomId: route.params.classroomId,
-          pupilId: route.params.pupilId,
-        },
-      }),
+    {
+      path: "classrooms/:classroomId/pupils/:pupilId/notebook",
+      name: "classroom-pupil-notebook",
+      component: TeacherPupilNotebookPage,
+      meta: {
+        backTarget: (route: RouteLocationNormalizedLoaded) => ({
+          name: "classroom-pupil-progress",
+          params: {
+            classroomId: route.params.classroomId,
+            pupilId: route.params.pupilId,
+          },
+        }),
+      },
     },
-  },
-  {
-    path: "classrooms/:classroomId/notifications",
-    name: "classroom-notifications",
-    component: NotificationsPage,
-    meta: {
-      backTarget: classroomDetailsBackTarget,
+    {
+      path: "classrooms/:classroomId/notifications",
+      name: "classroom-notifications",
+      component: NotificationsPage,
+      meta: {
+        backTarget: classroomDetailsBackTarget,
+      },
     },
-  },
-  {
-    path: "classrooms/:classroomId/tasks",
-    name: "classroom-tasks",
-    component: ClassroomDetails,
-    meta: {
-      backTarget: classroomDetailsBackTarget,
+    {
+      path: "classrooms/:classroomId/tasks",
+      name: "classroom-tasks",
+      component: ClassroomDetails,
+      meta: {
+        backTarget: classroomDetailsBackTarget,
+      },
     },
-  },
-  {
-    path: "classrooms/:classroomId/playtest",
-    name: "teacher-playtest-map",
-    component: TeacherPlaytestMapPage,
-    meta: {
-      backTarget: classroomDetailsBackTarget,
+    {
+      path: "classrooms/:classroomId/playtest",
+      name: "teacher-playtest-map",
+      component: TeacherPlaytestMapPage,
+      meta: {
+        backTarget: classroomDetailsBackTarget,
+      },
     },
-  },
-  {
-    path: "classrooms/:classroomId/playtest/:slug",
-    name: "teacher-playtest-stop",
-    component: TeacherPlaytestStopPage,
-    meta: {
-      backTarget: (route: RouteLocationNormalizedLoaded) => ({
-        name: "teacher-playtest-map",
-        params: { classroomId: route.params.classroomId },
-      }),
+    {
+      path: "classrooms/:classroomId/playtest/:slug",
+      name: "teacher-playtest-stop",
+      component: TeacherPlaytestStopPage,
+      meta: {
+        backTarget: (route: RouteLocationNormalizedLoaded) => ({
+          name: "teacher-playtest-map",
+          params: { classroomId: route.params.classroomId },
+        }),
+      },
     },
-  },
-  {
-    path: "classrooms/:classroomId/mystery",
-    name: "classroom-mystery",
-    component: TeacherMystery,
-    meta: {
-      backTarget: classroomDetailsBackTarget,
+    {
+      path: "classrooms/:classroomId/mystery",
+      name: "classroom-mystery",
+      component: TeacherMystery,
+      meta: {
+        backTarget: classroomDetailsBackTarget,
+      },
     },
-  },
   ];
 
   if (options.includeModerationRoute) {
@@ -144,8 +145,8 @@ export function createClassroomRoutes(
       meta: {
         backTarget: classroomDetailsBackTarget,
       },
-    })
+    });
   }
 
-  return routes
+  return routes;
 }
diff --git a/src/classrooms/store/classrooms.store.ts b/src/classrooms/store/classrooms.store.ts
index ca1fc998..f9f700ba 100644
--- a/src/classrooms/store/classrooms.store.ts
+++ b/src/classrooms/store/classrooms.store.ts
@@ -86,10 +86,9 @@ export const useClassroomsStore = defineStore("classrooms", () => {
     console.log("BEFORE UPDATE:", authStore.user);
 
     try {
-      const joined = await requestJoinClassroom(
-          authStore.authorizationHeader,
-          { classroomCode: cleanedCode }
-      );
+      const joined = await requestJoinClassroom(authStore.authorizationHeader, {
+        classroomCode: cleanedCode,
+      });
 
       console.log("JOINED RESPONSE:", joined);
 
diff --git a/src/help/routes.ts b/src/help/routes.ts
index 3c4c9af1..c48deca7 100644
--- a/src/help/routes.ts
+++ b/src/help/routes.ts
@@ -8,7 +8,7 @@ export const helpRoutes: RouteRecordRaw[] = [
     name: "help",
     component: HelpPage,
     meta: {
-      backTarget: { name: 'pupil-home' },
+      backTarget: { name: "pupil-home" },
     },
   },
 ];
diff --git a/src/leaderboard/api/leaderboard.api.ts b/src/leaderboard/api/leaderboard.api.ts
index 3866a498..fd498c54 100644
--- a/src/leaderboard/api/leaderboard.api.ts
+++ b/src/leaderboard/api/leaderboard.api.ts
@@ -1,27 +1,32 @@
-import type { LeaderboardResponse } from '@/leaderboard/model/leaderboard.types'
-import { readJsonErrorMessage } from '@/shared/api/response-errors'
+import type { LeaderboardResponse } from "@/leaderboard/model/leaderboard.types";
+import { readJsonErrorMessage } from "@/shared/api/response-errors";
 
-const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
-const LEADERBOARD_API_BASE = `${API_BASE_URL}/api/v1/leaderboard`
+const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? "").replace(
+  /\/$/,
+  "",
+);
+const LEADERBOARD_API_BASE = `${API_BASE_URL}/api/v1/leaderboard`;
 
 async function getResponseErrorMessage(response: Response) {
-  const fallbackMessage = `Leaderboard request failed with status ${response.status}.`
-  const errorMessage = await readJsonErrorMessage(response)
+  const fallbackMessage = `Leaderboard request failed with status ${response.status}.`;
+  const errorMessage = await readJsonErrorMessage(response);
 
-  if (errorMessage) return errorMessage
+  if (errorMessage) return errorMessage;
 
-  const text = await response.text().catch(() => '')
-  return text || fallbackMessage
+  const text = await response.text().catch(() => "");
+  return text || fallbackMessage;
 }
 
-export async function requestLeaderboard(authorizationHeader: string): Promise<LeaderboardResponse> {
+export async function requestLeaderboard(
+  authorizationHeader: string,
+): Promise<LeaderboardResponse> {
   const response = await fetch(LEADERBOARD_API_BASE, {
-    method: 'GET',
+    method: "GET",
     headers: { Authorization: authorizationHeader },
-    credentials: 'include',
-  })
+    credentials: "include",
+  });
 
-  if (!response.ok) throw new Error(await getResponseErrorMessage(response))
+  if (!response.ok) throw new Error(await getResponseErrorMessage(response));
 
-  return (await response.json()) as LeaderboardResponse
+  return (await response.json()) as LeaderboardResponse;
 }
diff --git a/src/leaderboard/components/LeaderboardComponent.vue b/src/leaderboard/components/LeaderboardComponent.vue
index 912ba6be..4c7212e5 100644
--- a/src/leaderboard/components/LeaderboardComponent.vue
+++ b/src/leaderboard/components/LeaderboardComponent.vue
@@ -1,46 +1,46 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { requestLeaderboard } from '@/leaderboard/api/leaderboard.api'
-import type { LeaderboardRow } from '@/leaderboard/model/leaderboard.types'
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useAuthStore } from "@/auth/model/auth.store";
+import { requestLeaderboard } from "@/leaderboard/api/leaderboard.api";
+import type { LeaderboardRow } from "@/leaderboard/model/leaderboard.types";
 
-const { t } = useI18n()
-const authStore = useAuthStore()
-const leaderboard = ref<LeaderboardRow[]>([])
+const { t } = useI18n();
+const authStore = useAuthStore();
+const leaderboard = ref<LeaderboardRow[]>([]);
 
 const sortedLeaderboard = computed(() =>
   leaderboard.value.slice().sort((a, b) => a.rank - b.rank),
-)
+);
 
 async function loadLeaderboard() {
-  const authorizationHeader = authStore.authorizationHeader
+  const authorizationHeader = authStore.authorizationHeader;
   if (!authorizationHeader) {
-    leaderboard.value = []
-    return
+    leaderboard.value = [];
+    return;
   }
 
   try {
-    const response = await requestLeaderboard(authorizationHeader)
+    const response = await requestLeaderboard(authorizationHeader);
     leaderboard.value = response.entries.map((entry) => ({
       rank: entry.rank,
       classroomId: entry.classroomId,
       classroomTitle: entry.classroomTitle,
       averageTotalScore: entry.averageTotalScore,
-    }))
+    }));
   } catch (error) {
-    console.error('Failed to load leaderboard.', error)
-    leaderboard.value = []
+    console.error("Failed to load leaderboard.", error);
+    leaderboard.value = [];
   }
 }
 
 watch(
   () => [authStore.authorizationHeader, authStore.status] as const,
   () => {
-    void loadLeaderboard()
+    void loadLeaderboard();
   },
   { immediate: true },
-)
+);
 </script>
 
 <template>
@@ -50,9 +50,11 @@ watch(
     <table class="min-w-225">
       <thead>
         <tr class="bg-gray-100">
-          <th class="px-4 py-2 text-left">{{ t('leaderboard.rank') }}</th>
-          <th class="px-4 py-2 text-left">{{ t('leaderboard.classroom') }}</th>
-          <th class="px-4 py-2 text-left">{{ t('leaderboard.averageScore') }}</th>
+          <th class="px-4 py-2 text-left">{{ t("leaderboard.rank") }}</th>
+          <th class="px-4 py-2 text-left">{{ t("leaderboard.classroom") }}</th>
+          <th class="px-4 py-2 text-left">
+            {{ t("leaderboard.averageScore") }}
+          </th>
         </tr>
       </thead>
       <tbody>
diff --git a/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts b/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts
index ffdd59f6..c0d28e3c 100644
--- a/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts
+++ b/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts
@@ -1,40 +1,40 @@
-import { flushPromises, mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createAppI18n } from '@/app/i18n'
-import { useAuthStore } from '@/auth/model/auth.store'
-import Leaderboard from '@/leaderboard/components/LeaderboardComponent.vue'
-import { requestLeaderboard } from '@/leaderboard/api/leaderboard.api'
+import { flushPromises, mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createAppI18n } from "@/app/i18n";
+import { useAuthStore } from "@/auth/model/auth.store";
+import Leaderboard from "@/leaderboard/components/LeaderboardComponent.vue";
+import { requestLeaderboard } from "@/leaderboard/api/leaderboard.api";
 
-vi.mock('@/leaderboard/api/leaderboard.api', () => ({
+vi.mock("@/leaderboard/api/leaderboard.api", () => ({
   requestLeaderboard: vi.fn(),
-}))
+}));
 
-describe('Leaderboard', () => {
+describe("Leaderboard", () => {
   beforeEach(() => {
-    vi.clearAllMocks()
-    setActivePinia(createPinia())
-  })
+    vi.clearAllMocks();
+    setActivePinia(createPinia());
+  });
 
-  it('reloads leaderboard entries when the authenticated session changes', async () => {
-    const authStore = useAuthStore()
-    authStore.status = 'authenticated'
-    authStore.accessToken = 'first-token'
+  it("reloads leaderboard entries when the authenticated session changes", async () => {
+    const authStore = useAuthStore();
+    authStore.status = "authenticated";
+    authStore.accessToken = "first-token";
     authStore.user = {
-      subject: '1',
-      portalType: 'PUPIL',
+      subject: "1",
+      portalType: "PUPIL",
       email: null,
-      username: 'pupil-one',
+      username: "pupil-one",
       authorities: [],
       pupilProfile: {
-        displayName: 'Pupil One',
+        displayName: "Pupil One",
         totalXp: 10,
         currentLevel: 1,
         currentClassroomId: 1,
         hasCompletedOnboarding: true,
       },
       teacherProfile: null,
-    }
+    };
 
     vi.mocked(requestLeaderboard)
       .mockResolvedValueOnce({
@@ -42,7 +42,7 @@ describe('Leaderboard', () => {
           {
             rank: 1,
             classroomId: 1,
-            classroomTitle: 'Alpha',
+            classroomTitle: "Alpha",
             averageTotalScore: 12.4,
           },
         ],
@@ -52,35 +52,38 @@ describe('Leaderboard', () => {
           {
             rank: 1,
             classroomId: 2,
-            classroomTitle: 'Beta',
+            classroomTitle: "Beta",
             averageTotalScore: 42.2,
           },
         ],
-      })
+      });
 
     const wrapper = mount(Leaderboard, {
       global: {
         plugins: [createAppI18n()],
       },
-    })
+    });
 
-    await flushPromises()
+    await flushPromises();
 
-    authStore.accessToken = 'second-token'
+    authStore.accessToken = "second-token";
     authStore.user = {
       ...authStore.user,
-      subject: '2',
+      subject: "2",
       pupilProfile: {
         ...authStore.user!.pupilProfile!,
         currentClassroomId: 2,
       },
-    }
+    };
 
-    await flushPromises()
+    await flushPromises();
 
-    expect(requestLeaderboard).toHaveBeenNthCalledWith(1, 'Bearer first-token')
-    expect(requestLeaderboard).toHaveBeenNthCalledWith(2, 'Bearer second-token')
-    expect(wrapper.text()).toContain('Beta')
-    expect(wrapper.text()).not.toContain('Alpha')
-  })
-})
+    expect(requestLeaderboard).toHaveBeenNthCalledWith(1, "Bearer first-token");
+    expect(requestLeaderboard).toHaveBeenNthCalledWith(
+      2,
+      "Bearer second-token",
+    );
+    expect(wrapper.text()).toContain("Beta");
+    expect(wrapper.text()).not.toContain("Alpha");
+  });
+});
diff --git a/src/leaderboard/model/leaderboard.types.ts b/src/leaderboard/model/leaderboard.types.ts
index 722bd11c..7af8b472 100644
--- a/src/leaderboard/model/leaderboard.types.ts
+++ b/src/leaderboard/model/leaderboard.types.ts
@@ -1,17 +1,17 @@
 export interface LeaderboardEntryResponse {
-  rank: number
-  classroomId: number
-  classroomTitle: string
-  averageTotalScore: number
+  rank: number;
+  classroomId: number;
+  classroomTitle: string;
+  averageTotalScore: number;
 }
 
 export interface LeaderboardResponse {
-  entries: LeaderboardEntryResponse[]
+  entries: LeaderboardEntryResponse[];
 }
 
 export interface LeaderboardRow {
-  rank: number
-  classroomId: number
-  classroomTitle: string
-  averageTotalScore: number
+  rank: number;
+  classroomId: number;
+  classroomTitle: string;
+  averageTotalScore: number;
 }
diff --git a/src/leaderboard/pages/LeaderboardPage.vue b/src/leaderboard/pages/LeaderboardPage.vue
index 3a9302e5..db4ee7d2 100644
--- a/src/leaderboard/pages/LeaderboardPage.vue
+++ b/src/leaderboard/pages/LeaderboardPage.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import Leaderboard from '../components/LeaderboardComponent.vue'
+import { useI18n } from "vue-i18n";
+import Leaderboard from "../components/LeaderboardComponent.vue";
 
-const { t } = useI18n()
+const { t } = useI18n();
 </script>
 <template>
-  {{ t('pages.leaderboard') }}
+  {{ t("pages.leaderboard") }}
   <div class="flex h-screen flex-col items-center justify-center">
     <h2 class="text-4xl font-extrabold mb-2 text-gray-800 drop-shadow-md">
-      {{ t('pages.leaderboard') }}
+      {{ t("pages.leaderboard") }}
     </h2>
     <p class="mb-8 max-w-xl text-center text-lg text-gray-600">
-      {{ t('leaderboard.description') }}
+      {{ t("leaderboard.description") }}
     </p>
 
     <Leaderboard />
diff --git a/src/leaderboard/routes.ts b/src/leaderboard/routes.ts
index 6ece47c0..37107514 100644
--- a/src/leaderboard/routes.ts
+++ b/src/leaderboard/routes.ts
@@ -8,7 +8,7 @@ export const leaderboardRoutes: RouteRecordRaw[] = [
     name: "leaderboard",
     component: LeaderboardPage,
     meta: {
-      backTarget: { name: 'pupil-home' },
+      backTarget: { name: "pupil-home" },
     },
   },
 ];
diff --git a/src/locales/en.ts b/src/locales/en.ts
index acf54bea..9ceb7881 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -736,7 +736,8 @@ export const en = {
   },
   classroomModeration: {
     title: "Word filter",
-    description: "Add, edit, and remove words that should be blocked in pupil text.",
+    description:
+      "Add, edit, and remove words that should be blocked in pupil text.",
     addLabel: "New word",
     addPlaceholder: "Enter a word or phrase",
     addAction: "Add",
@@ -755,109 +756,114 @@ export const en = {
     },
   },
   mystery: {
-    title: 'Weekly mystery',
+    title: "Weekly mystery",
     subtitle: "See what your teacher has picked, and submit your own find!",
-    loading: 'Loading mysteries...',
-    weekLabel: 'Week {week}',
-    prevWeek: 'Previous week',
-    nextWeek: 'Next week',
-    noMysteries: 'No mysteries have been posted yet.',
-    noMysteriesThisWeek: 'No mysteries this week.',
-    submissionImageAlt: 'Submission image',
+    loading: "Loading mysteries...",
+    weekLabel: "Week {week}",
+    prevWeek: "Previous week",
+    nextWeek: "Next week",
+    noMysteries: "No mysteries have been posted yet.",
+    noMysteriesThisWeek: "No mysteries this week.",
+    submissionImageAlt: "Submission image",
 
     modal: {
-      close: 'Close',
+      close: "Close",
     },
 
     tabs: {
-      featured: 'This week',
-      submit: 'Submit',
-      mine: 'My submissions',
+      featured: "This week",
+      submit: "Submit",
+      mine: "My submissions",
     },
 
     reviewStatus: {
-      pending: 'Pending',
-      approved: 'Approved',
-      rejected: 'Rejected',
+      pending: "Pending",
+      approved: "Approved",
+      rejected: "Rejected",
     },
 
     submitForm: {
-      heading: 'Submit a find',
-      descriptionLabel: 'Write a comment',
-      descriptionPlaceholder: 'Comment on what you found — what looks suspicious? Where did you find it?',
-      uploadLabel: 'Upload image',
-      previewAlt: 'Preview of uploaded image',
-      removeImage: 'Remove image',
-      submit: 'Submit',
-      submitting: 'Submitting...',
-      success: 'Your find has been submitted! Your teacher will review it soon.',
-      unsupportedFileType: 'File type not supported. Please upload an image (JPEG, PNG, GIF or WebP).',
-      bannedWords: 'The text contains words that are not allowed.',
+      heading: "Submit a find",
+      descriptionLabel: "Write a comment",
+      descriptionPlaceholder:
+        "Comment on what you found — what looks suspicious? Where did you find it?",
+      uploadLabel: "Upload image",
+      previewAlt: "Preview of uploaded image",
+      removeImage: "Remove image",
+      submit: "Submit",
+      submitting: "Submitting...",
+      success:
+        "Your find has been submitted! Your teacher will review it soon.",
+      unsupportedFileType:
+        "File type not supported. Please upload an image (JPEG, PNG, GIF or WebP).",
+      bannedWords: "The text contains words that are not allowed.",
     },
 
     mySubmissions: {
-      heading: 'My submissions',
-      empty: "You haven't submitted anything yet. Try finding fake news online!",
+      heading: "My submissions",
+      empty:
+        "You haven't submitted anything yet. Try finding fake news online!",
       teacherComment: "Teacher's comment",
     },
 
     errors: {
-      notAuthenticated: 'You must be logged in to view mysteries.',
-      loadFailed: 'Could not load mysteries. Please try again.',
-      submitFailed: 'Submission failed. Please try again.',
+      notAuthenticated: "You must be logged in to view mysteries.",
+      loadFailed: "Could not load mysteries. Please try again.",
+      submitFailed: "Submission failed. Please try again.",
     },
   },
   teacherMystery: {
-    title: 'Weekly mystery',
-    subtitle: 'Review submitted examples and choose this week\'s mysteries.',
-    loading: 'Loading...',
-    weekLabel: 'Week {week}',
-    prevWeek: 'Previous week',
-    nextWeek: 'Next week',
-    pupilLabel: 'Pupil',
+    title: "Weekly mystery",
+    subtitle: "Review submitted examples and choose this week's mysteries.",
+    loading: "Loading...",
+    weekLabel: "Week {week}",
+    prevWeek: "Previous week",
+    nextWeek: "Next week",
+    pupilLabel: "Pupil",
 
     tabs: {
-      pending: 'Pending review',
-      approved: 'Approved',
-      featured: 'This week\'s mysteries',
+      pending: "Pending review",
+      approved: "Approved",
+      featured: "This week's mysteries",
     },
 
     pending: {
-      empty: 'No submissions are waiting for review.',
+      empty: "No submissions are waiting for review.",
     },
 
     approved: {
-      empty: 'No approved submissions yet.',
-      reviewedBy: 'Approved',
-      featuredThisWeek: 'Featured this week',
+      empty: "No approved submissions yet.",
+      reviewedBy: "Approved",
+      featuredThisWeek: "Featured this week",
     },
 
     featured: {
-      empty: 'No mysteries have been posted yet. Approve a submission and add it here.',
-      add: 'Add mystery',
+      empty:
+        "No mysteries have been posted yet. Approve a submission and add it here.",
+      add: "Add mystery",
     },
 
     actions: {
-      approve: 'Approve',
-      reject: 'Reject',
-      feature: 'Choose week',
-      unfeature: 'Remove',
+      approve: "Approve",
+      reject: "Reject",
+      feature: "Choose week",
+      unfeature: "Remove",
     },
 
     modal: {
-      approveTitle: 'Approve submission',
-      rejectTitle: 'Reject submission',
-      commentLabel: 'Comment to pupil (optional)',
-      commentPlaceholder: 'Great find! You noticed that...',
-      featureTitle: 'Add as this week\'s mystery',
-      weekLabel: 'Select week',
-      featureConfirm: 'Add',
-      cancel: 'Cancel',
+      approveTitle: "Approve submission",
+      rejectTitle: "Reject submission",
+      commentLabel: "Comment to pupil (optional)",
+      commentPlaceholder: "Great find! You noticed that...",
+      featureTitle: "Add as this week's mystery",
+      weekLabel: "Select week",
+      featureConfirm: "Add",
+      cancel: "Cancel",
     },
 
     errors: {
-      reviewFailed: 'Could not review the submission. Please try again.',
-      featureFailed: 'Could not add mystery. Please try again.',
+      reviewFailed: "Could not review the submission. Please try again.",
+      featureFailed: "Could not add mystery. Please try again.",
     },
   },
 } as const;
diff --git a/src/locales/nb.ts b/src/locales/nb.ts
index 75150cbe..84c7a77f 100644
--- a/src/locales/nb.ts
+++ b/src/locales/nb.ts
@@ -63,7 +63,8 @@ export const nb = {
     },
     register: {
       title: "Lærerregistrering",
-      subtitle: "Denne registreringen er for lærere som skal bruke e-post og passord.",
+      subtitle:
+        "Denne registreringen er for lærere som skal bruke e-post og passord.",
       fullNameLabel: "Navn",
       fullNamePlaceholder: "Ola Nordmann",
       emailLabel: "E-post",
@@ -170,11 +171,13 @@ export const nb = {
         idle: "Et sterkt passord er langt, uvanlig og vanskelig å gjette.",
         weak: "Gjør passordet lengre og bland inn flere typer tegn.",
         okay: "Bra start. Prøv å gjøre det enda lengre eller mer uforutsigbart.",
-        success: "Sterkt jobbet. Dette passordet klarer alle reglene i spillet.",
+        success:
+          "Sterkt jobbet. Dette passordet klarer alle reglene i spillet.",
       },
       successLabel: "Fullført",
       successTitle: "Du klarte alle reglene",
-      successDescription: "Passordet ditt har lengde, store og små bokstaver, tall og spesialtegn. Slik blir det vanskeligere å gjette.",
+      successDescription:
+        "Passordet ditt har lengde, store og små bokstaver, tall og spesialtegn. Slik blir det vanskeligere å gjette.",
     },
   },
   pupilHome: {
@@ -414,12 +417,14 @@ export const nb = {
     description: "Se og filtrer varsler fra klasserommene du følger opp.",
     classroomTitle: "Klasseromsvarslinger",
     classroomDescription: "Se varsler knyttet til {classroomTitle}.",
-    classroomDescriptionGeneric: "Se og filtrer varsler som hører til dette klasserommet.",
+    classroomDescriptionGeneric:
+      "Se og filtrer varsler som hører til dette klasserommet.",
   },
   notifications: {
     summaryLabel: "Uleste varsler",
     listTitle: "Innboks",
-    listDescription: "Marker varsler som lest, eller fjern dem når de er håndtert.",
+    listDescription:
+      "Marker varsler som lest, eller fjern dem når de er håndtert.",
     loading: "Laster varsler...",
     empty: "Ingen varsler matcher filtrene dine.",
     unknownPupil: "Ukjent elev",
@@ -534,21 +539,20 @@ export const nb = {
       unauthenticated: "Du må være logget inn for å se medaljene.",
       loadFailed: "Kunne ikke laste medaljene.",
     },
-      card: {
-        earned: "Opptjent",
-        locked: "Låst",
-        example: "Godkjent eksempel",
-        stop: "Stoppested",
-        noDescription: "Ingen beskrivelse er lagt inn ennå.",
-        assetReady: "Klar for bildeasset",
-        assetSlot: "Asset-slot: {path}",
-      },
-      patterns: {
-        completionTitle: "{stop} fullført",
-        completionDescription: "Tildeles når stoppet {stop} er fullført.",
-      },
-      types: {
-
+    card: {
+      earned: "Opptjent",
+      locked: "Låst",
+      example: "Godkjent eksempel",
+      stop: "Stoppested",
+      noDescription: "Ingen beskrivelse er lagt inn ennå.",
+      assetReady: "Klar for bildeasset",
+      assetSlot: "Asset-slot: {path}",
+    },
+    patterns: {
+      completionTitle: "{stop} fullført",
+      completionDescription: "Tildeles når stoppet {stop} er fullført.",
+    },
+    types: {
       stopCompletion: "Stoppfullføring",
       exampleApproval: "Eksempelgodkjenning",
     },
@@ -574,7 +578,7 @@ export const nb = {
           title: "Markedsplassen fullført",
           description: "Tildeles når stoppet Markedsplassen er fullført.",
         },
-        'den-sosiale-markedsplassen': {
+        "den-sosiale-markedsplassen": {
           title: "Den Sosiale Markedsplassen fullført",
           description:
             "Tildeles når stoppet Den Sosiale Markedsplassen er fullført.",
@@ -664,7 +668,8 @@ export const nb = {
       deleteFailed: "Kunne ikke slette notatet.",
       loadRequiresAuth: "Du må være logget inn for å åpne notatboken.",
       loadFailed: "Kunne ikke laste notatene.",
-      missingTeacherContext: "Fant ikke eleven eller klasserommet for notatboken.",
+      missingTeacherContext:
+        "Fant ikke eleven eller klasserommet for notatboken.",
     },
   },
   shared: {
@@ -674,7 +679,8 @@ export const nb = {
     rank: "Plass",
     classroom: "Klasserom",
     averageScore: "Gjennomsnittspoeng",
-    description: "Her kan du se rangering av klasserom etter gjennomsnittspoeng",
+    description:
+      "Her kan du se rangering av klasserom etter gjennomsnittspoeng",
   },
   pupilTable: {
     name: "Navn",
@@ -698,7 +704,7 @@ export const nb = {
     teachers: "Lærere",
     example: "lærer{'@'}epost.no",
     add: "Legg til",
-    create: "Opprett klasserom"
+    create: "Opprett klasserom",
   },
   joinClassroom: {
     title: "Bli med i et klasserom",
@@ -727,7 +733,7 @@ export const nb = {
     tasks: "Oppgaver",
     action: "Handling",
     open: "Åpne",
-    joinCode: "Klasseromskode"
+    joinCode: "Klasseromskode",
   },
   classroomDetails: {
     label: "Klasserom",
@@ -755,11 +761,12 @@ export const nb = {
       title: "Ordfilter",
       description: "Administrer ord som skal blokkeres for dette klasserommet.",
     },
-    joinCode: "Klasseromskode"
+    joinCode: "Klasseromskode",
   },
   classroomModeration: {
     title: "Ordfilter",
-    description: "Legg til, endre og fjern ord som skal blokkeres i elevtekster.",
+    description:
+      "Legg til, endre og fjern ord som skal blokkeres i elevtekster.",
     addLabel: "Nytt ord",
     addPlaceholder: "Skriv inn ord eller uttrykk",
     addAction: "Legg til",
@@ -777,112 +784,115 @@ export const nb = {
       missingWord: "Skriv inn et ord før du lagrer.",
     },
   },
-    mystery: {
-      title: 'Ukens mysterium',
-      subtitle: 'Se hva læreren har valgt ut, og send inn ditt eget funn!',
-      loading: 'Laster mysterier...',
-      weekLabel: 'Uke {week}',
-      prevWeek: 'Forrige uke',
-      nextWeek: 'Neste uke',
-      noMysteries: 'Ingen mysterier er lagt ut enda.',
-      noMysteriesThisWeek: 'Ingen mysterier denne uken.',
-      submissionImageAlt: 'Bilde av innsending',
+  mystery: {
+    title: "Ukens mysterium",
+    subtitle: "Se hva læreren har valgt ut, og send inn ditt eget funn!",
+    loading: "Laster mysterier...",
+    weekLabel: "Uke {week}",
+    prevWeek: "Forrige uke",
+    nextWeek: "Neste uke",
+    noMysteries: "Ingen mysterier er lagt ut enda.",
+    noMysteriesThisWeek: "Ingen mysterier denne uken.",
+    submissionImageAlt: "Bilde av innsending",
 
-      modal: {
-        close: 'Lukk',
-      },
-
-      tabs: {
-        featured: 'Ukens mysterier',
-        submit: 'Send inn',
-        mine: 'Mine innsendte',
-      },
+    modal: {
+      close: "Lukk",
+    },
 
-      reviewStatus: {
-        pending: 'Venter',
-        approved: 'Godkjent',
-        rejected: 'Avvist',
-      },
+    tabs: {
+      featured: "Ukens mysterier",
+      submit: "Send inn",
+      mine: "Mine innsendte",
+    },
 
-      submitForm: {
-        heading: 'Send inn et funn',
-        descriptionLabel: 'Skriv en kommentar',
-        descriptionPlaceholder: 'Kommenter på det du har funnet – hva er mistenkelig? Hvor fant du det?',
-        uploadLabel: 'Last opp bilde',
-        previewAlt: 'Forhåndsvisning av opplastet bilde',
-        removeImage: 'Fjern bilde',
-        submit: 'Send inn',
-        uploading: 'Laster opp...',
-        submitting: 'Sender...',
-        success: 'Funnet ditt er sendt inn! Læreren din vil snart vurdere det.',
-        unsupportedFileType: 'Filtypen støttes ikke. Last opp et bilde (JPEG, PNG, GIF eller WebP).',
-        bannedWords: 'Teksten inneholder ord som ikke er tillatt.',
-      },
+    reviewStatus: {
+      pending: "Venter",
+      approved: "Godkjent",
+      rejected: "Avvist",
+    },
 
-      mySubmissions: {
-        heading: 'Mine innsendte',
-        empty: 'Du har ikke sendt inn noe enda. Prøv å finne fake news på nettet!',
-        teacherComment: 'Lærers kommentar',
-      },
+    submitForm: {
+      heading: "Send inn et funn",
+      descriptionLabel: "Skriv en kommentar",
+      descriptionPlaceholder:
+        "Kommenter på det du har funnet – hva er mistenkelig? Hvor fant du det?",
+      uploadLabel: "Last opp bilde",
+      previewAlt: "Forhåndsvisning av opplastet bilde",
+      removeImage: "Fjern bilde",
+      submit: "Send inn",
+      uploading: "Laster opp...",
+      submitting: "Sender...",
+      success: "Funnet ditt er sendt inn! Læreren din vil snart vurdere det.",
+      unsupportedFileType:
+        "Filtypen støttes ikke. Last opp et bilde (JPEG, PNG, GIF eller WebP).",
+      bannedWords: "Teksten inneholder ord som ikke er tillatt.",
+    },
 
-      errors: {
-        notAuthenticated: 'Du må være innlogget for å se mysterier.',
-        loadFailed: 'Kunne ikke laste mysterier. Prøv igjen.',
-        submitFailed: 'Innsendingen feilet. Prøv igjen.',
-      },
+    mySubmissions: {
+      heading: "Mine innsendte",
+      empty:
+        "Du har ikke sendt inn noe enda. Prøv å finne fake news på nettet!",
+      teacherComment: "Lærers kommentar",
     },
-    teacherMystery: {
-      title: 'Ukens mysterium',
-      subtitle: 'Gjennomgå innsendte eksempler og velg ukens mysterier.',
-      loading: 'Laster...',
-      weekLabel: 'Uke {week}',
-      prevWeek: 'Forrige uke',
-      nextWeek: 'Neste uke',
-      pupilLabel: 'Elev',
 
-      tabs: {
-        pending: 'Til vurdering',
-        approved: 'Godkjente',
-        featured: 'Ukens mysterier',
-      },
+    errors: {
+      notAuthenticated: "Du må være innlogget for å se mysterier.",
+      loadFailed: "Kunne ikke laste mysterier. Prøv igjen.",
+      submitFailed: "Innsendingen feilet. Prøv igjen.",
+    },
+  },
+  teacherMystery: {
+    title: "Ukens mysterium",
+    subtitle: "Gjennomgå innsendte eksempler og velg ukens mysterier.",
+    loading: "Laster...",
+    weekLabel: "Uke {week}",
+    prevWeek: "Forrige uke",
+    nextWeek: "Neste uke",
+    pupilLabel: "Elev",
 
-      pending: {
-        empty: 'Ingen innsendte eksempler venter på vurdering.',
-      },
+    tabs: {
+      pending: "Til vurdering",
+      approved: "Godkjente",
+      featured: "Ukens mysterier",
+    },
 
-      approved: {
-        empty: 'Ingen godkjente eksempler ennå.',
-        reviewedBy: 'Godkjent',
-        featuredThisWeek: 'Vist denne uken',
-      },
+    pending: {
+      empty: "Ingen innsendte eksempler venter på vurdering.",
+    },
 
-      featured: {
-        empty: 'Ingen mysterier er lagt ut ennå. Godkjenn et eksempel og legg det til her.',
-        add: 'Legg til mysterium',
-      },
+    approved: {
+      empty: "Ingen godkjente eksempler ennå.",
+      reviewedBy: "Godkjent",
+      featuredThisWeek: "Vist denne uken",
+    },
 
-      actions: {
-        approve: 'Godkjenn',
-        reject: 'Avvis',
-        feature: 'Velg uke',
-        unfeature: 'Fjern',
-      },
+    featured: {
+      empty:
+        "Ingen mysterier er lagt ut ennå. Godkjenn et eksempel og legg det til her.",
+      add: "Legg til mysterium",
+    },
 
-      modal: {
-        approveTitle: 'Godkjenn innsending',
-        rejectTitle: 'Avvis innsending',
-        commentLabel: 'Kommentar til eleven (valgfritt)',
-        commentPlaceholder: 'Flott funn! Du la merke til at...',
-        featureTitle: 'Legg til som ukens mysterium',
-        weekLabel: 'Velg uke',
-        featureConfirm: 'Legg til',
-        cancel: 'Avbryt',
-      },
+    actions: {
+      approve: "Godkjenn",
+      reject: "Avvis",
+      feature: "Velg uke",
+      unfeature: "Fjern",
+    },
 
-      errors: {
-        reviewFailed: 'Kunne ikke vurdere innsendingen. Prøv igjen.',
-        featureFailed: 'Kunne ikke legge til mysterium. Prøv igjen.',
-      },
+    modal: {
+      approveTitle: "Godkjenn innsending",
+      rejectTitle: "Avvis innsending",
+      commentLabel: "Kommentar til eleven (valgfritt)",
+      commentPlaceholder: "Flott funn! Du la merke til at...",
+      featureTitle: "Legg til som ukens mysterium",
+      weekLabel: "Velg uke",
+      featureConfirm: "Legg til",
+      cancel: "Avbryt",
     },
 
+    errors: {
+      reviewFailed: "Kunne ikke vurdere innsendingen. Prøv igjen.",
+      featureFailed: "Kunne ikke legge til mysterium. Prøv igjen.",
+    },
+  },
 } as const;
diff --git a/src/map/api/__tests__/map.api.spec.ts b/src/map/api/__tests__/map.api.spec.ts
index a54650ab..49c28d9c 100644
--- a/src/map/api/__tests__/map.api.spec.ts
+++ b/src/map/api/__tests__/map.api.spec.ts
@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import {
   requestMapOverview,
@@ -6,188 +6,234 @@ import {
   requestAllStopProgress,
   requestStopProgress,
   requestUpdateStopProgress,
-} from '@/map/api/map.api'
+} from "@/map/api/map.api";
 
 function jsonResponse(body: unknown, init: ResponseInit = {}) {
   return new Response(JSON.stringify(body), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' },
+    headers: { "Content-Type": "application/json" },
     ...init,
-  })
+  });
 }
 
-const AUTH_HEADER = 'Bearer test-token'
-const CLASSROOM_ID = 2
-const PUPIL_USER_ID = 99
-const STOP_ID = 5
+const AUTH_HEADER = "Bearer test-token";
+const CLASSROOM_ID = 2;
+const PUPIL_USER_ID = 99;
+const STOP_ID = 5;
 
 const mapStopOverview = {
   stopId: STOP_ID,
-  slug: 'data-center',
-  title: 'Data Center',
-  category: 'mystery',
+  slug: "data-center",
+  title: "Data Center",
+  category: "mystery",
   displayOrder: 1,
   isFinalBoss: false,
-  status: 'NOT_STARTED',
+  status: "NOT_STARTED",
   stars: 0,
   medalAwarded: false,
-}
+};
 
 const stopProgress = {
   stopId: STOP_ID,
   classroomId: CLASSROOM_ID,
-  status: 'IN_PROGRESS',
+  status: "IN_PROGRESS",
   currentTaskId: 3,
   bestScore: 40,
   medalAwarded: false,
   completedAt: null,
-}
+};
 
-describe('map.api', () => {
+describe("map.api", () => {
   beforeEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  describe('requestMapOverview', () => {
-    it('calls the correct endpoint and returns stop list', async () => {
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse([mapStopOverview]))
-      vi.stubGlobal('fetch', fetchMock)
-
-      const result = await requestMapOverview(CLASSROOM_ID, AUTH_HEADER)
-
-      expect(result).toEqual([mapStopOverview])
-      expect(fetchMock).toHaveBeenCalledOnce()
-      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit]
-      expect(url).toBe(`/api/v1/classrooms/${CLASSROOM_ID}/map-stops`)
-      expect(new Headers(options.headers).get('Authorization')).toBe(AUTH_HEADER)
-      expect(options.credentials).toBe('include')
-    })
+    vi.restoreAllMocks();
+  });
+
+  describe("requestMapOverview", () => {
+    it("calls the correct endpoint and returns stop list", async () => {
+      const fetchMock = vi
+        .fn()
+        .mockResolvedValueOnce(jsonResponse([mapStopOverview]));
+      vi.stubGlobal("fetch", fetchMock);
+
+      const result = await requestMapOverview(CLASSROOM_ID, AUTH_HEADER);
+
+      expect(result).toEqual([mapStopOverview]);
+      expect(fetchMock).toHaveBeenCalledOnce();
+      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+      expect(url).toBe(`/api/v1/classrooms/${CLASSROOM_ID}/map-stops`);
+      expect(new Headers(options.headers).get("Authorization")).toBe(
+        AUTH_HEADER,
+      );
+      expect(options.credentials).toBe("include");
+    });
 
-    it('throws when the server responds with an error', async () => {
+    it("throws when the server responds with an error", async () => {
       vi.stubGlobal(
-        'fetch',
-        vi.fn().mockResolvedValueOnce(
-          jsonResponse({ detail: 'Unauthorized' }, { status: 401 }),
-        ),
-      )
-
-      await expect(requestMapOverview(CLASSROOM_ID, AUTH_HEADER)).rejects.toThrow('Unauthorized')
-    })
-  })
-
-  describe('requestMapStopBySlug', () => {
-    it('calls the correct endpoint with the slug and returns a single stop', async () => {
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse(mapStopOverview))
-      vi.stubGlobal('fetch', fetchMock)
+        "fetch",
+        vi
+          .fn()
+          .mockResolvedValueOnce(
+            jsonResponse({ detail: "Unauthorized" }, { status: 401 }),
+          ),
+      );
 
-      const result = await requestMapStopBySlug(CLASSROOM_ID, 'data-center', AUTH_HEADER)
+      await expect(
+        requestMapOverview(CLASSROOM_ID, AUTH_HEADER),
+      ).rejects.toThrow("Unauthorized");
+    });
+  });
+
+  describe("requestMapStopBySlug", () => {
+    it("calls the correct endpoint with the slug and returns a single stop", async () => {
+      const fetchMock = vi
+        .fn()
+        .mockResolvedValueOnce(jsonResponse(mapStopOverview));
+      vi.stubGlobal("fetch", fetchMock);
+
+      const result = await requestMapStopBySlug(
+        CLASSROOM_ID,
+        "data-center",
+        AUTH_HEADER,
+      );
 
-      expect(result).toEqual(mapStopOverview)
-      const [url] = fetchMock.mock.calls[0] as [string, RequestInit]
-      expect(url).toBe(`/api/v1/classrooms/${CLASSROOM_ID}/map-stops/data-center`)
-    })
+      expect(result).toEqual(mapStopOverview);
+      const [url] = fetchMock.mock.calls[0] as [string, RequestInit];
+      expect(url).toBe(
+        `/api/v1/classrooms/${CLASSROOM_ID}/map-stops/data-center`,
+      );
+    });
 
-    it('throws when no stop matches the slug', async () => {
+    it("throws when no stop matches the slug", async () => {
       vi.stubGlobal(
-        'fetch',
-        vi.fn().mockResolvedValueOnce(
-          jsonResponse({ detail: 'No map stop found for slug: not-a-stop' }, { status: 404 }),
-        ),
-      )
+        "fetch",
+        vi
+          .fn()
+          .mockResolvedValueOnce(
+            jsonResponse(
+              { detail: "No map stop found for slug: not-a-stop" },
+              { status: 404 },
+            ),
+          ),
+      );
 
       await expect(
-        requestMapStopBySlug(CLASSROOM_ID, 'not-a-stop', AUTH_HEADER),
-      ).rejects.toThrow('No map stop found for slug: not-a-stop')
-    })
-  })
-
-  describe('requestAllStopProgress', () => {
-    it('calls the correct endpoint and returns progress list', async () => {
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse([stopProgress]))
-      vi.stubGlobal('fetch', fetchMock)
-
-      const result = await requestAllStopProgress(CLASSROOM_ID, PUPIL_USER_ID, AUTH_HEADER)
+        requestMapStopBySlug(CLASSROOM_ID, "not-a-stop", AUTH_HEADER),
+      ).rejects.toThrow("No map stop found for slug: not-a-stop");
+    });
+  });
+
+  describe("requestAllStopProgress", () => {
+    it("calls the correct endpoint and returns progress list", async () => {
+      const fetchMock = vi
+        .fn()
+        .mockResolvedValueOnce(jsonResponse([stopProgress]));
+      vi.stubGlobal("fetch", fetchMock);
+
+      const result = await requestAllStopProgress(
+        CLASSROOM_ID,
+        PUPIL_USER_ID,
+        AUTH_HEADER,
+      );
 
-      expect(result).toEqual([stopProgress])
-      const [url] = fetchMock.mock.calls[0] as [string, RequestInit]
+      expect(result).toEqual([stopProgress]);
+      const [url] = fetchMock.mock.calls[0] as [string, RequestInit];
       expect(url).toBe(
         `/api/v1/classrooms/${CLASSROOM_ID}/pupils/${PUPIL_USER_ID}/stop-progress`,
-      )
-    })
-  })
-
-  describe('requestStopProgress', () => {
-    it('calls the correct endpoint and returns a single progress record', async () => {
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse(stopProgress))
-      vi.stubGlobal('fetch', fetchMock)
-
-      const result = await requestStopProgress(CLASSROOM_ID, PUPIL_USER_ID, STOP_ID, AUTH_HEADER)
+      );
+    });
+  });
+
+  describe("requestStopProgress", () => {
+    it("calls the correct endpoint and returns a single progress record", async () => {
+      const fetchMock = vi
+        .fn()
+        .mockResolvedValueOnce(jsonResponse(stopProgress));
+      vi.stubGlobal("fetch", fetchMock);
+
+      const result = await requestStopProgress(
+        CLASSROOM_ID,
+        PUPIL_USER_ID,
+        STOP_ID,
+        AUTH_HEADER,
+      );
 
-      expect(result).toEqual(stopProgress)
-      const [url] = fetchMock.mock.calls[0] as [string, RequestInit]
+      expect(result).toEqual(stopProgress);
+      const [url] = fetchMock.mock.calls[0] as [string, RequestInit];
       expect(url).toBe(
         `/api/v1/classrooms/${CLASSROOM_ID}/pupils/${PUPIL_USER_ID}/stop-progress/${STOP_ID}`,
-      )
-    })
+      );
+    });
 
-    it('throws when progress record is not found', async () => {
+    it("throws when progress record is not found", async () => {
       vi.stubGlobal(
-        'fetch',
-        vi.fn().mockResolvedValueOnce(
-          jsonResponse({ detail: 'Progress record not found' }, { status: 404 }),
-        ),
-      )
+        "fetch",
+        vi
+          .fn()
+          .mockResolvedValueOnce(
+            jsonResponse(
+              { detail: "Progress record not found" },
+              { status: 404 },
+            ),
+          ),
+      );
 
       await expect(
         requestStopProgress(CLASSROOM_ID, PUPIL_USER_ID, STOP_ID, AUTH_HEADER),
-      ).rejects.toThrow('Progress record not found')
-    })
-  })
+      ).rejects.toThrow("Progress record not found");
+    });
+  });
 
-  describe('requestUpdateStopProgress', () => {
-    it('sends a PATCH with the payload and returns the updated record', async () => {
-      const updated = { ...stopProgress, status: 'COMPLETED', bestScore: 90 }
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse(updated))
-      vi.stubGlobal('fetch', fetchMock)
+  describe("requestUpdateStopProgress", () => {
+    it("sends a PATCH with the payload and returns the updated record", async () => {
+      const updated = { ...stopProgress, status: "COMPLETED", bestScore: 90 };
+      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse(updated));
+      vi.stubGlobal("fetch", fetchMock);
 
       const result = await requestUpdateStopProgress(
         CLASSROOM_ID,
         PUPIL_USER_ID,
         STOP_ID,
-        { status: 'COMPLETED', bestScore: 90 },
+        { status: "COMPLETED", bestScore: 90 },
         AUTH_HEADER,
-      )
+      );
 
-      expect(result).toEqual(updated)
-      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit]
+      expect(result).toEqual(updated);
+      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit];
       expect(url).toBe(
         `/api/v1/classrooms/${CLASSROOM_ID}/pupils/${PUPIL_USER_ID}/stop-progress/${STOP_ID}`,
-      )
-      expect(options.method).toBe('PATCH')
-      expect(JSON.parse(options.body as string)).toEqual({ status: 'COMPLETED', bestScore: 90 })
-      expect(new Headers(options.headers).get('Content-Type')).toBe('application/json')
-    })
-
-    it('throws when the status transition is invalid', async () => {
+      );
+      expect(options.method).toBe("PATCH");
+      expect(JSON.parse(options.body as string)).toEqual({
+        status: "COMPLETED",
+        bestScore: 90,
+      });
+      expect(new Headers(options.headers).get("Content-Type")).toBe(
+        "application/json",
+      );
+    });
+
+    it("throws when the status transition is invalid", async () => {
       vi.stubGlobal(
-        'fetch',
-        vi.fn().mockResolvedValueOnce(
-          jsonResponse(
-            { detail: 'Invalid status transition: COMPLETED → IN_PROGRESS' },
-            { status: 422 },
+        "fetch",
+        vi
+          .fn()
+          .mockResolvedValueOnce(
+            jsonResponse(
+              { detail: "Invalid status transition: COMPLETED → IN_PROGRESS" },
+              { status: 422 },
+            ),
           ),
-        ),
-      )
+      );
 
       await expect(
         requestUpdateStopProgress(
           CLASSROOM_ID,
           PUPIL_USER_ID,
           STOP_ID,
-          { status: 'IN_PROGRESS' },
+          { status: "IN_PROGRESS" },
           AUTH_HEADER,
         ),
-      ).rejects.toThrow('Invalid status transition: COMPLETED → IN_PROGRESS')
-    })
-  })
-})
\ No newline at end of file
+      ).rejects.toThrow("Invalid status transition: COMPLETED → IN_PROGRESS");
+    });
+  });
+});
diff --git a/src/map/api/map.api.ts b/src/map/api/map.api.ts
index d0da0e5a..4aad0262 100644
--- a/src/map/api/map.api.ts
+++ b/src/map/api/map.api.ts
@@ -1,17 +1,24 @@
-import type { MapStopOverview, StopProgress, StopProgressStatus } from '@/map/model/map.types'
-import { readJsonErrorMessage } from '@/shared/api/response-errors'
-
-const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
-const CLASSROOMS_BASE = `${API_BASE_URL}/api/v1/classrooms`
+import type {
+  MapStopOverview,
+  StopProgress,
+  StopProgressStatus,
+} from "@/map/model/map.types";
+import { readJsonErrorMessage } from "@/shared/api/response-errors";
+
+const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? "").replace(
+  /\/$/,
+  "",
+);
+const CLASSROOMS_BASE = `${API_BASE_URL}/api/v1/classrooms`;
 
 async function getResponseErrorMessage(response: Response): Promise<string> {
-  const fallbackMessage = `Map request failed with status ${response.status}.`
-  const errorMessage = await readJsonErrorMessage(response)
+  const fallbackMessage = `Map request failed with status ${response.status}.`;
+  const errorMessage = await readJsonErrorMessage(response);
 
-  if (errorMessage) return errorMessage
+  if (errorMessage) return errorMessage;
 
-  const text = await response.text().catch(() => '')
-  return text || fallbackMessage
+  const text = await response.text().catch(() => "");
+  return text || fallbackMessage;
 }
 
 async function fetchMapJson<T>(
@@ -19,24 +26,24 @@ async function fetchMapJson<T>(
   authorizationHeader: string,
   options: { method?: string; body?: unknown } = {},
 ): Promise<T> {
-  const headers = new Headers({ Authorization: authorizationHeader })
+  const headers = new Headers({ Authorization: authorizationHeader });
 
   if (options.body !== undefined) {
-    headers.set('Content-Type', 'application/json')
+    headers.set("Content-Type", "application/json");
   }
 
   const response = await fetch(url, {
-    method: options.method ?? 'GET',
+    method: options.method ?? "GET",
     headers,
     body: options.body !== undefined ? JSON.stringify(options.body) : undefined,
-    credentials: 'include',
-  })
+    credentials: "include",
+  });
 
   if (!response.ok) {
-    throw new Error(await getResponseErrorMessage(response))
+    throw new Error(await getResponseErrorMessage(response));
   }
 
-  return (await response.json()) as T
+  return (await response.json()) as T;
 }
 
 // /classrooms/{classroomId}/map-stops
@@ -48,7 +55,7 @@ export function requestMapOverview(
   return fetchMapJson<MapStopOverview[]>(
     `${CLASSROOMS_BASE}/${classroomId}/map-stops`,
     authorizationHeader,
-  )
+  );
 }
 
 export function requestMapStopBySlug(
@@ -59,7 +66,7 @@ export function requestMapStopBySlug(
   return fetchMapJson<MapStopOverview>(
     `${CLASSROOMS_BASE}/${classroomId}/map-stops/${slug}`,
     authorizationHeader,
-  )
+  );
 }
 
 // /classrooms/{classroomId}/pupils/{pupilUserId}/stop-progress
@@ -72,7 +79,7 @@ export function requestAllStopProgress(
   return fetchMapJson<StopProgress[]>(
     `${CLASSROOMS_BASE}/${classroomId}/pupils/${pupilUserId}/stop-progress`,
     authorizationHeader,
-  )
+  );
 }
 
 export function requestStopProgress(
@@ -84,14 +91,14 @@ export function requestStopProgress(
   return fetchMapJson<StopProgress>(
     `${CLASSROOMS_BASE}/${classroomId}/pupils/${pupilUserId}/stop-progress/${stopId}`,
     authorizationHeader,
-  )
+  );
 }
 
 export interface UpdateStopProgressPayload {
-  status?: StopProgressStatus
-  currentTaskId?: number
-  bestScore?: number
-  medalAwarded?: boolean
+  status?: StopProgressStatus;
+  currentTaskId?: number;
+  bestScore?: number;
+  medalAwarded?: boolean;
 }
 
 export function requestUpdateStopProgress(
@@ -104,6 +111,6 @@ export function requestUpdateStopProgress(
   return fetchMapJson<StopProgress>(
     `${CLASSROOMS_BASE}/${classroomId}/pupils/${pupilUserId}/stop-progress/${stopId}`,
     authorizationHeader,
-    { method: 'PATCH', body: payload },
-  )
+    { method: "PATCH", body: payload },
+  );
 }
diff --git a/src/map/components/GameMapScene.vue b/src/map/components/GameMapScene.vue
index e61d24c4..b77fd4b7 100644
--- a/src/map/components/GameMapScene.vue
+++ b/src/map/components/GameMapScene.vue
@@ -13,82 +13,86 @@
  * onUnmounted→ cancel rAF → remove listeners → dispose all GPU resources
  */
 
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import * as THREE from 'three'
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
-import MapStopOverlay from '@/map/components/MapStopOverlay.vue'
-import type { MapStopOverview } from '@/map/model/map.types'
-
-import mapBaseModel from '@/assets/gamemap/map-no-stops.glb?url'
-import detectiveOffice from '@/assets/gamemap/detective-office-stop.glb?url'
-import newsQuarter from '@/assets/gamemap/news-quarter-stop.glb?url'
-import fotograph from '@/assets/gamemap/fotograph-stop.glb?url'
-import postOffice from '@/assets/gamemap/post-office-stop.glb?url'
-import marketPlace from '@/assets/gamemap/market-place-stop.glb?url'
-import passwordBank from '@/assets/gamemap/password-bank-stop.glb?url'
-import socialMeetingPlace from '@/assets/gamemap/sosial-meeting-place-stop.glb?url'
-import dataCenter from '@/assets/gamemap/data-center-stop.glb?url'
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import * as THREE from "three";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+import MapStopOverlay from "@/map/components/MapStopOverlay.vue";
+import type { MapStopOverview } from "@/map/model/map.types";
+
+import mapBaseModel from "@/assets/gamemap/map-no-stops.glb?url";
+import detectiveOffice from "@/assets/gamemap/detective-office-stop.glb?url";
+import newsQuarter from "@/assets/gamemap/news-quarter-stop.glb?url";
+import fotograph from "@/assets/gamemap/fotograph-stop.glb?url";
+import postOffice from "@/assets/gamemap/post-office-stop.glb?url";
+import marketPlace from "@/assets/gamemap/market-place-stop.glb?url";
+import passwordBank from "@/assets/gamemap/password-bank-stop.glb?url";
+import socialMeetingPlace from "@/assets/gamemap/sosial-meeting-place-stop.glb?url";
+import dataCenter from "@/assets/gamemap/data-center-stop.glb?url";
 
 const props = defineProps<{
-  badgeLabel?: string | null
-  homeRoute: string
-  resolveStopRoute: (slug: string) => string
-  stops: MapStopOverview[]
-}>()
-
-const router = useRouter()
-const { t } = useI18n()
-const canvas = ref<HTMLCanvasElement>()
-const showLockedBubble = ref(false)
-const screenPositions = ref<Record<number, { x: number; y: number }>>({})
-const isFading = ref(false)
-
-let renderer: THREE.WebGLRenderer | null = null
-let scene: THREE.Scene | null = null
-let camera: THREE.PerspectiveCamera | null = null
-let raycaster: THREE.Raycaster | null = null
-let mouse: THREE.Vector2 | null = null
+  badgeLabel?: string | null;
+  homeRoute: string;
+  resolveStopRoute: (slug: string) => string;
+  stops: MapStopOverview[];
+}>();
+
+const router = useRouter();
+const { t } = useI18n();
+const canvas = ref<HTMLCanvasElement>();
+const showLockedBubble = ref(false);
+const screenPositions = ref<Record<number, { x: number; y: number }>>({});
+const isFading = ref(false);
+
+let renderer: THREE.WebGLRenderer | null = null;
+let scene: THREE.Scene | null = null;
+let camera: THREE.PerspectiveCamera | null = null;
+let raycaster: THREE.Raycaster | null = null;
+let mouse: THREE.Vector2 | null = null;
 
 // rAF handle returned by requestAnimationFrame — used to cancel on unmount.
-let animFrameId = 0
+let animFrameId = 0;
 
 // Dirty flag: when false the render loop skips draw calls, saving GPU time.
 // Set to true whenever the camera moves or the scene changes.
-let needsRender = true
+let needsRender = true;
 
 // Zoom-animation state.
-let isAnimating = false
-let animationStart = 0
+let isAnimating = false;
+let animationStart = 0;
 
 // Populated after GLTF loads; used for raycasting.
-let buildingMeshes: Array<{ mesh: THREE.Object3D; stopOrder: number; slug: string }> = []
+let buildingMeshes: Array<{
+  mesh: THREE.Object3D;
+  stopOrder: number;
+  slug: string;
+}> = [];
 
 // Flat array extracted from buildingMeshes — rebuilt once when all loaders are done.
-let buildingMeshObjects: THREE.Object3D[] = []
-let homeMeshes: THREE.Object3D[] = []
+let buildingMeshObjects: THREE.Object3D[] = [];
+let homeMeshes: THREE.Object3D[] = [];
 
 // All materials cloned for locked-stop tinting — must be disposed on unmount.
-const clonedMaterials: THREE.Material[] = []
+const clonedMaterials: THREE.Material[] = [];
 
 // Guards against loader callbacks firing after the component is unmounted.
-let isMounted = false
+let isMounted = false;
 
 // Stored so they can be removed in onUnmounted.
-let handleCanvasClick: ((e: MouseEvent) => void) | null = null
-let handleCanvasMouseMove: ((e: MouseEvent) => void) | null = null
+let handleCanvasClick: ((e: MouseEvent) => void) | null = null;
+let handleCanvasMouseMove: ((e: MouseEvent) => void) | null = null;
 
-let lockedBubbleTimeout: ReturnType<typeof setTimeout> | null = null
+let lockedBubbleTimeout: ReturnType<typeof setTimeout> | null = null;
 
 // Constants
-const ANIMATION_DURATION = 600 // ms
+const ANIMATION_DURATION = 600; // ms
 
 /** Starting camera position — also the position the zoom animates away from. */
-const cameraOrigin = new THREE.Vector3(7.359, 5.551, -6.926)
+const cameraOrigin = new THREE.Vector3(7.359, 5.551, -6.926);
 
 /** Interpolated target during the zoom animation; set in navigateWithAnimation. */
-const cameraTarget = new THREE.Vector3()
+const cameraTarget = new THREE.Vector3();
 
 /**
  * Per-stop 3D configuration keyed by displayOrder.
@@ -96,14 +100,14 @@ const cameraTarget = new THREE.Vector3()
  * to avoid creating objects every frame.
  */
 const STOP_CONFIG: Record<
-    number,
-    {
-      modelUrl: string
-      position: [number, number, number]
-      rotation?: [number, number, number]
-      scale?: number | [number, number, number]
-      worldPos: THREE.Vector3
-    }
+  number,
+  {
+    modelUrl: string;
+    position: [number, number, number];
+    rotation?: [number, number, number];
+    scale?: number | [number, number, number];
+    worldPos: THREE.Vector3;
+  }
 > = {
   1: {
     modelUrl: newsQuarter,
@@ -154,7 +158,7 @@ const STOP_CONFIG: Record<
     scale: 1,
     worldPos: new THREE.Vector3(-12.3, 2, 2),
   },
-}
+};
 
 const HOME_CONFIG = {
   modelUrl: detectiveOffice,
@@ -163,7 +167,7 @@ const HOME_CONFIG = {
   scale: 0.9,
   /** Pre-computed world position for the home building. */
   worldPos: new THREE.Vector3(3.8, 1, 2),
-}
+};
 
 /**
  * Merges server stop data with local config and current screen positions.
@@ -171,20 +175,22 @@ const HOME_CONFIG = {
  * mismatches are surfaced early.
  */
 const stopsWithConfig = computed(() =>
-    props.stops.map((stop) => {
-      const config = STOP_CONFIG[stop.displayOrder]
-      if (!config) {
-        console.warn(`[GameMapScene] No STOP_CONFIG entry for displayOrder ${stop.displayOrder}`)
-      }
-      return {
-        ...stop,
-        config,
-        screenPos: screenPositions.value[stop.displayOrder],
-      }
-    }),
-)
+  props.stops.map((stop) => {
+    const config = STOP_CONFIG[stop.displayOrder];
+    if (!config) {
+      console.warn(
+        `[GameMapScene] No STOP_CONFIG entry for displayOrder ${stop.displayOrder}`,
+      );
+    }
+    return {
+      ...stop,
+      config,
+      screenPos: screenPositions.value[stop.displayOrder],
+    };
+  }),
+);
 
-const homeScreenPos = computed(() => screenPositions.value[-1])
+const homeScreenPos = computed(() => screenPositions.value[-1]);
 
 // ---------------------------------------------------------------------------
 // UI helpers
@@ -195,16 +201,16 @@ const homeScreenPos = computed(() => screenPositions.value[-1])
  * Re-triggering before the timeout expires resets the timer.
  */
 function triggerLockedBubble(): void {
-  if (lockedBubbleTimeout) clearTimeout(lockedBubbleTimeout)
-  showLockedBubble.value = true
+  if (lockedBubbleTimeout) clearTimeout(lockedBubbleTimeout);
+  showLockedBubble.value = true;
   lockedBubbleTimeout = setTimeout(() => {
-    showLockedBubble.value = false
-  }, 3000)
+    showLockedBubble.value = false;
+  }, 3000);
 }
 
 /** Returns true when a stop can be entered (i.e. is not locked). */
-function isClickableStop(status: MapStopOverview['status']): boolean {
-  return status !== 'LOCKED'
+function isClickableStop(status: MapStopOverview["status"]): boolean {
+  return status !== "LOCKED";
 }
 
 // Navigation
@@ -217,17 +223,17 @@ function isClickableStop(status: MapStopOverview['status']): boolean {
  * animation frames.
  */
 function navigateWithAnimation(targetPos: THREE.Vector3, route: string): void {
-  if (isAnimating) return
+  if (isAnimating) return;
 
-  isAnimating = true
-  isFading.value = true
-  needsRender = true
-  animationStart = performance.now()
-  cameraTarget.copy(cameraOrigin).lerp(targetPos, 0.4)
+  isAnimating = true;
+  isFading.value = true;
+  needsRender = true;
+  animationStart = performance.now();
+  cameraTarget.copy(cameraOrigin).lerp(targetPos, 0.4);
 
   window.setTimeout(() => {
-    void router.push(route)
-  }, ANIMATION_DURATION)
+    void router.push(route);
+  }, ANIMATION_DURATION);
 }
 
 // 3D → 2D projection
@@ -238,14 +244,14 @@ function navigateWithAnimation(targetPos: THREE.Vector3, route: string): void {
  * which safely pushes overlays off-screen.
  */
 function projectToScreen(worldPos: THREE.Vector3): { x: number; y: number } {
-  if (!camera || !canvas.value) return { x: -999, y: -999 }
+  if (!camera || !canvas.value) return { x: -999, y: -999 };
 
-  const projected = worldPos.clone().project(camera)
-  const rect = canvas.value.getBoundingClientRect()
+  const projected = worldPos.clone().project(camera);
+  const rect = canvas.value.getBoundingClientRect();
   return {
     x: (projected.x * 0.5 + 0.5) * rect.width,
     y: (-projected.y * 0.5 + 0.5) * rect.height,
-  }
+  };
 }
 
 /**
@@ -255,16 +261,16 @@ function projectToScreen(worldPos: THREE.Vector3): { x: number; y: number } {
  * no need to call this every frame.
  */
 function updateScreenPositions(): void {
-  const positions: Record<number, { x: number; y: number }> = {}
+  const positions: Record<number, { x: number; y: number }> = {};
 
   for (const stop of props.stops) {
-    const config = STOP_CONFIG[stop.displayOrder]
-    if (!config) continue
-    positions[stop.displayOrder] = projectToScreen(config.worldPos)
+    const config = STOP_CONFIG[stop.displayOrder];
+    if (!config) continue;
+    positions[stop.displayOrder] = projectToScreen(config.worldPos);
   }
 
-  positions[-1] = projectToScreen(HOME_CONFIG.worldPos)
-  screenPositions.value = positions
+  positions[-1] = projectToScreen(HOME_CONFIG.worldPos);
+  screenPositions.value = positions;
 }
 
 /**
@@ -272,12 +278,12 @@ function updateScreenPositions(): void {
  * Marks the scene dirty so the updated frame is drawn.
  */
 function onResize(): void {
-  if (!camera || !renderer) return
+  if (!camera || !renderer) return;
 
-  camera.aspect = window.innerWidth / window.innerHeight
-  camera.updateProjectionMatrix()
-  renderer.setSize(window.innerWidth, window.innerHeight)
-  needsRender = true
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  needsRender = true;
 }
 
 // Render loop (dirty-flag pattern)
@@ -286,23 +292,27 @@ function onResize(): void {
  * Renders a frame.
  */
 function renderFrame(): void {
-  animFrameId = requestAnimationFrame(renderFrame)
+  animFrameId = requestAnimationFrame(renderFrame);
 
-  if (!isMounted) return  // ← the new guard
+  if (!isMounted) return; // ← the new guard
 
   if (isAnimating && camera) {
-    const elapsed = performance.now() - animationStart
-    const progress = Math.min(elapsed / ANIMATION_DURATION, 1)
-    camera.position.lerpVectors(cameraOrigin, cameraTarget, progress * progress)
-    needsRender = true
-    if (progress >= 1) isAnimating = false
+    const elapsed = performance.now() - animationStart;
+    const progress = Math.min(elapsed / ANIMATION_DURATION, 1);
+    camera.position.lerpVectors(
+      cameraOrigin,
+      cameraTarget,
+      progress * progress,
+    );
+    needsRender = true;
+    if (progress >= 1) isAnimating = false;
   }
 
-  if (!needsRender) return
-  needsRender = false
+  if (!needsRender) return;
+  needsRender = false;
 
-  updateScreenPositions()
-  renderer?.render(scene!, camera!)
+  updateScreenPositions();
+  renderer?.render(scene!, camera!);
 }
 
 /**
@@ -318,7 +328,7 @@ function renderFrame(): void {
  * the animation finishes the flag is cleared and the loop goes back to idle.
  */
 function startRenderLoop(): void {
-  renderFrame()
+  renderFrame();
 }
 
 // GPU resource disposal
@@ -332,26 +342,26 @@ function startRenderLoop(): void {
  */
 function disposeSceneResources(): void {
   scene?.traverse((obj) => {
-    const mesh = obj as THREE.Mesh
-    if (!mesh.isMesh) return
+    const mesh = obj as THREE.Mesh;
+    if (!mesh.isMesh) return;
 
-    mesh.geometry?.dispose()
+    mesh.geometry?.dispose();
 
     const materials = Array.isArray(mesh.material)
-        ? (mesh.material as THREE.Material[])
-        : [mesh.material as THREE.Material]
+      ? (mesh.material as THREE.Material[])
+      : [mesh.material as THREE.Material];
 
     for (const mat of materials) {
-      mat?.dispose()
+      mat?.dispose();
     }
-  })
+  });
 
   // Dispose cloned locked-stop materials that may no longer be attached to any
   // mesh (e.g. if the mesh was removed from the scene before unmount).
   for (const mat of clonedMaterials) {
-    mat.dispose()
+    mat.dispose();
   }
-  clonedMaterials.length = 0
+  clonedMaterials.length = 0;
 }
 
 // GLTF loaders
@@ -363,11 +373,11 @@ function disposeSceneResources(): void {
  */
 function loadBaseMap(loader: GLTFLoader): void {
   loader.load(mapBaseModel, (gltf) => {
-    if (!isMounted) return
-    gltf.scene.rotation.y = Math.PI * 0.4
-    scene?.add(gltf.scene)
-    needsRender = true
-  })
+    if (!isMounted) return;
+    gltf.scene.rotation.y = Math.PI * 0.4;
+    scene?.add(gltf.scene);
+    needsRender = true;
+  });
 }
 
 /**
@@ -377,22 +387,22 @@ function loadBaseMap(loader: GLTFLoader): void {
  * @param loader - Shared GLTFLoader instance.
  */
 function loadHomeModel(loader: GLTFLoader): void {
-  homeMeshes = []
+  homeMeshes = [];
   loader.load(HOME_CONFIG.modelUrl, (gltf) => {
-    if (!isMounted) return
+    if (!isMounted) return;
 
-    const model = gltf.scene
-    model.position.set(...HOME_CONFIG.position)
-    model.rotation.set(...HOME_CONFIG.rotation)
-    model.scale.setScalar(HOME_CONFIG.scale)
-    scene?.add(model)
+    const model = gltf.scene;
+    model.position.set(...HOME_CONFIG.position);
+    model.rotation.set(...HOME_CONFIG.rotation);
+    model.scale.setScalar(HOME_CONFIG.scale);
+    scene?.add(model);
 
     model.traverse((child) => {
-      if ((child as THREE.Mesh).isMesh) homeMeshes.push(child)
-    })
+      if ((child as THREE.Mesh).isMesh) homeMeshes.push(child);
+    });
 
-    needsRender = true
-  })
+    needsRender = true;
+  });
 }
 
 /**
@@ -403,30 +413,30 @@ function loadHomeModel(loader: GLTFLoader): void {
  * @param mesh - The mesh whose material(s) should be replaced.
  */
 function applyLockedMaterial(mesh: THREE.Mesh): void {
-  const wasArray = Array.isArray(mesh.material)
+  const wasArray = Array.isArray(mesh.material);
   const originals = wasArray
-      ? (mesh.material as THREE.Material[])
-      : [mesh.material as THREE.Material]
+    ? (mesh.material as THREE.Material[])
+    : [mesh.material as THREE.Material];
 
   const locked = originals.map((mat) => {
-    const clone = mat.clone() as THREE.MeshStandardMaterial
+    const clone = mat.clone() as THREE.MeshStandardMaterial;
     // Clear all texture maps so the flat colour is unaffected by lighting rigs.
-    clone.map = null
-    clone.emissiveMap = null
-    clone.roughnessMap = null
-    clone.metalnessMap = null
-    clone.normalMap = null
-    clone.aoMap = null
-    clone.color.set(0x333333)
-    clone.emissive.set(0x000000)
-    clone.roughness = 1
-    clone.metalness = 0
-    clone.needsUpdate = true
-    clonedMaterials.push(clone)
-    return clone
-  })
-
-  mesh.material = wasArray ? locked : locked[0]!
+    clone.map = null;
+    clone.emissiveMap = null;
+    clone.roughnessMap = null;
+    clone.metalnessMap = null;
+    clone.normalMap = null;
+    clone.aoMap = null;
+    clone.color.set(0x333333);
+    clone.emissive.set(0x000000);
+    clone.roughness = 1;
+    clone.metalness = 0;
+    clone.needsUpdate = true;
+    clonedMaterials.push(clone);
+    return clone;
+  });
+
+  mesh.material = wasArray ? locked : locked[0]!;
 }
 
 /**
@@ -442,49 +452,55 @@ function applyLockedMaterial(mesh: THREE.Mesh): void {
  * @param config  - Local 3D configuration for this stop.
  */
 function loadStopModel(
-    loader: GLTFLoader,
-    stop: MapStopOverview,
-    config: (typeof STOP_CONFIG)[number],
+  loader: GLTFLoader,
+  stop: MapStopOverview,
+  config: (typeof STOP_CONFIG)[number],
 ): void {
   if (!stop.slug) {
-    console.warn(`[GameMapScene] Stop ${stop.displayOrder} has no slug — skipping load.`)
-    return
+    console.warn(
+      `[GameMapScene] Stop ${stop.displayOrder} has no slug — skipping load.`,
+    );
+    return;
   }
 
-  const stopSlug = stop.slug
+  const stopSlug = stop.slug;
 
   loader.load(config.modelUrl, (gltf) => {
-    if (!isMounted) return
+    if (!isMounted) return;
 
-    const model = gltf.scene
-    model.position.set(...config.position)
+    const model = gltf.scene;
+    model.position.set(...config.position);
 
-    if (config.rotation) model.rotation.set(...config.rotation)
+    if (config.rotation) model.rotation.set(...config.rotation);
 
     if (config.scale !== undefined) {
       if (Array.isArray(config.scale)) {
-        model.scale.set(...config.scale)
+        model.scale.set(...config.scale);
       } else {
-        model.scale.setScalar(config.scale)
+        model.scale.setScalar(config.scale);
       }
     }
 
-    scene?.add(model)
+    scene?.add(model);
 
     model.traverse((child) => {
-      const mesh = child as THREE.Mesh
-      if (!mesh.isMesh) return
+      const mesh = child as THREE.Mesh;
+      if (!mesh.isMesh) return;
 
-      if (stop.status === 'LOCKED') applyLockedMaterial(mesh)
+      if (stop.status === "LOCKED") applyLockedMaterial(mesh);
 
-      buildingMeshes.push({ mesh: child, stopOrder: stop.displayOrder, slug: stopSlug })
-    })
+      buildingMeshes.push({
+        mesh: child,
+        stopOrder: stop.displayOrder,
+        slug: stopSlug,
+      });
+    });
 
     // Rebuild the flat mesh array used by the mousemove raycaster so it
     // never needs to be re-mapped inside a hot event handler.
-    buildingMeshObjects = buildingMeshes.map((e) => e.mesh)
-    needsRender = true
-  })
+    buildingMeshObjects = buildingMeshes.map((e) => e.mesh);
+    needsRender = true;
+  });
 }
 
 // Input handlers
@@ -497,38 +513,38 @@ function loadStopModel(
  */
 function createClickHandler(): (event: MouseEvent) => void {
   return (event: MouseEvent) => {
-    if (!camera || !canvas.value || !raycaster || !mouse) return
+    if (!camera || !canvas.value || !raycaster || !mouse) return;
 
-    const rect = canvas.value.getBoundingClientRect()
-    mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
-    mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
-    raycaster.setFromCamera(mouse, camera)
+    const rect = canvas.value.getBoundingClientRect();
+    mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+    mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+    raycaster.setFromCamera(mouse, camera);
 
     // Check home building first.
-    const [homeHit] = raycaster.intersectObjects(homeMeshes)
+    const [homeHit] = raycaster.intersectObjects(homeMeshes);
     if (homeHit) {
-      navigateWithAnimation(HOME_CONFIG.worldPos, props.homeRoute)
-      return
+      navigateWithAnimation(HOME_CONFIG.worldPos, props.homeRoute);
+      return;
     }
 
     // Check stop buildings.
-    const [firstHit] = raycaster.intersectObjects(buildingMeshObjects)
-    if (!firstHit) return
+    const [firstHit] = raycaster.intersectObjects(buildingMeshObjects);
+    if (!firstHit) return;
 
-    const hit = buildingMeshes.find((e) => e.mesh === firstHit.object)
-    if (!hit) return
+    const hit = buildingMeshes.find((e) => e.mesh === firstHit.object);
+    if (!hit) return;
 
-    const stop = props.stops.find((e) => e.slug === hit.slug)
-    if (stop?.status === 'LOCKED') {
-      triggerLockedBubble()
-      return
+    const stop = props.stops.find((e) => e.slug === hit.slug);
+    if (stop?.status === "LOCKED") {
+      triggerLockedBubble();
+      return;
     }
 
-    const config = STOP_CONFIG[hit.stopOrder]
-    if (!config) return
+    const config = STOP_CONFIG[hit.stopOrder];
+    if (!config) return;
 
-    navigateWithAnimation(config.worldPos, props.resolveStopRoute(hit.slug))
-  }
+    navigateWithAnimation(config.worldPos, props.resolveStopRoute(hit.slug));
+  };
 }
 
 /**
@@ -540,116 +556,126 @@ function createClickHandler(): (event: MouseEvent) => void {
  */
 function createMouseMoveHandler(): (event: MouseEvent) => void {
   return (event: MouseEvent) => {
-    if (!camera || !canvas.value || !raycaster || !mouse) return
+    if (!camera || !canvas.value || !raycaster || !mouse) return;
 
-    const rect = canvas.value.getBoundingClientRect()
-    mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
-    mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
-    raycaster.setFromCamera(mouse, camera)
+    const rect = canvas.value.getBoundingClientRect();
+    mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+    mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+    raycaster.setFromCamera(mouse, camera);
 
-    const [homeHit] = raycaster.intersectObjects(homeMeshes)
+    const [homeHit] = raycaster.intersectObjects(homeMeshes);
     if (homeHit) {
-      canvas.value.style.cursor = 'pointer'
-      return
+      canvas.value.style.cursor = "pointer";
+      return;
     }
 
-    const [firstHit] = raycaster.intersectObjects(buildingMeshObjects)
+    const [firstHit] = raycaster.intersectObjects(buildingMeshObjects);
     if (!firstHit) {
-      canvas.value.style.cursor = 'default'
-      return
+      canvas.value.style.cursor = "default";
+      return;
     }
 
-    const hit = buildingMeshes.find((e) => e.mesh === firstHit.object)
-    const stop = props.stops.find((e) => e.slug === hit?.slug)
-    canvas.value.style.cursor = stop && isClickableStop(stop.status) ? 'pointer' : 'default'
-  }
+    const hit = buildingMeshes.find((e) => e.mesh === firstHit.object);
+    const stop = props.stops.find((e) => e.slug === hit?.slug);
+    canvas.value.style.cursor =
+      stop && isClickableStop(stop.status) ? "pointer" : "default";
+  };
 }
 
 onMounted(() => {
-  if (!canvas.value) return
+  if (!canvas.value) return;
 
-  isMounted = true
-  THREE.Cache.enabled = false
+  isMounted = true;
+  THREE.Cache.enabled = false;
 
   // --- Renderer ---
-  renderer = new THREE.WebGLRenderer({ canvas: canvas.value, antialias: true })
-  renderer.setPixelRatio(window.devicePixelRatio)
-  renderer.setSize(window.innerWidth, window.innerHeight)
+  renderer = new THREE.WebGLRenderer({ canvas: canvas.value, antialias: true });
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(window.innerWidth, window.innerHeight);
 
   // --- Scene ---
-  scene = new THREE.Scene()
-  scene.background = new THREE.Color(0x87ceeb)
+  scene = new THREE.Scene();
+  scene.background = new THREE.Color(0x87ceeb);
 
   // --- Camera ---
-  camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000)
-  camera.position.copy(cameraOrigin)
-  camera.lookAt(-3, 0, 3)
+  camera = new THREE.PerspectiveCamera(
+    35,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    1000,
+  );
+  camera.position.copy(cameraOrigin);
+  camera.lookAt(-3, 0, 3);
 
   // --- Lighting ---
-  scene.add(new THREE.AmbientLight(0xffffff, 1.2))
-  const sun = new THREE.DirectionalLight(0xffffff, 1.5)
-  sun.position.set(5, 10, 5)
-  scene.add(sun)
+  scene.add(new THREE.AmbientLight(0xffffff, 1.2));
+  const sun = new THREE.DirectionalLight(0xffffff, 1.5);
+  sun.position.set(5, 10, 5);
+  scene.add(sun);
 
   // --- Models ---
-  const loader = new GLTFLoader()
-  loadBaseMap(loader)
-  loadHomeModel(loader)
+  const loader = new GLTFLoader();
+  loadBaseMap(loader);
+  loadHomeModel(loader);
 
-  buildingMeshes = []
+  buildingMeshes = [];
   for (const stop of props.stops) {
-    const config = STOP_CONFIG[stop.displayOrder]
+    const config = STOP_CONFIG[stop.displayOrder];
     if (!config) {
-      console.warn(`[GameMapScene] No config for stop displayOrder=${stop.displayOrder} — skipping.`)
-      continue
+      console.warn(
+        `[GameMapScene] No config for stop displayOrder=${stop.displayOrder} — skipping.`,
+      );
+      continue;
     }
-    loadStopModel(loader, stop, config)
+    loadStopModel(loader, stop, config);
   }
 
   // --- Input ---
-  raycaster = new THREE.Raycaster()
-  mouse = new THREE.Vector2()
+  raycaster = new THREE.Raycaster();
+  mouse = new THREE.Vector2();
 
-  handleCanvasClick = createClickHandler()
-  handleCanvasMouseMove = createMouseMoveHandler()
-  canvas.value.addEventListener('click', handleCanvasClick)
-  canvas.value.addEventListener('mousemove', handleCanvasMouseMove)
+  handleCanvasClick = createClickHandler();
+  handleCanvasMouseMove = createMouseMoveHandler();
+  canvas.value.addEventListener("click", handleCanvasClick);
+  canvas.value.addEventListener("mousemove", handleCanvasMouseMove);
 
-  window.addEventListener('resize', onResize)
+  window.addEventListener("resize", onResize);
 
   // --- Render loop ---
   // needsRender is already true so the first frame draws immediately.
-  startRenderLoop()
-})
+  startRenderLoop();
+});
 
 onUnmounted(() => {
-  isMounted = false
-  cancelAnimationFrame(animFrameId)
-  window.removeEventListener('resize', onResize)
+  isMounted = false;
+  cancelAnimationFrame(animFrameId);
+  window.removeEventListener("resize", onResize);
   if (canvas.value) {
-    if (handleCanvasClick) canvas.value.removeEventListener('click', handleCanvasClick)
-    if (handleCanvasMouseMove) canvas.value.removeEventListener('mousemove', handleCanvasMouseMove)
-    canvas.value.style.cursor = 'default'
+    if (handleCanvasClick)
+      canvas.value.removeEventListener("click", handleCanvasClick);
+    if (handleCanvasMouseMove)
+      canvas.value.removeEventListener("mousemove", handleCanvasMouseMove);
+    canvas.value.style.cursor = "default";
   }
-  if (lockedBubbleTimeout) clearTimeout(lockedBubbleTimeout)
-  disposeSceneResources()
-  renderer?.dispose()
-  homeMeshes = []
-  buildingMeshes = []
-  buildingMeshObjects = []
-  renderer = null
-  scene = null
-  camera = null
-  raycaster = null
-  mouse = null
-})
+  if (lockedBubbleTimeout) clearTimeout(lockedBubbleTimeout);
+  disposeSceneResources();
+  renderer?.dispose();
+  homeMeshes = [];
+  buildingMeshes = [];
+  buildingMeshObjects = [];
+  renderer = null;
+  scene = null;
+  camera = null;
+  raycaster = null;
+  mouse = null;
+});
 </script>
 
 <template>
   <div class="relative h-screen w-full overflow-hidden bg-gray-900">
     <div
-        v-if="badgeLabel"
-        class="absolute top-4 left-4 z-10 rounded-sm border border-amber-300 bg-amber-50/95 px-4 py-2 text-xs font-black tracking-[0.16em] text-amber-800 shadow-lg"
+      v-if="badgeLabel"
+      class="absolute top-4 left-4 z-10 rounded-sm border border-amber-300 bg-amber-50/95 px-4 py-2 text-xs font-black tracking-[0.16em] text-amber-800 shadow-lg"
     >
       {{ badgeLabel }}
     </div>
@@ -658,10 +684,10 @@ onUnmounted(() => {
 
     <template v-if="stopsWithConfig.length > 0">
       <div
-          v-for="stop in stopsWithConfig"
-          :key="stop.stopId"
-          class="absolute pointer-events-none -translate-x-1/2 -translate-y-full"
-          :style="{
+        v-for="stop in stopsWithConfig"
+        :key="stop.stopId"
+        class="absolute pointer-events-none -translate-x-1/2 -translate-y-full"
+        :style="{
           left: `${stop.screenPos?.x ?? -999}px`,
           top: `${stop.screenPos?.y ?? -999}px`,
         }"
@@ -676,44 +702,52 @@ onUnmounted(() => {
             stop.status === 'LOCKED'
               ? triggerLockedBubble()
               : stop.slug &&
-                  stop.config &&
-                  navigateWithAnimation(stop.config.worldPos, resolveStopRoute(stop.slug))
+                stop.config &&
+                navigateWithAnimation(
+                  stop.config.worldPos,
+                  resolveStopRoute(stop.slug),
+                )
           "
         />
       </div>
 
       <div
-          class="absolute pointer-events-none -translate-x-1/2 -translate-y-full"
-          :style="{
+        class="absolute pointer-events-none -translate-x-1/2 -translate-y-full"
+        :style="{
           left: `${homeScreenPos?.x ?? -999}px`,
           top: `${homeScreenPos?.y ?? -999}px`,
         }"
       >
         <MapStopOverlay
-            slug="detective-office"
-            :stars="0"
-            status="COMPLETED"
-            :is-home="true"
-            :clickable="true"
-            class="pointer-events-auto"
-            @click="navigateWithAnimation(HOME_CONFIG.worldPos, homeRoute)"
+          slug="detective-office"
+          :stars="0"
+          status="COMPLETED"
+          :is-home="true"
+          :clickable="true"
+          class="pointer-events-auto"
+          @click="navigateWithAnimation(HOME_CONFIG.worldPos, homeRoute)"
         />
       </div>
     </template>
 
     <Transition name="bubble">
       <div
-          v-if="showLockedBubble"
-          class="pointer-events-none absolute inset-0 flex items-center justify-center"
+        v-if="showLockedBubble"
+        class="pointer-events-none absolute inset-0 flex items-center justify-center"
       >
-        <div class="rounded-2xl border border-white/10 bg-gray-900/90 px-6 py-3 text-sm font-semibold text-white shadow-lg">
-          {{ t('map.lockedMessage') }}
+        <div
+          class="rounded-2xl border border-white/10 bg-gray-900/90 px-6 py-3 text-sm font-semibold text-white shadow-lg"
+        >
+          {{ t("map.lockedMessage") }}
         </div>
       </div>
     </Transition>
 
     <Transition name="fade">
-      <div v-if="isFading" class="pointer-events-none absolute inset-0 bg-gray-900" />
+      <div
+        v-if="isFading"
+        class="pointer-events-none absolute inset-0 bg-gray-900"
+      />
     </Transition>
   </div>
 </template>
@@ -721,7 +755,9 @@ onUnmounted(() => {
 <style scoped>
 .bubble-enter-active,
 .bubble-leave-active {
-  transition: opacity 300ms ease, transform 300ms ease;
+  transition:
+    opacity 300ms ease,
+    transform 300ms ease;
 }
 
 .bubble-enter-from,
@@ -741,4 +777,4 @@ onUnmounted(() => {
 .fade-enter-to {
   opacity: 1;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/map/components/MapStopOverlay.vue b/src/map/components/MapStopOverlay.vue
index e766b32f..b77dd82d 100644
--- a/src/map/components/MapStopOverlay.vue
+++ b/src/map/components/MapStopOverlay.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import type { StopProgressStatus } from '@/map/model/map.types'
-import LockIcon from '@/assets/gamemap/lock.svg?component'
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import type { StopProgressStatus } from "@/map/model/map.types";
+import LockIcon from "@/assets/gamemap/lock.svg?component";
 
 const props = defineProps<{
-  slug: string
-  stars: 0 | 1 | 2 | 3
-  status: StopProgressStatus
-  isHome?: boolean
-  clickable?: boolean
-}>()
+  slug: string;
+  stars: 0 | 1 | 2 | 3;
+  status: StopProgressStatus;
+  isHome?: boolean;
+  clickable?: boolean;
+}>();
 
-const { t, te } = useI18n()
+const { t, te } = useI18n();
 
 const label = computed(() =>
-    props.isHome
-        ? t('map.home')
-        : te(`map.stops.${props.slug}`)
-            ? t(`map.stops.${props.slug}`)
-            : props.slug
-)
+  props.isHome
+    ? t("map.home")
+    : te(`map.stops.${props.slug}`)
+      ? t(`map.stops.${props.slug}`)
+      : props.slug,
+);
 </script>
 
 <template>
@@ -28,27 +28,25 @@ const label = computed(() =>
     class="flex flex-col items-center gap-1.5 select-none"
     :class="clickable ? 'cursor-pointer' : 'cursor-default'"
   >
-
     <!-- Stars — hidden for home building -->
     <div v-if="!isHome" class="flex gap-1 bg-black/60 rounded-full px-3 py-1">
       <svg
-          v-for="i in 3"
-          :key="i"
-          class="w-6 h-6"
-          :class="i <= stars ? 'text-yellow-400' : 'text-gray-500'"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
+        v-for="i in 3"
+        :key="i"
+        class="w-6 h-6"
+        :class="i <= stars ? 'text-yellow-400' : 'text-gray-500'"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
       >
-        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
+        <path
+          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+        />
       </svg>
     </div>
 
     <!-- Lock icon — hidden for home building -->
-    <LockIcon
-        v-if="!isHome && status === 'LOCKED'"
-        class="w-12 h-12"
-    />
+    <LockIcon v-if="!isHome && status === 'LOCKED'" class="w-12 h-12" />
 
     <!-- Label -->
     <div class="bg-black/60 rounded-full px-3 py-1">
@@ -56,6 +54,5 @@ const label = computed(() =>
         {{ label }}
       </span>
     </div>
-
   </div>
 </template>
diff --git a/src/map/model/__tests__/map.store.spec.ts b/src/map/model/__tests__/map.store.spec.ts
index 43879564..ef6d1e1c 100644
--- a/src/map/model/__tests__/map.store.spec.ts
+++ b/src/map/model/__tests__/map.store.spec.ts
@@ -1,187 +1,207 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createPinia, setActivePinia } from 'pinia'
-import { nextTick } from 'vue'
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+import { nextTick } from "vue";
 
-import { useMapStore } from '@/map/model/map.store'
-import { useAuthStore } from '@/auth/model/auth.store'
-import type {MapStopOverview} from "@/map/model/map.types.ts";
+import { useMapStore } from "@/map/model/map.store";
+import { useAuthStore } from "@/auth/model/auth.store";
+import type { MapStopOverview } from "@/map/model/map.types.ts";
 
 function jsonResponse(body: unknown, init: ResponseInit = {}) {
   return new Response(JSON.stringify(body), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' },
+    headers: { "Content-Type": "application/json" },
     ...init,
-  })
+  });
 }
 
-const CLASSROOM_ID = 2
-const PUPIL_USER_ID = 99
+const CLASSROOM_ID = 2;
+const PUPIL_USER_ID = 99;
 
 const mapStopOverview: MapStopOverview = {
   stopId: 5,
-  slug: 'data-center',
-  title: 'Data Center',
-  category: 'mystery',
+  slug: "data-center",
+  title: "Data Center",
+  category: "mystery",
   displayOrder: 1,
   isFinalBoss: false,
-  status: 'NOT_STARTED',
+  status: "NOT_STARTED",
   stars: 0,
   medalAwarded: false,
-}
+};
 
 const stopProgress = {
   stopId: 5,
   classroomId: CLASSROOM_ID,
-  status: 'IN_PROGRESS',
+  status: "IN_PROGRESS",
   currentTaskId: 3,
   bestScore: 40,
   medalAwarded: false,
   completedAt: null,
-}
+};
 
 function seedAuthStore() {
-  const authStore = useAuthStore()
-  authStore.accessToken = 'access-token'
+  const authStore = useAuthStore();
+  authStore.accessToken = "access-token";
   authStore.user = {
     subject: String(PUPIL_USER_ID),
-    portalType: 'PUPIL',
+    portalType: "PUPIL",
     email: null,
-    username: 'pupil-one',
-    authorities: ['ROLE_PUPIL'],
+    username: "pupil-one",
+    authorities: ["ROLE_PUPIL"],
     pupilProfile: {
-      displayName: 'Pupil One',
+      displayName: "Pupil One",
       totalXp: 0,
       currentLevel: 1,
       currentClassroomId: CLASSROOM_ID,
       hasCompletedOnboarding: true,
     },
     teacherProfile: null,
-  }
+  };
 }
 
-describe('useMapStore', () => {
+describe("useMapStore", () => {
   beforeEach(() => {
-    setActivePinia(createPinia())
-    vi.restoreAllMocks()
-  })
+    setActivePinia(createPinia());
+    vi.restoreAllMocks();
+  });
 
-  it('populates stops and sets status to loaded on success', async () => {
-    seedAuthStore()
-    vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce(jsonResponse([mapStopOverview])))
+  it("populates stops and sets status to loaded on success", async () => {
+    seedAuthStore();
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValueOnce(jsonResponse([mapStopOverview])),
+    );
 
-    const mapStore = useMapStore()
-    await mapStore.fetchMapOverview()
+    const mapStore = useMapStore();
+    await mapStore.fetchMapOverview();
 
-    expect(mapStore.status).toBe('loaded')
-    expect(mapStore.stops).toEqual([mapStopOverview])
-    expect(mapStore.errorMessage).toBeNull()
-  })
+    expect(mapStore.status).toBe("loaded");
+    expect(mapStore.stops).toEqual([mapStopOverview]);
+    expect(mapStore.errorMessage).toBeNull();
+  });
 
-  it('sets status to error and stores the message on failure', async () => {
-    seedAuthStore()
+  it("sets status to error and stores the message on failure", async () => {
+    seedAuthStore();
     vi.stubGlobal(
-      'fetch',
-      vi.fn().mockResolvedValueOnce(
-        jsonResponse({ detail: 'Classroom not found' }, { status: 404 }),
-      ),
-    )
-
-    const mapStore = useMapStore()
-    await expect(mapStore.fetchMapOverview()).rejects.toThrow()
-
-    expect(mapStore.status).toBe('error')
-    expect(mapStore.errorMessage).toBe('Classroom not found')
-  })
-
-  it('throws when the user is not authenticated', async () => {
-    const mapStore = useMapStore()
-    await expect(mapStore.fetchMapOverview()).rejects.toThrow('Not authenticated.')
-    expect(mapStore.status).toBe('error')
-  })
-
-  it('throws when the current session is not a pupil session', async () => {
-    const authStore = useAuthStore()
-    authStore.accessToken = 'access-token'
+      "fetch",
+      vi
+        .fn()
+        .mockResolvedValueOnce(
+          jsonResponse({ detail: "Classroom not found" }, { status: 404 }),
+        ),
+    );
+
+    const mapStore = useMapStore();
+    await expect(mapStore.fetchMapOverview()).rejects.toThrow();
+
+    expect(mapStore.status).toBe("error");
+    expect(mapStore.errorMessage).toBe("Classroom not found");
+  });
+
+  it("throws when the user is not authenticated", async () => {
+    const mapStore = useMapStore();
+    await expect(mapStore.fetchMapOverview()).rejects.toThrow(
+      "Not authenticated.",
+    );
+    expect(mapStore.status).toBe("error");
+  });
+
+  it("throws when the current session is not a pupil session", async () => {
+    const authStore = useAuthStore();
+    authStore.accessToken = "access-token";
     authStore.user = {
-      subject: 'teacher-1',
-      portalType: 'TEACHER',
-      email: 'teacher@example.com',
+      subject: "teacher-1",
+      portalType: "TEACHER",
+      email: "teacher@example.com",
       username: null,
-      authorities: ['ROLE_TEACHER'],
+      authorities: ["ROLE_TEACHER"],
       pupilProfile: null,
       teacherProfile: null,
-    }
+    };
 
-    const mapStore = useMapStore()
+    const mapStore = useMapStore();
     await expect(mapStore.fetchMapOverview()).rejects.toThrow(
-      'Map access is only available for pupil sessions.',
-    )
-  })
-
-  it('sends the Authorization header derived from the auth store', async () => {
-    seedAuthStore()
-    const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse([mapStopOverview]))
-    vi.stubGlobal('fetch', fetchMock)
-
-    const mapStore = useMapStore()
-    await mapStore.fetchMapOverview()
-
-    const [, options] = fetchMock.mock.calls[0] as [string, RequestInit]
-    expect(new Headers(options.headers).get('Authorization')).toBe('Bearer access-token')
-  })
-
-  it('returns the matching stop overview for a given slug', async () => {
-    seedAuthStore()
-    vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce(jsonResponse(mapStopOverview)))
+      "Map access is only available for pupil sessions.",
+    );
+  });
+
+  it("sends the Authorization header derived from the auth store", async () => {
+    seedAuthStore();
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse([mapStopOverview]));
+    vi.stubGlobal("fetch", fetchMock);
+
+    const mapStore = useMapStore();
+    await mapStore.fetchMapOverview();
+
+    const [, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(new Headers(options.headers).get("Authorization")).toBe(
+      "Bearer access-token",
+    );
+  });
+
+  it("returns the matching stop overview for a given slug", async () => {
+    seedAuthStore();
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValueOnce(jsonResponse(mapStopOverview)),
+    );
 
-    const mapStore = useMapStore()
-    const result = await mapStore.fetchStopBySlug('data-center')
+    const mapStore = useMapStore();
+    const result = await mapStore.fetchStopBySlug("data-center");
 
-    expect(result).toEqual(mapStopOverview)
-  })
+    expect(result).toEqual(mapStopOverview);
+  });
 
-  it('returns all progress records for the authenticated pupil', async () => {
-    seedAuthStore()
-    vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce(jsonResponse([stopProgress])))
+  it("returns all progress records for the authenticated pupil", async () => {
+    seedAuthStore();
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValueOnce(jsonResponse([stopProgress])),
+    );
 
-    const mapStore = useMapStore()
-    const result = await mapStore.fetchAllStopProgress()
+    const mapStore = useMapStore();
+    const result = await mapStore.fetchAllStopProgress();
 
-    expect(result).toEqual([stopProgress])
-  })
+    expect(result).toEqual([stopProgress]);
+  });
 
-  it('returns the progress record for the given stop', async () => {
-    seedAuthStore()
-    vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce(jsonResponse(stopProgress)))
+  it("returns the progress record for the given stop", async () => {
+    seedAuthStore();
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValueOnce(jsonResponse(stopProgress)),
+    );
 
-    const mapStore = useMapStore()
-    const result = await mapStore.fetchStopProgress(5)
+    const mapStore = useMapStore();
+    const result = await mapStore.fetchStopProgress(5);
 
-    expect(result).toEqual(stopProgress)
-  })
+    expect(result).toEqual(stopProgress);
+  });
 
-  it('clears cached map state when the authenticated pupil context changes', async () => {
-    seedAuthStore()
+  it("clears cached map state when the authenticated pupil context changes", async () => {
+    seedAuthStore();
 
-    const mapStore = useMapStore()
-    mapStore.stops = [mapStopOverview]
-    mapStore.status = 'loaded'
-    mapStore.errorMessage = 'stale'
+    const mapStore = useMapStore();
+    mapStore.stops = [mapStopOverview];
+    mapStore.status = "loaded";
+    mapStore.errorMessage = "stale";
 
-    const authStore = useAuthStore()
+    const authStore = useAuthStore();
     authStore.user = {
       ...authStore.user!,
-      subject: '100',
+      subject: "100",
       pupilProfile: {
         ...authStore.user!.pupilProfile!,
         currentClassroomId: 7,
       },
-    }
+    };
 
-    await nextTick()
+    await nextTick();
 
-    expect(mapStore.stops).toEqual([])
-    expect(mapStore.status).toBe('idle')
-    expect(mapStore.errorMessage).toBeNull()
-  })
-})
+    expect(mapStore.stops).toEqual([]);
+    expect(mapStore.status).toBe("idle");
+    expect(mapStore.errorMessage).toBeNull();
+  });
+});
diff --git a/src/map/model/map.store.ts b/src/map/model/map.store.ts
index 960aa83f..7ec6372b 100644
--- a/src/map/model/map.store.ts
+++ b/src/map/model/map.store.ts
@@ -1,6 +1,6 @@
-import { defineStore } from 'pinia'
-import { computed, ref, watch } from 'vue'
-import { useAuthStore } from '@/auth/model/auth.store'
+import { defineStore } from "pinia";
+import { computed, ref, watch } from "vue";
+import { useAuthStore } from "@/auth/model/auth.store";
 import {
   requestMapOverview,
   requestMapStopBySlug,
@@ -8,116 +8,126 @@ import {
   requestStopProgress,
   requestUpdateStopProgress,
   type UpdateStopProgressPayload,
-} from '@/map/api/map.api'
-import type { MapStopOverview, StopProgress } from '@/map/model/map.types'
+} from "@/map/api/map.api";
+import type { MapStopOverview, StopProgress } from "@/map/model/map.types";
 
-export type MapLoadStatus = 'idle' | 'loading' | 'loaded' | 'error'
+export type MapLoadStatus = "idle" | "loading" | "loaded" | "error";
 
-export const useMapStore = defineStore('map', () => {
-  const authStore = useAuthStore()
+export const useMapStore = defineStore("map", () => {
+  const authStore = useAuthStore();
 
-  const stops = ref<MapStopOverview[]>([])
-  const status = ref<MapLoadStatus>('idle')
-  const errorMessage = ref<string | null>(null)
+  const stops = ref<MapStopOverview[]>([]);
+  const status = ref<MapLoadStatus>("idle");
+  const errorMessage = ref<string | null>(null);
   const pupilMapContext = computed(() => {
-    if (authStore.portalType !== 'PUPIL') {
-      return null
+    if (authStore.portalType !== "PUPIL") {
+      return null;
     }
 
-    const subject = authStore.user?.subject ?? null
-    const classroomId = authStore.user?.pupilProfile?.currentClassroomId ?? null
-    return subject && classroomId != null ? `${subject}:${classroomId}` : null
-  })
+    const subject = authStore.user?.subject ?? null;
+    const classroomId =
+      authStore.user?.pupilProfile?.currentClassroomId ?? null;
+    return subject && classroomId != null ? `${subject}:${classroomId}` : null;
+  });
 
   function clearMap() {
-    stops.value = []
-    status.value = 'idle'
-    errorMessage.value = null
+    stops.value = [];
+    status.value = "idle";
+    errorMessage.value = null;
   }
 
   watch(pupilMapContext, (context, previousContext) => {
     if (context !== previousContext) {
-      clearMap()
+      clearMap();
     }
-  })
+  });
 
   async function requirePupilSession() {
-    const classroomId = authStore.user?.pupilProfile?.currentClassroomId ?? null
-    const header = authStore.authorizationHeader
-    if (!header) throw new Error('Not authenticated.')
-    if (authStore.portalType !== 'PUPIL') {
-      throw new Error('Map access is only available for pupil sessions.')
+    const classroomId =
+      authStore.user?.pupilProfile?.currentClassroomId ?? null;
+    const header = authStore.authorizationHeader;
+    if (!header) throw new Error("Not authenticated.");
+    if (authStore.portalType !== "PUPIL") {
+      throw new Error("Map access is only available for pupil sessions.");
     }
-    if (classroomId == null) throw new Error('No active classroom found.')
+    if (classroomId == null) throw new Error("No active classroom found.");
 
     return {
       authorizationHeader: header,
       classroomId,
-    }
+    };
   }
 
   async function requirePupilProgressSession() {
-    const session = await requirePupilSession()
-    const subject = authStore.user?.subject
-    if (!subject) throw new Error('Not authenticated.')
+    const session = await requirePupilSession();
+    const subject = authStore.user?.subject;
+    if (!subject) throw new Error("Not authenticated.");
 
     return {
       ...session,
       pupilUserId: Number(subject),
-    }
+    };
   }
-    
+
   async function fetchMapOverview(): Promise<void> {
-    status.value = 'loading'
-    errorMessage.value = null
+    status.value = "loading";
+    errorMessage.value = null;
 
     try {
-      const session = await requirePupilSession()
-      stops.value = await requestMapOverview(session.classroomId, session.authorizationHeader)
-      status.value = 'loaded'
+      const session = await requirePupilSession();
+      stops.value = await requestMapOverview(
+        session.classroomId,
+        session.authorizationHeader,
+      );
+      status.value = "loaded";
     } catch (error) {
-      errorMessage.value = error instanceof Error ? error.message : 'Failed to load map.'
-      status.value = 'error'
-      throw error
+      errorMessage.value =
+        error instanceof Error ? error.message : "Failed to load map.";
+      status.value = "error";
+      throw error;
     }
   }
 
   async function fetchStopBySlug(slug: string): Promise<MapStopOverview> {
-    const session = await requirePupilSession()
-    return requestMapStopBySlug(session.classroomId, slug, session.authorizationHeader)
+    const session = await requirePupilSession();
+    return requestMapStopBySlug(
+      session.classroomId,
+      slug,
+      session.authorizationHeader,
+    );
   }
 
   async function fetchAllStopProgress(): Promise<StopProgress[]> {
-    const session = await requirePupilProgressSession()
+    const session = await requirePupilProgressSession();
     return requestAllStopProgress(
       session.classroomId,
       session.pupilUserId,
       session.authorizationHeader,
-    )
+    );
   }
 
   async function fetchStopProgress(stopId: number): Promise<StopProgress> {
-    const session = await requirePupilProgressSession()
+    const session = await requirePupilProgressSession();
     return requestStopProgress(
       session.classroomId,
       session.pupilUserId,
       stopId,
       session.authorizationHeader,
-    )
+    );
   }
 
   async function updateStopProgress(
     stopId: number,
     payload: UpdateStopProgressPayload,
   ): Promise<StopProgress> {
-    const session = await requirePupilProgressSession()
+    const session = await requirePupilProgressSession();
     return requestUpdateStopProgress(
       session.classroomId,
       session.pupilUserId,
       stopId,
       payload,
       session.authorizationHeader,
-    )
+    );
   }
 
   return {
@@ -130,5 +140,5 @@ export const useMapStore = defineStore('map', () => {
     fetchAllStopProgress,
     fetchStopProgress,
     updateStopProgress,
-  }
-})
+  };
+});
diff --git a/src/map/model/map.types.ts b/src/map/model/map.types.ts
index 4e29063f..9b7810bd 100644
--- a/src/map/model/map.types.ts
+++ b/src/map/model/map.types.ts
@@ -1,23 +1,27 @@
-export type StopProgressStatus = 'LOCKED' | 'NOT_STARTED' | 'IN_PROGRESS' | 'COMPLETED'
+export type StopProgressStatus =
+  | "LOCKED"
+  | "NOT_STARTED"
+  | "IN_PROGRESS"
+  | "COMPLETED";
 
 export interface MapStopOverview {
-  stopId: number
-  slug: string | null
-  title: string | null
-  category: string | null
-  displayOrder: number
-  isFinalBoss: boolean
-  status: StopProgressStatus
-  stars: 0 | 1 | 2 | 3
-  medalAwarded: boolean
+  stopId: number;
+  slug: string | null;
+  title: string | null;
+  category: string | null;
+  displayOrder: number;
+  isFinalBoss: boolean;
+  status: StopProgressStatus;
+  stars: 0 | 1 | 2 | 3;
+  medalAwarded: boolean;
 }
 
 export interface StopProgress {
-  stopId: number
-  classroomId: number
-  status: StopProgressStatus
-  currentTaskId: number | null
-  bestScore: number
-  medalAwarded: boolean
-  completedAt: string | null
-}
\ No newline at end of file
+  stopId: number;
+  classroomId: number;
+  status: StopProgressStatus;
+  currentTaskId: number | null;
+  bestScore: number;
+  medalAwarded: boolean;
+  completedAt: string | null;
+}
diff --git a/src/map/pages/MapPage.vue b/src/map/pages/MapPage.vue
index 69821071..562debdf 100644
--- a/src/map/pages/MapPage.vue
+++ b/src/map/pages/MapPage.vue
@@ -1,37 +1,40 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import GameMapScene from '@/map/components/GameMapScene.vue'
-import { useMapStore } from '@/map/model/map.store'
+import { computed, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import GameMapScene from "@/map/components/GameMapScene.vue";
+import { useMapStore } from "@/map/model/map.store";
 
-const { t } = useI18n()
-const router = useRouter()
-const mapStore = useMapStore()
+const { t } = useI18n();
+const router = useRouter();
+const mapStore = useMapStore();
 
-const homeRoute = computed(() =>
-  router.resolve({
-    name: 'pupil-home',
-  }).fullPath,
-)
+const homeRoute = computed(
+  () =>
+    router.resolve({
+      name: "pupil-home",
+    }).fullPath,
+);
 
 function resolveStopRoute(slug: string): string {
   return router.resolve({
-    name: 'pupil-stop',
+    name: "pupil-stop",
     params: { slug },
-  }).fullPath
+  }).fullPath;
 }
 
 onMounted(async () => {
   try {
-    await mapStore.fetchMapOverview()
-  } catch {
-  }
-})
+    await mapStore.fetchMapOverview();
+  } catch {}
+});
 </script>
 
 <template>
-  <div v-if="mapStore.status === 'error'" class="flex h-screen items-center justify-center bg-gray-950 px-6">
+  <div
+    v-if="mapStore.status === 'error'"
+    class="flex h-screen items-center justify-center bg-gray-950 px-6"
+  >
     <p class="text-center text-sm text-red-300">
       {{ mapStore.errorMessage }}
     </p>
@@ -41,8 +44,10 @@ onMounted(async () => {
     v-else-if="mapStore.status !== 'loaded'"
     class="flex h-screen flex-col items-center justify-center gap-4 bg-gray-950 text-slate-200"
   >
-    <div class="h-10 w-10 animate-spin rounded-full border-2 border-slate-500 border-t-white" />
-    <p class="text-sm">{{ t('map.loading') }}</p>
+    <div
+      class="h-10 w-10 animate-spin rounded-full border-2 border-slate-500 border-t-white"
+    />
+    <p class="text-sm">{{ t("map.loading") }}</p>
   </div>
 
   <GameMapScene
diff --git a/src/map/pages/StopFailurePage.vue b/src/map/pages/StopFailurePage.vue
index a4ad6277..586d0bc4 100644
--- a/src/map/pages/StopFailurePage.vue
+++ b/src/map/pages/StopFailurePage.vue
@@ -1,48 +1,50 @@
 <template>
-  <div class="flex flex-col items-center justify-center min-h-screen text-center p-6 bg-white">
+  <div
+    class="flex flex-col items-center justify-center min-h-screen text-center p-6 bg-white"
+  >
     <div class="mb-8 p-4 bg-red-100 rounded-full">
       <span class="text-6xl">❌</span>
     </div>
-    
+
     <h1 class="text-4xl font-bold text-gray-900 mb-2">
-      {{ t('failure.stop_failed_title') }}
+      {{ t("failure.stop_failed_title") }}
     </h1>
-    
+
     <p class="text-2xl text-gray-600 mb-8">
       {{ completedStopName }}
     </p>
-    
-    <RouterLink 
-      :to="{ name: 'pupil-map' }" 
+
+    <RouterLink
+      :to="{ name: 'pupil-map' }"
       class="px-8 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
     >
-      {{ t('success.return_to_map') }}
+      {{ t("success.return_to_map") }}
     </RouterLink>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useMapStore } from '@/map/model/map.store';
+import { computed, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { useMapStore } from "@/map/model/map.store";
 
 const route = useRoute();
 const { t } = useI18n();
 const mapStore = useMapStore();
 
 onMounted(async () => {
-  if (mapStore.status === 'idle') {
+  if (mapStore.status === "idle") {
     await mapStore.fetchMapOverview();
   }
 });
 
 const completedStop = computed(() => {
   const slug = route.params.slug as string;
-  return mapStore.stops.find(s => s.slug === slug);
+  return mapStore.stops.find((s) => s.slug === slug);
 });
 
 const completedStopName = computed(() => {
-  return completedStop.value?.title || t('common.stop');
+  return completedStop.value?.title || t("common.stop");
 });
 </script>
diff --git a/src/map/pages/StopSuccessPage.vue b/src/map/pages/StopSuccessPage.vue
index e41e6daa..6f8ae6d0 100644
--- a/src/map/pages/StopSuccessPage.vue
+++ b/src/map/pages/StopSuccessPage.vue
@@ -1,75 +1,82 @@
 <template>
   <AppCelebration>
-    <div class="flex flex-col items-center justify-center min-h-screen text-center p-6 bg-white">
+    <div
+      class="flex flex-col items-center justify-center min-h-screen text-center p-6 bg-white"
+    >
       <div class="mb-8 p-4 bg-yellow-100 rounded-full">
         <span class="text-6xl">🏆</span>
       </div>
-      
+
       <h1 class="text-4xl font-bold text-gray-900 mb-2">
-        {{ t('success.stop_completed_title') }}
+        {{ t("success.stop_completed_title") }}
       </h1>
-      
+
       <p class="text-2xl text-gray-600 mb-8">
         {{ completedStopName }}
       </p>
 
-      <div v-if="nextStop" class="mb-12 p-6 bg-blue-50 rounded-2xl border border-blue-100 flex flex-col items-center">
-        <p class="text-sm uppercase tracking-widest text-blue-500 font-bold mb-1">
-          {{ t('success.next_stop_label') }}
+      <div
+        v-if="nextStop"
+        class="mb-12 p-6 bg-blue-50 rounded-2xl border border-blue-100 flex flex-col items-center"
+      >
+        <p
+          class="text-sm uppercase tracking-widest text-blue-500 font-bold mb-1"
+        >
+          {{ t("success.next_stop_label") }}
         </p>
         <p class="text-xl font-semibold text-blue-900 mb-4">
           {{ nextStop.title }}
         </p>
-        <RouterLink 
-          :to="{ name: 'pupil-stop', params: { slug: nextStop.slug } }" 
+        <RouterLink
+          :to="{ name: 'pupil-stop', params: { slug: nextStop.slug } }"
           class="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
         >
-          {{ t('success.next_stop') }}
+          {{ t("success.next_stop") }}
         </RouterLink>
       </div>
 
-      <RouterLink 
-        :to="{ name: 'pupil-map' }" 
+      <RouterLink
+        :to="{ name: 'pupil-map' }"
         class="px-8 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
       >
-        {{ t('success.return_to_map') }}
+        {{ t("success.return_to_map") }}
       </RouterLink>
     </div>
   </AppCelebration>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useMapStore } from '@/map/model/map.store';
-import AppCelebration from '@/shared/components/AppCelebration.vue';
+import { computed, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { useMapStore } from "@/map/model/map.store";
+import AppCelebration from "@/shared/components/AppCelebration.vue";
 
 const route = useRoute();
 const { t } = useI18n();
 const mapStore = useMapStore();
 
 onMounted(async () => {
-  if (mapStore.status === 'idle') {
+  if (mapStore.status === "idle") {
     await mapStore.fetchMapOverview();
   }
 });
 
 const completedStop = computed(() => {
   const slug = route.params.slug as string;
-  return mapStore.stops.find(s => s.slug === slug);
+  return mapStore.stops.find((s) => s.slug === slug);
 });
 
 const completedStopName = computed(() => {
-  return completedStop.value?.title || t('common.stop');
+  return completedStop.value?.title || t("common.stop");
 });
 
 const nextStop = computed(() => {
   const current = completedStop.value;
   if (!current) return null;
-  
+
   return mapStore.stops
-    .filter(s => s.displayOrder > current.displayOrder)
+    .filter((s) => s.displayOrder > current.displayOrder)
     .sort((a, b) => a.displayOrder - b.displayOrder)[0];
 });
 </script>
diff --git a/src/map/routes.ts b/src/map/routes.ts
index 3a6da0fe..b3fa9f71 100644
--- a/src/map/routes.ts
+++ b/src/map/routes.ts
@@ -1,14 +1,14 @@
-import type { RouteRecordRaw } from 'vue-router'
- 
-import MapPage from '@/map/pages/MapPage.vue'
-import StopSuccessPage from '@/map/pages/StopSuccessPage.vue'
-import StopFailurePage from '@/map/pages/StopFailurePage.vue'
-import StopPage from '@/stops/pages/StopPage.vue'
+import type { RouteRecordRaw } from "vue-router";
+
+import MapPage from "@/map/pages/MapPage.vue";
+import StopSuccessPage from "@/map/pages/StopSuccessPage.vue";
+import StopFailurePage from "@/map/pages/StopFailurePage.vue";
+import StopPage from "@/stops/pages/StopPage.vue";
 
 export function createMapRoutes(prefix: string): RouteRecordRaw[] {
   return [
     {
-      path: 'map',
+      path: "map",
       name: `${prefix}-map`,
       component: MapPage,
       meta: {
@@ -16,7 +16,7 @@ export function createMapRoutes(prefix: string): RouteRecordRaw[] {
       },
     },
     {
-      path: 'map/:slug',
+      path: "map/:slug",
       name: `${prefix}-stop`,
       component: StopPage,
       meta: {
@@ -24,7 +24,7 @@ export function createMapRoutes(prefix: string): RouteRecordRaw[] {
       },
     },
     {
-      path: 'map/:slug/success',
+      path: "map/:slug/success",
       name: `${prefix}-stop-success`,
       component: StopSuccessPage,
       meta: {
@@ -32,7 +32,7 @@ export function createMapRoutes(prefix: string): RouteRecordRaw[] {
       },
     },
     {
-      path: 'map/:slug/failure',
+      path: "map/:slug/failure",
       name: `${prefix}-stop-failure`,
       component: StopFailurePage,
       meta: {
diff --git a/src/map/util/useDevGrid.ts b/src/map/util/useDevGrid.ts
index b2107769..1ff7cbb6 100644
--- a/src/map/util/useDevGrid.ts
+++ b/src/map/util/useDevGrid.ts
@@ -1,24 +1,24 @@
-import * as THREE from 'three'
+import * as THREE from "three";
 
 export function useDevGrid(
-    scene: THREE.Scene,
-    camera: THREE.Camera,
-    canvas: HTMLCanvasElement,
+  scene: THREE.Scene,
+  camera: THREE.Camera,
+  canvas: HTMLCanvasElement,
 ): void {
-    const SIZE = 30
-    const DIVISIONS = 30
+  const SIZE = 30;
+  const DIVISIONS = 30;
 
-    const grid = new THREE.GridHelper(SIZE, DIVISIONS, 0x000000, 0x000000)
-    grid.position.y = 0.5
-    scene.add(grid)
+  const grid = new THREE.GridHelper(SIZE, DIVISIONS, 0x000000, 0x000000);
+  grid.position.y = 0.5;
+  scene.add(grid);
 
-    const labels: HTMLDivElement[] = []
-    const step = SIZE / DIVISIONS
+  const labels: HTMLDivElement[] = [];
+  const step = SIZE / DIVISIONS;
 
-    for (let i = -SIZE / 2; i <= SIZE / 2; i += step * 2) {
-        for (let j = -SIZE / 2; j <= SIZE / 2; j += step * 2) {
-            const el = document.createElement('div')
-            el.style.cssText = `
+  for (let i = -SIZE / 2; i <= SIZE / 2; i += step * 2) {
+    for (let j = -SIZE / 2; j <= SIZE / 2; j += step * 2) {
+      const el = document.createElement("div");
+      el.style.cssText = `
         position: absolute;
         pointer-events: none;
         font-family: monospace;
@@ -26,45 +26,45 @@ export function useDevGrid(
         color: #000000;
         transform: translate(-50%, -50%);
         white-space: nowrap;
-      `
-            el.textContent = `${i.toFixed(1)}, ${j.toFixed(1)}`
-            el.dataset['worldX'] = String(i)
-            el.dataset['worldZ'] = String(j)
-            canvas.parentElement!.appendChild(el)
-            labels.push(el)
-        }
+      `;
+      el.textContent = `${i.toFixed(1)}, ${j.toFixed(1)}`;
+      el.dataset["worldX"] = String(i);
+      el.dataset["worldZ"] = String(j);
+      canvas.parentElement!.appendChild(el);
+      labels.push(el);
     }
+  }
 
-    function update(): void {
-        const rect = canvas.getBoundingClientRect()
-        for (const el of labels) {
-            const wx = parseFloat(el.dataset['worldX']!)
-            const wz = parseFloat(el.dataset['worldZ']!)
-            const v = new THREE.Vector3(wx, 0, wz).project(camera)
-            const x = (v.x * 0.5 + 0.5) * rect.width
-            const y = (-v.y * 0.5 + 0.5) * rect.height
-            const visible = x > 0 && x < rect.width && y > 0 && y < rect.height
-            el.style.display = visible ? 'block' : 'none'
-            el.style.left = `${x}px`
-            el.style.top = `${y}px`
-        }
+  function update(): void {
+    const rect = canvas.getBoundingClientRect();
+    for (const el of labels) {
+      const wx = parseFloat(el.dataset["worldX"]!);
+      const wz = parseFloat(el.dataset["worldZ"]!);
+      const v = new THREE.Vector3(wx, 0, wz).project(camera);
+      const x = (v.x * 0.5 + 0.5) * rect.width;
+      const y = (-v.y * 0.5 + 0.5) * rect.height;
+      const visible = x > 0 && x < rect.width && y > 0 && y < rect.height;
+      el.style.display = visible ? "block" : "none";
+      el.style.left = `${x}px`;
+      el.style.top = `${y}px`;
     }
+  }
 
-    let frameId: number
-    function loop(): void {
-        frameId = requestAnimationFrame(loop)
-        update()
-    }
-    loop()
+  let frameId: number;
+  function loop(): void {
+    frameId = requestAnimationFrame(loop);
+    update();
+  }
+  loop();
 
-    // Cleanup when canvas is removed from DOM
-    const observer = new MutationObserver(() => {
-        if (!document.contains(canvas)) {
-            cancelAnimationFrame(frameId)
-            for (const el of labels) el.remove()
-            scene.remove(grid)
-            observer.disconnect()
-        }
-    })
-    observer.observe(document.body, { childList: true, subtree: true })
-}
\ No newline at end of file
+  // Cleanup when canvas is removed from DOM
+  const observer = new MutationObserver(() => {
+    if (!document.contains(canvas)) {
+      cancelAnimationFrame(frameId);
+      for (const el of labels) el.remove();
+      scene.remove(grid);
+      observer.disconnect();
+    }
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+}
diff --git a/src/medals/api/__tests__/medals.api.spec.ts b/src/medals/api/__tests__/medals.api.spec.ts
index 3e07d907..55a49dd8 100644
--- a/src/medals/api/__tests__/medals.api.spec.ts
+++ b/src/medals/api/__tests__/medals.api.spec.ts
@@ -1,48 +1,54 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import { requestMedalOverview } from '@/medals/api/medals.api'
+import { requestMedalOverview } from "@/medals/api/medals.api";
 
 function jsonResponse(body: unknown, init: ResponseInit = {}) {
   return new Response(JSON.stringify(body), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' },
+    headers: { "Content-Type": "application/json" },
     ...init,
-  })
+  });
 }
 
-describe('medals.api', () => {
+describe("medals.api", () => {
   beforeEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  it('calls the medals endpoint with the authorization header', async () => {
-    const medalsResponse = { medals: [] }
-    const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse(medalsResponse))
-    vi.stubGlobal('fetch', fetchMock)
-
-    const result = await requestMedalOverview('Bearer test-token')
-
-    expect(result).toEqual(medalsResponse)
-    expect(fetchMock).toHaveBeenCalledTimes(1)
-
-    const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit]
-    expect(url).toBe('/api/v1/pupil/medals')
-    expect(options.method).toBe('GET')
-    expect(new Headers(options.headers).get('Authorization')).toBe('Bearer test-token')
-    expect(options.credentials).toBe('include')
-  })
-
-  it('prefers the backend error detail when the request fails', async () => {
+    vi.restoreAllMocks();
+  });
+
+  it("calls the medals endpoint with the authorization header", async () => {
+    const medalsResponse = { medals: [] };
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse(medalsResponse));
+    vi.stubGlobal("fetch", fetchMock);
+
+    const result = await requestMedalOverview("Bearer test-token");
+
+    expect(result).toEqual(medalsResponse);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+
+    const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(url).toBe("/api/v1/pupil/medals");
+    expect(options.method).toBe("GET");
+    expect(new Headers(options.headers).get("Authorization")).toBe(
+      "Bearer test-token",
+    );
+    expect(options.credentials).toBe("include");
+  });
+
+  it("prefers the backend error detail when the request fails", async () => {
     vi.stubGlobal(
-      'fetch',
+      "fetch",
       vi.fn().mockResolvedValueOnce(
-        new Response(JSON.stringify({ detail: 'No medals available' }), {
+        new Response(JSON.stringify({ detail: "No medals available" }), {
           status: 404,
-          headers: { 'Content-Type': 'application/json' },
+          headers: { "Content-Type": "application/json" },
         }),
       ),
-    )
+    );
 
-    await expect(requestMedalOverview('Bearer test-token')).rejects.toThrow('No medals available')
-  })
-})
+    await expect(requestMedalOverview("Bearer test-token")).rejects.toThrow(
+      "No medals available",
+    );
+  });
+});
diff --git a/src/medals/api/medals.api.ts b/src/medals/api/medals.api.ts
index df56d407..b450294e 100644
--- a/src/medals/api/medals.api.ts
+++ b/src/medals/api/medals.api.ts
@@ -1,29 +1,34 @@
-import type { MedalOverviewResponse } from '@/medals/model/medals.types'
-import { readJsonErrorMessage } from '@/shared/api/response-errors'
+import type { MedalOverviewResponse } from "@/medals/model/medals.types";
+import { readJsonErrorMessage } from "@/shared/api/response-errors";
 
-const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
-const MEDALS_API_BASE = `${API_BASE_URL}/api/v1/pupil/medals`
+const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? "").replace(
+  /\/$/,
+  "",
+);
+const MEDALS_API_BASE = `${API_BASE_URL}/api/v1/pupil/medals`;
 
 async function getResponseErrorMessage(response: Response) {
-  const fallbackMessage = `Medal request failed with status ${response.status}.`
-  const errorMessage = await readJsonErrorMessage(response)
+  const fallbackMessage = `Medal request failed with status ${response.status}.`;
+  const errorMessage = await readJsonErrorMessage(response);
 
-  if (errorMessage) return errorMessage
+  if (errorMessage) return errorMessage;
 
-  const text = await response.text().catch(() => '')
-  return text || fallbackMessage
+  const text = await response.text().catch(() => "");
+  return text || fallbackMessage;
 }
 
-export async function requestMedalOverview(authorizationHeader: string): Promise<MedalOverviewResponse> {
+export async function requestMedalOverview(
+  authorizationHeader: string,
+): Promise<MedalOverviewResponse> {
   const response = await fetch(MEDALS_API_BASE, {
-    method: 'GET',
+    method: "GET",
     headers: { Authorization: authorizationHeader },
-    credentials: 'include',
-  })
+    credentials: "include",
+  });
 
   if (!response.ok) {
-    throw new Error(await getResponseErrorMessage(response))
+    throw new Error(await getResponseErrorMessage(response));
   }
 
-  return (await response.json()) as MedalOverviewResponse
+  return (await response.json()) as MedalOverviewResponse;
 }
diff --git a/src/medals/components/MedalCard.vue b/src/medals/components/MedalCard.vue
index 328ed26c..6f9ee9e9 100644
--- a/src/medals/components/MedalCard.vue
+++ b/src/medals/components/MedalCard.vue
@@ -1,78 +1,79 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { MapPin } from 'lucide-vue-next'
-import { resolveMedalVisual } from '@/medals/model/medalAssets'
-import type { MedalEntryResponse } from '@/medals/model/medals.types'
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { MapPin } from "lucide-vue-next";
+import { resolveMedalVisual } from "@/medals/model/medalAssets";
+import type { MedalEntryResponse } from "@/medals/model/medals.types";
 
 const props = defineProps<{
-  entry: MedalEntryResponse
-}>()
+  entry: MedalEntryResponse;
+}>();
 
-const { t } = useI18n()
-const visual = computed(() => resolveMedalVisual(props.entry.medal))
-const medal = computed(() => props.entry.medal)
+const { t } = useI18n();
+const visual = computed(() => resolveMedalVisual(props.entry.medal));
+const medal = computed(() => props.entry.medal);
 
-const stopSlug = computed(() => medal.value.stop?.slug?.trim() ?? null)
-const medalCode = computed(() => medal.value.code.trim())
+const stopSlug = computed(() => medal.value.stop?.slug?.trim() ?? null);
+const medalCode = computed(() => medal.value.code.trim());
 
 const medalTitle = computed(() => {
-  const code = medalCode.value
-  const translationKey = `medals.definitions.codes.${code}.title`
-  const translated = t(translationKey)
+  const code = medalCode.value;
+  const translationKey = `medals.definitions.codes.${code}.title`;
+  const translated = t(translationKey);
   if (translated !== translationKey) {
-    return translated
+    return translated;
   }
 
-  if (code.endsWith('-completion')) {
-    const slug = code.replace('-completion', '')
-    const stopName = t(`map.stops.${slug}`)
+  if (code.endsWith("-completion")) {
+    const slug = code.replace("-completion", "");
+    const stopName = t(`map.stops.${slug}`);
     if (stopName !== `map.stops.${slug}`) {
-      return t('medals.patterns.completionTitle', { stop: stopName })
+      return t("medals.patterns.completionTitle", { stop: stopName });
     }
   }
 
-  if (code === 'example-approval') {
-    return t('medals.card.example')
+  if (code === "example-approval") {
+    return t("medals.card.example");
   }
 
-  return medal.value.title
-})
+  return medal.value.title;
+});
 
 const medalDescription = computed(() => {
-  const code = medalCode.value
-  const translationKey = `medals.definitions.codes.${code}.description`
-  const translated = t(translationKey)
+  const code = medalCode.value;
+  const translationKey = `medals.definitions.codes.${code}.description`;
+  const translated = t(translationKey);
   if (translated !== translationKey) {
-    return translated
+    return translated;
   }
 
-  if (code.endsWith('-completion')) {
-    const slug = code.replace('-completion', '')
-    const stopName = t(`map.stops.${slug}`)
+  if (code.endsWith("-completion")) {
+    const slug = code.replace("-completion", "");
+    const stopName = t(`map.stops.${slug}`);
     if (stopName !== `map.stops.${slug}`) {
-      return t('medals.patterns.completionDescription', { stop: stopName })
+      return t("medals.patterns.completionDescription", { stop: stopName });
     }
   }
 
-  return medal.value.description || t('medals.card.noDescription')
-})
+  return medal.value.description || t("medals.card.noDescription");
+});
 
 const locationLabel = computed(() => {
-  if (medal.value.medalType === 'EXAMPLE_APPROVAL') {
-    return t('medals.card.example')
+  if (medal.value.medalType === "EXAMPLE_APPROVAL") {
+    return t("medals.card.example");
   }
 
   if (stopSlug.value) {
-    const translated = t(`map.stops.${stopSlug.value}`)
+    const translated = t(`map.stops.${stopSlug.value}`);
     if (translated !== `map.stops.${stopSlug.value}`) {
-      return translated
+      return translated;
     }
   }
 
-  return medal.value.stop?.title?.trim().length ? medal.value.stop.title : t('medals.card.stop')
-})
-
+  return medal.value.stop?.title?.trim().length
+    ? medal.value.stop.title
+    : t("medals.card.stop");
+});
 </script>
 
 <template>
@@ -88,7 +89,9 @@ const locationLabel = computed(() => {
       <div
         :class="[
           'relative flex h-20 w-20 shrink-0 items-center justify-center rounded-[1.25rem] border',
-          entry.earned ? 'border-amber-200 bg-white' : 'border-slate-300 bg-slate-200',
+          entry.earned
+            ? 'border-amber-200 bg-white'
+            : 'border-slate-300 bg-slate-200',
         ]"
       >
         <div
@@ -120,12 +123,22 @@ const locationLabel = computed(() => {
 
       <div class="min-w-0 flex-1">
         <div class="flex flex-wrap items-center gap-2">
-          <h3 :class="['text-xl font-semibold', entry.earned ? 'text-slate-900' : 'text-slate-700']">
+          <h3
+            :class="[
+              'text-xl font-semibold',
+              entry.earned ? 'text-slate-900' : 'text-slate-700',
+            ]"
+          >
             {{ medalTitle }}
           </h3>
         </div>
 
-        <p :class="['mt-2 max-w-2xl text-sm leading-6', entry.earned ? 'text-slate-700' : 'text-slate-500']">
+        <p
+          :class="[
+            'mt-2 max-w-2xl text-sm leading-6',
+            entry.earned ? 'text-slate-700' : 'text-slate-500',
+          ]"
+        >
           {{ medalDescription }}
         </p>
         <div class="mt-4 flex flex-wrap gap-3 text-sm">
@@ -139,7 +152,6 @@ const locationLabel = computed(() => {
             {{ locationLabel }}
           </span>
         </div>
-
       </div>
     </div>
   </article>
diff --git a/src/medals/components/__tests__/MedalCard.spec.ts b/src/medals/components/__tests__/MedalCard.spec.ts
index e21cd7e6..244b4247 100644
--- a/src/medals/components/__tests__/MedalCard.spec.ts
+++ b/src/medals/components/__tests__/MedalCard.spec.ts
@@ -1,9 +1,9 @@
-import { describe, expect, it } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
 
-import MedalCard from '@/medals/components/MedalCard.vue'
-import { createAppI18n } from '@/app/i18n'
-import type { MedalEntryResponse } from '@/medals/model/medals.types'
+import MedalCard from "@/medals/components/MedalCard.vue";
+import { createAppI18n } from "@/app/i18n";
+import type { MedalEntryResponse } from "@/medals/model/medals.types";
 
 function mountMedalCard(entry: MedalEntryResponse) {
   return mount(MedalCard, {
@@ -11,52 +11,56 @@ function mountMedalCard(entry: MedalEntryResponse) {
     global: {
       plugins: [createAppI18n()],
     },
-  })
+  });
 }
 
-describe('MedalCard', () => {
-  it('renders translated completion medals and the stop location', () => {
+describe("MedalCard", () => {
+  it("renders translated completion medals and the stop location", () => {
     const wrapper = mountMedalCard({
       earned: true,
       medal: {
         id: 1,
-        code: 'nyhetskvartalet-completion',
-        title: 'Legacy title',
-        description: 'Legacy description',
-        medalType: 'STOP_COMPLETION',
+        code: "nyhetskvartalet-completion",
+        title: "Legacy title",
+        description: "Legacy description",
+        medalType: "STOP_COMPLETION",
         stop: {
           id: 10,
-          slug: 'nyhetskvartalet',
-          title: 'News Quarter',
+          slug: "nyhetskvartalet",
+          title: "News Quarter",
         },
         iconUrl: null,
       },
-    })
+    });
 
-    expect(wrapper.text()).toContain('Nyhetskvartalet fullført')
-    expect(wrapper.text()).toContain('Tildeles når stoppet Nyhetskvartalet er fullført.')
-    expect(wrapper.text()).toContain('Nyhetskvartalet')
-    expect(wrapper.find('img').exists()).toBe(false)
-  })
+    expect(wrapper.text()).toContain("Nyhetskvartalet fullført");
+    expect(wrapper.text()).toContain(
+      "Tildeles når stoppet Nyhetskvartalet er fullført.",
+    );
+    expect(wrapper.text()).toContain("Nyhetskvartalet");
+    expect(wrapper.find("img").exists()).toBe(false);
+  });
 
-  it('falls back to the medal title, description, and custom icon when no translation exists', () => {
+  it("falls back to the medal title, description, and custom icon when no translation exists", () => {
     const wrapper = mountMedalCard({
       earned: false,
       medal: {
         id: 2,
-        code: 'custom-award',
-        title: 'Custom award',
-        description: 'Custom description',
-        medalType: 'EXAMPLE_APPROVAL',
+        code: "custom-award",
+        title: "Custom award",
+        description: "Custom description",
+        medalType: "EXAMPLE_APPROVAL",
         stop: null,
-        iconUrl: 'https://cdn.example.com/custom-award.svg',
+        iconUrl: "https://cdn.example.com/custom-award.svg",
       },
-    })
+    });
 
-    const image = wrapper.get('img')
-    expect(wrapper.text()).toContain('Custom award')
-    expect(wrapper.text()).toContain('Custom description')
-    expect(wrapper.text()).toContain('Godkjent eksempel')
-    expect(image.attributes('src')).toBe('https://cdn.example.com/custom-award.svg')
-  })
-})
+    const image = wrapper.get("img");
+    expect(wrapper.text()).toContain("Custom award");
+    expect(wrapper.text()).toContain("Custom description");
+    expect(wrapper.text()).toContain("Godkjent eksempel");
+    expect(image.attributes("src")).toBe(
+      "https://cdn.example.com/custom-award.svg",
+    );
+  });
+});
diff --git a/src/medals/model/__tests__/medalAssets.spec.ts b/src/medals/model/__tests__/medalAssets.spec.ts
index a90d114f..c81afcc5 100644
--- a/src/medals/model/__tests__/medalAssets.spec.ts
+++ b/src/medals/model/__tests__/medalAssets.spec.ts
@@ -1,46 +1,46 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from "vitest";
 
-import { resolveMedalVisual } from '@/medals/model/medalAssets'
-import type { MedalResponse } from '@/medals/model/medals.types'
+import { resolveMedalVisual } from "@/medals/model/medalAssets";
+import type { MedalResponse } from "@/medals/model/medals.types";
 
-describe('resolveMedalVisual', () => {
-  it('returns the expected asset hint and icon metadata for a medal with a custom icon', () => {
+describe("resolveMedalVisual", () => {
+  it("returns the expected asset hint and icon metadata for a medal with a custom icon", () => {
     const medal: MedalResponse = {
       id: 1,
-      code: 'example-approval',
-      title: 'Example approval',
-      description: 'Awarded when a submitted example is approved.',
-      medalType: 'EXAMPLE_APPROVAL',
+      code: "example-approval",
+      title: "Example approval",
+      description: "Awarded when a submitted example is approved.",
+      medalType: "EXAMPLE_APPROVAL",
       stop: null,
-      iconUrl: 'https://cdn.example.com/medals/example.svg',
-    }
+      iconUrl: "https://cdn.example.com/medals/example.svg",
+    };
 
     expect(resolveMedalVisual(medal)).toEqual({
-      label: 'Example approval',
-      assetHint: 'src/assets/medals/example-approval.svg',
-      imageUrl: 'https://cdn.example.com/medals/example.svg',
-      fallbackGlyph: 'E',
-      accentClass: 'bg-emerald-200 text-emerald-900',
-    })
-  })
+      label: "Example approval",
+      assetHint: "src/assets/medals/example-approval.svg",
+      imageUrl: "https://cdn.example.com/medals/example.svg",
+      fallbackGlyph: "E",
+      accentClass: "bg-emerald-200 text-emerald-900",
+    });
+  });
 
-  it('falls back to the medal asset slot when no icon url is set', () => {
+  it("falls back to the medal asset slot when no icon url is set", () => {
     const medal: MedalResponse = {
       id: 2,
-      code: 'nyhetskvartalet-completion',
-      title: 'News Quarter completed',
-      description: 'Awarded when the News Quarter stop is completed.',
-      medalType: 'STOP_COMPLETION',
+      code: "nyhetskvartalet-completion",
+      title: "News Quarter completed",
+      description: "Awarded when the News Quarter stop is completed.",
+      medalType: "STOP_COMPLETION",
       stop: null,
-      iconUrl: '   ',
-    }
+      iconUrl: "   ",
+    };
 
     expect(resolveMedalVisual(medal)).toEqual({
-      label: 'Stop completion',
-      assetHint: 'src/assets/medals/nyhetskvartalet-completion.svg',
+      label: "Stop completion",
+      assetHint: "src/assets/medals/nyhetskvartalet-completion.svg",
       imageUrl: null,
-      fallbackGlyph: 'S',
-      accentClass: 'bg-amber-200 text-amber-900',
-    })
-  })
-})
+      fallbackGlyph: "S",
+      accentClass: "bg-amber-200 text-amber-900",
+    });
+  });
+});
diff --git a/src/medals/model/medalAssets.ts b/src/medals/model/medalAssets.ts
index 5b7a3592..137b0ee4 100644
--- a/src/medals/model/medalAssets.ts
+++ b/src/medals/model/medalAssets.ts
@@ -1,26 +1,26 @@
-import type { MedalResponse, MedalVisual } from './medals.types'
+import type { MedalResponse, MedalVisual } from "./medals.types";
 
-const MEDAL_ASSET_ROOT = 'src/assets/medals'
+const MEDAL_ASSET_ROOT = "src/assets/medals";
 
 const medalTypeFallbacks: Record<
-  MedalResponse['medalType'],
-  Pick<MedalVisual, 'label' | 'fallbackGlyph' | 'accentClass'>
+  MedalResponse["medalType"],
+  Pick<MedalVisual, "label" | "fallbackGlyph" | "accentClass">
 > = {
   STOP_COMPLETION: {
-    label: 'Stop completion',
-    fallbackGlyph: 'S',
-    accentClass: 'bg-amber-200 text-amber-900',
+    label: "Stop completion",
+    fallbackGlyph: "S",
+    accentClass: "bg-amber-200 text-amber-900",
   },
   EXAMPLE_APPROVAL: {
-    label: 'Example approval',
-    fallbackGlyph: 'E',
-    accentClass: 'bg-emerald-200 text-emerald-900',
+    label: "Example approval",
+    fallbackGlyph: "E",
+    accentClass: "bg-emerald-200 text-emerald-900",
   },
-}
+};
 
 export function resolveMedalVisual(medal: MedalResponse): MedalVisual {
-  const fallback = medalTypeFallbacks[medal.medalType]
-  const assetHint = `${MEDAL_ASSET_ROOT}/${medal.code}.svg`
+  const fallback = medalTypeFallbacks[medal.medalType];
+  const assetHint = `${MEDAL_ASSET_ROOT}/${medal.code}.svg`;
 
   return {
     label: fallback.label,
@@ -28,5 +28,5 @@ export function resolveMedalVisual(medal: MedalResponse): MedalVisual {
     imageUrl: medal.iconUrl?.trim().length ? medal.iconUrl : null,
     fallbackGlyph: fallback.fallbackGlyph,
     accentClass: fallback.accentClass,
-  }
+  };
 }
diff --git a/src/medals/model/medals.types.ts b/src/medals/model/medals.types.ts
index 2ef16968..75c27597 100644
--- a/src/medals/model/medals.types.ts
+++ b/src/medals/model/medals.types.ts
@@ -1,34 +1,34 @@
-export type MedalType = 'STOP_COMPLETION' | 'EXAMPLE_APPROVAL'
+export type MedalType = "STOP_COMPLETION" | "EXAMPLE_APPROVAL";
 
 export interface MedalStopSummary {
-  id?: number | null
-  slug?: string | null
-  title?: string | null
+  id?: number | null;
+  slug?: string | null;
+  title?: string | null;
 }
 
 export interface MedalResponse {
-  id: number
-  code: string
-  title: string
-  description?: string | null
-  medalType: MedalType
-  stop?: MedalStopSummary | null
-  iconUrl?: string | null
+  id: number;
+  code: string;
+  title: string;
+  description?: string | null;
+  medalType: MedalType;
+  stop?: MedalStopSummary | null;
+  iconUrl?: string | null;
 }
 
 export interface MedalEntryResponse {
-  medal: MedalResponse
-  earned: boolean
+  medal: MedalResponse;
+  earned: boolean;
 }
 
 export interface MedalOverviewResponse {
-  medals: MedalEntryResponse[]
+  medals: MedalEntryResponse[];
 }
 
 export interface MedalVisual {
-  label: string
-  assetHint: string
-  imageUrl: string | null
-  fallbackGlyph: string
-  accentClass: string
+  label: string;
+  assetHint: string;
+  imageUrl: string | null;
+  fallbackGlyph: string;
+  accentClass: string;
 }
diff --git a/src/medals/pages/MedalsPage.vue b/src/medals/pages/MedalsPage.vue
index 9b7d9cfa..b260f656 100644
--- a/src/medals/pages/MedalsPage.vue
+++ b/src/medals/pages/MedalsPage.vue
@@ -1,121 +1,129 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { requestMedalOverview } from '@/medals/api/medals.api'
-import MedalCard from '@/medals/components/MedalCard.vue'
-import type { MedalEntryResponse } from '@/medals/model/medals.types'
-import { Award } from 'lucide-vue-next'
-
-const { t } = useI18n()
-const authStore = useAuthStore()
-
-const isLoading = ref(false)
-const errorMessage = ref<string | null>(null)
-const medalEntries = ref<MedalEntryResponse[]>([])
-const activeFilter = ref<'all' | 'earned' | 'locked'>('all')
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useAuthStore } from "@/auth/model/auth.store";
+import { requestMedalOverview } from "@/medals/api/medals.api";
+import MedalCard from "@/medals/components/MedalCard.vue";
+import type { MedalEntryResponse } from "@/medals/model/medals.types";
+import { Award } from "lucide-vue-next";
+
+const { t } = useI18n();
+const authStore = useAuthStore();
+
+const isLoading = ref(false);
+const errorMessage = ref<string | null>(null);
+const medalEntries = ref<MedalEntryResponse[]>([]);
+const activeFilter = ref<"all" | "earned" | "locked">("all");
 
 const filterOptions = computed(() => [
-  { key: 'all' as const, label: t('medals.filters.all') },
-  { key: 'earned' as const, label: t('medals.filters.earned') },
-  { key: 'locked' as const, label: t('medals.filters.locked') },
-])
-
-const earnedMedals = computed(() => medalEntries.value.filter((entry) => entry.earned))
-const lockedMedals = computed(() => medalEntries.value.filter((entry) => !entry.earned))
+  { key: "all" as const, label: t("medals.filters.all") },
+  { key: "earned" as const, label: t("medals.filters.earned") },
+  { key: "locked" as const, label: t("medals.filters.locked") },
+]);
+
+const earnedMedals = computed(() =>
+  medalEntries.value.filter((entry) => entry.earned),
+);
+const lockedMedals = computed(() =>
+  medalEntries.value.filter((entry) => !entry.earned),
+);
 
 const visibleMedals = computed(() => {
-  if (activeFilter.value === 'earned') {
-    return earnedMedals.value
+  if (activeFilter.value === "earned") {
+    return earnedMedals.value;
   }
 
-  if (activeFilter.value === 'locked') {
-    return lockedMedals.value
+  if (activeFilter.value === "locked") {
+    return lockedMedals.value;
   }
 
-  return medalEntries.value
-})
+  return medalEntries.value;
+});
 
 const completionRatio = computed(() => {
   if (medalEntries.value.length === 0) {
-    return 0
+    return 0;
   }
 
-  return Math.round((earnedMedals.value.length / medalEntries.value.length) * 100)
-})
+  return Math.round(
+    (earnedMedals.value.length / medalEntries.value.length) * 100,
+  );
+});
 
 const summaryCards = computed(() => [
   {
-    label: t('medals.summary.earned'),
+    label: t("medals.summary.earned"),
     value: String(earnedMedals.value.length),
-    detail: t('medals.summary.ofTotal', {
+    detail: t("medals.summary.ofTotal", {
       total: medalEntries.value.length,
       percent: completionRatio.value,
     }),
   },
   {
-    label: t('medals.summary.locked'),
+    label: t("medals.summary.locked"),
     value: String(lockedMedals.value.length),
-    detail: t('medals.summary.lockedDetail'),
+    detail: t("medals.summary.lockedDetail"),
   },
   {
-    label: t('medals.summary.total'),
+    label: t("medals.summary.total"),
     value: String(medalEntries.value.length),
-    detail: t('medals.summary.totalDetail'),
+    detail: t("medals.summary.totalDetail"),
   },
-])
+]);
 
 async function loadMedals() {
-  const authorizationHeader = authStore.authorizationHeader
+  const authorizationHeader = authStore.authorizationHeader;
 
   if (!authorizationHeader) {
-    if (authStore.status === 'idle' || authStore.status === 'restoring') {
-      return
+    if (authStore.status === "idle" || authStore.status === "restoring") {
+      return;
     }
 
-    medalEntries.value = []
-    errorMessage.value = t('medals.errors.unauthenticated')
-    return
+    medalEntries.value = [];
+    errorMessage.value = t("medals.errors.unauthenticated");
+    return;
   }
 
-  isLoading.value = true
-  errorMessage.value = null
+  isLoading.value = true;
+  errorMessage.value = null;
 
   try {
-    const response = await requestMedalOverview(authorizationHeader)
-    medalEntries.value = response.medals
+    const response = await requestMedalOverview(authorizationHeader);
+    medalEntries.value = response.medals;
   } catch (error) {
-    medalEntries.value = []
+    medalEntries.value = [];
     errorMessage.value =
       error instanceof Error && error.message.trim().length > 0
         ? error.message
-        : t('medals.errors.loadFailed')
+        : t("medals.errors.loadFailed");
   } finally {
-    isLoading.value = false
+    isLoading.value = false;
   }
 }
 
 watch(
   () => [authStore.authorizationHeader, authStore.status] as const,
   () => {
-    void loadMedals()
+    void loadMedals();
   },
   { immediate: true },
-)
+);
 </script>
 
 <template>
   <section class="min-h-[calc(100vh-3rem)] px-4 py-6 sm:px-6 lg:px-10">
     <div class="mx-auto max-w-5xl">
-      <header class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <header
+        class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm"
+      >
         <p class="text-sm font-bold uppercase tracking-[0.18em] text-slate-600">
-          {{ t('pages.medals') }}
+          {{ t("pages.medals") }}
         </p>
         <h1 class="mt-2 text-4xl font-bold text-slate-900">
-          {{ t('medals.title') }}
+          {{ t("medals.title") }}
         </h1>
         <p class="mt-3 max-w-2xl text-lg text-slate-700">
-          {{ t('medals.description') }}
+          {{ t("medals.description") }}
         </p>
       </header>
 
@@ -142,9 +150,11 @@ watch(
           v-for="filter in filterOptions"
           :key="filter.key"
           class="inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-semibold transition focus:outline-none focus:ring-2 focus:ring-amber-500/30"
-          :class="activeFilter === filter.key
-            ? 'border-amber-300 bg-amber-100 text-amber-950'
-            : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50'"
+          :class="
+            activeFilter === filter.key
+              ? 'border-amber-300 bg-amber-100 text-amber-950'
+              : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50'
+          "
           type="button"
           @click="activeFilter = filter.key"
         >
@@ -160,10 +170,7 @@ watch(
           {{ errorMessage }}
         </div>
 
-        <div
-          v-else-if="isLoading"
-          class="mt-6 grid gap-4 lg:grid-cols-2"
-        >
+        <div v-else-if="isLoading" class="mt-6 grid gap-4 lg:grid-cols-2">
           <article
             v-for="index in 4"
             :key="index"
@@ -187,10 +194,10 @@ watch(
         >
           <Award class="mx-auto h-12 w-12 text-amber-500" />
           <h2 class="mt-4 text-2xl font-semibold text-slate-900">
-            {{ t('medals.empty.title') }}
+            {{ t("medals.empty.title") }}
           </h2>
           <p class="mx-auto mt-3 max-w-xl text-slate-600">
-            {{ t('medals.empty.description') }}
+            {{ t("medals.empty.description") }}
           </p>
         </div>
 
diff --git a/src/medals/pages/__tests__/MedalsPage.spec.ts b/src/medals/pages/__tests__/MedalsPage.spec.ts
index 6c27cb2e..01eae5d2 100644
--- a/src/medals/pages/__tests__/MedalsPage.spec.ts
+++ b/src/medals/pages/__tests__/MedalsPage.spec.ts
@@ -1,65 +1,65 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { flushPromises, mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
 
-import { createAppI18n } from '@/app/i18n'
-import { useAuthStore } from '@/auth/model/auth.store'
-import MedalsPage from '@/medals/pages/MedalsPage.vue'
-import { requestMedalOverview } from '@/medals/api/medals.api'
-import type { MedalEntryResponse } from '@/medals/model/medals.types'
+import { createAppI18n } from "@/app/i18n";
+import { useAuthStore } from "@/auth/model/auth.store";
+import MedalsPage from "@/medals/pages/MedalsPage.vue";
+import { requestMedalOverview } from "@/medals/api/medals.api";
+import type { MedalEntryResponse } from "@/medals/model/medals.types";
 
-vi.mock('@/medals/api/medals.api', () => ({
+vi.mock("@/medals/api/medals.api", () => ({
   requestMedalOverview: vi.fn(),
-}))
+}));
 
 function mountMedalsPage() {
-  const pinia = createPinia()
-  setActivePinia(pinia)
+  const pinia = createPinia();
+  setActivePinia(pinia);
 
-  const authStore = useAuthStore(pinia)
-  authStore.status = 'authenticated'
-  authStore.accessToken = 'test-token'
+  const authStore = useAuthStore(pinia);
+  authStore.status = "authenticated";
+  authStore.accessToken = "test-token";
   authStore.user = {
-    subject: 'pupil-1',
-    portalType: 'PUPIL',
+    subject: "pupil-1",
+    portalType: "PUPIL",
     email: null,
-    username: 'student1',
+    username: "student1",
     authorities: [] as string[],
     pupilProfile: null,
     teacherProfile: null,
-  }
+  };
 
   const wrapper = mount(MedalsPage, {
     global: {
       plugins: [pinia, createAppI18n()],
       stubs: {
         MedalCard: {
-          props: ['entry'],
+          props: ["entry"],
           template:
             '<article data-testid="medal-card">{{ entry.medal.code }}:{{ entry.earned ? "earned" : "locked" }}</article>',
         },
       },
     },
-  })
+  });
 
-  return { authStore, wrapper }
+  return { authStore, wrapper };
 }
 
-const mockedRequestMedalOverview = vi.mocked(requestMedalOverview)
+const mockedRequestMedalOverview = vi.mocked(requestMedalOverview);
 
 const medals: MedalEntryResponse[] = [
   {
     earned: true,
     medal: {
       id: 1,
-      code: 'nyhetskvartalet-completion',
-      title: 'News Quarter completed',
-      description: 'Awarded when the News Quarter stop is completed.',
-      medalType: 'STOP_COMPLETION',
+      code: "nyhetskvartalet-completion",
+      title: "News Quarter completed",
+      description: "Awarded when the News Quarter stop is completed.",
+      medalType: "STOP_COMPLETION",
       stop: {
         id: 11,
-        slug: 'nyhetskvartalet',
-        title: 'News Quarter',
+        slug: "nyhetskvartalet",
+        title: "News Quarter",
       },
       iconUrl: null,
     },
@@ -68,73 +68,75 @@ const medals: MedalEntryResponse[] = [
     earned: false,
     medal: {
       id: 2,
-      code: 'custom-award',
-      title: 'Custom award',
-      description: 'Custom description',
-      medalType: 'EXAMPLE_APPROVAL',
+      code: "custom-award",
+      title: "Custom award",
+      description: "Custom description",
+      medalType: "EXAMPLE_APPROVAL",
       stop: null,
       iconUrl: null,
     },
   },
-]
+];
 
-describe('MedalsPage', () => {
+describe("MedalsPage", () => {
   beforeEach(() => {
-    setActivePinia(createPinia())
-    vi.restoreAllMocks()
-    mockedRequestMedalOverview.mockReset()
-  })
+    setActivePinia(createPinia());
+    vi.restoreAllMocks();
+    mockedRequestMedalOverview.mockReset();
+  });
 
-  it('loads medals and filters between all, earned, and locked medals', async () => {
-    mockedRequestMedalOverview.mockResolvedValueOnce({ medals })
+  it("loads medals and filters between all, earned, and locked medals", async () => {
+    mockedRequestMedalOverview.mockResolvedValueOnce({ medals });
 
-    const { wrapper } = mountMedalsPage()
-    await flushPromises()
+    const { wrapper } = mountMedalsPage();
+    await flushPromises();
 
-    expect(wrapper.text()).toContain('Medaljer')
-    expect(wrapper.text()).toContain('2')
-    expect(wrapper.text()).toContain('1')
-    expect(wrapper.text()).toContain('50% av 2')
+    expect(wrapper.text()).toContain("Medaljer");
+    expect(wrapper.text()).toContain("2");
+    expect(wrapper.text()).toContain("1");
+    expect(wrapper.text()).toContain("50% av 2");
 
-    expect(wrapper.findAll('[data-testid="medal-card"]')).toHaveLength(2)
+    expect(wrapper.findAll('[data-testid="medal-card"]')).toHaveLength(2);
 
-    await wrapper.get('button:nth-of-type(3)').trigger('click')
-    expect(wrapper.findAll('[data-testid="medal-card"]')).toHaveLength(1)
-    expect(wrapper.text()).toContain('custom-award:locked')
+    await wrapper.get("button:nth-of-type(3)").trigger("click");
+    expect(wrapper.findAll('[data-testid="medal-card"]')).toHaveLength(1);
+    expect(wrapper.text()).toContain("custom-award:locked");
 
-    await wrapper.get('button:nth-of-type(2)').trigger('click')
-    expect(wrapper.findAll('[data-testid="medal-card"]')).toHaveLength(1)
-    expect(wrapper.text()).toContain('nyhetskvartalet-completion:earned')
+    await wrapper.get("button:nth-of-type(2)").trigger("click");
+    expect(wrapper.findAll('[data-testid="medal-card"]')).toHaveLength(1);
+    expect(wrapper.text()).toContain("nyhetskvartalet-completion:earned");
 
-    await wrapper.get('button:nth-of-type(1)').trigger('click')
-    expect(wrapper.findAll('[data-testid="medal-card"]')).toHaveLength(2)
-  })
+    await wrapper.get("button:nth-of-type(1)").trigger("click");
+    expect(wrapper.findAll('[data-testid="medal-card"]')).toHaveLength(2);
+  });
 
-  it('shows the unauthenticated error when no access token is available', async () => {
-    const pinia = createPinia()
-    setActivePinia(pinia)
+  it("shows the unauthenticated error when no access token is available", async () => {
+    const pinia = createPinia();
+    setActivePinia(pinia);
 
-    const authStore = useAuthStore(pinia)
-    authStore.status = 'authenticated'
-    authStore.accessToken = null
+    const authStore = useAuthStore(pinia);
+    authStore.status = "authenticated";
+    authStore.accessToken = null;
     authStore.user = {
-      subject: 'pupil-1',
-      portalType: 'PUPIL',
+      subject: "pupil-1",
+      portalType: "PUPIL",
       email: null,
-      username: 'student1',
+      username: "student1",
       authorities: [],
       pupilProfile: null,
       teacherProfile: null,
-    }
+    };
 
     const wrapper = mount(MedalsPage, {
       global: {
         plugins: [pinia, createAppI18n()],
       },
-    })
+    });
 
-    await flushPromises()
+    await flushPromises();
 
-    expect(wrapper.text()).toContain('Du må være logget inn for å se medaljene.')
-  })
-})
+    expect(wrapper.text()).toContain(
+      "Du må være logget inn for å se medaljene.",
+    );
+  });
+});
diff --git a/src/medals/routes.ts b/src/medals/routes.ts
index 2663e490..23b5d065 100644
--- a/src/medals/routes.ts
+++ b/src/medals/routes.ts
@@ -1,14 +1,14 @@
-import type { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from "vue-router";
 
-import MedalsPage from '@/medals/pages/MedalsPage.vue'
+import MedalsPage from "@/medals/pages/MedalsPage.vue";
 
 export const medalsRoutes: RouteRecordRaw[] = [
   {
-    path: 'medals',
-    name: 'medals',
+    path: "medals",
+    name: "medals",
     component: MedalsPage,
     meta: {
-      backTarget: { name: 'pupil-home' },
+      backTarget: { name: "pupil-home" },
     },
   },
-]
+];
diff --git a/src/mystery/api/__tests__/mystery.api.spec.ts b/src/mystery/api/__tests__/mystery.api.spec.ts
index c839a1db..aef99734 100644
--- a/src/mystery/api/__tests__/mystery.api.spec.ts
+++ b/src/mystery/api/__tests__/mystery.api.spec.ts
@@ -1,209 +1,272 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import {
-requestCurrentWeekMysteries,
-requestAllWeeklyMysteries,
-requestMySubmissions,
-requestSubmitExample,
-requestUploadAttachment,
-} from '@/mystery/api/mystery.api'
+  requestCurrentWeekMysteries,
+  requestAllWeeklyMysteries,
+  requestMySubmissions,
+  requestSubmitExample,
+  requestUploadAttachment,
+} from "@/mystery/api/mystery.api";
 
 function jsonResponse(body: unknown, init: ResponseInit = {}) {
   return new Response(JSON.stringify(body), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' },
+    headers: { "Content-Type": "application/json" },
     ...init,
-  })
+  });
 }
 
-const AUTH_HEADER = 'Bearer test-token'
-const CLASSROOM_ID = 7
+const AUTH_HEADER = "Bearer test-token";
+const CLASSROOM_ID = 7;
 
 const submission = {
   id: 1,
   classroomId: CLASSROOM_ID,
   pupilUserId: 20,
-  description: 'I found a fake news article',
+  description: "I found a fake news article",
   attachmentUrl: null,
-  submittedAt: '2025-05-05T10:00:00Z',
-  reviewStatus: 'PENDING',
+  submittedAt: "2025-05-05T10:00:00Z",
+  reviewStatus: "PENDING",
   reviewedByTeacherId: null,
   reviewedAt: null,
   teacherComment: null,
-}
+};
 
 const weeklyMystery = {
   id: 3,
   classroomId: CLASSROOM_ID,
-  weekStart: '2025-05-05',
+  weekStart: "2025-05-05",
   featuredByTeacherId: 10,
-  featuredAt: '2025-05-05T08:00:00Z',
+  featuredAt: "2025-05-05T08:00:00Z",
   submission,
-}
+};
 
-describe('mystery.api', () => {
+describe("mystery.api", () => {
   beforeEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  describe('requestCurrentWeekMysteries', () => {
-    it('calls the correct endpoint and returns this weeks mysteries', async () => {
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse([weeklyMystery]))
-      vi.stubGlobal('fetch', fetchMock)
-
-      const result = await requestCurrentWeekMysteries(CLASSROOM_ID, AUTH_HEADER)
+    vi.restoreAllMocks();
+  });
 
-      expect(result).toEqual([weeklyMystery])
-      expect(fetchMock).toHaveBeenCalledOnce()
-      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit]
-      expect(url).toBe(`/api/v1/classrooms/${CLASSROOM_ID}/mystery/weekly/current`)
-      expect(new Headers(options.headers).get('Authorization')).toBe(AUTH_HEADER)
-      expect(options.credentials).toBe('include')
-    })
-  
-
-    it('returns an empty list when no mysteries are featured this week', async () => {
-      vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce(jsonResponse([])))
+  describe("requestCurrentWeekMysteries", () => {
+    it("calls the correct endpoint and returns this weeks mysteries", async () => {
+      const fetchMock = vi
+        .fn()
+        .mockResolvedValueOnce(jsonResponse([weeklyMystery]));
+      vi.stubGlobal("fetch", fetchMock);
+
+      const result = await requestCurrentWeekMysteries(
+        CLASSROOM_ID,
+        AUTH_HEADER,
+      );
+
+      expect(result).toEqual([weeklyMystery]);
+      expect(fetchMock).toHaveBeenCalledOnce();
+      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+      expect(url).toBe(
+        `/api/v1/classrooms/${CLASSROOM_ID}/mystery/weekly/current`,
+      );
+      expect(new Headers(options.headers).get("Authorization")).toBe(
+        AUTH_HEADER,
+      );
+      expect(options.credentials).toBe("include");
+    });
+
+    it("returns an empty list when no mysteries are featured this week", async () => {
+      vi.stubGlobal("fetch", vi.fn().mockResolvedValueOnce(jsonResponse([])));
+
+      const result = await requestCurrentWeekMysteries(
+        CLASSROOM_ID,
+        AUTH_HEADER,
+      );
+
+      expect(result).toEqual([]);
+    });
+
+    it("throws with the server error message on failure", async () => {
+      vi.stubGlobal(
+        "fetch",
+        vi
+          .fn()
+          .mockResolvedValueOnce(
+            jsonResponse({ detail: "Not a classroom member" }, { status: 403 }),
+          ),
+      );
+
+      await expect(
+        requestCurrentWeekMysteries(CLASSROOM_ID, AUTH_HEADER),
+      ).rejects.toThrow("Not a classroom member");
+    });
+  });
+
+  describe("requestAllWeeklyMysteries", () => {
+    it("calls the correct endpoint and returns all weekly mysteries", async () => {
+      const fetchMock = vi
+        .fn()
+        .mockResolvedValueOnce(jsonResponse([weeklyMystery]));
+      vi.stubGlobal("fetch", fetchMock);
 
-      const result = await requestCurrentWeekMysteries(CLASSROOM_ID, AUTH_HEADER)
+      const result = await requestAllWeeklyMysteries(CLASSROOM_ID, AUTH_HEADER);
 
-      expect(result).toEqual([])
-    })
+      expect(result).toEqual([weeklyMystery]);
+      const [url] = fetchMock.mock.calls[0] as [string, RequestInit];
+      expect(url).toBe(`/api/v1/classrooms/${CLASSROOM_ID}/mystery/weekly`);
+    });
 
-    it('throws with the server error message on failure', async () => {
+    it("throws when the server responds with an error", async () => {
       vi.stubGlobal(
-        'fetch',
-        vi.fn().mockResolvedValueOnce(
-          jsonResponse({ detail: 'Not a classroom member' }, { status: 403 }),
-        ),
-    )
-  
-
-await expect(requestCurrentWeekMysteries(CLASSROOM_ID, AUTH_HEADER)).rejects.toThrow(
-        'Not a classroom member',
-)
-})
-})
-
-describe('requestAllWeeklyMysteries', () => {
-    it('calls the correct endpoint and returns all weekly mysteries', async () => {
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse([weeklyMystery]))
-      vi.stubGlobal('fetch', fetchMock)
-
-      const result = await requestAllWeeklyMysteries(CLASSROOM_ID, AUTH_HEADER)
-
-      expect(result).toEqual([weeklyMystery])
-      const [url] = fetchMock.mock.calls[0] as [string, RequestInit]
-      expect(url).toBe(`/api/v1/classrooms/${CLASSROOM_ID}/mystery/weekly`)
-    })
-
-    it('throws when the server responds with an error', async () => {
-      vi.stubGlobal(
-        'fetch',
-        vi.fn().mockResolvedValueOnce(jsonResponse({ message: 'Unauthorized' }, { status: 401 })),
-)
-
-await expect(requestAllWeeklyMysteries(CLASSROOM_ID, AUTH_HEADER)).rejects.toThrow(
-        'Unauthorized',
-)
-})
-})
-
-describe('requestMySubmissions', () => {
-    it('calls the correct endpoint and returns the pupils own submissions', async () => {
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse([submission]))
-      vi.stubGlobal('fetch', fetchMock)
-
-      const result = await requestMySubmissions(CLASSROOM_ID, AUTH_HEADER)
-
-      expect(result).toEqual([submission])
-      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit]
-      expect(url).toBe(`/api/v1/classrooms/${CLASSROOM_ID}/mystery/submissions/my`)
-      expect(new Headers(options.headers).get('Authorization')).toBe(AUTH_HEADER)
-    })
-
-    it('returns an empty list when the pupil has no submissions', async () => {
-      vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce(jsonResponse([])))
-
-      const result = await requestMySubmissions(CLASSROOM_ID, AUTH_HEADER)
-
-      expect(result).toEqual([])
-    })
-  })
-
-  describe('requestSubmitExample', () => {
-    it('sends a POST with the payload and returns the created submission', async () => {
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse(submission))
-      vi.stubGlobal('fetch', fetchMock)
-
-      const payload = { description: 'I found a fake news article', attachmentUrl: null }
-      const result = await requestSubmitExample(CLASSROOM_ID, AUTH_HEADER, payload)
-
-      expect(result).toEqual(submission)
-      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit]
-      expect(url).toBe(`/api/v1/classrooms/${CLASSROOM_ID}/mystery/submissions`)
-      expect(options.method).toBe('POST')
-      expect(JSON.parse(options.body as string)).toEqual(payload)
-      expect(new Headers(options.headers).get('Content-Type')).toBe('application/json')
-      expect(new Headers(options.headers).get('Authorization')).toBe(AUTH_HEADER)
-    })
-
-    it('includes the attachmentUrl when provided', async () => {
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse(submission))
-      vi.stubGlobal('fetch', fetchMock)
-
-      const payload = { description: 'With image', attachmentUrl: 'https://cdn.example.com/img.jpg' }
-      await requestSubmitExample(CLASSROOM_ID, AUTH_HEADER, payload)
-
-      const [, options] = fetchMock.mock.calls[0] as [string, RequestInit]
-      expect(JSON.parse(options.body as string).attachmentUrl).toBe('https://cdn.example.com/img.jpg')
-    })
-
-    it('throws when the server rejects the submission', async () => {
+        "fetch",
+        vi
+          .fn()
+          .mockResolvedValueOnce(
+            jsonResponse({ message: "Unauthorized" }, { status: 401 }),
+          ),
+      );
+
+      await expect(
+        requestAllWeeklyMysteries(CLASSROOM_ID, AUTH_HEADER),
+      ).rejects.toThrow("Unauthorized");
+    });
+  });
+
+  describe("requestMySubmissions", () => {
+    it("calls the correct endpoint and returns the pupils own submissions", async () => {
+      const fetchMock = vi
+        .fn()
+        .mockResolvedValueOnce(jsonResponse([submission]));
+      vi.stubGlobal("fetch", fetchMock);
+
+      const result = await requestMySubmissions(CLASSROOM_ID, AUTH_HEADER);
+
+      expect(result).toEqual([submission]);
+      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+      expect(url).toBe(
+        `/api/v1/classrooms/${CLASSROOM_ID}/mystery/submissions/my`,
+      );
+      expect(new Headers(options.headers).get("Authorization")).toBe(
+        AUTH_HEADER,
+      );
+    });
+
+    it("returns an empty list when the pupil has no submissions", async () => {
+      vi.stubGlobal("fetch", vi.fn().mockResolvedValueOnce(jsonResponse([])));
+
+      const result = await requestMySubmissions(CLASSROOM_ID, AUTH_HEADER);
+
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe("requestSubmitExample", () => {
+    it("sends a POST with the payload and returns the created submission", async () => {
+      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse(submission));
+      vi.stubGlobal("fetch", fetchMock);
+
+      const payload = {
+        description: "I found a fake news article",
+        attachmentUrl: null,
+      };
+      const result = await requestSubmitExample(
+        CLASSROOM_ID,
+        AUTH_HEADER,
+        payload,
+      );
+
+      expect(result).toEqual(submission);
+      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+      expect(url).toBe(
+        `/api/v1/classrooms/${CLASSROOM_ID}/mystery/submissions`,
+      );
+      expect(options.method).toBe("POST");
+      expect(JSON.parse(options.body as string)).toEqual(payload);
+      expect(new Headers(options.headers).get("Content-Type")).toBe(
+        "application/json",
+      );
+      expect(new Headers(options.headers).get("Authorization")).toBe(
+        AUTH_HEADER,
+      );
+    });
+
+    it("includes the attachmentUrl when provided", async () => {
+      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse(submission));
+      vi.stubGlobal("fetch", fetchMock);
+
+      const payload = {
+        description: "With image",
+        attachmentUrl: "https://cdn.example.com/img.jpg",
+      };
+      await requestSubmitExample(CLASSROOM_ID, AUTH_HEADER, payload);
+
+      const [, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+      expect(JSON.parse(options.body as string).attachmentUrl).toBe(
+        "https://cdn.example.com/img.jpg",
+      );
+    });
+
+    it("throws when the server rejects the submission", async () => {
       vi.stubGlobal(
-        'fetch',
-        vi.fn().mockResolvedValueOnce(
-          jsonResponse({ detail: 'Description must not be blank' }, { status: 400 }),
-        ),
-)
-
-await expect(
-        requestSubmitExample(CLASSROOM_ID, AUTH_HEADER, { description: '', attachmentUrl: null }),
-      ).rejects.toThrow('Description must not be blank')
-    })
-  })
-
-  describe('requestUploadAttachment', () => {
-    it('sends the file as multipart/form-data and returns the public URL', async () => {
+        "fetch",
+        vi
+          .fn()
+          .mockResolvedValueOnce(
+            jsonResponse(
+              { detail: "Description must not be blank" },
+              { status: 400 },
+            ),
+          ),
+      );
+
+      await expect(
+        requestSubmitExample(CLASSROOM_ID, AUTH_HEADER, {
+          description: "",
+          attachmentUrl: null,
+        }),
+      ).rejects.toThrow("Description must not be blank");
+    });
+  });
+
+  describe("requestUploadAttachment", () => {
+    it("sends the file as multipart/form-data and returns the public URL", async () => {
       const fetchMock = vi
         .fn()
-        .mockResolvedValueOnce(jsonResponse({ url: 'https://cdn.example.com/mystery/img.jpg' }))
-      vi.stubGlobal('fetch', fetchMock)
-
-      const file = new File(['pixel'], 'photo.jpg', { type: 'image/jpeg' })
-      const result = await requestUploadAttachment(CLASSROOM_ID, AUTH_HEADER, file)
-
-      expect(result.url).toBe('https://cdn.example.com/mystery/img.jpg')
-      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit]
-      expect(url).toBe(`/api/v1/classrooms/${CLASSROOM_ID}/mystery/upload`)
-      expect(options.method).toBe('POST')
-      expect(options.body).toBeInstanceOf(FormData)
-      expect(new Headers(options.headers).get('Authorization')).toBe(AUTH_HEADER)
-      expect(new Headers(options.headers).get('Content-Type')).toBeNull()
-    })
-
-    it('throws when the server rejects the file type', async () => {
+        .mockResolvedValueOnce(
+          jsonResponse({ url: "https://cdn.example.com/mystery/img.jpg" }),
+        );
+      vi.stubGlobal("fetch", fetchMock);
+
+      const file = new File(["pixel"], "photo.jpg", { type: "image/jpeg" });
+      const result = await requestUploadAttachment(
+        CLASSROOM_ID,
+        AUTH_HEADER,
+        file,
+      );
+
+      expect(result.url).toBe("https://cdn.example.com/mystery/img.jpg");
+      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+      expect(url).toBe(`/api/v1/classrooms/${CLASSROOM_ID}/mystery/upload`);
+      expect(options.method).toBe("POST");
+      expect(options.body).toBeInstanceOf(FormData);
+      expect(new Headers(options.headers).get("Authorization")).toBe(
+        AUTH_HEADER,
+      );
+      expect(new Headers(options.headers).get("Content-Type")).toBeNull();
+    });
+
+    it("throws when the server rejects the file type", async () => {
       vi.stubGlobal(
-        'fetch',
-        vi.fn().mockResolvedValueOnce(
-          jsonResponse({ detail: 'Unsupported file type: text/plain' }, { status: 400 }),
-        ),
-)
-
-const file = new File(['hello'], 'notes.txt', { type: 'text/plain' })
-await expect(requestUploadAttachment(CLASSROOM_ID, AUTH_HEADER, file)).rejects.toThrow(
-        'Unsupported file type: text/plain',
-)
-})
-})
-})
\ No newline at end of file
+        "fetch",
+        vi
+          .fn()
+          .mockResolvedValueOnce(
+            jsonResponse(
+              { detail: "Unsupported file type: text/plain" },
+              { status: 400 },
+            ),
+          ),
+      );
+
+      const file = new File(["hello"], "notes.txt", { type: "text/plain" });
+      await expect(
+        requestUploadAttachment(CLASSROOM_ID, AUTH_HEADER, file),
+      ).rejects.toThrow("Unsupported file type: text/plain");
+    });
+  });
+});
diff --git a/src/mystery/api/mystery.api.ts b/src/mystery/api/mystery.api.ts
index 0fbe5692..b6b004e6 100644
--- a/src/mystery/api/mystery.api.ts
+++ b/src/mystery/api/mystery.api.ts
@@ -1,51 +1,56 @@
 import type {
-    MysterySubmissionResponse,
-WeeklyMysteryResponse,
-SubmitMysteryPayload,
-} from '@/mystery/model/mystery.types'
+  MysterySubmissionResponse,
+  WeeklyMysteryResponse,
+  SubmitMysteryPayload,
+} from "@/mystery/model/mystery.types";
 
-const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
+const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? "").replace(
+  /\/$/,
+  "",
+);
 
 function mysteryBase(classroomId: number) {
-  return `${API_BASE_URL}/api/v1/classrooms/${classroomId}/mystery`
+  return `${API_BASE_URL}/api/v1/classrooms/${classroomId}/mystery`;
 }
 
 async function getResponseErrorMessage(response: Response): Promise<string> {
-  const fallback = `Mystery request failed with status ${response.status}.`
-  const contentType = response.headers.get('content-type') ?? ''
+  const fallback = `Mystery request failed with status ${response.status}.`;
+  const contentType = response.headers.get("content-type") ?? "";
 
-  if (contentType.includes('application/json')) {
-    const body = (await response.json().catch(() => null)) as
-      | { message?: string; detail?: string; error?: string }
-      | null
+  if (contentType.includes("application/json")) {
+    const body = (await response.json().catch(() => null)) as {
+      message?: string;
+      detail?: string;
+      error?: string;
+    } | null;
 
-    return body?.detail ?? body?.message ?? body?.error ?? fallback
+    return body?.detail ?? body?.message ?? body?.error ?? fallback;
   }
 
-  return (await response.text().catch(() => '')) || fallback
+  return (await response.text().catch(() => "")) || fallback;
 }
 
 async function fetchMysteryJson<T>(options: {
-  url: string
-  method?: string
-  body?: unknown
-  authorizationHeader: string
+  url: string;
+  method?: string;
+  body?: unknown;
+  authorizationHeader: string;
 }): Promise<T> {
-  const headers = new Headers({ Authorization: options.authorizationHeader })
+  const headers = new Headers({ Authorization: options.authorizationHeader });
   if (options.body !== undefined) {
-    headers.set('Content-Type', 'application/json')
+    headers.set("Content-Type", "application/json");
   }
 
   const response = await fetch(options.url, {
-    method: options.method ?? 'GET',
+    method: options.method ?? "GET",
     headers,
     body: options.body !== undefined ? JSON.stringify(options.body) : undefined,
-    credentials: 'include',
-  })
+    credentials: "include",
+  });
 
-  if (!response.ok) throw new Error(await getResponseErrorMessage(response))
-  if (response.status === 204) return undefined as T
-  return (await response.json()) as T
+  if (!response.ok) throw new Error(await getResponseErrorMessage(response));
+  if (response.status === 204) return undefined as T;
+  return (await response.json()) as T;
 }
 
 export function requestCurrentWeekMysteries(
@@ -55,7 +60,7 @@ export function requestCurrentWeekMysteries(
   return fetchMysteryJson({
     url: `${mysteryBase(classroomId)}/weekly/current`,
     authorizationHeader,
-  })
+  });
 }
 
 export function requestAllWeeklyMysteries(
@@ -65,7 +70,7 @@ export function requestAllWeeklyMysteries(
   return fetchMysteryJson({
     url: `${mysteryBase(classroomId)}/weekly`,
     authorizationHeader,
-  })
+  });
 }
 
 export function requestMySubmissions(
@@ -75,7 +80,7 @@ export function requestMySubmissions(
   return fetchMysteryJson({
     url: `${mysteryBase(classroomId)}/submissions/my`,
     authorizationHeader,
-  })
+  });
 }
 
 export function requestSubmitExample(
@@ -85,10 +90,10 @@ export function requestSubmitExample(
 ): Promise<MysterySubmissionResponse> {
   return fetchMysteryJson({
     url: `${mysteryBase(classroomId)}/submissions`,
-    method: 'POST',
+    method: "POST",
     authorizationHeader,
     body: payload,
-  })
+  });
 }
 
 export function requestUploadAttachment(
@@ -96,16 +101,16 @@ export function requestUploadAttachment(
   authorizationHeader: string,
   file: File,
 ): Promise<{ url: string }> {
-  const formData = new FormData()
-  formData.append('file', file)
+  const formData = new FormData();
+  formData.append("file", file);
 
   return fetch(`${mysteryBase(classroomId)}/upload`, {
-    method: 'POST',
+    method: "POST",
     headers: { Authorization: authorizationHeader },
     body: formData,
-    credentials: 'include',
+    credentials: "include",
   }).then(async (response) => {
-    if (!response.ok) throw new Error(await getResponseErrorMessage(response))
-    return response.json() as Promise<{ url: string }>
-  })
-}
\ No newline at end of file
+    if (!response.ok) throw new Error(await getResponseErrorMessage(response));
+    return response.json() as Promise<{ url: string }>;
+  });
+}
diff --git a/src/mystery/components/MysteryCard.vue b/src/mystery/components/MysteryCard.vue
index 1b057210..20f74274 100644
--- a/src/mystery/components/MysteryCard.vue
+++ b/src/mystery/components/MysteryCard.vue
@@ -1,34 +1,34 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import type { WeeklyMysteryResponse } from '@/mystery/model/mystery.types'
+import { useI18n } from "vue-i18n";
+import type { WeeklyMysteryResponse } from "@/mystery/model/mystery.types";
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 defineProps<{
-  mystery: WeeklyMysteryResponse
-  formattedDate: string
-}>()
+  mystery: WeeklyMysteryResponse;
+  formattedDate: string;
+}>();
 
 const emit = defineEmits<{
-  select: [mystery: WeeklyMysteryResponse]
-}>()
+  select: [mystery: WeeklyMysteryResponse];
+}>();
 </script>
 
 <template>
   <article
-      class="cursor-pointer overflow-hidden rounded-2xl bg-white shadow-md transition hover:-translate-y-1"
-      role="button"
-      :tabindex="0"
-      @click="emit('select', mystery)"
-      @keydown.enter="emit('select', mystery)"
-      @keydown.space.prevent="emit('select', mystery)"
+    class="cursor-pointer overflow-hidden rounded-2xl bg-white shadow-md transition hover:-translate-y-1"
+    role="button"
+    :tabindex="0"
+    @click="emit('select', mystery)"
+    @keydown.enter="emit('select', mystery)"
+    @keydown.space.prevent="emit('select', mystery)"
   >
     <div class="flex h-36 items-center justify-center bg-gray-100">
       <img
-          v-if="mystery.submission.attachmentUrl"
-          :src="mystery.submission.attachmentUrl"
-          :alt="t('mystery.submissionImageAlt')"
-          class="h-full w-full object-cover"
+        v-if="mystery.submission.attachmentUrl"
+        :src="mystery.submission.attachmentUrl"
+        :alt="t('mystery.submissionImageAlt')"
+        class="h-full w-full object-cover"
       />
       <span v-else class="text-5xl text-gray-300">?</span>
     </div>
@@ -39,4 +39,4 @@ const emit = defineEmits<{
       <p class="mt-2 text-xs text-gray-400">{{ formattedDate }}</p>
     </div>
   </article>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/mystery/components/MysteryCardModal.vue b/src/mystery/components/MysteryCardModal.vue
index b55d0c27..55da1986 100644
--- a/src/mystery/components/MysteryCardModal.vue
+++ b/src/mystery/components/MysteryCardModal.vue
@@ -1,49 +1,50 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import type { WeeklyMysteryResponse } from '@/mystery/model/mystery.types'
+import { onMounted, onUnmounted } from "vue";
+import { useI18n } from "vue-i18n";
+import type { WeeklyMysteryResponse } from "@/mystery/model/mystery.types";
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 defineProps<{
-  mystery: WeeklyMysteryResponse
-  formattedDate: string
-}>()
+  mystery: WeeklyMysteryResponse;
+  formattedDate: string;
+}>();
 
 const emit = defineEmits<{
-  close: []
-}>()
+  close: [];
+}>();
 
 function onKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape') emit('close')
+  if (event.key === "Escape") emit("close");
 }
 
 onMounted(() => {
-  document.addEventListener('keydown', onKeydown)
-  document.body.style.overflow = 'hidden'
-})
+  document.addEventListener("keydown", onKeydown);
+  document.body.style.overflow = "hidden";
+});
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', onKeydown)
-  document.body.style.overflow = ''
-})
+  document.removeEventListener("keydown", onKeydown);
+  document.body.style.overflow = "";
+});
 </script>
 
 <template>
   <Teleport to="body">
     <div
-        class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 p-4"
-        role="dialog"
-        aria-modal="true"
-        @click.self="emit('close')"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 p-4"
+      role="dialog"
+      aria-modal="true"
+      @click.self="emit('close')"
     >
-      <div class="relative w-full max-w-2xl overflow-hidden rounded-2xl bg-white shadow-2xl">
-
+      <div
+        class="relative w-full max-w-2xl overflow-hidden rounded-2xl bg-white shadow-2xl"
+      >
         <!-- Close button -->
         <button
-            class="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full bg-white/80 text-gray-500 shadow transition hover:bg-gray-100"
-            :aria-label="t('mystery.modal.close')"
-            @click="emit('close')"
+          class="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full bg-white/80 text-gray-500 shadow transition hover:bg-gray-100"
+          :aria-label="t('mystery.modal.close')"
+          @click="emit('close')"
         >
           &#10005;
         </button>
@@ -51,10 +52,10 @@ onUnmounted(() => {
         <!-- Image -->
         <div class="flex h-80 items-center justify-center bg-gray-100">
           <img
-              v-if="mystery.submission.attachmentUrl"
-              :src="mystery.submission.attachmentUrl"
-              :alt="t('mystery.submissionImageAlt')"
-              class="h-full w-full object-contain"
+            v-if="mystery.submission.attachmentUrl"
+            :src="mystery.submission.attachmentUrl"
+            :alt="t('mystery.submissionImageAlt')"
+            class="h-full w-full object-contain"
           />
           <span v-else class="text-7xl text-gray-300">?</span>
         </div>
@@ -66,8 +67,7 @@ onUnmounted(() => {
           </p>
           <p class="mt-4 text-sm text-gray-400">{{ formattedDate }}</p>
         </div>
-
       </div>
     </div>
   </Teleport>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/mystery/components/MysterySubmissionForm.vue b/src/mystery/components/MysterySubmissionForm.vue
index e91b12a0..af57b84d 100644
--- a/src/mystery/components/MysterySubmissionForm.vue
+++ b/src/mystery/components/MysterySubmissionForm.vue
@@ -1,110 +1,113 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { moderateText } from '@/shared/moderation/banned-words'
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { moderateText } from "@/shared/moderation/banned-words";
 import { useProfanityFilter } from "@/shared/composables/useProfanityFilter.ts";
 
-const { t } = useI18n()
-const { hasProfanity } = useProfanityFilter()
+const { t } = useI18n();
+const { hasProfanity } = useProfanityFilter();
 
 const props = defineProps<{
-  submitting: boolean
-  successMessage?: string | null
-  errorMessage?: string | null
-  bannedWords?: string[]
-}>()
+  submitting: boolean;
+  successMessage?: string | null;
+  errorMessage?: string | null;
+  bannedWords?: string[];
+}>();
 
 const emit = defineEmits<{
-  submit: [description: string, file: File | null]
-}>()
+  submit: [description: string, file: File | null];
+}>();
 
-const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
+const ALLOWED_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"];
 
-const description = ref('')
-const attachmentFile = ref<File | null>(null)
-const attachmentPreviewUrl = ref<string | null>(null)
-const uploadError = ref<string | null>(null)
+const description = ref("");
+const attachmentFile = ref<File | null>(null);
+const attachmentPreviewUrl = ref<string | null>(null);
+const uploadError = ref<string | null>(null);
 
 const moderation = computed(() => {
-  const text = description.value
+  const text = description.value;
 
-  const bannedCheck = moderateText([text], props.bannedWords ?? [])
-  const profanityDetected = hasProfanity(text)
+  const bannedCheck = moderateText([text], props.bannedWords ?? []);
+  const profanityDetected = hasProfanity(text);
 
   return {
     ...bannedCheck,
     hasProfanity: profanityDetected,
     hasAnyViolation: bannedCheck.hasBlockedWords || profanityDetected,
-  }
-})
+  };
+});
 
 const moderationError = computed(() => {
   if (moderation.value.hasBlockedWords) {
-    return t('mystery.submitForm.bannedWords', {
-      words: moderation.value.blockedWords.join(', '),
-    })
+    return t("mystery.submitForm.bannedWords", {
+      words: moderation.value.blockedWords.join(", "),
+    });
   }
 
   if (moderation.value.hasProfanity) {
-    return t('mystery.submitForm.profanity')
+    return t("mystery.submitForm.profanity");
   }
 
-  return null
-})
+  return null;
+});
 
 const canSubmit = () =>
-  description.value.trim().length > 0 && !uploadError.value && !moderation.value.hasAnyViolation
+  description.value.trim().length > 0 &&
+  !uploadError.value &&
+  !moderation.value.hasAnyViolation;
 
 function onFileSelected(event: Event) {
-  const input = event.target as HTMLInputElement
-  const file = input.files?.[0] ?? null
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0] ?? null;
 
-  uploadError.value = null
+  uploadError.value = null;
 
   if (attachmentPreviewUrl.value) {
-    URL.revokeObjectURL(attachmentPreviewUrl.value)
-    attachmentPreviewUrl.value = null
+    URL.revokeObjectURL(attachmentPreviewUrl.value);
+    attachmentPreviewUrl.value = null;
   }
 
   if (file && !ALLOWED_TYPES.includes(file.type)) {
-    uploadError.value = t('mystery.submitForm.unsupportedFileType')
-    input.value = ''
-    return
+    uploadError.value = t("mystery.submitForm.unsupportedFileType");
+    input.value = "";
+    return;
   }
 
-  attachmentFile.value = file
-  if (file) attachmentPreviewUrl.value = URL.createObjectURL(file)
+  attachmentFile.value = file;
+  if (file) attachmentPreviewUrl.value = URL.createObjectURL(file);
 }
 
 function clearAttachment() {
-  if (attachmentPreviewUrl.value) URL.revokeObjectURL(attachmentPreviewUrl.value)
-  attachmentFile.value = null
-  attachmentPreviewUrl.value = null
-  uploadError.value = null
+  if (attachmentPreviewUrl.value)
+    URL.revokeObjectURL(attachmentPreviewUrl.value);
+  attachmentFile.value = null;
+  attachmentPreviewUrl.value = null;
+  uploadError.value = null;
 }
 
 function handleSubmit() {
-  if (!canSubmit()) return
-  emit('submit', description.value.trim(), attachmentFile.value)
+  if (!canSubmit()) return;
+  emit("submit", description.value.trim(), attachmentFile.value);
 }
 
-defineExpose({ reset })
+defineExpose({ reset });
 
 function reset() {
-  description.value = ''
-  clearAttachment()
+  description.value = "";
+  clearAttachment();
 }
 </script>
 
 <template>
   <div class="mx-auto max-w-xl rounded-2xl bg-white p-6 shadow-md">
     <h2 class="mb-4 text-lg font-semibold text-gray-900">
-      {{ t('mystery.submitForm.heading') }}
+      {{ t("mystery.submitForm.heading") }}
     </h2>
 
     <div
-        v-if="successMessage"
-        class="mb-4 rounded-xl bg-emerald-50 px-4 py-3 text-sm font-semibold text-emerald-800"
+      v-if="successMessage"
+      class="mb-4 rounded-xl bg-emerald-50 px-4 py-3 text-sm font-semibold text-emerald-800"
     >
       {{ successMessage }}
     </div>
@@ -112,67 +115,78 @@ function reset() {
     <div class="flex gap-4">
       <!-- Description -->
       <div class="flex-1">
-        <label for="mystery-description" class="mb-1 block text-sm font-semibold text-gray-700">
-          {{ t('mystery.submitForm.descriptionLabel') }}
+        <label
+          for="mystery-description"
+          class="mb-1 block text-sm font-semibold text-gray-700"
+        >
+          {{ t("mystery.submitForm.descriptionLabel") }}
         </label>
         <textarea
-            id="mystery-description"
-            v-model="description"
-            rows="4"
-            maxlength="2000"
-            class="w-full rounded-xl border border-amber-200 bg-amber-50/40 px-3 py-2 text-sm text-gray-800 placeholder-gray-400 focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500"
-            :placeholder="t('mystery.submitForm.descriptionPlaceholder')"
+          id="mystery-description"
+          v-model="description"
+          rows="4"
+          maxlength="2000"
+          class="w-full rounded-xl border border-amber-200 bg-amber-50/40 px-3 py-2 text-sm text-gray-800 placeholder-gray-400 focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500"
+          :placeholder="t('mystery.submitForm.descriptionPlaceholder')"
         />
-        <p class="mt-1 text-right text-xs text-gray-400">{{ description.length }} / 2000</p>
+        <p class="mt-1 text-right text-xs text-gray-400">
+          {{ description.length }} / 2000
+        </p>
       </div>
 
       <!-- Upload -->
       <div class="w-36 shrink-0">
         <div v-if="attachmentPreviewUrl" class="flex flex-col gap-2">
           <img
-              :src="attachmentPreviewUrl"
-              :alt="t('mystery.submitForm.previewAlt')"
-              class="h-24 w-full rounded-xl border border-amber-200 object-cover"
+            :src="attachmentPreviewUrl"
+            :alt="t('mystery.submitForm.previewAlt')"
+            class="h-24 w-full rounded-xl border border-amber-200 object-cover"
           />
           <button
-              class="w-full rounded-lg border border-red-300 bg-white py-1 text-xs font-semibold text-red-600 hover:bg-red-50"
-              @click="clearAttachment"
+            class="w-full rounded-lg border border-red-300 bg-white py-1 text-xs font-semibold text-red-600 hover:bg-red-50"
+            @click="clearAttachment"
           >
-            {{ t('mystery.submitForm.removeImage') }}
+            {{ t("mystery.submitForm.removeImage") }}
           </button>
         </div>
 
         <label
-            v-else
-            for="mystery-file"
-            class="flex h-24 cursor-pointer flex-col items-center justify-center gap-1 rounded-xl border-2 border-dashed border-amber-300 bg-amber-50/40 transition hover:border-amber-500 hover:bg-amber-50"
+          v-else
+          for="mystery-file"
+          class="flex h-24 cursor-pointer flex-col items-center justify-center gap-1 rounded-xl border-2 border-dashed border-amber-300 bg-amber-50/40 transition hover:border-amber-500 hover:bg-amber-50"
         >
           <span class="text-2xl text-amber-500">&#128247;</span>
           <span class="text-center text-xs font-semibold text-gray-400">
-            {{ t('mystery.submitForm.uploadLabel') }}
+            {{ t("mystery.submitForm.uploadLabel") }}
           </span>
           <input
-              id="mystery-file"
-              type="file"
-              accept="image/jpeg,image/png,image/gif,image/webp"
-              class="hidden"
-              @change="onFileSelected"
+            id="mystery-file"
+            type="file"
+            accept="image/jpeg,image/png,image/gif,image/webp"
+            class="hidden"
+            @change="onFileSelected"
           />
         </label>
       </div>
     </div>
 
-    <p v-if="uploadError" class="mt-2 text-sm text-red-600">{{ uploadError }}</p>
-    <p v-if="moderationError" class="mt-2 text-sm text-red-600">{{ moderationError }}</p>
-    <p v-if="errorMessage" class="mt-3 text-sm text-red-600">{{ errorMessage }}</p>
+    <p v-if="uploadError" class="mt-2 text-sm text-red-600">
+      {{ uploadError }}
+    </p>
+    <p v-if="moderationError" class="mt-2 text-sm text-red-600">
+      {{ moderationError }}
+    </p>
+    <p v-if="errorMessage" class="mt-3 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
 
     <button
-        class="mt-4 rounded-xl bg-amber-600 px-6 py-2.5 text-sm font-bold text-white transition hover:bg-amber-700 disabled:cursor-not-allowed disabled:opacity-50"
-        :disabled="!canSubmit() || submitting"
-        @click="handleSubmit"
+      class="mt-4 rounded-xl bg-amber-600 px-6 py-2.5 text-sm font-bold text-white transition hover:bg-amber-700 disabled:cursor-not-allowed disabled:opacity-50"
+      :disabled="!canSubmit() || submitting"
+      @click="handleSubmit"
     >
-      <span v-if="submitting">{{ t('mystery.submitForm.submitting') }}</span>
-      <span v-else>{{ t('mystery.submitForm.submit') }}</span>
+      <span v-if="submitting">{{ t("mystery.submitForm.submitting") }}</span>
+      <span v-else>{{ t("mystery.submitForm.submit") }}</span>
     </button>
   </div>
 </template>
diff --git a/src/mystery/components/MysterySubmissionRow.vue b/src/mystery/components/MysterySubmissionRow.vue
index 03a68051..91e0aaeb 100644
--- a/src/mystery/components/MysterySubmissionRow.vue
+++ b/src/mystery/components/MysterySubmissionRow.vue
@@ -1,24 +1,26 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import type { MysterySubmissionResponse } from '@/mystery/model/mystery.types'
+import { useI18n } from "vue-i18n";
+import type { MysterySubmissionResponse } from "@/mystery/model/mystery.types";
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 defineProps<{
-  submission: MysterySubmissionResponse
-  formattedDate: string
-}>()
+  submission: MysterySubmissionResponse;
+  formattedDate: string;
+}>();
 
 const statusClasses: Record<string, string> = {
-  PENDING: 'bg-yellow-100 text-yellow-800',
-  APPROVED: 'bg-emerald-100 text-emerald-800',
-  REJECTED: 'bg-red-100 text-red-800',
-}
+  PENDING: "bg-yellow-100 text-yellow-800",
+  APPROVED: "bg-emerald-100 text-emerald-800",
+  REJECTED: "bg-red-100 text-red-800",
+};
 </script>
 
 <template>
   <li class="flex items-start gap-4 py-4">
-    <div class="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-gray-100 text-2xl">
+    <div
+      class="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-gray-100 text-2xl"
+    >
       <img
         v-if="submission.attachmentUrl"
         :src="submission.attachmentUrl"
@@ -30,15 +32,21 @@ const statusClasses: Record<string, string> = {
 
     <div class="min-w-0 flex-1">
       <p class="truncate text-sm text-gray-800">{{ submission.description }}</p>
-      <p v-if="submission.teacherComment" class="mt-0.5 text-xs italic text-gray-400">
-        {{ t('mystery.mySubmissions.teacherComment') }}: {{ submission.teacherComment }}
+      <p
+        v-if="submission.teacherComment"
+        class="mt-0.5 text-xs italic text-gray-400"
+      >
+        {{ t("mystery.mySubmissions.teacherComment") }}:
+        {{ submission.teacherComment }}
       </p>
       <p class="mt-0.5 text-xs text-gray-400">{{ formattedDate }}</p>
     </div>
 
     <span
       class="shrink-0 rounded-full px-3 py-1 text-xs font-bold"
-      :class="statusClasses[submission.reviewStatus] ?? 'bg-gray-100 text-gray-600'"
+      :class="
+        statusClasses[submission.reviewStatus] ?? 'bg-gray-100 text-gray-600'
+      "
     >
       {{ t(`mystery.reviewStatus.${submission.reviewStatus.toLowerCase()}`) }}
     </span>
diff --git a/src/mystery/components/MysteryTabBar.vue b/src/mystery/components/MysteryTabBar.vue
index 69eef30d..0882620a 100644
--- a/src/mystery/components/MysteryTabBar.vue
+++ b/src/mystery/components/MysteryTabBar.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
+import { useI18n } from "vue-i18n";
 
-export type MysteryTab = 'featured' | 'submit' | 'mine'
+export type MysteryTab = "featured" | "submit" | "mine";
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 defineProps<{
-  submissionCount: number
-}>()
+  submissionCount: number;
+}>();
 
-const activeTab = defineModel<MysteryTab>({ required: true })
+const activeTab = defineModel<MysteryTab>({ required: true });
 
-const tabs: MysteryTab[] = ['featured', 'submit', 'mine']
+const tabs: MysteryTab[] = ["featured", "submit", "mine"];
 </script>
 
 <template>
@@ -22,9 +22,11 @@ const tabs: MysteryTab[] = ['featured', 'submit', 'mine']
       role="tab"
       :aria-selected="activeTab === tab"
       class="-mb-0.5 border-b-2 px-5 py-2 text-sm font-semibold transition-colors"
-      :class="activeTab === tab
-        ? 'border-amber-600 text-amber-700'
-        : 'border-transparent text-gray-400 hover:text-gray-600'"
+      :class="
+        activeTab === tab
+          ? 'border-amber-600 text-amber-700'
+          : 'border-transparent text-gray-400 hover:text-gray-600'
+      "
       @click="activeTab = tab"
     >
       {{ t(`mystery.tabs.${tab}`) }}
diff --git a/src/mystery/components/MysteryWeekNavigator.vue b/src/mystery/components/MysteryWeekNavigator.vue
index b050ffae..9745c7ac 100644
--- a/src/mystery/components/MysteryWeekNavigator.vue
+++ b/src/mystery/components/MysteryWeekNavigator.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
+import { useI18n } from "vue-i18n";
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 defineProps<{
-  label: string
-  canGoPrev: boolean
-  canGoNext: boolean
-}>()
+  label: string;
+  canGoPrev: boolean;
+  canGoNext: boolean;
+}>();
 
 const emit = defineEmits<{
-  prev: []
-  next: []
-}>()
+  prev: [];
+  next: [];
+}>();
 </script>
 
 <template>
@@ -25,7 +25,9 @@ const emit = defineEmits<{
     >
       &#8592;
     </button>
-    <span class="rounded-full bg-white px-5 py-1.5 text-sm font-semibold text-blue-900 shadow-sm">
+    <span
+      class="rounded-full bg-white px-5 py-1.5 text-sm font-semibold text-blue-900 shadow-sm"
+    >
       {{ label }}
     </span>
     <button
diff --git a/src/mystery/model/__tests__/mystery.store.spec.ts b/src/mystery/model/__tests__/mystery.store.spec.ts
index 0f3bf973..a0d58191 100644
--- a/src/mystery/model/__tests__/mystery.store.spec.ts
+++ b/src/mystery/model/__tests__/mystery.store.spec.ts
@@ -1,234 +1,253 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
 
-import { useMysteryStore } from '@/mystery/model/mystery.store'
-import { useAuthStore } from '@/auth/model/auth.store'
+import { useMysteryStore } from "@/mystery/model/mystery.store";
+import { useAuthStore } from "@/auth/model/auth.store";
 
 function jsonResponse(body: unknown, init: ResponseInit = {}) {
   return new Response(JSON.stringify(body), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' },
+    headers: { "Content-Type": "application/json" },
     ...init,
-  })
+  });
 }
 
-const CLASSROOM_ID = 7
-const PUPIL_USER_ID = 20
+const CLASSROOM_ID = 7;
+const PUPIL_USER_ID = 20;
 
 const submission = {
   id: 1,
   classroomId: CLASSROOM_ID,
   pupilUserId: PUPIL_USER_ID,
-  description: 'I found a fake news article',
+  description: "I found a fake news article",
   attachmentUrl: null,
-  submittedAt: '2025-05-05T10:00:00Z',
-  reviewStatus: 'PENDING' as const,
+  submittedAt: "2025-05-05T10:00:00Z",
+  reviewStatus: "PENDING" as const,
   reviewedByTeacherId: null,
   reviewedAt: null,
   teacherComment: null,
-}
+};
 
 const weeklyMystery = {
   id: 3,
   classroomId: CLASSROOM_ID,
-  weekStart: '2025-05-05',
+  weekStart: "2025-05-05",
   featuredByTeacherId: 10,
-  featuredAt: '2025-05-05T08:00:00Z',
+  featuredAt: "2025-05-05T08:00:00Z",
   submission,
-}
+};
 
 function seedPupilAuthStore() {
-  const authStore = useAuthStore()
-  authStore.accessToken = 'access-token'
+  const authStore = useAuthStore();
+  authStore.accessToken = "access-token";
   authStore.user = {
     subject: String(PUPIL_USER_ID),
-    portalType: 'PUPIL',
+    portalType: "PUPIL",
     email: null,
-    username: 'ada',
-    authorities: ['ROLE_PUPIL'],
+    username: "ada",
+    authorities: ["ROLE_PUPIL"],
     pupilProfile: {
-      displayName: 'Ada',
+      displayName: "Ada",
       totalXp: 0,
       currentLevel: 1,
       currentClassroomId: CLASSROOM_ID,
       hasCompletedOnboarding: true,
     },
     teacherProfile: null,
-  }
+  };
 }
 
-describe('useMysteryStore', () => {
+describe("useMysteryStore", () => {
   beforeEach(() => {
-    setActivePinia(createPinia())
-    vi.restoreAllMocks()
-  })
+    setActivePinia(createPinia());
+    vi.restoreAllMocks();
+  });
 
-  it('populates allWeeklyMysteries and mySubmissions and sets status to ready on success', async () => {
-    seedPupilAuthStore()
+  it("populates allWeeklyMysteries and mySubmissions and sets status to ready on success", async () => {
+    seedPupilAuthStore();
     vi.stubGlobal(
-      'fetch',
+      "fetch",
       vi
         .fn()
         .mockResolvedValueOnce(jsonResponse([weeklyMystery]))
         .mockResolvedValueOnce(jsonResponse([submission])),
-)
+    );
 
-const store = useMysteryStore()
-await store.fetchAll()
+    const store = useMysteryStore();
+    await store.fetchAll();
 
-expect(store.status).toBe('ready')
-    expect(store.allWeeklyMysteries).toEqual([weeklyMystery])
-    expect(store.mySubmissions).toEqual([submission])
-    expect(store.errorMessage).toBeNull()
-  })
+    expect(store.status).toBe("ready");
+    expect(store.allWeeklyMysteries).toEqual([weeklyMystery]);
+    expect(store.mySubmissions).toEqual([submission]);
+    expect(store.errorMessage).toBeNull();
+  });
 
-  it('sets status to error and stores the message when fetchAll fails', async () => {
-    seedPupilAuthStore()
+  it("sets status to error and stores the message when fetchAll fails", async () => {
+    seedPupilAuthStore();
     vi.stubGlobal(
-      'fetch',
-      vi.fn()
-        .mockResolvedValueOnce(jsonResponse({ detail: 'Classroom not found' }, { status: 404 }))
+      "fetch",
+      vi
+        .fn()
+        .mockResolvedValueOnce(
+          jsonResponse({ detail: "Classroom not found" }, { status: 404 }),
+        )
         .mockResolvedValueOnce(jsonResponse([])),
-    )
+    );
 
-const store = useMysteryStore()
-await expect(store.fetchAll()).rejects.toThrow()
+    const store = useMysteryStore();
+    await expect(store.fetchAll()).rejects.toThrow();
 
-    expect(store.status).toBe('error')
-    expect(store.errorMessage).toBe('Classroom not found')
-  })
+    expect(store.status).toBe("error");
+    expect(store.errorMessage).toBe("Classroom not found");
+  });
 
-  it('throws when the user is not authenticated', async () => {
-    const store = useMysteryStore()
-    await expect(store.fetchAll()).rejects.toThrow('Not authenticated.')
-  })
+  it("throws when the user is not authenticated", async () => {
+    const store = useMysteryStore();
+    await expect(store.fetchAll()).rejects.toThrow("Not authenticated.");
+  });
 
-  it('throws when the session is a teacher session', async () => {
-    const authStore = useAuthStore()
-    authStore.accessToken = 'access-token'
+  it("throws when the session is a teacher session", async () => {
+    const authStore = useAuthStore();
+    authStore.accessToken = "access-token";
     authStore.user = {
-      subject: 'teacher-1',
-      portalType: 'TEACHER',
-      email: 'teacher@example.com',
+      subject: "teacher-1",
+      portalType: "TEACHER",
+      email: "teacher@example.com",
       username: null,
-      authorities: ['ROLE_TEACHER'],
+      authorities: ["ROLE_TEACHER"],
       pupilProfile: null,
       teacherProfile: null,
-    }
+    };
 
-    const store = useMysteryStore()
-    await expect(store.fetchAll()).rejects.toThrow('Only pupils can access mysteries.')
-  })
+    const store = useMysteryStore();
+    await expect(store.fetchAll()).rejects.toThrow(
+      "Only pupils can access mysteries.",
+    );
+  });
 
-  it('throws when the pupil has no active classroom', async () => {
-    const authStore = useAuthStore()
-    authStore.accessToken = 'access-token'
+  it("throws when the pupil has no active classroom", async () => {
+    const authStore = useAuthStore();
+    authStore.accessToken = "access-token";
     authStore.user = {
       subject: String(PUPIL_USER_ID),
-      portalType: 'PUPIL',
+      portalType: "PUPIL",
       email: null,
-      username: 'ada',
-      authorities: ['ROLE_PUPIL'],
+      username: "ada",
+      authorities: ["ROLE_PUPIL"],
       pupilProfile: {
-        displayName: 'Ada',
+        displayName: "Ada",
         totalXp: 0,
         currentLevel: 1,
         currentClassroomId: null as unknown as number,
         hasCompletedOnboarding: true,
       },
       teacherProfile: null,
-    }
+    };
 
-    const store = useMysteryStore()
-    await expect(store.fetchAll()).rejects.toThrow('No active classroom found.')
-  })
+    const store = useMysteryStore();
+    await expect(store.fetchAll()).rejects.toThrow(
+      "No active classroom found.",
+    );
+  });
 
-  it('sends the Authorization header derived from the auth store', async () => {
-    seedPupilAuthStore()
+  it("sends the Authorization header derived from the auth store", async () => {
+    seedPupilAuthStore();
     const fetchMock = vi
       .fn()
       .mockResolvedValueOnce(jsonResponse([weeklyMystery]))
-      .mockResolvedValueOnce(jsonResponse([]))
-    vi.stubGlobal('fetch', fetchMock)
+      .mockResolvedValueOnce(jsonResponse([]));
+    vi.stubGlobal("fetch", fetchMock);
 
-    const store = useMysteryStore()
-    await store.fetchAll()
+    const store = useMysteryStore();
+    await store.fetchAll();
 
-    const [, options] = fetchMock.mock.calls[0] as [string, RequestInit]
-    expect(new Headers(options.headers).get('Authorization')).toBe('Bearer access-token')
-  })
+    const [, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(new Headers(options.headers).get("Authorization")).toBe(
+      "Bearer access-token",
+    );
+  });
 
-  it('submitExample without a file skips upload and prepends the created submission', async () => {
-    seedPupilAuthStore()
-    const created = { ...submission, id: 99 }
-    vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce(jsonResponse(created)))
+  it("submitExample without a file skips upload and prepends the created submission", async () => {
+    seedPupilAuthStore();
+    const created = { ...submission, id: 99 };
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValueOnce(jsonResponse(created)),
+    );
 
-    const store = useMysteryStore()
-    store.mySubmissions = [submission]
+    const store = useMysteryStore();
+    store.mySubmissions = [submission];
 
-    const result = await store.submitExample('New example', null)
+    const result = await store.submitExample("New example", null);
 
-    expect(result).toEqual(created)
-    expect(store.mySubmissions[0]).toEqual(created)
-    expect(store.mySubmissions).toHaveLength(2)
-    expect(store.status).toBe('ready')
-  })
+    expect(result).toEqual(created);
+    expect(store.mySubmissions[0]).toEqual(created);
+    expect(store.mySubmissions).toHaveLength(2);
+    expect(store.status).toBe("ready");
+  });
 
-  it('submitExample sets status to submitting while in flight', async () => {
-    seedPupilAuthStore()
-    let resolveRequest!: (value: Response) => void
+  it("submitExample sets status to submitting while in flight", async () => {
+    seedPupilAuthStore();
+    let resolveRequest!: (value: Response) => void;
     const pendingResponse = new Promise<Response>((resolve) => {
-      resolveRequest = resolve
-    })
-    vi.stubGlobal('fetch', vi.fn().mockReturnValueOnce(pendingResponse))
+      resolveRequest = resolve;
+    });
+    vi.stubGlobal("fetch", vi.fn().mockReturnValueOnce(pendingResponse));
 
-    const store = useMysteryStore()
-    const promise = store.submitExample('Pending example', null)
+    const store = useMysteryStore();
+    const promise = store.submitExample("Pending example", null);
 
-    expect(store.status).toBe('submitting')
+    expect(store.status).toBe("submitting");
 
-    resolveRequest(jsonResponse({ ...submission, id: 2 }))
-    await promise
+    resolveRequest(jsonResponse({ ...submission, id: 2 }));
+    await promise;
 
-    expect(store.status).toBe('ready')
-  })
+    expect(store.status).toBe("ready");
+  });
 
-  it('submitExample uploads the file first and passes the returned URL in the payload', async () => {
-    seedPupilAuthStore()
-    const uploadUrl = 'https://cdn.example.com/mystery/img.jpg'
-    const created = { ...submission, attachmentUrl: uploadUrl, id: 5 }
+  it("submitExample uploads the file first and passes the returned URL in the payload", async () => {
+    seedPupilAuthStore();
+    const uploadUrl = "https://cdn.example.com/mystery/img.jpg";
+    const created = { ...submission, attachmentUrl: uploadUrl, id: 5 };
 
     const fetchMock = vi
       .fn()
       .mockResolvedValueOnce(jsonResponse({ url: uploadUrl })) // upload
-      .mockResolvedValueOnce(jsonResponse(created))            // submit
+      .mockResolvedValueOnce(jsonResponse(created)); // submit
 
-    vi.stubGlobal('fetch', fetchMock)
+    vi.stubGlobal("fetch", fetchMock);
 
-    const file = new File(['pixel'], 'photo.jpg', { type: 'image/jpeg' })
-    const store = useMysteryStore()
-    const result = await store.submitExample('Example with image', file)
+    const file = new File(["pixel"], "photo.jpg", { type: "image/jpeg" });
+    const store = useMysteryStore();
+    const result = await store.submitExample("Example with image", file);
 
-    expect(result.attachmentUrl).toBe(uploadUrl)
-    expect(fetchMock).toHaveBeenCalledTimes(2)
+    expect(result.attachmentUrl).toBe(uploadUrl);
+    expect(fetchMock).toHaveBeenCalledTimes(2);
 
-    const [, submitOptions] = fetchMock.mock.calls[1] as [string, RequestInit]
-    expect(JSON.parse(submitOptions.body as string).attachmentUrl).toBe(uploadUrl)
-  })
+    const [, submitOptions] = fetchMock.mock.calls[1] as [string, RequestInit];
+    expect(JSON.parse(submitOptions.body as string).attachmentUrl).toBe(
+      uploadUrl,
+    );
+  });
 
-  it('submitExample resets status to ready and throws when the API returns an error', async () => {
-    seedPupilAuthStore()
+  it("submitExample resets status to ready and throws when the API returns an error", async () => {
+    seedPupilAuthStore();
     vi.stubGlobal(
-      'fetch',
-      vi.fn().mockResolvedValueOnce(
-        jsonResponse({ detail: 'Description must not be blank' }, { status: 400 }),
-      ),
-)
-
-const store = useMysteryStore()
-await expect(store.submitExample('', null)).rejects.toThrow()
-
-    expect(store.status).toBe('ready')
-    expect(store.errorMessage).toBe('Description must not be blank')
-  })
-})
+      "fetch",
+      vi
+        .fn()
+        .mockResolvedValueOnce(
+          jsonResponse(
+            { detail: "Description must not be blank" },
+            { status: 400 },
+          ),
+        ),
+    );
+
+    const store = useMysteryStore();
+    await expect(store.submitExample("", null)).rejects.toThrow();
+
+    expect(store.status).toBe("ready");
+    expect(store.errorMessage).toBe("Description must not be blank");
+  });
+});
diff --git a/src/mystery/model/mystery.store.ts b/src/mystery/model/mystery.store.ts
index 889320c0..9d2c0c4a 100644
--- a/src/mystery/model/mystery.store.ts
+++ b/src/mystery/model/mystery.store.ts
@@ -1,40 +1,45 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { useAuthStore } from '@/auth/model/auth.store'
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { useAuthStore } from "@/auth/model/auth.store";
 import {
-requestAllWeeklyMysteries,
-requestMySubmissions,
-requestSubmitExample,
-requestUploadAttachment,
-} from '@/mystery/api/mystery.api'
+  requestAllWeeklyMysteries,
+  requestMySubmissions,
+  requestSubmitExample,
+  requestUploadAttachment,
+} from "@/mystery/api/mystery.api";
 import type {
-MysterySubmissionResponse,
-MysteryStatus,
-SubmitMysteryPayload,
-WeeklyMysteryResponse,
-} from '@/mystery/model/mystery.types'
+  MysterySubmissionResponse,
+  MysteryStatus,
+  SubmitMysteryPayload,
+  WeeklyMysteryResponse,
+} from "@/mystery/model/mystery.types";
 
-export const useMysteryStore = defineStore('mystery', () => {
-const authStore = useAuthStore()
+export const useMysteryStore = defineStore("mystery", () => {
+  const authStore = useAuthStore();
 
-const allWeeklyMysteries = ref<WeeklyMysteryResponse[]>([])
-const mySubmissions = ref<MysterySubmissionResponse[]>([])
-const status = ref<MysteryStatus>('idle')
-const errorMessage = ref<string | null>(null)
+  const allWeeklyMysteries = ref<WeeklyMysteryResponse[]>([]);
+  const mySubmissions = ref<MysterySubmissionResponse[]>([]);
+  const status = ref<MysteryStatus>("idle");
+  const errorMessage = ref<string | null>(null);
 
-// -------------------------------------------------------------------------
-// Session helpers
-// -------------------------------------------------------------------------
+  // -------------------------------------------------------------------------
+  // Session helpers
+  // -------------------------------------------------------------------------
 
-function requirePupilSession(): { authorizationHeader: string; classroomId: number } {
-    const header = authStore.authorizationHeader
-    const classroomId = authStore.user?.pupilProfile?.currentClassroomId ?? null
+  function requirePupilSession(): {
+    authorizationHeader: string;
+    classroomId: number;
+  } {
+    const header = authStore.authorizationHeader;
+    const classroomId =
+      authStore.user?.pupilProfile?.currentClassroomId ?? null;
 
-    if (!header) throw new Error('Not authenticated.')
-    if (authStore.portalType !== 'PUPIL') throw new Error('Only pupils can access mysteries.')
-    if (classroomId == null) throw new Error('No active classroom found.')
+    if (!header) throw new Error("Not authenticated.");
+    if (authStore.portalType !== "PUPIL")
+      throw new Error("Only pupils can access mysteries.");
+    if (classroomId == null) throw new Error("No active classroom found.");
 
-    return { authorizationHeader: header, classroomId }
+    return { authorizationHeader: header, classroomId };
   }
 
   // -------------------------------------------------------------------------
@@ -46,24 +51,28 @@ function requirePupilSession(): { authorizationHeader: string; classroomId: numb
    * Safe to call on every page mount — sets status to 'loading' while in flight.
    */
   async function fetchAll(): Promise<void> {
-    const session = requirePupilSession()
+    const session = requirePupilSession();
 
-    status.value = 'loading'
-    errorMessage.value = null
+    status.value = "loading";
+    errorMessage.value = null;
 
     try {
       const [weekly, mine] = await Promise.all([
-        requestAllWeeklyMysteries(session.classroomId, session.authorizationHeader),
+        requestAllWeeklyMysteries(
+          session.classroomId,
+          session.authorizationHeader,
+        ),
         requestMySubmissions(session.classroomId, session.authorizationHeader),
-      ])
+      ]);
 
-      allWeeklyMysteries.value = weekly
-      mySubmissions.value = mine
-      status.value = 'ready'
+      allWeeklyMysteries.value = weekly;
+      mySubmissions.value = mine;
+      status.value = "ready";
     } catch (error) {
-      errorMessage.value = error instanceof Error ? error.message : 'Failed to load mysteries.'
-      status.value = 'error'
-      throw error
+      errorMessage.value =
+        error instanceof Error ? error.message : "Failed to load mysteries.";
+      status.value = "error";
+      throw error;
     }
   }
 
@@ -75,43 +84,51 @@ function requirePupilSession(): { authorizationHeader: string; classroomId: numb
    * @param file Optional image file to upload before submitting.
    * @returns The created submission.
    */
-  async function submitExample(description: string, file: File | null): Promise<MysterySubmissionResponse> {
-    const session = requirePupilSession()
+  async function submitExample(
+    description: string,
+    file: File | null,
+  ): Promise<MysterySubmissionResponse> {
+    const session = requirePupilSession();
 
-    status.value = 'submitting'
-    errorMessage.value = null
+    status.value = "submitting";
+    errorMessage.value = null;
 
     try {
-      let attachmentUrl: string | null = null
+      let attachmentUrl: string | null = null;
 
       if (file) {
-        const result = await requestUploadAttachment(session.classroomId, session.authorizationHeader, file)
-        attachmentUrl = result.url
+        const result = await requestUploadAttachment(
+          session.classroomId,
+          session.authorizationHeader,
+          file,
+        );
+        attachmentUrl = result.url;
       }
 
-      const payload: SubmitMysteryPayload = { description, attachmentUrl }
+      const payload: SubmitMysteryPayload = { description, attachmentUrl };
       const created = await requestSubmitExample(
         session.classroomId,
         session.authorizationHeader,
         payload,
-)
-
-mySubmissions.value = [created, ...mySubmissions.value]
-status.value = 'ready'
-return created
-} catch (error) {
-errorMessage.value = error instanceof Error ? error.message : 'Failed to submit example.'
-status.value = 'ready'
-throw error
-}
-}
-
-return {
-allWeeklyMysteries,
-mySubmissions,
-status,
-errorMessage,
-fetchAll,
-submitExample,
-}
-})
\ No newline at end of file
+      );
+
+      mySubmissions.value = [created, ...mySubmissions.value];
+      status.value = "ready";
+      return created;
+    } catch (error) {
+      errorMessage.value =
+        error instanceof Error ? error.message : "Failed to submit example.";
+      status.value = "ready";
+      throw error;
+    }
+  }
+
+  return {
+    allWeeklyMysteries,
+    mySubmissions,
+    status,
+    errorMessage,
+    fetchAll,
+    submitExample,
+  };
+});
diff --git a/src/mystery/model/mystery.types.ts b/src/mystery/model/mystery.types.ts
index 94f7f282..962ac582 100644
--- a/src/mystery/model/mystery.types.ts
+++ b/src/mystery/model/mystery.types.ts
@@ -1,30 +1,35 @@
-export type ReviewStatus = 'PENDING' | 'APPROVED' | 'REJECTED'
+export type ReviewStatus = "PENDING" | "APPROVED" | "REJECTED";
 
 export interface MysterySubmissionResponse {
-    id: number
-    classroomId: number
-    pupilUserId: number
-    description: string
-    attachmentUrl: string | null
-submittedAt: string | null
-reviewStatus: ReviewStatus
-reviewedByTeacherId: number | null
-reviewedAt: string | null
-teacherComment: string | null
+  id: number;
+  classroomId: number;
+  pupilUserId: number;
+  description: string;
+  attachmentUrl: string | null;
+  submittedAt: string | null;
+  reviewStatus: ReviewStatus;
+  reviewedByTeacherId: number | null;
+  reviewedAt: string | null;
+  teacherComment: string | null;
 }
 
 export interface WeeklyMysteryResponse {
-id: number
-classroomId: number
-weekStart: string
-featuredByTeacherId: number
-featuredAt: string | null
-submission: MysterySubmissionResponse
+  id: number;
+  classroomId: number;
+  weekStart: string;
+  featuredByTeacherId: number;
+  featuredAt: string | null;
+  submission: MysterySubmissionResponse;
 }
 
 export interface SubmitMysteryPayload {
-description: string
-attachmentUrl: string | null
+  description: string;
+  attachmentUrl: string | null;
 }
 
-export type MysteryStatus = 'idle' | 'loading' | 'ready' | 'submitting' | 'error'
\ No newline at end of file
+export type MysteryStatus =
+  | "idle"
+  | "loading"
+  | "ready"
+  | "submitting"
+  | "error";
diff --git a/src/mystery/pages/MysteryPage.vue b/src/mystery/pages/MysteryPage.vue
index accb787d..79b92399 100644
--- a/src/mystery/pages/MysteryPage.vue
+++ b/src/mystery/pages/MysteryPage.vue
@@ -1,166 +1,191 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useMysteryStore } from '@/mystery/model/mystery.store'
-import MysteryTabBar, { type MysteryTab } from '@/mystery/components/MysteryTabBar.vue'
-import MysteryWeekNavigator from '@/mystery/components/MysteryWeekNavigator.vue'
-import MysteryCard from '@/mystery/components/MysteryCard.vue'
-import MysteryCardModal from '@/mystery/components/MysteryCardModal.vue'
-import MysterySubmissionForm from '@/mystery/components/MysterySubmissionForm.vue'
-import MysterySubmissionRow from '@/mystery/components/MysterySubmissionRow.vue'
-import type { WeeklyMysteryResponse } from '@/mystery/model/mystery.types'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { requestClassroomBannedWords } from '@/shared/moderation/moderation.api'
-
-const { t } = useI18n()
-const store = useMysteryStore()
-const authStore = useAuthStore()
-
-const activeTab = ref<MysteryTab>('featured')
-const weekIndex = ref(0)
-const selectedMystery = ref<WeeklyMysteryResponse | null>(null)
-
-const submitError = ref<string | null>(null)
-const submitSuccess = ref(false)
-const formRef = ref<InstanceType<typeof MysterySubmissionForm> | null>(null)
-const bannedWords = ref<string[]>([])
+import { computed, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useMysteryStore } from "@/mystery/model/mystery.store";
+import MysteryTabBar, {
+  type MysteryTab,
+} from "@/mystery/components/MysteryTabBar.vue";
+import MysteryWeekNavigator from "@/mystery/components/MysteryWeekNavigator.vue";
+import MysteryCard from "@/mystery/components/MysteryCard.vue";
+import MysteryCardModal from "@/mystery/components/MysteryCardModal.vue";
+import MysterySubmissionForm from "@/mystery/components/MysterySubmissionForm.vue";
+import MysterySubmissionRow from "@/mystery/components/MysterySubmissionRow.vue";
+import type { WeeklyMysteryResponse } from "@/mystery/model/mystery.types";
+import { useAuthStore } from "@/auth/model/auth.store";
+import { requestClassroomBannedWords } from "@/shared/moderation/moderation.api";
+
+const { t } = useI18n();
+const store = useMysteryStore();
+const authStore = useAuthStore();
+
+const activeTab = ref<MysteryTab>("featured");
+const weekIndex = ref(0);
+const selectedMystery = ref<WeeklyMysteryResponse | null>(null);
+
+const submitError = ref<string | null>(null);
+const submitSuccess = ref(false);
+const formRef = ref<InstanceType<typeof MysterySubmissionForm> | null>(null);
+const bannedWords = ref<string[]>([]);
 
 const uniqueWeeks = computed<string[]>(() => {
-  const seen = new Set<string>()
-  for (const entry of store.allWeeklyMysteries) seen.add(entry.weekStart)
-  return [...seen].sort((a, b) => b.localeCompare(a))
-})
+  const seen = new Set<string>();
+  for (const entry of store.allWeeklyMysteries) seen.add(entry.weekStart);
+  return [...seen].sort((a, b) => b.localeCompare(a));
+});
 
-const currentWeekStart = computed<string | null>(() => uniqueWeeks.value[weekIndex.value] ?? null)
+const currentWeekStart = computed<string | null>(
+  () => uniqueWeeks.value[weekIndex.value] ?? null,
+);
 
 const currentWeekMysteries = computed<WeeklyMysteryResponse[]>(() => {
-  if (!currentWeekStart.value) return []
-  return store.allWeeklyMysteries.filter((m) => m.weekStart === currentWeekStart.value)
-})
+  if (!currentWeekStart.value) return [];
+  return store.allWeeklyMysteries.filter(
+    (m) => m.weekStart === currentWeekStart.value,
+  );
+});
 
 const weekLabel = computed<string>(() => {
-  if (!currentWeekStart.value) return ''
-  const date = new Date(currentWeekStart.value)
-  const week = getIsoWeekNumber(date)
-  const formatted = date.toLocaleDateString('nb-NO', { day: 'numeric', month: 'long', year: 'numeric' })
-  return `${t('mystery.weekLabel', { week })} — ${formatted}`
-})
-
-const canGoPrev = computed(() => weekIndex.value < uniqueWeeks.value.length - 1)
-const canGoNext = computed(() => weekIndex.value > 0)
+  if (!currentWeekStart.value) return "";
+  const date = new Date(currentWeekStart.value);
+  const week = getIsoWeekNumber(date);
+  const formatted = date.toLocaleDateString("nb-NO", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+  return `${t("mystery.weekLabel", { week })} — ${formatted}`;
+});
+
+const canGoPrev = computed(
+  () => weekIndex.value < uniqueWeeks.value.length - 1,
+);
+const canGoNext = computed(() => weekIndex.value > 0);
 
 function getIsoWeekNumber(date: Date): number {
-  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
-  d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7))
-  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
-  return Math.ceil(((d.getTime() - yearStart.getTime()) / 86_400_000 + 1) / 7)
+  const d = new Date(
+    Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()),
+  );
+  d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  return Math.ceil(((d.getTime() - yearStart.getTime()) / 86_400_000 + 1) / 7);
 }
 
 function formatDate(isoString: string | null): string {
-  if (!isoString) return ''
-  return new Date(isoString).toLocaleDateString('nb-NO', {
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric',
-  })
+  if (!isoString) return "";
+  return new Date(isoString).toLocaleDateString("nb-NO", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
 }
 
 async function handleSubmit(description: string, file: File | null) {
-  submitError.value = null
-  submitSuccess.value = false
+  submitError.value = null;
+  submitSuccess.value = false;
 
   try {
-    await store.submitExample(description, file)
-    formRef.value?.reset()
-    submitSuccess.value = true
-    activeTab.value = 'mine'
+    await store.submitExample(description, file);
+    formRef.value?.reset();
+    submitSuccess.value = true;
+    activeTab.value = "mine";
   } catch (error) {
-    submitError.value = error instanceof Error ? error.message : t('mystery.errors.submitFailed')
+    submitError.value =
+      error instanceof Error ? error.message : t("mystery.errors.submitFailed");
   }
 }
 
 async function loadBannedWords() {
-  const authorizationHeader = authStore.authorizationHeader
-  const classroomId = authStore.user?.pupilProfile?.currentClassroomId ?? null
+  const authorizationHeader = authStore.authorizationHeader;
+  const classroomId = authStore.user?.pupilProfile?.currentClassroomId ?? null;
 
   if (!authorizationHeader || classroomId === null) {
-    bannedWords.value = []
-    return
+    bannedWords.value = [];
+    return;
   }
 
   try {
-    const configuredWords = await requestClassroomBannedWords(classroomId, authorizationHeader)
-    bannedWords.value = configuredWords.map((entry) => entry.word)
+    const configuredWords = await requestClassroomBannedWords(
+      classroomId,
+      authorizationHeader,
+    );
+    bannedWords.value = configuredWords.map((entry) => entry.word);
   } catch {
-    bannedWords.value = []
+    bannedWords.value = [];
   }
 }
 
 onMounted(() => {
-  void store.fetchAll()
-  void loadBannedWords()
-})
+  void store.fetchAll();
+  void loadBannedWords();
+});
 </script>
 
 <template>
   <div class="min-h-screen p-6">
     <div class="mx-auto max-w-4xl">
-
       <!-- Header -->
       <header class="mb-6 text-center">
         <h1 class="font-display text-4xl font-bold text-gray-900">
-          {{ t('mystery.title') }}
+          {{ t("mystery.title") }}
         </h1>
-        <p class="mt-1 text-sm text-gray-500">{{ t('mystery.subtitle') }}</p>
+        <p class="mt-1 text-sm text-gray-500">{{ t("mystery.subtitle") }}</p>
       </header>
 
       <MysteryTabBar
-          v-model="activeTab"
-          :submission-count="store.mySubmissions.length"
+        v-model="activeTab"
+        :submission-count="store.mySubmissions.length"
       />
 
       <!-- Loading -->
-      <div v-if="store.status === 'loading'" class="py-16 text-center text-sm text-gray-400">
-        {{ t('mystery.loading') }}
+      <div
+        v-if="store.status === 'loading'"
+        class="py-16 text-center text-sm text-gray-400"
+      >
+        {{ t("mystery.loading") }}
       </div>
 
       <!-- Error -->
-      <div v-else-if="store.status === 'error'" class="py-16 text-center text-sm text-red-600">
+      <div
+        v-else-if="store.status === 'error'"
+        class="py-16 text-center text-sm text-red-600"
+      >
         {{ store.errorMessage }}
       </div>
 
       <template v-else>
-
         <!-- Tab: featured -->
         <section v-if="activeTab === 'featured'" role="tabpanel">
-          <div v-if="uniqueWeeks.length === 0" class="py-16 text-center text-sm text-gray-400">
-            {{ t('mystery.noMysteries') }}
+          <div
+            v-if="uniqueWeeks.length === 0"
+            class="py-16 text-center text-sm text-gray-400"
+          >
+            {{ t("mystery.noMysteries") }}
           </div>
 
           <template v-else>
             <MysteryWeekNavigator
-                :label="weekLabel"
-                :can-go-prev="canGoPrev"
-                :can-go-next="canGoNext"
-                @prev="weekIndex++"
-                @next="weekIndex--"
+              :label="weekLabel"
+              :can-go-prev="canGoPrev"
+              :can-go-next="canGoNext"
+              @prev="weekIndex++"
+              @next="weekIndex--"
             />
 
             <div
-                v-if="currentWeekMysteries.length > 0"
-                class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
+              v-if="currentWeekMysteries.length > 0"
+              class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
             >
               <MysteryCard
-                  v-for="mystery in currentWeekMysteries"
-                  :key="mystery.id"
-                  :mystery="mystery"
-                  :formatted-date="formatDate(mystery.submission.submittedAt)"
-                  @select="selectedMystery = $event"
+                v-for="mystery in currentWeekMysteries"
+                :key="mystery.id"
+                :mystery="mystery"
+                :formatted-date="formatDate(mystery.submission.submittedAt)"
+                @select="selectedMystery = $event"
               />
             </div>
 
             <p v-else class="py-10 text-center text-sm text-gray-400">
-              {{ t('mystery.noMysteriesThisWeek') }}
+              {{ t("mystery.noMysteriesThisWeek") }}
             </p>
           </template>
         </section>
@@ -168,12 +193,14 @@ onMounted(() => {
         <!-- Tab: submit -->
         <section v-else-if="activeTab === 'submit'" role="tabpanel">
           <MysterySubmissionForm
-              ref="formRef"
-              :submitting="store.status === 'submitting'"
-              :success-message="submitSuccess ? t('mystery.submitForm.success') : null"
-              :error-message="submitError"
-              :banned-words="bannedWords"
-              @submit="handleSubmit"
+            ref="formRef"
+            :submitting="store.status === 'submitting'"
+            :success-message="
+              submitSuccess ? t('mystery.submitForm.success') : null
+            "
+            :error-message="submitError"
+            :banned-words="bannedWords"
+            @submit="handleSubmit"
           />
         </section>
 
@@ -181,35 +208,34 @@ onMounted(() => {
         <section v-else-if="activeTab === 'mine'" role="tabpanel">
           <div class="rounded-2xl bg-white p-6 shadow-md">
             <h2 class="mb-4 text-lg font-semibold text-gray-900">
-              {{ t('mystery.mySubmissions.heading') }}
+              {{ t("mystery.mySubmissions.heading") }}
             </h2>
 
             <p
-                v-if="store.mySubmissions.length === 0"
-                class="py-8 text-center text-sm text-gray-400"
+              v-if="store.mySubmissions.length === 0"
+              class="py-8 text-center text-sm text-gray-400"
             >
-              {{ t('mystery.mySubmissions.empty') }}
+              {{ t("mystery.mySubmissions.empty") }}
             </p>
 
             <ul v-else class="divide-y divide-amber-100">
               <MysterySubmissionRow
-                  v-for="submission in store.mySubmissions"
-                  :key="submission.id"
-                  :submission="submission"
-                  :formatted-date="formatDate(submission.submittedAt)"
+                v-for="submission in store.mySubmissions"
+                :key="submission.id"
+                :submission="submission"
+                :formatted-date="formatDate(submission.submittedAt)"
               />
             </ul>
           </div>
         </section>
-
       </template>
     </div>
   </div>
 
   <MysteryCardModal
-      v-if="selectedMystery"
-      :mystery="selectedMystery"
-      :formatted-date="formatDate(selectedMystery.submission.submittedAt)"
-      @close="selectedMystery = null"
+    v-if="selectedMystery"
+    :mystery="selectedMystery"
+    :formatted-date="formatDate(selectedMystery.submission.submittedAt)"
+    @close="selectedMystery = null"
   />
 </template>
diff --git a/src/mystery/routes.ts b/src/mystery/routes.ts
index 2c6904dc..bc90b662 100644
--- a/src/mystery/routes.ts
+++ b/src/mystery/routes.ts
@@ -8,7 +8,7 @@ export const mysteryRoutes: RouteRecordRaw[] = [
     name: "mystery",
     component: MysteryPage,
     meta: {
-      backTarget: { name: 'pupil-home' },
+      backTarget: { name: "pupil-home" },
     },
   },
 ];
diff --git a/src/notebook/api/notebook.api.ts b/src/notebook/api/notebook.api.ts
index 6b8bc851..efb8db7d 100644
--- a/src/notebook/api/notebook.api.ts
+++ b/src/notebook/api/notebook.api.ts
@@ -2,62 +2,67 @@ import type {
   CreateNotebookEntryPayload,
   NotebookEntryResponse,
   UpdateNotebookEntryPayload,
-} from '@/notebook/model/notebook.types'
-import { readJsonErrorMessage } from '@/shared/api/response-errors'
+} from "@/notebook/model/notebook.types";
+import { readJsonErrorMessage } from "@/shared/api/response-errors";
 
-const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
-const NOTEBOOK_API_BASE = `${API_BASE_URL}/api/v1/users/me/notebook-entries`
-const CLASSROOMS_API_BASE = `${API_BASE_URL}/api/v1/classrooms`
+const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? "").replace(
+  /\/$/,
+  "",
+);
+const NOTEBOOK_API_BASE = `${API_BASE_URL}/api/v1/users/me/notebook-entries`;
+const CLASSROOMS_API_BASE = `${API_BASE_URL}/api/v1/classrooms`;
 
 async function getResponseErrorMessage(response: Response) {
-  const fallbackMessage = `Notebook request failed with status ${response.status}.`
-  const errorMessage = await readJsonErrorMessage(response)
+  const fallbackMessage = `Notebook request failed with status ${response.status}.`;
+  const errorMessage = await readJsonErrorMessage(response);
 
-  if (errorMessage) return errorMessage
+  if (errorMessage) return errorMessage;
 
-  const text = await response.text().catch(() => '')
-  return text || fallbackMessage
+  const text = await response.text().catch(() => "");
+  return text || fallbackMessage;
 }
 
-async function fetchNotebookJson<T>(
-  options: {
-    baseUrl?: string
-    path?: string
-    method?: string
-    body?: unknown
-    authorizationHeader: string
-  },
-) {
+async function fetchNotebookJson<T>(options: {
+  baseUrl?: string;
+  path?: string;
+  method?: string;
+  body?: unknown;
+  authorizationHeader: string;
+}) {
   const headers = new Headers({
     Authorization: options.authorizationHeader,
-  })
+  });
 
   if (options.body !== undefined) {
-    headers.set('Content-Type', 'application/json')
+    headers.set("Content-Type", "application/json");
   }
 
-  const response = await fetch(`${options.baseUrl ?? NOTEBOOK_API_BASE}${options.path ?? ''}`, {
-    method: options.method ?? 'GET',
-    headers,
-    body: options.body !== undefined ? JSON.stringify(options.body) : undefined,
-    credentials: 'include',
-  })
+  const response = await fetch(
+    `${options.baseUrl ?? NOTEBOOK_API_BASE}${options.path ?? ""}`,
+    {
+      method: options.method ?? "GET",
+      headers,
+      body:
+        options.body !== undefined ? JSON.stringify(options.body) : undefined,
+      credentials: "include",
+    },
+  );
 
   if (!response.ok) {
-    throw new Error(await getResponseErrorMessage(response))
+    throw new Error(await getResponseErrorMessage(response));
   }
 
   if (response.status === 204) {
-    return undefined as T
+    return undefined as T;
   }
 
-  return (await response.json()) as T
+  return (await response.json()) as T;
 }
 
 export function requestNotebookEntries(authorizationHeader: string) {
   return fetchNotebookJson<NotebookEntryResponse[]>({
     authorizationHeader,
-  })
+  });
 }
 
 export function requestCreateNotebookEntry(
@@ -65,10 +70,10 @@ export function requestCreateNotebookEntry(
   payload: CreateNotebookEntryPayload,
 ) {
   return fetchNotebookJson<NotebookEntryResponse>({
-    method: 'POST',
+    method: "POST",
     authorizationHeader,
     body: payload,
-  })
+  });
 }
 
 export function requestUpdateNotebookEntry(
@@ -78,10 +83,10 @@ export function requestUpdateNotebookEntry(
 ) {
   return fetchNotebookJson<NotebookEntryResponse>({
     path: `/${notebookEntryId}`,
-    method: 'PUT',
+    method: "PUT",
     authorizationHeader,
     body: payload,
-  })
+  });
 }
 
 export function requestDeleteNotebookEntry(
@@ -90,9 +95,9 @@ export function requestDeleteNotebookEntry(
 ) {
   return fetchNotebookJson<void>({
     path: `/${notebookEntryId}`,
-    method: 'DELETE',
+    method: "DELETE",
     authorizationHeader,
-  })
+  });
 }
 
 export function requestTeacherNotebookEntries(
@@ -103,7 +108,7 @@ export function requestTeacherNotebookEntries(
   return fetchNotebookJson<NotebookEntryResponse[]>({
     baseUrl: `${CLASSROOMS_API_BASE}/${classroomId}/pupils/${pupilUserId}/notebook-entries`,
     authorizationHeader,
-  })
+  });
 }
 
 export function requestTeacherDeleteNotebookEntry(
@@ -115,7 +120,7 @@ export function requestTeacherDeleteNotebookEntry(
   return fetchNotebookJson<void>({
     baseUrl: `${CLASSROOMS_API_BASE}/${classroomId}/pupils/${pupilUserId}/notebook-entries`,
     path: `/${notebookEntryId}`,
-    method: 'DELETE',
+    method: "DELETE",
     authorizationHeader,
-  })
+  });
 }
diff --git a/src/notebook/components/NotebookComponent.vue b/src/notebook/components/NotebookComponent.vue
index 85fbc605..1c6d5e29 100644
--- a/src/notebook/components/NotebookComponent.vue
+++ b/src/notebook/components/NotebookComponent.vue
@@ -7,202 +7,203 @@ import {
   onMounted,
   ref,
   watch,
-} from 'vue'
-import type { ComponentPublicInstance } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { requestMapOverview } from '@/map/api/map.api'
-import type { MapStopOverview } from '@/map/model/map.types'
-import NotebookEntryComponent from '@/notebook/components/NotebookEntryComponent.vue'
-import NotebookSidebarComponent from '@/notebook/components/NotebookSidebarComponent.vue'
+} from "vue";
+import type { ComponentPublicInstance } from "vue";
+import { useI18n } from "vue-i18n";
+import { useAuthStore } from "@/auth/model/auth.store";
+import { requestMapOverview } from "@/map/api/map.api";
+import type { MapStopOverview } from "@/map/model/map.types";
+import NotebookEntryComponent from "@/notebook/components/NotebookEntryComponent.vue";
+import NotebookSidebarComponent from "@/notebook/components/NotebookSidebarComponent.vue";
 import {
   requestCreateNotebookEntry,
   requestDeleteNotebookEntry,
   requestNotebookEntries,
   requestTeacherDeleteNotebookEntry,
   requestTeacherNotebookEntries,
-} from '@/notebook/api/notebook.api'
+} from "@/notebook/api/notebook.api";
 import type {
   CreateNotebookEntryPayload,
   NotebookEntryResponse,
   NotebookStatus,
-} from '@/notebook/model/notebook.types'
-import { requestClassroomBannedWords } from '@/shared/moderation/moderation.api'
-import { moderateText } from '@/shared/moderation/banned-words'
+} from "@/notebook/model/notebook.types";
+import { requestClassroomBannedWords } from "@/shared/moderation/moderation.api";
+import { moderateText } from "@/shared/moderation/banned-words";
 import { useProfanityFilter } from "@/shared/composables/useProfanityFilter.ts";
 
-const authStore = useAuthStore()
-const { t } = useI18n()
+const authStore = useAuthStore();
+const { t } = useI18n();
 
 const props = withDefaults(
   defineProps<{
-    mode?: 'pupil' | 'teacher'
-    classroomId?: number | null
-    pupilId?: number | null
+    mode?: "pupil" | "teacher";
+    classroomId?: number | null;
+    pupilId?: number | null;
   }>(),
   {
-    mode: 'pupil',
+    mode: "pupil",
     classroomId: null,
     pupilId: null,
   },
-)
-
-const currentSection = ref(0)
-const entries = ref<NotebookEntryResponse[]>([])
-const mapStops = ref<MapStopOverview[]>([])
-const status = ref<NotebookStatus>('idle')
-const errorMessage = ref<string | null>(null)
-const newEntryTitle = ref('')
-const newEntryContent = ref('')
-const bannedWords = ref<string[]>([])
-const { hasProfanity } = useProfanityFilter()
-const currentPageByStopId = ref<Record<number, number>>({})
-const pageBodyElement = ref<HTMLElement | null>(null)
-const formElement = ref<HTMLElement | null>(null)
-const entryMeasureElements = ref<HTMLElement[]>([])
-const availablePageHeight = ref(0)
-const formHeight = ref(0)
-const entryHeights = ref<Record<number, number>>({})
-
-const defaultPageHeight = 520
-const defaultFormHeight = 190
-const entryGap = 16
-let resizeObserver: ResizeObserver | null = null
-
-const authorizationHeader = computed(() => authStore.authorizationHeader)
-const isTeacherReview = computed(() => props.mode === 'teacher')
+);
+
+const currentSection = ref(0);
+const entries = ref<NotebookEntryResponse[]>([]);
+const mapStops = ref<MapStopOverview[]>([]);
+const status = ref<NotebookStatus>("idle");
+const errorMessage = ref<string | null>(null);
+const newEntryTitle = ref("");
+const newEntryContent = ref("");
+const bannedWords = ref<string[]>([]);
+const { hasProfanity } = useProfanityFilter();
+const currentPageByStopId = ref<Record<number, number>>({});
+const pageBodyElement = ref<HTMLElement | null>(null);
+const formElement = ref<HTMLElement | null>(null);
+const entryMeasureElements = ref<HTMLElement[]>([]);
+const availablePageHeight = ref(0);
+const formHeight = ref(0);
+const entryHeights = ref<Record<number, number>>({});
+
+const defaultPageHeight = 520;
+const defaultFormHeight = 190;
+const entryGap = 16;
+let resizeObserver: ResizeObserver | null = null;
+
+const authorizationHeader = computed(() => authStore.authorizationHeader);
+const isTeacherReview = computed(() => props.mode === "teacher");
 const currentClassroomId = computed(() =>
   isTeacherReview.value
     ? props.classroomId
     : (authStore.user?.pupilProfile?.currentClassroomId ?? null),
-)
+);
 
 const sectionStopIds = computed(() => {
   if (mapStops.value.length > 0) {
     return [...mapStops.value]
       .sort((left, right) => {
         if (left.displayOrder !== right.displayOrder) {
-          return left.displayOrder - right.displayOrder
+          return left.displayOrder - right.displayOrder;
         }
 
-        return left.stopId - right.stopId
+        return left.stopId - right.stopId;
       })
-      .map((stop) => stop.stopId)
+      .map((stop) => stop.stopId);
   }
 
-  const entryStopIds = [...new Set(entries.value.map((entry) => entry.stopId))]
-  return entryStopIds.sort((left, right) => left - right)
-})
+  const entryStopIds = [...new Set(entries.value.map((entry) => entry.stopId))];
+  return entryStopIds.sort((left, right) => left - right);
+});
 
 const currentStopId = computed(
   () => sectionStopIds.value[currentSection.value] ?? null,
-)
+);
 const currentStop = computed(
   () =>
     mapStops.value.find((stop) => stop.stopId === currentStopId.value) ?? null,
-)
+);
 const sectionTitle = computed(() => {
   if (currentStop.value?.title) {
-    return currentStop.value.title
+    return currentStop.value.title;
   }
 
   if (currentStopId.value !== null) {
-    return t('notebook.stopLabel', { id: currentStopId.value })
+    return t("notebook.stopLabel", { id: currentStopId.value });
   }
 
-  return t('notebook.fallbackTitle')
-})
+  return t("notebook.fallbackTitle");
+});
 const currentSectionEntries = computed(() =>
   currentStopId.value === null
     ? []
     : entries.value.filter((entry) => entry.stopId === currentStopId.value),
-)
+);
 const currentPageIndex = computed(() => {
   if (currentStopId.value === null) {
-    return 0
+    return 0;
   }
 
-  return currentPageByStopId.value[currentStopId.value] ?? 0
-})
+  return currentPageByStopId.value[currentStopId.value] ?? 0;
+});
 const entriesByStopId = computed(() =>
   entries.value.reduce<Record<number, number>>((counts, entry) => {
-    counts[entry.stopId] = (counts[entry.stopId] ?? 0) + 1
-    return counts
+    counts[entry.stopId] = (counts[entry.stopId] ?? 0) + 1;
+    return counts;
   }, {}),
-)
+);
 const defaultCreateStopId = computed(
   () => currentStopId.value ?? mapStops.value[0]?.stopId ?? null,
-)
+);
 
 const notebookModeration = computed(() => {
-  const title = newEntryTitle.value
-  const content = newEntryContent.value
+  const title = newEntryTitle.value;
+  const content = newEntryContent.value;
 
-  const bannedCheck = moderateText([title, content], bannedWords.value)
+  const bannedCheck = moderateText([title, content], bannedWords.value);
 
-  const profanityDetected =
-      hasProfanity(title) || hasProfanity(content)
+  const profanityDetected = hasProfanity(title) || hasProfanity(content);
 
   return {
     ...bannedCheck,
     hasProfanity: profanityDetected,
     hasAnyViolation: bannedCheck.hasBlockedWords || profanityDetected,
-  }
-})
+  };
+});
 
 const notebookModerationMessage = computed(() => {
   if (notebookModeration.value.hasBlockedWords) {
-    return t('notebook.errors.bannedWords', {
-      words: notebookModeration.value.blockedWords.join(', '),
-    })
+    return t("notebook.errors.bannedWords", {
+      words: notebookModeration.value.blockedWords.join(", "),
+    });
   }
 
   if (notebookModeration.value.hasProfanity) {
-    return t('notebook.errors.profanity')
+    return t("notebook.errors.profanity");
   }
 
-  return null
-})
+  return null;
+});
 
 const pageCapacity = computed(() =>
   Math.max(availablePageHeight.value || defaultPageHeight, 220),
-)
-const measuredFormHeight = computed(() => formHeight.value || defaultFormHeight)
+);
+const measuredFormHeight = computed(
+  () => formHeight.value || defaultFormHeight,
+);
 const paginatedSectionEntries = computed(() => {
-  const pages: { entries: NotebookEntryResponse[]; hasForm: boolean }[] = []
-  const currentPageEntries: NotebookEntryResponse[] = []
-  let currentPageHeight = 0
+  const pages: { entries: NotebookEntryResponse[]; hasForm: boolean }[] = [];
+  const currentPageEntries: NotebookEntryResponse[] = [];
+  let currentPageHeight = 0;
 
   for (const entry of currentSectionEntries.value) {
     const entryHeight =
-      entryHeights.value[entry.id] ?? estimateEntryHeight(entry)
+      entryHeights.value[entry.id] ?? estimateEntryHeight(entry);
     const nextPageHeight =
       currentPageHeight +
       entryHeight +
-      (currentPageEntries.length > 0 ? entryGap : 0)
+      (currentPageEntries.length > 0 ? entryGap : 0);
 
     if (currentPageEntries.length > 0 && nextPageHeight > pageCapacity.value) {
-      pages.push({ entries: [...currentPageEntries], hasForm: false })
-      currentPageEntries.length = 0
-      currentPageHeight = 0
+      pages.push({ entries: [...currentPageEntries], hasForm: false });
+      currentPageEntries.length = 0;
+      currentPageHeight = 0;
     }
 
-    currentPageEntries.push(entry)
+    currentPageEntries.push(entry);
     currentPageHeight =
       currentPageHeight +
       entryHeight +
-      (currentPageEntries.length > 1 ? entryGap : 0)
+      (currentPageEntries.length > 1 ? entryGap : 0);
   }
 
   if (currentPageEntries.length > 0) {
-    pages.push({ entries: [...currentPageEntries], hasForm: false })
+    pages.push({ entries: [...currentPageEntries], hasForm: false });
   }
 
   if (!isTeacherReview.value) {
-    const lastPage = pages[pages.length - 1]
+    const lastPage = pages[pages.length - 1];
 
     if (!lastPage) {
-      pages.push({ entries: [], hasForm: true })
+      pages.push({ entries: [], hasForm: true });
     } else {
       const lastPageHeight = lastPage.entries.reduce(
         (height: number, entry: NotebookEntryResponse, index: number) =>
@@ -210,7 +211,7 @@ const paginatedSectionEntries = computed(() => {
           (entryHeights.value[entry.id] ?? estimateEntryHeight(entry)) +
           (index > 0 ? entryGap : 0),
         0,
-      )
+      );
 
       if (
         lastPageHeight +
@@ -218,110 +219,110 @@ const paginatedSectionEntries = computed(() => {
           (lastPage.entries.length > 0 ? entryGap : 0) <=
         pageCapacity.value
       ) {
-        lastPage.hasForm = true
+        lastPage.hasForm = true;
       } else {
-        pages.push({ entries: [], hasForm: true })
+        pages.push({ entries: [], hasForm: true });
       }
     }
   }
 
-  return pages.length > 0 ? pages : [{ entries: [], hasForm: false }]
-})
-const totalPages = computed(() => paginatedSectionEntries.value.length)
+  return pages.length > 0 ? pages : [{ entries: [], hasForm: false }];
+});
+const totalPages = computed(() => paginatedSectionEntries.value.length);
 const visiblePage = computed(
   () =>
     paginatedSectionEntries.value[
       Math.min(currentPageIndex.value, totalPages.value - 1)
     ] ?? { entries: [], hasForm: false },
-)
-const visiblePageEntries = computed(() => visiblePage.value.entries)
-const hasPreviousPage = computed(() => currentPageIndex.value > 0)
+);
+const visiblePageEntries = computed(() => visiblePage.value.entries);
+const hasPreviousPage = computed(() => currentPageIndex.value > 0);
 const hasNextPage = computed(
   () => currentPageIndex.value < totalPages.value - 1,
-)
+);
 const pageLabel = computed(() =>
-  t('notebook.pagination.page', {
+  t("notebook.pagination.page", {
     current: currentPageIndex.value + 1,
     total: totalPages.value,
   }),
-)
-let loadRequestToken = 0
+);
+let loadRequestToken = 0;
 
 function selectSection(index: number) {
   if (index < 0 || index >= sectionStopIds.value.length) {
-    return
+    return;
   }
 
-  currentSection.value = index
-  clampCurrentPage()
+  currentSection.value = index;
+  clampCurrentPage();
 }
 
 function setEntryMeasureElement(
   element: Element | ComponentPublicInstance | null,
 ) {
   if (element instanceof HTMLElement) {
-    entryMeasureElements.value.push(element)
+    entryMeasureElements.value.push(element);
   }
 }
 
 function estimateEntryHeight(entry: NotebookEntryResponse) {
-  const contentLength = entry.title.length + entry.content.length
-  return Math.min(230, 104 + Math.ceil(contentLength / 72) * 24)
+  const contentLength = entry.title.length + entry.content.length;
+  return Math.min(230, 104 + Math.ceil(contentLength / 72) * 24);
 }
 
 function measureNotebookPages() {
-  const bodyHeight = pageBodyElement.value?.getBoundingClientRect().height ?? 0
-  const measuredForm = formElement.value?.getBoundingClientRect().height ?? 0
-  const nextEntryHeights: Record<number, number> = {}
+  const bodyHeight = pageBodyElement.value?.getBoundingClientRect().height ?? 0;
+  const measuredForm = formElement.value?.getBoundingClientRect().height ?? 0;
+  const nextEntryHeights: Record<number, number> = {};
 
   if (bodyHeight > 0) {
-    availablePageHeight.value = bodyHeight
+    availablePageHeight.value = bodyHeight;
   }
 
   if (measuredForm > 0) {
-    formHeight.value = measuredForm
+    formHeight.value = measuredForm;
   }
 
   entryMeasureElements.value.forEach((element) => {
-    const entryId = Number(element.dataset.entryId)
-    const height = element.getBoundingClientRect().height
+    const entryId = Number(element.dataset.entryId);
+    const height = element.getBoundingClientRect().height;
 
     if (Number.isFinite(entryId) && height > 0) {
-      nextEntryHeights[entryId] = height
+      nextEntryHeights[entryId] = height;
     }
-  })
+  });
 
   if (Object.keys(nextEntryHeights).length > 0) {
-    entryHeights.value = nextEntryHeights
+    entryHeights.value = nextEntryHeights;
   }
 
-  clampCurrentPage()
+  clampCurrentPage();
 }
 
 async function scheduleMeasurement() {
-  await nextTick()
-  measureNotebookPages()
+  await nextTick();
+  measureNotebookPages();
 }
 
 function clampCurrentPage() {
   if (currentStopId.value === null) {
-    return
+    return;
   }
 
-  const maxPageIndex = Math.max(totalPages.value - 1, 0)
-  const nextPageIndex = Math.min(currentPageIndex.value, maxPageIndex)
+  const maxPageIndex = Math.max(totalPages.value - 1, 0);
+  const nextPageIndex = Math.min(currentPageIndex.value, maxPageIndex);
 
   if (nextPageIndex !== currentPageIndex.value) {
     currentPageByStopId.value = {
       ...currentPageByStopId.value,
       [currentStopId.value]: nextPageIndex,
-    }
+    };
   }
 }
 
 function selectPage(pageIndex: number) {
   if (currentStopId.value === null) {
-    return
+    return;
   }
 
   currentPageByStopId.value = {
@@ -330,113 +331,113 @@ function selectPage(pageIndex: number) {
       Math.max(pageIndex, 0),
       totalPages.value - 1,
     ),
-  }
+  };
 }
 
 function selectPreviousPage() {
-  selectPage(currentPageIndex.value - 1)
+  selectPage(currentPageIndex.value - 1);
 }
 
 function selectNextPage() {
-  selectPage(currentPageIndex.value + 1)
+  selectPage(currentPageIndex.value + 1);
 }
 
 async function createEntry() {
   if (isTeacherReview.value) {
-    return
+    return;
   }
 
   if (!authorizationHeader.value) {
-    status.value = 'error'
-    errorMessage.value = t('notebook.errors.createRequiresAuth')
-    return
+    status.value = "error";
+    errorMessage.value = t("notebook.errors.createRequiresAuth");
+    return;
   }
 
   if (currentClassroomId.value === null || defaultCreateStopId.value === null) {
-    status.value = 'error'
-    errorMessage.value = t('notebook.errors.missingStop')
-    return
+    status.value = "error";
+    errorMessage.value = t("notebook.errors.missingStop");
+    return;
   }
 
-  const title = newEntryTitle.value.trim()
-  const content = newEntryContent.value.trim()
+  const title = newEntryTitle.value.trim();
+  const content = newEntryContent.value.trim();
 
   if (!title || !content) {
-    status.value = 'error'
-    errorMessage.value = t('notebook.errors.missingFields')
-    return
+    status.value = "error";
+    errorMessage.value = t("notebook.errors.missingFields");
+    return;
   }
 
   if (notebookModeration.value.hasAnyViolation) {
-    status.value = 'error'
-    errorMessage.value = notebookModerationMessage.value
-    return
+    status.value = "error";
+    errorMessage.value = notebookModerationMessage.value;
+    return;
   }
 
-  status.value = 'saving'
-  errorMessage.value = null
+  status.value = "saving";
+  errorMessage.value = null;
 
   try {
     const payload: CreateNotebookEntryPayload = {
       classroomId: currentClassroomId.value,
       stopId: defaultCreateStopId.value,
-      sourceType: 'PUPIL',
+      sourceType: "PUPIL",
       title,
       content,
-    }
+    };
 
     const createdEntry = await requestCreateNotebookEntry(
       authorizationHeader.value,
       payload,
-    )
-    entries.value = [...entries.value, createdEntry]
+    );
+    entries.value = [...entries.value, createdEntry];
 
     const createdSectionIndex = sectionStopIds.value.findIndex(
       (stopId) => stopId === createdEntry.stopId,
-    )
+    );
     if (createdSectionIndex >= 0) {
-      currentSection.value = createdSectionIndex
+      currentSection.value = createdSectionIndex;
     }
 
-    selectPage(Math.max(totalPages.value - 1, 0))
-    newEntryTitle.value = ''
-    newEntryContent.value = ''
-    status.value = 'ready'
-    void scheduleMeasurement()
+    selectPage(Math.max(totalPages.value - 1, 0));
+    newEntryTitle.value = "";
+    newEntryContent.value = "";
+    status.value = "ready";
+    void scheduleMeasurement();
   } catch (error) {
-    status.value = 'error'
+    status.value = "error";
     errorMessage.value =
       error instanceof Error && error.message.trim().length > 0
         ? error.message
-        : t('notebook.errors.createFailed')
+        : t("notebook.errors.createFailed");
   }
 }
 
 async function deleteEntry(entryId: number) {
   const entry = entries.value.find(
     (currentEntry) => currentEntry.id === entryId,
-  )
-  if (entry?.sourceType === 'GAME') {
-    status.value = 'error'
-    errorMessage.value = t('notebook.errors.gameDeleteForbidden')
-    return
+  );
+  if (entry?.sourceType === "GAME") {
+    status.value = "error";
+    errorMessage.value = t("notebook.errors.gameDeleteForbidden");
+    return;
   }
 
   if (!authorizationHeader.value) {
-    status.value = 'error'
-    errorMessage.value = t('notebook.errors.deleteRequiresAuth')
-    return
+    status.value = "error";
+    errorMessage.value = t("notebook.errors.deleteRequiresAuth");
+    return;
   }
 
-  status.value = 'saving'
-  errorMessage.value = null
+  status.value = "saving";
+  errorMessage.value = null;
 
   try {
     if (isTeacherReview.value) {
       if (currentClassroomId.value === null || props.pupilId === null) {
-        status.value = 'error'
-        errorMessage.value = t('notebook.errors.missingTeacherContext')
-        return
+        status.value = "error";
+        errorMessage.value = t("notebook.errors.missingTeacherContext");
+        return;
       }
 
       await requestTeacherDeleteNotebookEntry(
@@ -444,111 +445,111 @@ async function deleteEntry(entryId: number) {
         currentClassroomId.value,
         props.pupilId,
         entryId,
-      )
+      );
     } else {
-      await requestDeleteNotebookEntry(authorizationHeader.value, entryId)
+      await requestDeleteNotebookEntry(authorizationHeader.value, entryId);
     }
 
     entries.value = entries.value.filter(
       (currentEntry) => currentEntry.id !== entryId,
-    )
+    );
 
     if (currentSection.value >= sectionStopIds.value.length) {
-      currentSection.value = Math.max(sectionStopIds.value.length - 1, 0)
+      currentSection.value = Math.max(sectionStopIds.value.length - 1, 0);
     }
 
-    clampCurrentPage()
-    status.value = 'ready'
-    void scheduleMeasurement()
+    clampCurrentPage();
+    status.value = "ready";
+    void scheduleMeasurement();
   } catch (error) {
-    status.value = 'error'
+    status.value = "error";
     errorMessage.value =
       error instanceof Error && error.message.trim().length > 0
         ? error.message
-        : t('notebook.errors.deleteFailed')
+        : t("notebook.errors.deleteFailed");
   }
 }
 
 async function loadNotebookEntries() {
-  const header = authorizationHeader.value
+  const header = authorizationHeader.value;
   if (!header) {
-    entries.value = []
-    mapStops.value = []
-    currentSection.value = 0
+    entries.value = [];
+    mapStops.value = [];
+    currentSection.value = 0;
     status.value =
-      authStore.status === 'idle' || authStore.status === 'restoring'
-        ? 'idle'
-        : 'error'
+      authStore.status === "idle" || authStore.status === "restoring"
+        ? "idle"
+        : "error";
     errorMessage.value =
-      status.value === 'error' ? t('notebook.errors.loadRequiresAuth') : null
-    return
+      status.value === "error" ? t("notebook.errors.loadRequiresAuth") : null;
+    return;
   }
 
-  const requestToken = ++loadRequestToken
-  status.value = 'loading'
-  errorMessage.value = null
+  const requestToken = ++loadRequestToken;
+  status.value = "loading";
+  errorMessage.value = null;
 
   try {
     if (currentClassroomId.value !== null) {
       mapStops.value = await requestMapOverview(
         currentClassroomId.value,
         header,
-      )
+      );
     } else {
-      mapStops.value = []
+      mapStops.value = [];
     }
 
     if (isTeacherReview.value) {
       if (currentClassroomId.value === null || props.pupilId === null) {
-        status.value = 'error'
-        errorMessage.value = t('notebook.errors.missingTeacherContext')
-        return
+        status.value = "error";
+        errorMessage.value = t("notebook.errors.missingTeacherContext");
+        return;
       }
 
       entries.value = await requestTeacherNotebookEntries(
         header,
         currentClassroomId.value,
         props.pupilId,
-      )
+      );
     } else {
-      entries.value = await requestNotebookEntries(header)
+      entries.value = await requestNotebookEntries(header);
     }
 
     if (requestToken !== loadRequestToken) {
-      return
+      return;
     }
 
-    currentSection.value = 0
-    status.value = 'ready'
-    void scheduleMeasurement()
+    currentSection.value = 0;
+    status.value = "ready";
+    void scheduleMeasurement();
   } catch (error) {
     if (requestToken !== loadRequestToken) {
-      return
+      return;
     }
 
-    status.value = 'error'
+    status.value = "error";
     errorMessage.value =
       error instanceof Error && error.message.trim().length > 0
         ? error.message
-        : t('notebook.errors.loadFailed')
+        : t("notebook.errors.loadFailed");
   }
 }
 
 async function loadBannedWords() {
-  const header = authorizationHeader.value
+  const header = authorizationHeader.value;
   if (!header || currentClassroomId.value === null || isTeacherReview.value) {
-    bannedWords.value = []
-    return
+    bannedWords.value = [];
+    return;
   }
 
   try {
     const configuredWords = await requestClassroomBannedWords(
       currentClassroomId.value,
       header,
-    )
-    bannedWords.value = configuredWords.map((entry) => entry.word)
+    );
+    bannedWords.value = configuredWords.map((entry) => entry.word);
   } catch {
-    bannedWords.value = []
+    bannedWords.value = [];
   }
 }
 
@@ -562,48 +563,48 @@ watch(
       props.pupilId,
     ] as const,
   () => {
-    void loadNotebookEntries()
-    void loadBannedWords()
+    void loadNotebookEntries();
+    void loadBannedWords();
   },
   { immediate: true },
-)
+);
 
 watch(
   () => [currentStopId.value, currentSectionEntries.value.length] as const,
   () => {
-    clampCurrentPage()
-    void scheduleMeasurement()
+    clampCurrentPage();
+    void scheduleMeasurement();
   },
-)
+);
 
 watch(
   () => [paginatedSectionEntries.value.length, currentStopId.value] as const,
   () => {
-    clampCurrentPage()
+    clampCurrentPage();
   },
-)
+);
 
 onBeforeUpdate(() => {
-  entryMeasureElements.value = []
-})
+  entryMeasureElements.value = [];
+});
 
 onMounted(() => {
-  if (typeof ResizeObserver !== 'undefined') {
+  if (typeof ResizeObserver !== "undefined") {
     resizeObserver = new ResizeObserver(() => {
-      measureNotebookPages()
-    })
+      measureNotebookPages();
+    });
 
     if (pageBodyElement.value) {
-      resizeObserver.observe(pageBodyElement.value)
+      resizeObserver.observe(pageBodyElement.value);
     }
   }
 
-  void scheduleMeasurement()
-})
+  void scheduleMeasurement();
+});
 
 onBeforeUnmount(() => {
-  resizeObserver?.disconnect()
-})
+  resizeObserver?.disconnect();
+});
 </script>
 
 <template>
@@ -666,13 +667,13 @@ onBeforeUnmount(() => {
               </div>
 
               <p v-else-if="status === 'ready'" class="text-sm text-stone-500">
-                {{ t('notebook.emptySection') }}
+                {{ t("notebook.emptySection") }}
               </p>
               <p
                 v-else-if="status === 'loading'"
                 class="text-sm text-stone-500"
               >
-                {{ t('notebook.loading') }}
+                {{ t("notebook.loading") }}
               </p>
               <p v-else-if="errorMessage" class="text-sm text-red-700">
                 {{ errorMessage }}
@@ -710,7 +711,7 @@ onBeforeUnmount(() => {
                     "
                     type="submit"
                   >
-                    {{ t('notebook.form.submit') }}
+                    {{ t("notebook.form.submit") }}
                   </button>
                 </form>
               </div>
@@ -754,7 +755,7 @@ onBeforeUnmount(() => {
                 type="button"
                 @click="selectPreviousPage"
               >
-                {{ t('notebook.pagination.previous') }}
+                {{ t("notebook.pagination.previous") }}
               </button>
               <span class="px-3 py-1 font-semibold">
                 {{ pageLabel }}
@@ -765,7 +766,7 @@ onBeforeUnmount(() => {
                 type="button"
                 @click="selectNextPage"
               >
-                {{ t('notebook.pagination.next') }}
+                {{ t("notebook.pagination.next") }}
               </button>
             </footer>
 
@@ -798,7 +799,7 @@ onBeforeUnmount(() => {
                 "
                 type="submit"
               >
-                {{ t('notebook.form.submit') }}
+                {{ t("notebook.form.submit") }}
               </button>
             </form>
           </div>
diff --git a/src/notebook/components/NotebookEntryComponent.vue b/src/notebook/components/NotebookEntryComponent.vue
index a522932a..931381bd 100644
--- a/src/notebook/components/NotebookEntryComponent.vue
+++ b/src/notebook/components/NotebookEntryComponent.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { NotebookEntryResponse } from '@/notebook/model/notebook.types'
-import { useI18n } from 'vue-i18n'
+import type { NotebookEntryResponse } from "@/notebook/model/notebook.types";
+import { useI18n } from "vue-i18n";
 
 defineProps<{
-  entry: NotebookEntryResponse
-}>()
+  entry: NotebookEntryResponse;
+}>();
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 const emit = defineEmits<{
-  delete: [entryId: number]
-}>()
+  delete: [entryId: number];
+}>();
 
 function requestDelete(entryId: number) {
-  emit('delete', entryId)
+  emit("delete", entryId);
 }
 </script>
 
@@ -39,7 +39,7 @@ function requestDelete(entryId: number) {
       type="button"
       @click="requestDelete(entry.id)"
     >
-      {{ t('notebook.actions.deleteEntry') }}
+      {{ t("notebook.actions.deleteEntry") }}
     </button>
   </article>
 </template>
diff --git a/src/notebook/components/NotebookSidebarComponent.vue b/src/notebook/components/NotebookSidebarComponent.vue
index c02555d5..18412bea 100644
--- a/src/notebook/components/NotebookSidebarComponent.vue
+++ b/src/notebook/components/NotebookSidebarComponent.vue
@@ -1,59 +1,59 @@
 <script lang="ts" setup>
-import type { MapStopOverview } from '@/map/model/map.types'
-import { useI18n } from 'vue-i18n'
+import type { MapStopOverview } from "@/map/model/map.types";
+import { useI18n } from "vue-i18n";
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 const props = defineProps<{
-  currentSection: number
-  entriesByStopId: Record<number, number>
-  sectionStopIds: number[]
-  stops: MapStopOverview[]
-}>()
+  currentSection: number;
+  entriesByStopId: Record<number, number>;
+  sectionStopIds: number[];
+  stops: MapStopOverview[];
+}>();
 
 const emit = defineEmits<{
-  select: [index: number]
-}>()
+  select: [index: number];
+}>();
 
 function resolveStopTitle(stops: MapStopOverview[], stopId: number) {
   return (
     stops.find((stop) => stop.stopId === stopId)?.title ??
-    t('notebook.stopLabel', { id: stopId })
-  )
+    t("notebook.stopLabel", { id: stopId })
+  );
 }
 
 const tabColorClasses = [
-  'border-rose-300 bg-rose-300/95 text-rose-950 shadow-rose-950/20 hover:bg-rose-200',
-  'border-orange-300 bg-orange-300/95 text-orange-950 shadow-orange-950/20 hover:bg-orange-200',
-  'border-amber-300 bg-amber-200/95 text-amber-950 shadow-amber-950/20 hover:bg-amber-100',
-  'border-lime-300 bg-lime-200/95 text-lime-950 shadow-lime-950/20 hover:bg-lime-100',
-  'border-emerald-300 bg-emerald-200/95 text-emerald-950 shadow-emerald-950/20 hover:bg-emerald-100',
-  'border-sky-300 bg-sky-200/95 text-sky-950 shadow-sky-950/20 hover:bg-sky-100',
-  'border-violet-300 bg-violet-200/95 text-violet-950 shadow-violet-950/20 hover:bg-violet-100',
-]
+  "border-rose-300 bg-rose-300/95 text-rose-950 shadow-rose-950/20 hover:bg-rose-200",
+  "border-orange-300 bg-orange-300/95 text-orange-950 shadow-orange-950/20 hover:bg-orange-200",
+  "border-amber-300 bg-amber-200/95 text-amber-950 shadow-amber-950/20 hover:bg-amber-100",
+  "border-lime-300 bg-lime-200/95 text-lime-950 shadow-lime-950/20 hover:bg-lime-100",
+  "border-emerald-300 bg-emerald-200/95 text-emerald-950 shadow-emerald-950/20 hover:bg-emerald-100",
+  "border-sky-300 bg-sky-200/95 text-sky-950 shadow-sky-950/20 hover:bg-sky-100",
+  "border-violet-300 bg-violet-200/95 text-violet-950 shadow-violet-950/20 hover:bg-violet-100",
+];
 
 const tabOffsetClasses = [
-  'lg:top-0',
-  'lg:top-[4.5rem]',
-  'lg:top-[9rem]',
-  'lg:top-[13.5rem]',
-  'lg:top-[18rem]',
-  'lg:top-[22.5rem]',
-  'lg:top-[27rem]',
-]
+  "lg:top-0",
+  "lg:top-[4.5rem]",
+  "lg:top-[9rem]",
+  "lg:top-[13.5rem]",
+  "lg:top-[18rem]",
+  "lg:top-[22.5rem]",
+  "lg:top-[27rem]",
+];
 
 function resolveTabClasses(index: number) {
   return [
     tabColorClasses[index % tabColorClasses.length],
     tabOffsetClasses[index % tabOffsetClasses.length],
     index === props.currentSection
-      ? 'z-20 lg:translate-x-2 rotate-0 ring-2 ring-stone-900/20'
-      : 'z-10 lg:translate-x-0 rotate-[0.5deg] opacity-90 hover:opacity-100',
-  ]
+      ? "z-20 lg:translate-x-2 rotate-0 ring-2 ring-stone-900/20"
+      : "z-10 lg:translate-x-0 rotate-[0.5deg] opacity-90 hover:opacity-100",
+  ];
 }
 
 function selectSection(index: number) {
-  emit('select', index)
+  emit("select", index);
 }
 </script>
 
@@ -64,7 +64,7 @@ function selectSection(index: number) {
     <h3
       class="mb-3 rounded-full border border-stone-200 bg-[#fff8e8]/95 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-stone-500 shadow-sm backdrop-blur lg:sr-only"
     >
-      {{ t('notebook.sidebarTitle') }}
+      {{ t("notebook.sidebarTitle") }}
     </h3>
 
     <div
diff --git a/src/notebook/components/__tests__/NotebookComponent.spec.ts b/src/notebook/components/__tests__/NotebookComponent.spec.ts
index 8ddfdb16..fdca94e5 100644
--- a/src/notebook/components/__tests__/NotebookComponent.spec.ts
+++ b/src/notebook/components/__tests__/NotebookComponent.spec.ts
@@ -1,20 +1,20 @@
-import { flushPromises, mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createAppI18n } from '@/app/i18n'
-import { useAuthStore } from '@/auth/model/auth.store'
-import NotebookComponent from '@/notebook/components/NotebookComponent.vue'
-import NotebookEntryComponent from '@/notebook/components/NotebookEntryComponent.vue'
+import { flushPromises, mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createAppI18n } from "@/app/i18n";
+import { useAuthStore } from "@/auth/model/auth.store";
+import NotebookComponent from "@/notebook/components/NotebookComponent.vue";
+import NotebookEntryComponent from "@/notebook/components/NotebookEntryComponent.vue";
 import {
   requestDeleteNotebookEntry,
   requestNotebookEntries,
   requestTeacherDeleteNotebookEntry,
   requestTeacherNotebookEntries,
-} from '@/notebook/api/notebook.api'
-import { requestMapOverview } from '@/map/api/map.api'
-import type { NotebookEntryResponse } from '@/notebook/model/notebook.types'
+} from "@/notebook/api/notebook.api";
+import { requestMapOverview } from "@/map/api/map.api";
+import type { NotebookEntryResponse } from "@/notebook/model/notebook.types";
 
-let pinia: ReturnType<typeof createPinia>
+let pinia: ReturnType<typeof createPinia>;
 
 function notebookEntry(
   overrides: Partial<NotebookEntryResponse> = {},
@@ -24,319 +24,319 @@ function notebookEntry(
     pupilUserId: 42,
     classroomId: 7,
     stopId: 9,
-    sourceType: 'PUPIL',
-    title: 'Reflection',
-    content: 'Needs review',
+    sourceType: "PUPIL",
+    title: "Reflection",
+    content: "Needs review",
     createdAt: null,
     updatedAt: null,
     ...overrides,
-  }
+  };
 }
 
 function visibleEntryText(wrapper: ReturnType<typeof mount>) {
   return wrapper
     .findAllComponents(NotebookEntryComponent)
     .map((entryWrapper) => entryWrapper.text())
-    .join('\n')
+    .join("\n");
 }
 
-vi.mock('@/map/api/map.api', () => ({
+vi.mock("@/map/api/map.api", () => ({
   requestMapOverview: vi.fn(),
-}))
+}));
 
-vi.mock('@/notebook/api/notebook.api', () => ({
+vi.mock("@/notebook/api/notebook.api", () => ({
   requestCreateNotebookEntry: vi.fn(),
   requestDeleteNotebookEntry: vi.fn(),
   requestNotebookEntries: vi.fn(),
   requestTeacherDeleteNotebookEntry: vi.fn(),
   requestTeacherNotebookEntries: vi.fn(),
-}))
+}));
 
-describe('NotebookComponent teacher review mode', () => {
+describe("NotebookComponent teacher review mode", () => {
   beforeEach(() => {
-    vi.clearAllMocks()
-    pinia = createPinia()
-    setActivePinia(pinia)
-    const authStore = useAuthStore(pinia)
-    authStore.status = 'authenticated'
-    authStore.accessToken = 'access-token'
+    vi.clearAllMocks();
+    pinia = createPinia();
+    setActivePinia(pinia);
+    const authStore = useAuthStore(pinia);
+    authStore.status = "authenticated";
+    authStore.accessToken = "access-token";
     authStore.user = {
-      subject: 'teacher-1',
-      portalType: 'TEACHER',
-      email: 'teacher@example.com',
+      subject: "teacher-1",
+      portalType: "TEACHER",
+      email: "teacher@example.com",
       username: null,
       authorities: [],
       pupilProfile: null,
       teacherProfile: null,
-    }
+    };
 
     vi.mocked(requestMapOverview).mockResolvedValue([
       {
         stopId: 9,
-        slug: 'intro',
-        title: 'Intro',
+        slug: "intro",
+        title: "Intro",
         category: null,
         displayOrder: 1,
         isFinalBoss: false,
-        status: 'NOT_STARTED',
+        status: "NOT_STARTED",
         stars: 0,
         medalAwarded: false,
       },
-    ])
+    ]);
     vi.mocked(requestTeacherNotebookEntries).mockResolvedValue([
       notebookEntry(),
-    ])
-    vi.mocked(requestTeacherDeleteNotebookEntry).mockResolvedValue(undefined)
-  })
+    ]);
+    vi.mocked(requestTeacherDeleteNotebookEntry).mockResolvedValue(undefined);
+  });
 
-  it('loads teacher-scoped entries and hides the create form', async () => {
+  it("loads teacher-scoped entries and hides the create form", async () => {
     const wrapper = mount(NotebookComponent, {
       props: {
-        mode: 'teacher',
+        mode: "teacher",
         classroomId: 7,
         pupilId: 42,
       },
       global: {
         plugins: [pinia, createAppI18n()],
       },
-    })
+    });
 
-    await flushPromises()
+    await flushPromises();
 
     expect(requestTeacherNotebookEntries).toHaveBeenCalledWith(
-      'Bearer access-token',
+      "Bearer access-token",
       7,
       42,
-    )
-    expect(wrapper.text()).toContain('Reflection')
-    expect(wrapper.find('form').exists()).toBe(false)
-  })
+    );
+    expect(wrapper.text()).toContain("Reflection");
+    expect(wrapper.find("form").exists()).toBe(false);
+  });
 
-  it('deletes entries through the teacher endpoint', async () => {
+  it("deletes entries through the teacher endpoint", async () => {
     const wrapper = mount(NotebookComponent, {
       props: {
-        mode: 'teacher',
+        mode: "teacher",
         classroomId: 7,
         pupilId: 42,
       },
       global: {
         plugins: [pinia, createAppI18n()],
       },
-    })
+    });
 
-    await flushPromises()
+    await flushPromises();
     const deleteButton = wrapper
-      .findAll('button')
-      .find((button) => button.text() === 'Slett notat')
-    expect(deleteButton).toBeDefined()
-    await deleteButton?.trigger('click')
-    await flushPromises()
+      .findAll("button")
+      .find((button) => button.text() === "Slett notat");
+    expect(deleteButton).toBeDefined();
+    await deleteButton?.trigger("click");
+    await flushPromises();
 
     expect(requestTeacherDeleteNotebookEntry).toHaveBeenCalledWith(
-      'Bearer access-token',
+      "Bearer access-token",
       7,
       42,
       15,
-    )
-    expect(wrapper.text()).not.toContain('Reflection')
-  })
+    );
+    expect(wrapper.text()).not.toContain("Reflection");
+  });
 
-  it('reloads teacher-scoped entries when the reviewed pupil changes', async () => {
+  it("reloads teacher-scoped entries when the reviewed pupil changes", async () => {
     vi.mocked(requestTeacherNotebookEntries)
       .mockResolvedValueOnce([notebookEntry()])
       .mockResolvedValueOnce([
         notebookEntry({
           id: 16,
           pupilUserId: 99,
-          title: 'Second reflection',
-          content: 'New pupil',
+          title: "Second reflection",
+          content: "New pupil",
         }),
-      ])
+      ]);
 
     const wrapper = mount(NotebookComponent, {
       props: {
-        mode: 'teacher',
+        mode: "teacher",
         classroomId: 7,
         pupilId: 42,
       },
       global: {
         plugins: [pinia, createAppI18n()],
       },
-    })
+    });
 
-    await flushPromises()
-    await wrapper.setProps({ pupilId: 99 })
-    await flushPromises()
+    await flushPromises();
+    await wrapper.setProps({ pupilId: 99 });
+    await flushPromises();
 
     expect(requestTeacherNotebookEntries).toHaveBeenNthCalledWith(
       1,
-      'Bearer access-token',
+      "Bearer access-token",
       7,
       42,
-    )
+    );
     expect(requestTeacherNotebookEntries).toHaveBeenNthCalledWith(
       2,
-      'Bearer access-token',
+      "Bearer access-token",
       7,
       99,
-    )
-    expect(wrapper.text()).toContain('Second reflection')
-    expect(wrapper.text()).not.toContain('Reflection')
-  })
+    );
+    expect(wrapper.text()).toContain("Second reflection");
+    expect(wrapper.text()).not.toContain("Reflection");
+  });
 
-  it('clamps the current page after deleting the last entry on a later page', async () => {
+  it("clamps the current page after deleting the last entry on a later page", async () => {
     vi.mocked(requestTeacherNotebookEntries).mockResolvedValue([
-      notebookEntry({ id: 15, title: 'First note' }),
-      notebookEntry({ id: 16, title: 'Second note' }),
-      notebookEntry({ id: 17, title: 'Third note' }),
-      notebookEntry({ id: 18, title: 'Fourth note' }),
-    ])
+      notebookEntry({ id: 15, title: "First note" }),
+      notebookEntry({ id: 16, title: "Second note" }),
+      notebookEntry({ id: 17, title: "Third note" }),
+      notebookEntry({ id: 18, title: "Fourth note" }),
+    ]);
 
     const wrapper = mount(NotebookComponent, {
       props: {
-        mode: 'teacher',
+        mode: "teacher",
         classroomId: 7,
         pupilId: 42,
       },
       global: {
         plugins: [pinia, createAppI18n()],
       },
-    })
+    });
 
-    await flushPromises()
+    await flushPromises();
 
     const nextButton = wrapper
-      .findAll('button')
-      .find((button) => button.text() === 'Neste side')
-    expect(nextButton).toBeDefined()
-    await nextButton?.trigger('click')
-    await flushPromises()
+      .findAll("button")
+      .find((button) => button.text() === "Neste side");
+    expect(nextButton).toBeDefined();
+    await nextButton?.trigger("click");
+    await flushPromises();
 
-    expect(wrapper.text()).toContain('Side 2 av 2')
-    expect(wrapper.text()).toContain('Fourth note')
+    expect(wrapper.text()).toContain("Side 2 av 2");
+    expect(wrapper.text()).toContain("Fourth note");
 
     const deleteButton = wrapper
-      .findAll('button')
-      .find((button) => button.text() === 'Slett notat')
-    expect(deleteButton).toBeDefined()
-    await deleteButton?.trigger('click')
-    await flushPromises()
-
-    expect(wrapper.text()).not.toContain('Side 2 av 2')
-    expect(visibleEntryText(wrapper)).toContain('First note')
-  })
-})
-
-describe('NotebookComponent pupil pagination', () => {
+      .findAll("button")
+      .find((button) => button.text() === "Slett notat");
+    expect(deleteButton).toBeDefined();
+    await deleteButton?.trigger("click");
+    await flushPromises();
+
+    expect(wrapper.text()).not.toContain("Side 2 av 2");
+    expect(visibleEntryText(wrapper)).toContain("First note");
+  });
+});
+
+describe("NotebookComponent pupil pagination", () => {
   beforeEach(() => {
-    vi.clearAllMocks()
-    pinia = createPinia()
-    setActivePinia(pinia)
-    const authStore = useAuthStore(pinia)
-    authStore.status = 'authenticated'
-    authStore.accessToken = 'access-token'
+    vi.clearAllMocks();
+    pinia = createPinia();
+    setActivePinia(pinia);
+    const authStore = useAuthStore(pinia);
+    authStore.status = "authenticated";
+    authStore.accessToken = "access-token";
     authStore.user = {
-      subject: 'pupil-1',
-      portalType: 'PUPIL',
+      subject: "pupil-1",
+      portalType: "PUPIL",
       email: null,
-      username: 'pupil',
+      username: "pupil",
       authorities: [],
       pupilProfile: {
-        displayName: 'Ada',
+        displayName: "Ada",
         totalXp: 0,
         currentLevel: 1,
         currentClassroomId: 7,
         hasCompletedOnboarding: true,
       },
       teacherProfile: null,
-    }
+    };
 
     vi.mocked(requestMapOverview).mockResolvedValue([
       {
         stopId: 9,
-        slug: 'intro',
-        title: 'Intro',
+        slug: "intro",
+        title: "Intro",
         category: null,
         displayOrder: 1,
         isFinalBoss: false,
-        status: 'NOT_STARTED',
+        status: "NOT_STARTED",
         stars: 0,
         medalAwarded: false,
       },
       {
         stopId: 10,
-        slug: 'market',
-        title: 'Market',
+        slug: "market",
+        title: "Market",
         category: null,
         displayOrder: 2,
         isFinalBoss: false,
-        status: 'NOT_STARTED',
+        status: "NOT_STARTED",
         stars: 0,
         medalAwarded: false,
       },
-    ])
+    ]);
     vi.mocked(requestNotebookEntries).mockResolvedValue([
-      notebookEntry({ id: 21, stopId: 9, title: 'First note' }),
-      notebookEntry({ id: 22, stopId: 9, title: 'Second note' }),
-      notebookEntry({ id: 23, stopId: 9, title: 'Third note' }),
-      notebookEntry({ id: 24, stopId: 9, title: 'Fourth note' }),
-      notebookEntry({ id: 25, stopId: 10, title: 'Market note' }),
-    ])
-    vi.mocked(requestDeleteNotebookEntry).mockResolvedValue(undefined)
-  })
-
-  it('renders many entries across pages and only shows the current page entries', async () => {
+      notebookEntry({ id: 21, stopId: 9, title: "First note" }),
+      notebookEntry({ id: 22, stopId: 9, title: "Second note" }),
+      notebookEntry({ id: 23, stopId: 9, title: "Third note" }),
+      notebookEntry({ id: 24, stopId: 9, title: "Fourth note" }),
+      notebookEntry({ id: 25, stopId: 10, title: "Market note" }),
+    ]);
+    vi.mocked(requestDeleteNotebookEntry).mockResolvedValue(undefined);
+  });
+
+  it("renders many entries across pages and only shows the current page entries", async () => {
     const wrapper = mount(NotebookComponent, {
       global: {
         plugins: [pinia, createAppI18n()],
       },
-    })
+    });
 
-    await flushPromises()
+    await flushPromises();
 
-    expect(wrapper.text()).toContain('Side 1 av 2')
-    expect(visibleEntryText(wrapper)).toContain('First note')
-    expect(visibleEntryText(wrapper)).toContain('Third note')
-    expect(visibleEntryText(wrapper)).not.toContain('Fourth note')
+    expect(wrapper.text()).toContain("Side 1 av 2");
+    expect(visibleEntryText(wrapper)).toContain("First note");
+    expect(visibleEntryText(wrapper)).toContain("Third note");
+    expect(visibleEntryText(wrapper)).not.toContain("Fourth note");
 
     const nextButton = wrapper
-      .findAll('button')
-      .find((button) => button.text() === 'Neste side')
-    expect(nextButton).toBeDefined()
-    await nextButton?.trigger('click')
-    await flushPromises()
-
-    expect(wrapper.text()).toContain('Side 2 av 2')
-    expect(visibleEntryText(wrapper)).toContain('Fourth note')
+      .findAll("button")
+      .find((button) => button.text() === "Neste side");
+    expect(nextButton).toBeDefined();
+    await nextButton?.trigger("click");
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("Side 2 av 2");
+    expect(visibleEntryText(wrapper)).toContain("Fourth note");
     expect(wrapper.find('[data-testid="notebook-create-form"]').exists()).toBe(
       true,
-    )
-    expect(visibleEntryText(wrapper)).not.toContain('First note')
-  })
+    );
+    expect(visibleEntryText(wrapper)).not.toContain("First note");
+  });
 
-  it('does not keep an invalid page when switching map stops', async () => {
+  it("does not keep an invalid page when switching map stops", async () => {
     const wrapper = mount(NotebookComponent, {
       global: {
         plugins: [pinia, createAppI18n()],
       },
-    })
+    });
 
-    await flushPromises()
+    await flushPromises();
 
     const nextButton = wrapper
-      .findAll('button')
-      .find((button) => button.text() === 'Neste side')
-    expect(nextButton).toBeDefined()
-    await nextButton?.trigger('click')
-    await flushPromises()
+      .findAll("button")
+      .find((button) => button.text() === "Neste side");
+    expect(nextButton).toBeDefined();
+    await nextButton?.trigger("click");
+    await flushPromises();
 
     const marketTab = wrapper
-      .findAll('button')
-      .find((button) => button.text().includes('Market'))
-    await marketTab?.trigger('click')
-    await flushPromises()
-
-    expect(wrapper.text()).toContain('Market note')
-    expect(wrapper.text()).not.toContain('Side 2 av 2')
-  })
-})
+      .findAll("button")
+      .find((button) => button.text().includes("Market"));
+    await marketTab?.trigger("click");
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("Market note");
+    expect(wrapper.text()).not.toContain("Side 2 av 2");
+  });
+});
diff --git a/src/notebook/model/notebook.types.ts b/src/notebook/model/notebook.types.ts
index 463f963a..28dac780 100644
--- a/src/notebook/model/notebook.types.ts
+++ b/src/notebook/model/notebook.types.ts
@@ -1,28 +1,28 @@
-export type NotebookSourceType = 'GAME' | 'PUPIL'
+export type NotebookSourceType = "GAME" | "PUPIL";
 
 export interface NotebookEntryResponse {
-  id: number
-  pupilUserId: number
-  classroomId: number
-  stopId: number
-  sourceType: NotebookSourceType
-  title: string
-  content: string
-  createdAt: string | null
-  updatedAt: string | null
+  id: number;
+  pupilUserId: number;
+  classroomId: number;
+  stopId: number;
+  sourceType: NotebookSourceType;
+  title: string;
+  content: string;
+  createdAt: string | null;
+  updatedAt: string | null;
 }
 
 export interface CreateNotebookEntryPayload {
-  classroomId: number
-  stopId: number
-  sourceType: NotebookSourceType
-  title: string
-  content: string
+  classroomId: number;
+  stopId: number;
+  sourceType: NotebookSourceType;
+  title: string;
+  content: string;
 }
 
 export interface UpdateNotebookEntryPayload {
-  title: string
-  content: string
+  title: string;
+  content: string;
 }
 
-export type NotebookStatus = 'idle' | 'loading' | 'saving' | 'ready' | 'error'
+export type NotebookStatus = "idle" | "loading" | "saving" | "ready" | "error";
diff --git a/src/notebook/pages/NotebookPage.vue b/src/notebook/pages/NotebookPage.vue
index 599e1ab3..a144c5b2 100644
--- a/src/notebook/pages/NotebookPage.vue
+++ b/src/notebook/pages/NotebookPage.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import NotebookComponent from '@/notebook/components/NotebookComponent.vue'
-import { useI18n } from 'vue-i18n'
-
+import NotebookComponent from "@/notebook/components/NotebookComponent.vue";
+import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
 </script>
@@ -9,7 +8,7 @@ const { t } = useI18n();
 <template>
   <div class="flex h-screen flex-col items-center justify-center">
     <h1 class="font-display text-4xl font-bold text-gray-900">
-      {{ t('pages.notebook') }}
+      {{ t("pages.notebook") }}
     </h1>
     <NotebookComponent />
   </div>
diff --git a/src/notebook/pages/TeacherPupilNotebookPage.vue b/src/notebook/pages/TeacherPupilNotebookPage.vue
index fb29d6c4..08e2071e 100644
--- a/src/notebook/pages/TeacherPupilNotebookPage.vue
+++ b/src/notebook/pages/TeacherPupilNotebookPage.vue
@@ -1,28 +1,30 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import NotebookComponent from '@/notebook/components/NotebookComponent.vue'
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
+import NotebookComponent from "@/notebook/components/NotebookComponent.vue";
 
-const route = useRoute()
-const { t } = useI18n()
+const route = useRoute();
+const { t } = useI18n();
 
 function routeNumberParam(value: string | string[] | undefined) {
-  const rawValue = Array.isArray(value) ? value[0] : value
-  const parsedValue = Number(rawValue)
-  return Number.isFinite(parsedValue) ? parsedValue : null
+  const rawValue = Array.isArray(value) ? value[0] : value;
+  const parsedValue = Number(rawValue);
+  return Number.isFinite(parsedValue) ? parsedValue : null;
 }
 
-const classroomId = computed(() => routeNumberParam(route.params.classroomId))
-const pupilId = computed(() => routeNumberParam(route.params.pupilId))
+const classroomId = computed(() => routeNumberParam(route.params.classroomId));
+const pupilId = computed(() => routeNumberParam(route.params.pupilId));
 </script>
 
 <template>
-  <div class="mx-auto flex min-h-screen w-full max-w-7xl flex-col gap-6 px-6 py-8">
+  <div
+    class="mx-auto flex min-h-screen w-full max-w-7xl flex-col gap-6 px-6 py-8"
+  >
     <header class="flex justify-center text-center">
       <div>
         <h1 class="text-3xl font-semibold text-zinc-900">
-          {{ t('pages.notebook') }}
+          {{ t("pages.notebook") }}
         </h1>
       </div>
     </header>
diff --git a/src/notebook/routes.ts b/src/notebook/routes.ts
index f5aecb04..17990b55 100644
--- a/src/notebook/routes.ts
+++ b/src/notebook/routes.ts
@@ -8,7 +8,7 @@ export const notebookRoutes: RouteRecordRaw[] = [
     name: "notebook",
     component: NotebookPage,
     meta: {
-      backTarget: { name: 'pupil-home' },
+      backTarget: { name: "pupil-home" },
     },
   },
 ];
diff --git a/src/notifications/__tests__/notifications.filters.spec.ts b/src/notifications/__tests__/notifications.filters.spec.ts
index 5392be77..9ee93f1e 100644
--- a/src/notifications/__tests__/notifications.filters.spec.ts
+++ b/src/notifications/__tests__/notifications.filters.spec.ts
@@ -1,93 +1,93 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from "vitest";
 import {
   buildNotificationRequestParams,
   parseNotificationQuery,
   serializeNotificationQuery,
-} from '@/notifications/notifications.filters'
+} from "@/notifications/notifications.filters";
 
-describe('notifications.filters', () => {
-  it('parses persisted route query state and respects a locked classroom id', () => {
+describe("notifications.filters", () => {
+  it("parses persisted route query state and respects a locked classroom id", () => {
     const state = parseNotificationQuery(
       {
-        q: 'ada',
-        classrooms: '1,2,3',
-        types: 'PUPIL_STUCK,GAME_COMPLETED',
-        pupils: '7,8',
-        unread: '1',
-        window: 'custom',
-        from: '2026-04-20T09:00',
-        to: '2026-04-21T12:00',
-        page: '3',
+        q: "ada",
+        classrooms: "1,2,3",
+        types: "PUPIL_STUCK,GAME_COMPLETED",
+        pupils: "7,8",
+        unread: "1",
+        window: "custom",
+        from: "2026-04-20T09:00",
+        to: "2026-04-21T12:00",
+        page: "3",
       },
       99,
-    )
+    );
 
     expect(state).toEqual({
-      q: 'ada',
+      q: "ada",
       classroomIds: [99],
-      types: ['PUPIL_STUCK', 'GAME_COMPLETED'],
+      types: ["PUPIL_STUCK", "GAME_COMPLETED"],
       pupilUserIds: [7, 8],
       unreadOnly: true,
-      timeWindow: 'custom',
-      from: '2026-04-20T09:00',
-      to: '2026-04-21T12:00',
+      timeWindow: "custom",
+      from: "2026-04-20T09:00",
+      to: "2026-04-21T12:00",
       page: 3,
-    })
-  })
+    });
+  });
 
-  it('serializes query state without persisting locked classroom ids', () => {
+  it("serializes query state without persisting locked classroom ids", () => {
     const query = serializeNotificationQuery(
       {
-        q: 'mystery',
+        q: "mystery",
         classroomIds: [4],
-        types: ['WEEKLY_MYSTERY_SUBMITTED'],
+        types: ["WEEKLY_MYSTERY_SUBMITTED"],
         pupilUserIds: [13],
         unreadOnly: true,
-        timeWindow: '7d',
-        from: '',
-        to: '',
+        timeWindow: "7d",
+        from: "",
+        to: "",
         page: 2,
       },
       4,
-    )
+    );
 
     expect(query).toEqual({
-      q: 'mystery',
-      types: 'WEEKLY_MYSTERY_SUBMITTED',
-      pupils: '13',
-      unread: '1',
-      window: '7d',
-      page: '2',
-    })
-  })
+      q: "mystery",
+      types: "WEEKLY_MYSTERY_SUBMITTED",
+      pupils: "13",
+      unread: "1",
+      window: "7d",
+      page: "2",
+    });
+  });
 
-  it('builds repeated backend request params and converts preset windows to ISO timestamps', () => {
+  it("builds repeated backend request params and converts preset windows to ISO timestamps", () => {
     const params = buildNotificationRequestParams(
       {
-        q: 'completed',
+        q: "completed",
         classroomIds: [10, 20],
-        types: ['MAP_STOP_COMPLETED', 'GAME_COMPLETED'],
+        types: ["MAP_STOP_COMPLETED", "GAME_COMPLETED"],
         pupilUserIds: [31],
         unreadOnly: false,
-        timeWindow: '24h',
-        from: '',
-        to: '',
+        timeWindow: "24h",
+        from: "",
+        to: "",
         page: 1,
       },
       null,
-      new Date('2026-04-23T12:00:00.000Z'),
-    )
+      new Date("2026-04-23T12:00:00.000Z"),
+    );
 
     expect(params).toEqual({
-      q: 'completed',
+      q: "completed",
       classroomIds: [10, 20],
-      types: ['MAP_STOP_COMPLETED', 'GAME_COMPLETED'],
+      types: ["MAP_STOP_COMPLETED", "GAME_COMPLETED"],
       pupilUserIds: [31],
       unreadOnly: false,
-      from: '2026-04-22T12:00:00.000Z',
-      to: '2026-04-23T12:00:00.000Z',
+      from: "2026-04-22T12:00:00.000Z",
+      to: "2026-04-23T12:00:00.000Z",
       page: 1,
       size: 20,
-    })
-  })
-})
+    });
+  });
+});
diff --git a/src/notifications/__tests__/notifications.render.spec.ts b/src/notifications/__tests__/notifications.render.spec.ts
index e95dfc06..6d37a81c 100644
--- a/src/notifications/__tests__/notifications.render.spec.ts
+++ b/src/notifications/__tests__/notifications.render.spec.ts
@@ -1,72 +1,76 @@
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from "vitest";
 import {
   formatNotificationAbsoluteTime,
   formatNotificationRelativeTime,
   getNotificationMessage,
   getNotificationTypeLabel,
-} from '@/notifications/notifications.render'
-import type { NotificationResponse } from '@/notifications/notifications.types'
+} from "@/notifications/notifications.render";
+import type { NotificationResponse } from "@/notifications/notifications.types";
 
 const translate = vi.fn((key: string, args?: Record<string, unknown>) => {
-  if (key === 'notifications.types.PUPIL_STUCK') {
-    return 'Pupil stuck'
+  if (key === "notifications.types.PUPIL_STUCK") {
+    return "Pupil stuck";
   }
 
-  if (key === 'notifications.unknownPupil') {
-    return 'Unknown pupil'
+  if (key === "notifications.unknownPupil") {
+    return "Unknown pupil";
   }
 
-  if (key === 'notifications.unknownStop') {
-    return 'Unknown stop'
+  if (key === "notifications.unknownStop") {
+    return "Unknown stop";
   }
 
-  if (key === 'notifications.unknownTime') {
-    return 'Unknown time'
+  if (key === "notifications.unknownTime") {
+    return "Unknown time";
   }
 
-  if (key === 'notifications.pupil-stuck') {
-    return `${args?.pupilDisplayName} is stuck on ${args?.stopTitle} in ${args?.classroomTitle}.`
+  if (key === "notifications.pupil-stuck") {
+    return `${args?.pupilDisplayName} is stuck on ${args?.stopTitle} in ${args?.classroomTitle}.`;
   }
 
-  return key
-})
+  return key;
+});
 
 const notification: NotificationResponse = {
   id: 1,
   classroomId: 7,
-  classroomTitle: 'Class 7A',
+  classroomTitle: "Class 7A",
   pupilUserId: 15,
-  pupilDisplayName: 'Ada',
-  type: 'PUPIL_STUCK',
-  renderCode: 'notifications.pupil-stuck',
+  pupilDisplayName: "Ada",
+  type: "PUPIL_STUCK",
+  renderCode: "notifications.pupil-stuck",
   renderArgsJson: '{"stopTitle":"Passordbanken"}',
   payloadJson: null,
-  stopTitle: 'Passordbanken',
+  stopTitle: "Passordbanken",
   readAt: null,
   dismissedAt: null,
   resolvedAt: null,
-  createdAt: '2026-04-23T10:00:00.000Z',
-}
+  createdAt: "2026-04-23T10:00:00.000Z",
+};
 
-describe('notifications.render', () => {
-  it('maps notification render codes to translated messages with fallback metadata', () => {
+describe("notifications.render", () => {
+  it("maps notification render codes to translated messages with fallback metadata", () => {
     expect(getNotificationMessage(notification, translate as never)).toBe(
-      'Ada is stuck on Passordbanken in Class 7A.',
-    )
-  })
+      "Ada is stuck on Passordbanken in Class 7A.",
+    );
+  });
 
-  it('formats type labels and relative timestamps', () => {
-    expect(getNotificationTypeLabel('PUPIL_STUCK', translate as never)).toBe('Pupil stuck')
+  it("formats type labels and relative timestamps", () => {
+    expect(getNotificationTypeLabel("PUPIL_STUCK", translate as never)).toBe(
+      "Pupil stuck",
+    );
     expect(
       formatNotificationRelativeTime(
-        '2026-04-23T09:00:00.000Z',
+        "2026-04-23T09:00:00.000Z",
         translate as never,
-        new Date('2026-04-23T10:00:00.000Z'),
+        new Date("2026-04-23T10:00:00.000Z"),
       ),
-    ).toBe('1 hour ago')
-  })
+    ).toBe("1 hour ago");
+  });
 
-  it('formats absolute timestamps for hover labels', () => {
-    expect(formatNotificationAbsoluteTime('2026-04-23T10:00:00.000Z', 'en-GB')).toContain('2026')
-  })
-})
+  it("formats absolute timestamps for hover labels", () => {
+    expect(
+      formatNotificationAbsoluteTime("2026-04-23T10:00:00.000Z", "en-GB"),
+    ).toContain("2026");
+  });
+});
diff --git a/src/notifications/api/__tests__/notifications.api.spec.ts b/src/notifications/api/__tests__/notifications.api.spec.ts
index ffa91a33..6876b900 100644
--- a/src/notifications/api/__tests__/notifications.api.spec.ts
+++ b/src/notifications/api/__tests__/notifications.api.spec.ts
@@ -1,44 +1,44 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from "vitest";
 import {
   buildNotificationsUrl,
   requestUnmuteNotification,
-} from '@/notifications/api/notifications.api'
+} from "@/notifications/api/notifications.api";
 
-describe('notifications.api', () => {
+describe("notifications.api", () => {
   afterEach(() => {
-    vi.restoreAllMocks()
-  })
+    vi.restoreAllMocks();
+  });
 
-  it('builds repeated query params for notification filters', () => {
+  it("builds repeated query params for notification filters", () => {
     const url = buildNotificationsUrl({
       classroomIds: [10, 20],
-      types: ['GAME_COMPLETED', 'PUPIL_STUCK'],
+      types: ["GAME_COMPLETED", "PUPIL_STUCK"],
       pupilUserIds: [3, 4],
-      q: 'ada',
-      from: '2026-04-20T10:00:00.000Z',
-      to: '2026-04-21T10:00:00.000Z',
+      q: "ada",
+      from: "2026-04-20T10:00:00.000Z",
+      to: "2026-04-21T10:00:00.000Z",
       unreadOnly: true,
       page: 2,
       size: 20,
-    })
+    });
 
     expect(url).toBe(
-      '/api/v1/users/me/notifications?classroomIds=10&classroomIds=20&types=GAME_COMPLETED&types=PUPIL_STUCK&pupilUserIds=3&pupilUserIds=4&q=ada&from=2026-04-20T10%3A00%3A00.000Z&to=2026-04-21T10%3A00%3A00.000Z&unreadOnly=true&page=2&size=20',
-    )
-  })
+      "/api/v1/users/me/notifications?classroomIds=10&classroomIds=20&types=GAME_COMPLETED&types=PUPIL_STUCK&pupilUserIds=3&pupilUserIds=4&q=ada&from=2026-04-20T10%3A00%3A00.000Z&to=2026-04-21T10%3A00%3A00.000Z&unreadOnly=true&page=2&size=20",
+    );
+  });
 
-  it('accepts successful empty delete responses when unmuting notifications', async () => {
+  it("accepts successful empty delete responses when unmuting notifications", async () => {
     vi.stubGlobal(
-      'fetch',
+      "fetch",
       vi.fn().mockResolvedValue(
         new Response(null, {
           status: 200,
         }),
       ),
-    )
+    );
 
     await expect(
-      requestUnmuteNotification('Bearer token', 10, 'PUPIL_STUCK'),
-    ).resolves.toBeUndefined()
-  })
-})
+      requestUnmuteNotification("Bearer token", 10, "PUPIL_STUCK"),
+    ).resolves.toBeUndefined();
+  });
+});
diff --git a/src/notifications/api/notifications.api.ts b/src/notifications/api/notifications.api.ts
index 1e1a2d9b..68ed740f 100644
--- a/src/notifications/api/notifications.api.ts
+++ b/src/notifications/api/notifications.api.ts
@@ -5,20 +5,23 @@ import type {
   NotificationResponse,
   NotificationSummaryResponse,
   NotificationType,
-} from '@/notifications/notifications.types'
-import { readJsonErrorMessage } from '@/shared/api/response-errors'
+} from "@/notifications/notifications.types";
+import { readJsonErrorMessage } from "@/shared/api/response-errors";
 
-const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
-const NOTIFICATIONS_BASE = `${API_BASE_URL}/api/v1/users/me/notifications`
+const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? "").replace(
+  /\/$/,
+  "",
+);
+const NOTIFICATIONS_BASE = `${API_BASE_URL}/api/v1/users/me/notifications`;
 
 async function getResponseErrorMessage(response: Response): Promise<string> {
-  const fallbackMessage = `Notification request failed with status ${response.status}.`
-  const errorMessage = await readJsonErrorMessage(response)
+  const fallbackMessage = `Notification request failed with status ${response.status}.`;
+  const errorMessage = await readJsonErrorMessage(response);
 
-  if (errorMessage) return errorMessage
+  if (errorMessage) return errorMessage;
 
-  const text = await response.text().catch(() => '')
-  return text || fallbackMessage
+  const text = await response.text().catch(() => "");
+  return text || fallbackMessage;
 }
 
 async function requestNotification<T>(
@@ -31,49 +34,55 @@ async function requestNotification<T>(
     headers: {
       Authorization: authorizationHeader,
     },
-    credentials: 'include',
-  })
+    credentials: "include",
+  });
 
   if (!response.ok) {
-    throw new Error(await getResponseErrorMessage(response))
+    throw new Error(await getResponseErrorMessage(response));
   }
 
-  const contentLength = response.headers.get('content-length')
-  const contentType = response.headers.get('content-type') ?? ''
+  const contentLength = response.headers.get("content-length");
+  const contentType = response.headers.get("content-type") ?? "";
 
-  if (response.status === 204 || contentLength === '0' || !contentType.includes('application/json')) {
-    return undefined as T
+  if (
+    response.status === 204 ||
+    contentLength === "0" ||
+    !contentType.includes("application/json")
+  ) {
+    return undefined as T;
   }
 
-  return (await response.json()) as T
+  return (await response.json()) as T;
 }
 
 export function buildNotificationsUrl(params: NotificationRequestParams) {
-  const searchParams = new URLSearchParams()
+  const searchParams = new URLSearchParams();
 
-  params.classroomIds.forEach((classroomId) => searchParams.append('classroomIds', String(classroomId)))
-  params.types.forEach((type) => searchParams.append('types', type))
+  params.classroomIds.forEach((classroomId) =>
+    searchParams.append("classroomIds", String(classroomId)),
+  );
+  params.types.forEach((type) => searchParams.append("types", type));
   params.pupilUserIds.forEach((pupilUserId) =>
-    searchParams.append('pupilUserIds', String(pupilUserId)),
-  )
+    searchParams.append("pupilUserIds", String(pupilUserId)),
+  );
 
   if (params.q) {
-    searchParams.set('q', params.q)
+    searchParams.set("q", params.q);
   }
 
   if (params.from) {
-    searchParams.set('from', params.from)
+    searchParams.set("from", params.from);
   }
 
   if (params.to) {
-    searchParams.set('to', params.to)
+    searchParams.set("to", params.to);
   }
 
-  searchParams.set('unreadOnly', params.unreadOnly ? 'true' : 'false')
-  searchParams.set('page', String(params.page))
-  searchParams.set('size', String(params.size))
+  searchParams.set("unreadOnly", params.unreadOnly ? "true" : "false");
+  searchParams.set("page", String(params.page));
+  searchParams.set("size", String(params.size));
 
-  return `${NOTIFICATIONS_BASE}?${searchParams.toString()}`
+  return `${NOTIFICATIONS_BASE}?${searchParams.toString()}`;
 }
 
 export function requestNotifications(
@@ -83,14 +92,14 @@ export function requestNotifications(
   return requestNotification<NotificationPageResponse>(
     buildNotificationsUrl(params),
     authorizationHeader,
-  )
+  );
 }
 
 export function requestNotificationSummary(authorizationHeader: string) {
   return requestNotification<NotificationSummaryResponse>(
     `${NOTIFICATIONS_BASE}/summary`,
     authorizationHeader,
-  )
+  );
 }
 
 export function requestMarkNotificationRead(
@@ -101,9 +110,9 @@ export function requestMarkNotificationRead(
     `${NOTIFICATIONS_BASE}/${notificationId}/read`,
     authorizationHeader,
     {
-      method: 'PATCH',
+      method: "PATCH",
     },
-  )
+  );
 }
 
 export function requestDismissNotification(
@@ -114,16 +123,16 @@ export function requestDismissNotification(
     `${NOTIFICATIONS_BASE}/${notificationId}/dismiss`,
     authorizationHeader,
     {
-      method: 'PATCH',
+      method: "PATCH",
     },
-  )
+  );
 }
 
 export function requestNotificationMutes(authorizationHeader: string) {
   return requestNotification<NotificationMuteResponse[]>(
     `${NOTIFICATIONS_BASE}/mutes`,
     authorizationHeader,
-  )
+  );
 }
 
 export function requestMuteNotification(
@@ -135,9 +144,9 @@ export function requestMuteNotification(
     `${NOTIFICATIONS_BASE}/mutes/${classroomId}/${type}`,
     authorizationHeader,
     {
-      method: 'PUT',
+      method: "PUT",
     },
-  )
+  );
 }
 
 export function requestUnmuteNotification(
@@ -149,7 +158,7 @@ export function requestUnmuteNotification(
     `${NOTIFICATIONS_BASE}/mutes/${classroomId}/${type}`,
     authorizationHeader,
     {
-      method: 'DELETE',
+      method: "DELETE",
     },
-  )
+  );
 }
diff --git a/src/notifications/components/NotificationsComponent.vue b/src/notifications/components/NotificationsComponent.vue
index ac74a3f9..b4a7344b 100644
--- a/src/notifications/components/NotificationsComponent.vue
+++ b/src/notifications/components/NotificationsComponent.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { toRef } from 'vue'
-import NotificationsFiltersCard from '@/notifications/components/NotificationsFiltersCard.vue'
-import NotificationsListCard from '@/notifications/components/NotificationsListCard.vue'
-import NotificationsMuteCard from '@/notifications/components/NotificationsMuteCard.vue'
-import { useNotificationsInbox } from '@/notifications/composables/useNotificationsInbox'
+import { toRef } from "vue";
+import NotificationsFiltersCard from "@/notifications/components/NotificationsFiltersCard.vue";
+import NotificationsListCard from "@/notifications/components/NotificationsListCard.vue";
+import NotificationsMuteCard from "@/notifications/components/NotificationsMuteCard.vue";
+import { useNotificationsInbox } from "@/notifications/composables/useNotificationsInbox";
 
 const props = defineProps<{
-  lockedClassroomId?: number | null
-}>()
+  lockedClassroomId?: number | null;
+}>();
 
 const {
   notificationTypes,
@@ -48,7 +48,7 @@ const {
   markAsRead,
   dismissNotification,
   toggleMute,
-} = useNotificationsInbox(toRef(props, 'lockedClassroomId'))
+} = useNotificationsInbox(toRef(props, "lockedClassroomId"));
 </script>
 
 <template>
diff --git a/src/notifications/components/NotificationsFiltersCard.vue b/src/notifications/components/NotificationsFiltersCard.vue
index 25bc8ce2..cddde020 100644
--- a/src/notifications/components/NotificationsFiltersCard.vue
+++ b/src/notifications/components/NotificationsFiltersCard.vue
@@ -1,64 +1,67 @@
 <script setup lang="ts">
-import type { Classroom } from '@/classrooms/api/classrooms.api'
-import { getNotificationTypeLabel } from '@/notifications/notifications.render'
+import type { Classroom } from "@/classrooms/api/classrooms.api";
+import { getNotificationTypeLabel } from "@/notifications/notifications.render";
 import type {
   NotificationPupilOption,
   NotificationQueryState,
   NotificationType,
-} from '@/notifications/notifications.types'
-import { useI18n } from 'vue-i18n'
+} from "@/notifications/notifications.types";
+import { useI18n } from "vue-i18n";
 
 const props = defineProps<{
-  lockedClassroomId?: number | null
-  classroomOptions: Classroom[]
-  pupilOptions: NotificationPupilOption[]
-  notificationTypes: readonly NotificationType[]
-  draftFilters: NotificationQueryState
-  canFilterByPupil: boolean
-  activeFilterCount: number
-  isFiltersExpanded: boolean
-  getClassroomLabel: (classroomId: number) => string
-  getPupilLabel: (pupilUserId: number) => string
-}>()
+  lockedClassroomId?: number | null;
+  classroomOptions: Classroom[];
+  pupilOptions: NotificationPupilOption[];
+  notificationTypes: readonly NotificationType[];
+  draftFilters: NotificationQueryState;
+  canFilterByPupil: boolean;
+  activeFilterCount: number;
+  isFiltersExpanded: boolean;
+  getClassroomLabel: (classroomId: number) => string;
+  getPupilLabel: (pupilUserId: number) => string;
+}>();
 
 const emit = defineEmits<{
-  'update:isFiltersExpanded': [value: boolean]
-  'update:q': [value: string]
-  'update:timeWindow': [value: NotificationQueryState['timeWindow']]
-  'update:unreadOnly': [value: boolean]
-  'update:from': [value: string]
-  'update:to': [value: string]
-  apply: []
-  clear: []
-  toggleClassroom: [classroomId: number]
-  toggleNotificationType: [type: NotificationType]
-  togglePupil: [pupilUserId: number]
-  removeClassroom: [classroomId: number]
-  removeNotificationType: [type: NotificationType]
-  removePupil: [pupilUserId: number]
-}>()
+  "update:isFiltersExpanded": [value: boolean];
+  "update:q": [value: string];
+  "update:timeWindow": [value: NotificationQueryState["timeWindow"]];
+  "update:unreadOnly": [value: boolean];
+  "update:from": [value: string];
+  "update:to": [value: string];
+  apply: [];
+  clear: [];
+  toggleClassroom: [classroomId: number];
+  toggleNotificationType: [type: NotificationType];
+  togglePupil: [pupilUserId: number];
+  removeClassroom: [classroomId: number];
+  removeNotificationType: [type: NotificationType];
+  removePupil: [pupilUserId: number];
+}>();
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 function toggleExpanded() {
-  emit('update:isFiltersExpanded', !props.isFiltersExpanded)
+  emit("update:isFiltersExpanded", !props.isFiltersExpanded);
 }
 
 function onSubmit() {
-  emit('apply')
+  emit("apply");
 }
 </script>
 
 <template>
-  <form class="rounded-2xl border border-slate-200 bg-white/90 p-6 shadow-sm" @submit.prevent="onSubmit">
+  <form
+    class="rounded-2xl border border-slate-200 bg-white/90 p-6 shadow-sm"
+    @submit.prevent="onSubmit"
+  >
     <div class="flex flex-col gap-6">
       <div class="flex flex-wrap items-start justify-between gap-4">
         <div>
           <h2 class="text-lg font-semibold text-slate-900">
-            {{ t('notifications.filters.title') }}
+            {{ t("notifications.filters.title") }}
           </h2>
           <p class="mt-1 text-sm text-slate-600">
-            {{ t('notifications.filters.description') }}
+            {{ t("notifications.filters.description") }}
           </p>
         </div>
 
@@ -70,8 +73,8 @@ function onSubmit() {
           <span>
             {{
               isFiltersExpanded
-                ? t('notifications.filters.collapseAction')
-                : t('notifications.filters.expandAction')
+                ? t("notifications.filters.collapseAction")
+                : t("notifications.filters.expandAction")
             }}
           </span>
           <span
@@ -86,13 +89,15 @@ function onSubmit() {
       <div v-if="isFiltersExpanded" class="flex flex-col gap-6">
         <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
           <label class="flex flex-col gap-2 text-sm font-medium text-slate-700">
-            <span>{{ t('notifications.filters.searchLabel') }}</span>
+            <span>{{ t("notifications.filters.searchLabel") }}</span>
             <input
               :value="draftFilters.q"
               :placeholder="t('notifications.filters.searchPlaceholder')"
               class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
               type="search"
-              @input="emit('update:q', ($event.target as HTMLInputElement).value)"
+              @input="
+                emit('update:q', ($event.target as HTMLInputElement).value)
+              "
             />
           </label>
 
@@ -100,8 +105,10 @@ function onSubmit() {
             v-if="!lockedClassroomId"
             class="flex flex-col gap-2 text-sm font-medium text-slate-700"
           >
-            <span>{{ t('notifications.filters.classroomsLabel') }}</span>
-            <div class="flex min-h-16 flex-wrap items-start gap-2 rounded-xl border border-slate-200 bg-white p-3">
+            <span>{{ t("notifications.filters.classroomsLabel") }}</span>
+            <div
+              class="flex min-h-16 flex-wrap items-start gap-2 rounded-xl border border-slate-200 bg-white p-3"
+            >
               <button
                 v-for="classroom in classroomOptions"
                 :key="classroom.classroomId"
@@ -120,8 +127,10 @@ function onSubmit() {
           </div>
 
           <div class="flex flex-col gap-2 text-sm font-medium text-slate-700">
-            <span>{{ t('notifications.filters.typesLabel') }}</span>
-            <div class="flex min-h-16 flex-wrap items-start gap-2 rounded-xl border border-slate-200 bg-white p-3">
+            <span>{{ t("notifications.filters.typesLabel") }}</span>
+            <div
+              class="flex min-h-16 flex-wrap items-start gap-2 rounded-xl border border-slate-200 bg-white p-3"
+            >
               <button
                 v-for="type in notificationTypes"
                 :key="type"
@@ -140,16 +149,19 @@ function onSubmit() {
           </div>
 
           <div class="flex flex-col gap-2 text-sm font-medium text-slate-700">
-            <span>{{ t('notifications.filters.pupilsLabel') }}</span>
+            <span>{{ t("notifications.filters.pupilsLabel") }}</span>
             <div
               class="flex min-h-16 flex-wrap items-start gap-2 rounded-xl border border-slate-200 bg-white p-3"
               :class="!canFilterByPupil ? 'bg-slate-50 text-slate-400' : ''"
             >
               <span v-if="!canFilterByPupil" class="text-xs">
-                {{ t('notifications.filters.pupilsHint') }}
+                {{ t("notifications.filters.pupilsHint") }}
               </span>
-              <span v-else-if="pupilOptions.length === 0" class="text-xs text-slate-500">
-                {{ t('notifications.filters.noPupilsAvailable') }}
+              <span
+                v-else-if="pupilOptions.length === 0"
+                class="text-xs text-slate-500"
+              >
+                {{ t("notifications.filters.noPupilsAvailable") }}
               </span>
               <button
                 v-for="pupil in pupilOptions"
@@ -169,33 +181,51 @@ function onSubmit() {
           </div>
 
           <label class="flex flex-col gap-2 text-sm font-medium text-slate-700">
-            <span>{{ t('notifications.filters.timeWindowLabel') }}</span>
+            <span>{{ t("notifications.filters.timeWindowLabel") }}</span>
             <select
               :value="draftFilters.timeWindow"
               class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
               @change="
                 emit(
                   'update:timeWindow',
-                  ($event.target as HTMLSelectElement).value as NotificationQueryState['timeWindow'],
+                  ($event.target as HTMLSelectElement)
+                    .value as NotificationQueryState['timeWindow'],
                 )
               "
             >
-              <option value="all">{{ t('notifications.filters.timeWindows.all') }}</option>
-              <option value="24h">{{ t('notifications.filters.timeWindows.24h') }}</option>
-              <option value="7d">{{ t('notifications.filters.timeWindows.7d') }}</option>
-              <option value="30d">{{ t('notifications.filters.timeWindows.30d') }}</option>
-              <option value="custom">{{ t('notifications.filters.timeWindows.custom') }}</option>
+              <option value="all">
+                {{ t("notifications.filters.timeWindows.all") }}
+              </option>
+              <option value="24h">
+                {{ t("notifications.filters.timeWindows.24h") }}
+              </option>
+              <option value="7d">
+                {{ t("notifications.filters.timeWindows.7d") }}
+              </option>
+              <option value="30d">
+                {{ t("notifications.filters.timeWindows.30d") }}
+              </option>
+              <option value="custom">
+                {{ t("notifications.filters.timeWindows.custom") }}
+              </option>
             </select>
           </label>
 
-          <label class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-medium text-slate-700">
+          <label
+            class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-medium text-slate-700"
+          >
             <input
               :checked="draftFilters.unreadOnly"
               class="h-4 w-4 rounded border-slate-300"
               type="checkbox"
-              @change="emit('update:unreadOnly', ($event.target as HTMLInputElement).checked)"
+              @change="
+                emit(
+                  'update:unreadOnly',
+                  ($event.target as HTMLInputElement).checked,
+                )
+              "
             />
-            <span>{{ t('notifications.filters.unreadOnlyLabel') }}</span>
+            <span>{{ t("notifications.filters.unreadOnlyLabel") }}</span>
           </label>
         </div>
 
@@ -241,24 +271,31 @@ function onSubmit() {
           </button>
         </div>
 
-        <div v-if="draftFilters.timeWindow === 'custom'" class="grid gap-4 md:grid-cols-2">
+        <div
+          v-if="draftFilters.timeWindow === 'custom'"
+          class="grid gap-4 md:grid-cols-2"
+        >
           <label class="flex flex-col gap-2 text-sm font-medium text-slate-700">
-            <span>{{ t('notifications.filters.fromLabel') }}</span>
+            <span>{{ t("notifications.filters.fromLabel") }}</span>
             <input
               :value="draftFilters.from"
               class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
               type="datetime-local"
-              @input="emit('update:from', ($event.target as HTMLInputElement).value)"
+              @input="
+                emit('update:from', ($event.target as HTMLInputElement).value)
+              "
             />
           </label>
 
           <label class="flex flex-col gap-2 text-sm font-medium text-slate-700">
-            <span>{{ t('notifications.filters.toLabel') }}</span>
+            <span>{{ t("notifications.filters.toLabel") }}</span>
             <input
               :value="draftFilters.to"
               class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
               type="datetime-local"
-              @input="emit('update:to', ($event.target as HTMLInputElement).value)"
+              @input="
+                emit('update:to', ($event.target as HTMLInputElement).value)
+              "
             />
           </label>
         </div>
@@ -268,14 +305,14 @@ function onSubmit() {
             class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300"
             type="submit"
           >
-            {{ t('notifications.filters.applyAction') }}
+            {{ t("notifications.filters.applyAction") }}
           </button>
           <button
             class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200"
             type="button"
             @click="emit('clear')"
           >
-            {{ t('notifications.filters.clearAction') }}
+            {{ t("notifications.filters.clearAction") }}
           </button>
         </div>
       </div>
diff --git a/src/notifications/components/NotificationsFiltersPanel.vue b/src/notifications/components/NotificationsFiltersPanel.vue
index cfe8925a..a4d7e665 100644
--- a/src/notifications/components/NotificationsFiltersPanel.vue
+++ b/src/notifications/components/NotificationsFiltersPanel.vue
@@ -1,43 +1,46 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import type { Classroom } from '@/classrooms/api/classrooms.api'
-import { getNotificationTypeLabel } from '@/notifications/notifications.render'
+import { useI18n } from "vue-i18n";
+import type { Classroom } from "@/classrooms/api/classrooms.api";
+import { getNotificationTypeLabel } from "@/notifications/notifications.render";
 import {
   notificationTypes,
   type NotificationPupilOption,
   type NotificationQueryState,
   type NotificationType,
-} from '@/notifications/notifications.types'
+} from "@/notifications/notifications.types";
 
 defineProps<{
-  lockedClassroomId?: number | null
-  classroomOptions: Classroom[]
-  pupilOptions: NotificationPupilOption[]
-  draftFilters: NotificationQueryState
-  isExpanded: boolean
-  activeFilterCount: number
-  canFilterByPupil: boolean
-  getClassroomLabel: (classroomId: number) => string
-  toggleClassroom: (classroomId: number) => void
-  toggleNotificationType: (type: NotificationType) => void
-  togglePupil: (pupilUserId: number) => void
-  removeClassroom: (classroomId: number) => void
-  removeNotificationType: (type: NotificationType) => void
-  removePupil: (pupilUserId: number) => void
-  applyFilters: () => void | Promise<void>
-  clearFilters: () => void | Promise<void>
-}>()
+  lockedClassroomId?: number | null;
+  classroomOptions: Classroom[];
+  pupilOptions: NotificationPupilOption[];
+  draftFilters: NotificationQueryState;
+  isExpanded: boolean;
+  activeFilterCount: number;
+  canFilterByPupil: boolean;
+  getClassroomLabel: (classroomId: number) => string;
+  toggleClassroom: (classroomId: number) => void;
+  toggleNotificationType: (type: NotificationType) => void;
+  togglePupil: (pupilUserId: number) => void;
+  removeClassroom: (classroomId: number) => void;
+  removeNotificationType: (type: NotificationType) => void;
+  removePupil: (pupilUserId: number) => void;
+  applyFilters: () => void | Promise<void>;
+  clearFilters: () => void | Promise<void>;
+}>();
 
 const emit = defineEmits<{
-  (event: 'toggleExpanded'): void
-  (event: 'update:q', value: string): void
-  (event: 'update:timeWindow', value: NotificationQueryState['timeWindow']): void
-  (event: 'update:unreadOnly', value: boolean): void
-  (event: 'update:from', value: string): void
-  (event: 'update:to', value: string): void
-}>()
+  (event: "toggleExpanded"): void;
+  (event: "update:q", value: string): void;
+  (
+    event: "update:timeWindow",
+    value: NotificationQueryState["timeWindow"],
+  ): void;
+  (event: "update:unreadOnly", value: boolean): void;
+  (event: "update:from", value: string): void;
+  (event: "update:to", value: string): void;
+}>();
 
-const { t } = useI18n()
+const { t } = useI18n();
 </script>
 
 <template>
@@ -49,10 +52,10 @@ const { t } = useI18n()
       <div class="flex flex-wrap items-start justify-between gap-4">
         <div>
           <h2 class="text-lg font-semibold text-slate-900">
-            {{ t('notifications.filters.title') }}
+            {{ t("notifications.filters.title") }}
           </h2>
           <p class="mt-1 text-sm text-slate-600">
-            {{ t('notifications.filters.description') }}
+            {{ t("notifications.filters.description") }}
           </p>
         </div>
 
@@ -63,8 +66,8 @@ const { t } = useI18n()
         >
           <span>{{
             isExpanded
-              ? t('notifications.filters.collapseAction')
-              : t('notifications.filters.expandAction')
+              ? t("notifications.filters.collapseAction")
+              : t("notifications.filters.expandAction")
           }}</span>
           <span
             v-if="activeFilterCount > 0"
@@ -78,19 +81,26 @@ const { t } = useI18n()
       <div v-if="isExpanded" class="flex flex-col gap-6">
         <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
           <label class="flex flex-col gap-2 text-sm font-medium text-slate-700">
-            <span>{{ t('notifications.filters.searchLabel') }}</span>
+            <span>{{ t("notifications.filters.searchLabel") }}</span>
             <input
               :value="draftFilters.q"
               :placeholder="t('notifications.filters.searchPlaceholder')"
               class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
               type="search"
-              @input="emit('update:q', ($event.target as HTMLInputElement).value)"
+              @input="
+                emit('update:q', ($event.target as HTMLInputElement).value)
+              "
             />
           </label>
 
-          <div v-if="!lockedClassroomId" class="flex flex-col gap-2 text-sm font-medium text-slate-700">
-            <span>{{ t('notifications.filters.classroomsLabel') }}</span>
-            <div class="flex min-h-16 flex-wrap items-start gap-2 rounded-xl border border-slate-200 bg-white p-3">
+          <div
+            v-if="!lockedClassroomId"
+            class="flex flex-col gap-2 text-sm font-medium text-slate-700"
+          >
+            <span>{{ t("notifications.filters.classroomsLabel") }}</span>
+            <div
+              class="flex min-h-16 flex-wrap items-start gap-2 rounded-xl border border-slate-200 bg-white p-3"
+            >
               <button
                 v-for="classroom in classroomOptions"
                 :key="classroom.classroomId"
@@ -109,8 +119,10 @@ const { t } = useI18n()
           </div>
 
           <div class="flex flex-col gap-2 text-sm font-medium text-slate-700">
-            <span>{{ t('notifications.filters.typesLabel') }}</span>
-            <div class="flex min-h-16 flex-wrap items-start gap-2 rounded-xl border border-slate-200 bg-white p-3">
+            <span>{{ t("notifications.filters.typesLabel") }}</span>
+            <div
+              class="flex min-h-16 flex-wrap items-start gap-2 rounded-xl border border-slate-200 bg-white p-3"
+            >
               <button
                 v-for="type in notificationTypes"
                 :key="type"
@@ -129,16 +141,19 @@ const { t } = useI18n()
           </div>
 
           <div class="flex flex-col gap-2 text-sm font-medium text-slate-700">
-            <span>{{ t('notifications.filters.pupilsLabel') }}</span>
+            <span>{{ t("notifications.filters.pupilsLabel") }}</span>
             <div
               class="flex min-h-16 flex-wrap items-start gap-2 rounded-xl border border-slate-200 bg-white p-3"
               :class="!canFilterByPupil ? 'bg-slate-50 text-slate-400' : ''"
             >
               <span v-if="!canFilterByPupil" class="text-xs">
-                {{ t('notifications.filters.pupilsHint') }}
+                {{ t("notifications.filters.pupilsHint") }}
               </span>
-              <span v-else-if="pupilOptions.length === 0" class="text-xs text-slate-500">
-                {{ t('notifications.filters.noPupilsAvailable') }}
+              <span
+                v-else-if="pupilOptions.length === 0"
+                class="text-xs text-slate-500"
+              >
+                {{ t("notifications.filters.noPupilsAvailable") }}
               </span>
               <button
                 v-for="pupil in pupilOptions"
@@ -158,33 +173,51 @@ const { t } = useI18n()
           </div>
 
           <label class="flex flex-col gap-2 text-sm font-medium text-slate-700">
-            <span>{{ t('notifications.filters.timeWindowLabel') }}</span>
+            <span>{{ t("notifications.filters.timeWindowLabel") }}</span>
             <select
               :value="draftFilters.timeWindow"
               class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
               @change="
                 emit(
                   'update:timeWindow',
-                  ($event.target as HTMLSelectElement).value as NotificationQueryState['timeWindow'],
+                  ($event.target as HTMLSelectElement)
+                    .value as NotificationQueryState['timeWindow'],
                 )
               "
             >
-              <option value="all">{{ t('notifications.filters.timeWindows.all') }}</option>
-              <option value="24h">{{ t('notifications.filters.timeWindows.24h') }}</option>
-              <option value="7d">{{ t('notifications.filters.timeWindows.7d') }}</option>
-              <option value="30d">{{ t('notifications.filters.timeWindows.30d') }}</option>
-              <option value="custom">{{ t('notifications.filters.timeWindows.custom') }}</option>
+              <option value="all">
+                {{ t("notifications.filters.timeWindows.all") }}
+              </option>
+              <option value="24h">
+                {{ t("notifications.filters.timeWindows.24h") }}
+              </option>
+              <option value="7d">
+                {{ t("notifications.filters.timeWindows.7d") }}
+              </option>
+              <option value="30d">
+                {{ t("notifications.filters.timeWindows.30d") }}
+              </option>
+              <option value="custom">
+                {{ t("notifications.filters.timeWindows.custom") }}
+              </option>
             </select>
           </label>
 
-          <label class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-medium text-slate-700">
+          <label
+            class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-medium text-slate-700"
+          >
             <input
               :checked="draftFilters.unreadOnly"
               class="h-4 w-4 rounded border-slate-300"
               type="checkbox"
-              @change="emit('update:unreadOnly', ($event.target as HTMLInputElement).checked)"
+              @change="
+                emit(
+                  'update:unreadOnly',
+                  ($event.target as HTMLInputElement).checked,
+                )
+              "
             />
-            <span>{{ t('notifications.filters.unreadOnlyLabel') }}</span>
+            <span>{{ t("notifications.filters.unreadOnlyLabel") }}</span>
           </label>
         </div>
 
@@ -225,29 +258,39 @@ const { t } = useI18n()
             type="button"
             @click="removePupil(pupilUserId)"
           >
-            <span>{{ pupilOptions.find((pupil) => pupil.userId === pupilUserId)?.displayName ?? pupilUserId }}</span>
+            <span>{{
+              pupilOptions.find((pupil) => pupil.userId === pupilUserId)
+                ?.displayName ?? pupilUserId
+            }}</span>
             <span aria-hidden="true">×</span>
           </button>
         </div>
 
-        <div v-if="draftFilters.timeWindow === 'custom'" class="grid gap-4 md:grid-cols-2">
+        <div
+          v-if="draftFilters.timeWindow === 'custom'"
+          class="grid gap-4 md:grid-cols-2"
+        >
           <label class="flex flex-col gap-2 text-sm font-medium text-slate-700">
-            <span>{{ t('notifications.filters.fromLabel') }}</span>
+            <span>{{ t("notifications.filters.fromLabel") }}</span>
             <input
               :value="draftFilters.from"
               class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
               type="datetime-local"
-              @input="emit('update:from', ($event.target as HTMLInputElement).value)"
+              @input="
+                emit('update:from', ($event.target as HTMLInputElement).value)
+              "
             />
           </label>
 
           <label class="flex flex-col gap-2 text-sm font-medium text-slate-700">
-            <span>{{ t('notifications.filters.toLabel') }}</span>
+            <span>{{ t("notifications.filters.toLabel") }}</span>
             <input
               :value="draftFilters.to"
               class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
               type="datetime-local"
-              @input="emit('update:to', ($event.target as HTMLInputElement).value)"
+              @input="
+                emit('update:to', ($event.target as HTMLInputElement).value)
+              "
             />
           </label>
         </div>
@@ -257,14 +300,14 @@ const { t } = useI18n()
             class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300"
             type="submit"
           >
-            {{ t('notifications.filters.applyAction') }}
+            {{ t("notifications.filters.applyAction") }}
           </button>
           <button
             class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200"
             type="button"
             @click="clearFilters"
           >
-            {{ t('notifications.filters.clearAction') }}
+            {{ t("notifications.filters.clearAction") }}
           </button>
         </div>
       </div>
diff --git a/src/notifications/components/NotificationsListCard.vue b/src/notifications/components/NotificationsListCard.vue
index ecdc7de9..4b292895 100644
--- a/src/notifications/components/NotificationsListCard.vue
+++ b/src/notifications/components/NotificationsListCard.vue
@@ -1,49 +1,51 @@
 <script setup lang="ts">
-import type { Classroom } from '@/classrooms/api/classrooms.api'
+import type { Classroom } from "@/classrooms/api/classrooms.api";
 import {
   formatNotificationAbsoluteTime,
   formatNotificationRelativeTime,
   getNotificationMessage,
   getNotificationTypeLabel,
-} from '@/notifications/notifications.render'
+} from "@/notifications/notifications.render";
 import type {
   NotificationLoadStatus,
   NotificationResponse,
-} from '@/notifications/notifications.types'
-import { useI18n } from 'vue-i18n'
+} from "@/notifications/notifications.types";
+import { useI18n } from "vue-i18n";
 
 defineProps<{
-  lockedClassroom: Classroom | null
-  unreadCount: number
-  referenceStatus: NotificationLoadStatus
-  inboxStatus: NotificationLoadStatus
-  referenceErrorMessage: string | null
-  inboxErrorMessage: string | null
-  actionErrorMessage: string | null
-  visibleNotifications: NotificationResponse[]
-  currentPage: number
-  pageCount: number
-  totalElements: number
-  activeNotificationId: number | null
-}>()
+  lockedClassroom: Classroom | null;
+  unreadCount: number;
+  referenceStatus: NotificationLoadStatus;
+  inboxStatus: NotificationLoadStatus;
+  referenceErrorMessage: string | null;
+  inboxErrorMessage: string | null;
+  actionErrorMessage: string | null;
+  visibleNotifications: NotificationResponse[];
+  currentPage: number;
+  pageCount: number;
+  totalElements: number;
+  activeNotificationId: number | null;
+}>();
 
 const emit = defineEmits<{
-  markAsRead: [notificationId: number]
-  dismissNotification: [notificationId: number]
-  goToPage: [page: number]
-}>()
+  markAsRead: [notificationId: number];
+  dismissNotification: [notificationId: number];
+  goToPage: [page: number];
+}>();
 
-const { locale, t } = useI18n()
+const { locale, t } = useI18n();
 </script>
 
 <template>
-  <section class="rounded-2xl border border-slate-200 bg-white/90 p-6 shadow-sm">
+  <section
+    class="rounded-2xl border border-slate-200 bg-white/90 p-6 shadow-sm"
+  >
     <div class="flex flex-col gap-4">
       <div class="flex flex-wrap items-start justify-between gap-3">
         <div class="flex flex-col gap-1">
           <div class="flex flex-wrap items-center gap-3">
             <h2 class="text-lg font-semibold text-slate-900">
-              {{ t('notifications.listTitle') }}
+              {{ t("notifications.listTitle") }}
             </h2>
             <span
               v-if="lockedClassroom"
@@ -53,21 +55,26 @@ const { locale, t } = useI18n()
             </span>
           </div>
           <p class="text-sm text-slate-600">
-            {{ t('notifications.listDescription') }}
+            {{ t("notifications.listDescription") }}
           </p>
         </div>
 
         <div
           class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-medium text-slate-700"
         >
-          <span>{{ t('notifications.summaryLabel') }}</span>
-          <span class="rounded-full bg-slate-900 px-2.5 py-1 text-xs font-semibold text-white">
+          <span>{{ t("notifications.summaryLabel") }}</span>
+          <span
+            class="rounded-full bg-slate-900 px-2.5 py-1 text-xs font-semibold text-white"
+          >
             {{ unreadCount }}
           </span>
         </div>
       </div>
 
-      <p v-if="referenceStatus === 'error' && referenceErrorMessage" class="text-sm text-red-600">
+      <p
+        v-if="referenceStatus === 'error' && referenceErrorMessage"
+        class="text-sm text-red-600"
+      >
         {{ referenceErrorMessage }}
       </p>
       <p v-if="actionErrorMessage" class="text-sm text-red-600">
@@ -78,7 +85,7 @@ const { locale, t } = useI18n()
         v-if="inboxStatus === 'loading'"
         class="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-4 py-8 text-center text-sm text-slate-600"
       >
-        {{ t('notifications.loading') }}
+        {{ t("notifications.loading") }}
       </div>
 
       <div
@@ -92,7 +99,7 @@ const { locale, t } = useI18n()
         v-else-if="visibleNotifications.length === 0"
         class="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-4 py-8 text-center text-sm text-slate-600"
       >
-        {{ t('notifications.empty') }}
+        {{ t("notifications.empty") }}
       </div>
 
       <div v-else class="flex flex-col gap-4">
@@ -101,31 +108,42 @@ const { locale, t } = useI18n()
           :key="notification.id"
           class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"
         >
-          <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div
+            class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between"
+          >
             <div class="space-y-1">
               <div class="flex flex-wrap gap-2">
                 <span
                   class="rounded-full px-2.5 py-1 text-xs font-medium"
                   :class="
-                    notification.readAt ? 'bg-slate-100 text-slate-700' : 'bg-sky-50 text-sky-700'
+                    notification.readAt
+                      ? 'bg-slate-100 text-slate-700'
+                      : 'bg-sky-50 text-sky-700'
                   "
                 >
                   {{
-                    notification.readAt ? t('notifications.states.read') : t('notifications.states.unread')
+                    notification.readAt
+                      ? t("notifications.states.read")
+                      : t("notifications.states.unread")
                   }}
                 </span>
                 <span
                   v-if="notification.resolvedAt"
                   class="rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700"
                 >
-                  {{ t('notifications.states.resolved') }}
+                  {{ t("notifications.states.resolved") }}
                 </span>
-                <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-700">
+                <span
+                  class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-700"
+                >
                   {{ getNotificationTypeLabel(notification.type, t) }}
                 </span>
               </div>
 
-              <p v-if="notification.pupilDisplayName" class="text-sm font-medium text-slate-700">
+              <p
+                v-if="notification.pupilDisplayName"
+                class="text-sm font-medium text-slate-700"
+              >
                 {{ notification.pupilDisplayName }}
               </p>
 
@@ -133,15 +151,24 @@ const { locale, t } = useI18n()
                 {{ getNotificationMessage(notification, t) }}
               </p>
 
-              <div class="flex flex-wrap items-center gap-x-3 gap-y-2 text-xs text-slate-600">
+              <div
+                class="flex flex-wrap items-center gap-x-3 gap-y-2 text-xs text-slate-600"
+              >
                 <span class="rounded-full bg-slate-100 px-2.5 py-1">
                   {{ notification.classroomTitle }}
                 </span>
                 <span
                   class="font-medium text-slate-500"
-                  :title="formatNotificationAbsoluteTime(notification.createdAt, locale)"
+                  :title="
+                    formatNotificationAbsoluteTime(
+                      notification.createdAt,
+                      locale,
+                    )
+                  "
                 >
-                  {{ formatNotificationRelativeTime(notification.createdAt, t) }}
+                  {{
+                    formatNotificationRelativeTime(notification.createdAt, t)
+                  }}
                 </span>
               </div>
             </div>
@@ -154,7 +181,7 @@ const { locale, t } = useI18n()
                 type="button"
                 @click="emit('markAsRead', notification.id)"
               >
-                {{ t('notifications.actions.markRead') }}
+                {{ t("notifications.actions.markRead") }}
               </button>
               <button
                 :disabled="activeNotificationId === notification.id"
@@ -162,7 +189,7 @@ const { locale, t } = useI18n()
                 type="button"
                 @click="emit('dismissNotification', notification.id)"
               >
-                {{ t('notifications.actions.dismiss') }}
+                {{ t("notifications.actions.dismiss") }}
               </button>
             </div>
           </div>
@@ -175,7 +202,7 @@ const { locale, t } = useI18n()
       >
         <p class="text-sm text-slate-600">
           {{
-            t('notifications.paginationLabel', {
+            t("notifications.paginationLabel", {
               page: currentPage + 1,
               totalPages: pageCount,
               totalItems: totalElements,
@@ -190,7 +217,7 @@ const { locale, t } = useI18n()
             type="button"
             @click="emit('goToPage', currentPage - 1)"
           >
-            {{ t('notifications.pagination.previous') }}
+            {{ t("notifications.pagination.previous") }}
           </button>
           <button
             :disabled="currentPage + 1 >= pageCount"
@@ -198,7 +225,7 @@ const { locale, t } = useI18n()
             type="button"
             @click="emit('goToPage', currentPage + 1)"
           >
-            {{ t('notifications.pagination.next') }}
+            {{ t("notifications.pagination.next") }}
           </button>
         </div>
       </div>
diff --git a/src/notifications/components/NotificationsListPanel.vue b/src/notifications/components/NotificationsListPanel.vue
index ff0f0c2e..dfefde4b 100644
--- a/src/notifications/components/NotificationsListPanel.vue
+++ b/src/notifications/components/NotificationsListPanel.vue
@@ -1,48 +1,53 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
+import { useI18n } from "vue-i18n";
 import {
   formatNotificationAbsoluteTime,
   formatNotificationRelativeTime,
   getNotificationMessage,
   getNotificationTypeLabel,
-} from '@/notifications/notifications.render'
+} from "@/notifications/notifications.render";
 import type {
   NotificationLoadStatus,
   NotificationResponse,
-} from '@/notifications/notifications.types'
+} from "@/notifications/notifications.types";
 
 defineProps<{
-  referenceStatus: NotificationLoadStatus
-  referenceErrorMessage: string | null
-  actionErrorMessage: string | null
-  inboxStatus: NotificationLoadStatus
-  inboxErrorMessage: string | null
-  notifications: NotificationResponse[]
-  currentPage: number
-  pageCount: number
-  totalElements: number
-  activeNotificationId: number | null
-  markAsRead: (notificationId: number) => void | Promise<void>
-  dismissNotification: (notificationId: number) => void | Promise<void>
-  goToPage: (page: number) => void | Promise<void>
-}>()
+  referenceStatus: NotificationLoadStatus;
+  referenceErrorMessage: string | null;
+  actionErrorMessage: string | null;
+  inboxStatus: NotificationLoadStatus;
+  inboxErrorMessage: string | null;
+  notifications: NotificationResponse[];
+  currentPage: number;
+  pageCount: number;
+  totalElements: number;
+  activeNotificationId: number | null;
+  markAsRead: (notificationId: number) => void | Promise<void>;
+  dismissNotification: (notificationId: number) => void | Promise<void>;
+  goToPage: (page: number) => void | Promise<void>;
+}>();
 
-const { locale, t } = useI18n()
+const { locale, t } = useI18n();
 </script>
 
 <template>
-  <section class="rounded-2xl border border-slate-200 bg-white/90 p-6 shadow-sm">
+  <section
+    class="rounded-2xl border border-slate-200 bg-white/90 p-6 shadow-sm"
+  >
     <div class="flex flex-col gap-4">
       <div class="flex flex-col gap-1">
         <h2 class="text-lg font-semibold text-slate-900">
-          {{ t('notifications.listTitle') }}
+          {{ t("notifications.listTitle") }}
         </h2>
         <p class="text-sm text-slate-600">
-          {{ t('notifications.listDescription') }}
+          {{ t("notifications.listDescription") }}
         </p>
       </div>
 
-      <p v-if="referenceStatus === 'error' && referenceErrorMessage" class="text-sm text-red-600">
+      <p
+        v-if="referenceStatus === 'error' && referenceErrorMessage"
+        class="text-sm text-red-600"
+      >
         {{ referenceErrorMessage }}
       </p>
       <p v-if="actionErrorMessage" class="text-sm text-red-600">
@@ -53,7 +58,7 @@ const { locale, t } = useI18n()
         v-if="inboxStatus === 'loading'"
         class="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-4 py-8 text-center text-sm text-slate-600"
       >
-        {{ t('notifications.loading') }}
+        {{ t("notifications.loading") }}
       </div>
 
       <div
@@ -67,7 +72,7 @@ const { locale, t } = useI18n()
         v-else-if="notifications.length === 0"
         class="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-4 py-8 text-center text-sm text-slate-600"
       >
-        {{ t('notifications.empty') }}
+        {{ t("notifications.empty") }}
       </div>
 
       <div v-else class="flex flex-col gap-4">
@@ -76,7 +81,9 @@ const { locale, t } = useI18n()
           :key="notification.id"
           class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"
         >
-          <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div
+            class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between"
+          >
             <div class="space-y-1">
               <div class="flex flex-wrap gap-2">
                 <span
@@ -88,21 +95,28 @@ const { locale, t } = useI18n()
                   "
                 >
                   {{
-                    notification.readAt ? t('notifications.states.read') : t('notifications.states.unread')
+                    notification.readAt
+                      ? t("notifications.states.read")
+                      : t("notifications.states.unread")
                   }}
                 </span>
                 <span
                   v-if="notification.resolvedAt"
                   class="rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700"
                 >
-                  {{ t('notifications.states.resolved') }}
+                  {{ t("notifications.states.resolved") }}
                 </span>
-                <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-700">
+                <span
+                  class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-700"
+                >
                   {{ getNotificationTypeLabel(notification.type, t) }}
                 </span>
               </div>
 
-              <p v-if="notification.pupilDisplayName" class="text-sm font-medium text-slate-700">
+              <p
+                v-if="notification.pupilDisplayName"
+                class="text-sm font-medium text-slate-700"
+              >
                 {{ notification.pupilDisplayName }}
               </p>
 
@@ -116,9 +130,16 @@ const { locale, t } = useI18n()
                 </span>
                 <span
                   class="rounded-full bg-slate-100 px-2.5 py-1"
-                  :title="formatNotificationAbsoluteTime(notification.createdAt, locale)"
+                  :title="
+                    formatNotificationAbsoluteTime(
+                      notification.createdAt,
+                      locale,
+                    )
+                  "
                 >
-                  {{ formatNotificationRelativeTime(notification.createdAt, t) }}
+                  {{
+                    formatNotificationRelativeTime(notification.createdAt, t)
+                  }}
                 </span>
               </div>
             </div>
@@ -131,7 +152,7 @@ const { locale, t } = useI18n()
                 type="button"
                 @click="markAsRead(notification.id)"
               >
-                {{ t('notifications.actions.markRead') }}
+                {{ t("notifications.actions.markRead") }}
               </button>
               <button
                 :disabled="activeNotificationId === notification.id"
@@ -139,7 +160,7 @@ const { locale, t } = useI18n()
                 type="button"
                 @click="dismissNotification(notification.id)"
               >
-                {{ t('notifications.actions.dismiss') }}
+                {{ t("notifications.actions.dismiss") }}
               </button>
             </div>
           </div>
@@ -152,7 +173,7 @@ const { locale, t } = useI18n()
       >
         <p class="text-sm text-slate-600">
           {{
-            t('notifications.paginationLabel', {
+            t("notifications.paginationLabel", {
               page: currentPage + 1,
               totalPages: pageCount,
               totalItems: totalElements,
@@ -167,7 +188,7 @@ const { locale, t } = useI18n()
             type="button"
             @click="goToPage(currentPage - 1)"
           >
-            {{ t('notifications.pagination.previous') }}
+            {{ t("notifications.pagination.previous") }}
           </button>
           <button
             :disabled="currentPage + 1 >= pageCount"
@@ -175,7 +196,7 @@ const { locale, t } = useI18n()
             type="button"
             @click="goToPage(currentPage + 1)"
           >
-            {{ t('notifications.pagination.next') }}
+            {{ t("notifications.pagination.next") }}
           </button>
         </div>
       </div>
diff --git a/src/notifications/components/NotificationsMuteCard.vue b/src/notifications/components/NotificationsMuteCard.vue
index 61f3c693..282194b7 100644
--- a/src/notifications/components/NotificationsMuteCard.vue
+++ b/src/notifications/components/NotificationsMuteCard.vue
@@ -1,40 +1,42 @@
 <script setup lang="ts">
-import type { Classroom } from '@/classrooms/api/classrooms.api'
-import { getNotificationTypeLabel } from '@/notifications/notifications.render'
-import type { NotificationType } from '@/notifications/notifications.types'
-import { useI18n } from 'vue-i18n'
+import type { Classroom } from "@/classrooms/api/classrooms.api";
+import { getNotificationTypeLabel } from "@/notifications/notifications.render";
+import type { NotificationType } from "@/notifications/notifications.types";
+import { useI18n } from "vue-i18n";
 
 const props = defineProps<{
-  selectedMuteClassroomId: number | null
-  selectedMuteClassroom: Classroom | null
-  notificationTypes: readonly NotificationType[]
-  activeMuteType: NotificationType | null
-  isExpanded: boolean
-  isMuted: (classroomId: number, type: NotificationType) => boolean
-}>()
+  selectedMuteClassroomId: number | null;
+  selectedMuteClassroom: Classroom | null;
+  notificationTypes: readonly NotificationType[];
+  activeMuteType: NotificationType | null;
+  isExpanded: boolean;
+  isMuted: (classroomId: number, type: NotificationType) => boolean;
+}>();
 
 const emit = defineEmits<{
-  'update:isExpanded': [value: boolean]
-  toggleMute: [type: NotificationType]
-}>()
+  "update:isExpanded": [value: boolean];
+  toggleMute: [type: NotificationType];
+}>();
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 function toggleExpanded() {
-  emit('update:isExpanded', !props.isExpanded)
+  emit("update:isExpanded", !props.isExpanded);
 }
 </script>
 
 <template>
-  <section class="rounded-2xl border border-slate-200 bg-white/90 p-6 shadow-sm">
+  <section
+    class="rounded-2xl border border-slate-200 bg-white/90 p-6 shadow-sm"
+  >
     <div class="flex flex-col gap-4">
       <div class="flex flex-wrap items-start justify-between gap-4">
         <div>
           <h2 class="text-lg font-semibold text-slate-900">
-            {{ t('notifications.mutes.title') }}
+            {{ t("notifications.mutes.title") }}
           </h2>
           <p class="mt-1 text-sm text-slate-600">
-            {{ t('notifications.mutes.description') }}
+            {{ t("notifications.mutes.description") }}
           </p>
         </div>
 
@@ -46,8 +48,8 @@ function toggleExpanded() {
           <span>
             {{
               isExpanded
-                ? t('notifications.mutes.collapseAction')
-                : t('notifications.mutes.expandAction')
+                ? t("notifications.mutes.collapseAction")
+                : t("notifications.mutes.expandAction")
             }}
           </span>
         </button>
@@ -71,12 +73,14 @@ function toggleExpanded() {
             type="button"
             @click="emit('toggleMute', type)"
           >
-            <span class="font-medium">{{ getNotificationTypeLabel(type, t) }}</span>
+            <span class="font-medium">{{
+              getNotificationTypeLabel(type, t)
+            }}</span>
             <span class="text-xs">
               {{
                 isMuted(selectedMuteClassroomId, type)
-                  ? t('notifications.mutes.mutedLabel')
-                  : t('notifications.mutes.activeLabel')
+                  ? t("notifications.mutes.mutedLabel")
+                  : t("notifications.mutes.activeLabel")
               }}
             </span>
           </button>
@@ -86,7 +90,7 @@ function toggleExpanded() {
           v-else
           class="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-600"
         >
-          {{ t('notifications.mutes.selectSingleClassroomHint') }}
+          {{ t("notifications.mutes.selectSingleClassroomHint") }}
         </div>
       </div>
     </div>
diff --git a/src/notifications/components/NotificationsMutePanel.vue b/src/notifications/components/NotificationsMutePanel.vue
index c548b2e3..f3cb0583 100644
--- a/src/notifications/components/NotificationsMutePanel.vue
+++ b/src/notifications/components/NotificationsMutePanel.vue
@@ -1,29 +1,34 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import type { Classroom } from '@/classrooms/api/classrooms.api'
-import { getNotificationTypeLabel } from '@/notifications/notifications.render'
-import { notificationTypes, type NotificationType } from '@/notifications/notifications.types'
+import { useI18n } from "vue-i18n";
+import type { Classroom } from "@/classrooms/api/classrooms.api";
+import { getNotificationTypeLabel } from "@/notifications/notifications.render";
+import {
+  notificationTypes,
+  type NotificationType,
+} from "@/notifications/notifications.types";
 
 defineProps<{
-  selectedMuteClassroomId: number | null
-  selectedMuteClassroom: Classroom | null
-  activeMuteType: NotificationType | null
-  isMuted: (classroomId: number, type: NotificationType) => boolean
-  toggleMute: (type: NotificationType) => void | Promise<void>
-}>()
+  selectedMuteClassroomId: number | null;
+  selectedMuteClassroom: Classroom | null;
+  activeMuteType: NotificationType | null;
+  isMuted: (classroomId: number, type: NotificationType) => boolean;
+  toggleMute: (type: NotificationType) => void | Promise<void>;
+}>();
 
-const { t } = useI18n()
+const { t } = useI18n();
 </script>
 
 <template>
-  <section class="rounded-2xl border border-slate-200 bg-white/90 p-6 shadow-sm">
+  <section
+    class="rounded-2xl border border-slate-200 bg-white/90 p-6 shadow-sm"
+  >
     <div class="flex flex-col gap-4">
       <div>
         <h2 class="text-lg font-semibold text-slate-900">
-          {{ t('notifications.mutes.title') }}
+          {{ t("notifications.mutes.title") }}
         </h2>
         <p class="mt-1 text-sm text-slate-600">
-          {{ t('notifications.mutes.description') }}
+          {{ t("notifications.mutes.description") }}
         </p>
       </div>
 
@@ -44,12 +49,14 @@ const { t } = useI18n()
           type="button"
           @click="toggleMute(type)"
         >
-          <span class="font-medium">{{ getNotificationTypeLabel(type, t) }}</span>
+          <span class="font-medium">{{
+            getNotificationTypeLabel(type, t)
+          }}</span>
           <span class="text-xs">
             {{
               isMuted(selectedMuteClassroomId, type)
-                ? t('notifications.mutes.mutedLabel')
-                : t('notifications.mutes.activeLabel')
+                ? t("notifications.mutes.mutedLabel")
+                : t("notifications.mutes.activeLabel")
             }}
           </span>
         </button>
@@ -59,7 +66,7 @@ const { t } = useI18n()
         v-else
         class="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-600"
       >
-        {{ t('notifications.mutes.selectSingleClassroomHint') }}
+        {{ t("notifications.mutes.selectSingleClassroomHint") }}
       </div>
     </div>
   </section>
diff --git a/src/notifications/composables/useNotificationsInbox.ts b/src/notifications/composables/useNotificationsInbox.ts
index b6c4aad3..1554b028 100644
--- a/src/notifications/composables/useNotificationsInbox.ts
+++ b/src/notifications/composables/useNotificationsInbox.ts
@@ -1,13 +1,13 @@
-import { computed, reactive, ref, watch, type Ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { computed, reactive, ref, watch, type Ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
 import {
   getClassroomDetail,
   getClassrooms,
   type Classroom,
   type ClassroomDetailResponse,
-} from '@/classrooms/api/classrooms.api'
-import { useAuthStore } from '@/auth/model/auth.store'
+} from "@/classrooms/api/classrooms.api";
+import { useAuthStore } from "@/auth/model/auth.store";
 import {
   requestDismissNotification,
   requestMarkNotificationRead,
@@ -16,13 +16,13 @@ import {
   requestNotifications,
   requestNotificationSummary,
   requestUnmuteNotification,
-} from '@/notifications/api/notifications.api'
+} from "@/notifications/api/notifications.api";
 import {
   buildNotificationRequestParams,
   defaultNotificationQueryState,
   parseNotificationQuery,
   serializeNotificationQuery,
-} from '@/notifications/notifications.filters'
+} from "@/notifications/notifications.filters";
 import {
   notificationTypes,
   type NotificationLoadStatus,
@@ -32,82 +32,99 @@ import {
   type NotificationQueryState,
   type NotificationSummaryResponse,
   type NotificationType,
-} from '@/notifications/notifications.types'
-
-export function useNotificationsInbox(lockedClassroomId: Ref<number | null | undefined>) {
-  const route = useRoute()
-  const router = useRouter()
-  const authStore = useAuthStore()
-  const { locale, t } = useI18n()
-
-  const classroomOptions = ref<Classroom[]>([])
-  const pupilOptions = ref<NotificationPupilOption[]>([])
-  const notificationPage = ref<NotificationPageResponse | null>(null)
-  const summary = ref<NotificationSummaryResponse>({ unreadCount: 0 })
-  const mutes = ref<NotificationMuteResponse[]>([])
-  const inboxStatus = ref<NotificationLoadStatus>('idle')
-  const referenceStatus = ref<NotificationLoadStatus>('idle')
-  const inboxErrorMessage = ref<string | null>(null)
-  const referenceErrorMessage = ref<string | null>(null)
-  const actionErrorMessage = ref<string | null>(null)
-  const activeNotificationId = ref<number | null>(null)
-  const activeMuteType = ref<NotificationType | null>(null)
-  const isFiltersExpanded = ref(false)
-  const isMutesExpanded = ref(false)
-
-  const classroomDetailCache = new Map<number, ClassroomDetailResponse>()
-  const draftFilters = reactive(defaultNotificationQueryState())
-
-  let inboxRequestToken = 0
-  let pupilRequestToken = 0
+} from "@/notifications/notifications.types";
+
+export function useNotificationsInbox(
+  lockedClassroomId: Ref<number | null | undefined>,
+) {
+  const route = useRoute();
+  const router = useRouter();
+  const authStore = useAuthStore();
+  const { locale, t } = useI18n();
+
+  const classroomOptions = ref<Classroom[]>([]);
+  const pupilOptions = ref<NotificationPupilOption[]>([]);
+  const notificationPage = ref<NotificationPageResponse | null>(null);
+  const summary = ref<NotificationSummaryResponse>({ unreadCount: 0 });
+  const mutes = ref<NotificationMuteResponse[]>([]);
+  const inboxStatus = ref<NotificationLoadStatus>("idle");
+  const referenceStatus = ref<NotificationLoadStatus>("idle");
+  const inboxErrorMessage = ref<string | null>(null);
+  const referenceErrorMessage = ref<string | null>(null);
+  const actionErrorMessage = ref<string | null>(null);
+  const activeNotificationId = ref<number | null>(null);
+  const activeMuteType = ref<NotificationType | null>(null);
+  const isFiltersExpanded = ref(false);
+  const isMutesExpanded = ref(false);
+
+  const classroomDetailCache = new Map<number, ClassroomDetailResponse>();
+  const draftFilters = reactive(defaultNotificationQueryState());
+
+  let inboxRequestToken = 0;
+  let pupilRequestToken = 0;
 
   const activeFilters = computed(() =>
     parseNotificationQuery(route.query, lockedClassroomId.value ?? null),
-  )
+  );
 
   const lockedClassroom = computed(() =>
     lockedClassroomId.value ? findClassroom(lockedClassroomId.value) : null,
-  )
+  );
 
   const draftClassroomIds = computed(() =>
-    lockedClassroomId.value ? [lockedClassroomId.value] : draftFilters.classroomIds,
-  )
+    lockedClassroomId.value
+      ? [lockedClassroomId.value]
+      : draftFilters.classroomIds,
+  );
 
   const selectedMuteClassroomId = computed<number | null>(() => {
     if (lockedClassroomId.value) {
-      return lockedClassroomId.value
+      return lockedClassroomId.value;
     }
 
-    return activeFilters.value.classroomIds.length === 1 ? activeFilters.value.classroomIds[0] ?? null : null
-  })
+    return activeFilters.value.classroomIds.length === 1
+      ? (activeFilters.value.classroomIds[0] ?? null)
+      : null;
+  });
 
   const selectedMuteClassroom = computed(() =>
-    selectedMuteClassroomId.value ? findClassroom(selectedMuteClassroomId.value) : null,
-  )
+    selectedMuteClassroomId.value
+      ? findClassroom(selectedMuteClassroomId.value)
+      : null,
+  );
 
-  const canFilterByPupil = computed(() => draftClassroomIds.value.length > 0)
+  const canFilterByPupil = computed(() => draftClassroomIds.value.length > 0);
 
   const activeFilterCount = computed(() => {
-    let count = 0
+    let count = 0;
 
-    if (draftFilters.q.trim()) count += 1
+    if (draftFilters.q.trim()) count += 1;
     if (!lockedClassroomId.value && draftFilters.classroomIds.length > 0) {
-      count += draftFilters.classroomIds.length
+      count += draftFilters.classroomIds.length;
     }
-    if (draftFilters.types.length > 0) count += draftFilters.types.length
-    if (draftFilters.pupilUserIds.length > 0) count += draftFilters.pupilUserIds.length
-    if (draftFilters.timeWindow !== 'all') count += 1
-    if (draftFilters.unreadOnly) count += 1
-
-    return count
-  })
-
-  const visibleNotifications = computed(() => notificationPage.value?.items ?? [])
-  const currentPage = computed(() => notificationPage.value?.page ?? activeFilters.value.page)
-  const pageCount = computed(() => notificationPage.value?.totalPages ?? 0)
-  const totalElements = computed(() => notificationPage.value?.totalElements ?? 0)
-
-  function cloneFilters(source: NotificationQueryState): NotificationQueryState {
+    if (draftFilters.types.length > 0) count += draftFilters.types.length;
+    if (draftFilters.pupilUserIds.length > 0)
+      count += draftFilters.pupilUserIds.length;
+    if (draftFilters.timeWindow !== "all") count += 1;
+    if (draftFilters.unreadOnly) count += 1;
+
+    return count;
+  });
+
+  const visibleNotifications = computed(
+    () => notificationPage.value?.items ?? [],
+  );
+  const currentPage = computed(
+    () => notificationPage.value?.page ?? activeFilters.value.page,
+  );
+  const pageCount = computed(() => notificationPage.value?.totalPages ?? 0);
+  const totalElements = computed(
+    () => notificationPage.value?.totalElements ?? 0,
+  );
+
+  function cloneFilters(
+    source: NotificationQueryState,
+  ): NotificationQueryState {
     return {
       q: source.q,
       classroomIds: [...source.classroomIds],
@@ -118,167 +135,189 @@ export function useNotificationsInbox(lockedClassroomId: Ref<number | null | und
       to: source.to,
       unreadOnly: source.unreadOnly,
       page: source.page,
-    }
+    };
   }
 
   function syncDraftFilters() {
-    const nextState = cloneFilters(activeFilters.value)
-    draftFilters.q = nextState.q
-    draftFilters.classroomIds = nextState.classroomIds
-    draftFilters.types = nextState.types
-    draftFilters.pupilUserIds = nextState.pupilUserIds
-    draftFilters.timeWindow = nextState.timeWindow
-    draftFilters.from = nextState.from
-    draftFilters.to = nextState.to
-    draftFilters.unreadOnly = nextState.unreadOnly
-    draftFilters.page = nextState.page
+    const nextState = cloneFilters(activeFilters.value);
+    draftFilters.q = nextState.q;
+    draftFilters.classroomIds = nextState.classroomIds;
+    draftFilters.types = nextState.types;
+    draftFilters.pupilUserIds = nextState.pupilUserIds;
+    draftFilters.timeWindow = nextState.timeWindow;
+    draftFilters.from = nextState.from;
+    draftFilters.to = nextState.to;
+    draftFilters.unreadOnly = nextState.unreadOnly;
+    draftFilters.page = nextState.page;
   }
 
   function findClassroom(classroomId: number) {
-    return classroomOptions.value.find((classroom) => classroom.classroomId === classroomId) ?? null
+    return (
+      classroomOptions.value.find(
+        (classroom) => classroom.classroomId === classroomId,
+      ) ?? null
+    );
   }
 
   function getClassroomLabel(classroomId: number) {
     return (
       findClassroom(classroomId)?.title ??
       classroomDetailCache.get(classroomId)?.title ??
-      t('notifications.fallbackClassroom', { classroomId })
-    )
+      t("notifications.fallbackClassroom", { classroomId })
+    );
   }
 
   function getPupilLabel(pupilUserId: number) {
     return (
-      pupilOptions.value.find((pupil) => pupil.userId === pupilUserId)?.displayName ??
-      String(pupilUserId)
-    )
+      pupilOptions.value.find((pupil) => pupil.userId === pupilUserId)
+        ?.displayName ?? String(pupilUserId)
+    );
   }
 
   function isMuted(classroomId: number, type: NotificationType) {
-    return mutes.value.some((mute) => mute.classroomId === classroomId && mute.type === type)
+    return mutes.value.some(
+      (mute) => mute.classroomId === classroomId && mute.type === type,
+    );
   }
 
   function toggleNumberSelection(target: number[], value: number) {
-    const index = target.indexOf(value)
+    const index = target.indexOf(value);
     if (index >= 0) {
-      target.splice(index, 1)
-      return
+      target.splice(index, 1);
+      return;
     }
 
-    target.push(value)
+    target.push(value);
   }
 
-  function toggleTypeSelection(target: NotificationType[], value: NotificationType) {
-    const index = target.indexOf(value)
+  function toggleTypeSelection(
+    target: NotificationType[],
+    value: NotificationType,
+  ) {
+    const index = target.indexOf(value);
     if (index >= 0) {
-      target.splice(index, 1)
-      return
+      target.splice(index, 1);
+      return;
     }
 
-    target.push(value)
+    target.push(value);
   }
 
   function toggleClassroom(classroomId: number) {
-    toggleNumberSelection(draftFilters.classroomIds, classroomId)
+    toggleNumberSelection(draftFilters.classroomIds, classroomId);
   }
 
   function toggleNotificationType(type: NotificationType) {
-    toggleTypeSelection(draftFilters.types, type)
+    toggleTypeSelection(draftFilters.types, type);
   }
 
   function togglePupil(pupilUserId: number) {
-    toggleNumberSelection(draftFilters.pupilUserIds, pupilUserId)
+    toggleNumberSelection(draftFilters.pupilUserIds, pupilUserId);
   }
 
   function removeClassroom(classroomId: number) {
-    draftFilters.classroomIds = draftFilters.classroomIds.filter((id) => id !== classroomId)
+    draftFilters.classroomIds = draftFilters.classroomIds.filter(
+      (id) => id !== classroomId,
+    );
   }
 
   function removeNotificationType(type: NotificationType) {
-    draftFilters.types = draftFilters.types.filter((item) => item !== type)
+    draftFilters.types = draftFilters.types.filter((item) => item !== type);
   }
 
   function removePupil(pupilUserId: number) {
-    draftFilters.pupilUserIds = draftFilters.pupilUserIds.filter((id) => id !== pupilUserId)
+    draftFilters.pupilUserIds = draftFilters.pupilUserIds.filter(
+      (id) => id !== pupilUserId,
+    );
   }
 
   async function ensureClassroomDetail(
     classroomId: number,
     authorizationHeader: string,
   ): Promise<ClassroomDetailResponse> {
-    const cached = classroomDetailCache.get(classroomId)
+    const cached = classroomDetailCache.get(classroomId);
     if (cached) {
-      return cached
+      return cached;
     }
 
-    const detail = await getClassroomDetail(classroomId, authorizationHeader)
-    classroomDetailCache.set(classroomId, detail)
-    return detail
+    const detail = await getClassroomDetail(classroomId, authorizationHeader);
+    classroomDetailCache.set(classroomId, detail);
+    return detail;
   }
 
   async function loadReferenceData() {
-    const authorizationHeader = authStore.authorizationHeader
+    const authorizationHeader = authStore.authorizationHeader;
     if (!authorizationHeader) {
-      classroomOptions.value = []
-      pupilOptions.value = []
-      mutes.value = []
-      referenceStatus.value = 'idle'
-      return
+      classroomOptions.value = [];
+      pupilOptions.value = [];
+      mutes.value = [];
+      referenceStatus.value = "idle";
+      return;
     }
 
-    referenceStatus.value = 'loading'
-    referenceErrorMessage.value = null
+    referenceStatus.value = "loading";
+    referenceErrorMessage.value = null;
 
     try {
-      const classrooms = await getClassrooms(authorizationHeader)
-      const nextClassrooms = [...classrooms]
+      const classrooms = await getClassrooms(authorizationHeader);
+      const nextClassrooms = [...classrooms];
 
       if (
         lockedClassroomId.value &&
-        !nextClassrooms.some((classroom) => classroom.classroomId === lockedClassroomId.value)
+        !nextClassrooms.some(
+          (classroom) => classroom.classroomId === lockedClassroomId.value,
+        )
       ) {
-        const lockedDetail = await ensureClassroomDetail(lockedClassroomId.value, authorizationHeader)
+        const lockedDetail = await ensureClassroomDetail(
+          lockedClassroomId.value,
+          authorizationHeader,
+        );
         nextClassrooms.push({
           classroomId: lockedDetail.classroomId,
           title: lockedDetail.title,
-          description: lockedDetail.description ?? '',
+          description: lockedDetail.description ?? "",
           pupilCount: lockedDetail.pupils.length,
           pendingPupilCount: 0,
           teacherCount: 0,
           taskCount: 0,
-        })
+        });
       }
 
       classroomOptions.value = nextClassrooms.sort((left, right) =>
         left.title.localeCompare(right.title, locale.value),
-      )
-      mutes.value = await requestNotificationMutes(authorizationHeader)
-      referenceStatus.value = 'ready'
+      );
+      mutes.value = await requestNotificationMutes(authorizationHeader);
+      referenceStatus.value = "ready";
     } catch (error) {
-      referenceStatus.value = 'error'
+      referenceStatus.value = "error";
       referenceErrorMessage.value =
-        error instanceof Error ? error.message : t('notifications.errors.loadReferencesFailed')
+        error instanceof Error
+          ? error.message
+          : t("notifications.errors.loadReferencesFailed");
     }
   }
 
   async function loadPupilOptions() {
-    const authorizationHeader = authStore.authorizationHeader
-    const classroomIds = draftClassroomIds.value
+    const authorizationHeader = authStore.authorizationHeader;
+    const classroomIds = draftClassroomIds.value;
 
     if (!authorizationHeader || classroomIds.length === 0) {
-      pupilOptions.value = []
-      draftFilters.pupilUserIds = []
-      return
+      pupilOptions.value = [];
+      draftFilters.pupilUserIds = [];
+      return;
     }
 
-    const requestToken = ++pupilRequestToken
+    const requestToken = ++pupilRequestToken;
 
     try {
       const classroomDetails = await Promise.all(
-        classroomIds.map((classroomId) => ensureClassroomDetail(classroomId, authorizationHeader)),
-      )
+        classroomIds.map((classroomId) =>
+          ensureClassroomDetail(classroomId, authorizationHeader),
+        ),
+      );
 
       if (requestToken !== pupilRequestToken) {
-        return
+        return;
       }
 
       const nextOptions = classroomDetails.flatMap((detail) =>
@@ -288,223 +327,245 @@ export function useNotificationsInbox(lockedClassroomId: Ref<number | null | und
           userId: pupil.userId,
           displayName: pupil.displayName,
         })),
-      )
+      );
 
       const uniqueOptions = Array.from(
-        nextOptions.reduce((map, option) => {
-          if (!map.has(option.userId)) {
-            map.set(option.userId, option)
-          }
-
-          return map
-        }, new Map<number, NotificationPupilOption>()).values(),
-      ).sort((left, right) => left.displayName.localeCompare(right.displayName, locale.value))
-
-      pupilOptions.value = uniqueOptions
-      const validPupilIds = new Set(uniqueOptions.map((option) => option.userId))
-      draftFilters.pupilUserIds = draftFilters.pupilUserIds.filter((pupilUserId) =>
-        validPupilIds.has(pupilUserId),
-      )
+        nextOptions
+          .reduce((map, option) => {
+            if (!map.has(option.userId)) {
+              map.set(option.userId, option);
+            }
+
+            return map;
+          }, new Map<number, NotificationPupilOption>())
+          .values(),
+      ).sort((left, right) =>
+        left.displayName.localeCompare(right.displayName, locale.value),
+      );
+
+      pupilOptions.value = uniqueOptions;
+      const validPupilIds = new Set(
+        uniqueOptions.map((option) => option.userId),
+      );
+      draftFilters.pupilUserIds = draftFilters.pupilUserIds.filter(
+        (pupilUserId) => validPupilIds.has(pupilUserId),
+      );
     } catch {
-      pupilOptions.value = []
-      draftFilters.pupilUserIds = []
+      pupilOptions.value = [];
+      draftFilters.pupilUserIds = [];
     }
   }
 
   async function loadSummary() {
-    const authorizationHeader = authStore.authorizationHeader
+    const authorizationHeader = authStore.authorizationHeader;
     if (!authorizationHeader) {
-      summary.value = { unreadCount: 0 }
-      return
+      summary.value = { unreadCount: 0 };
+      return;
     }
 
     try {
-      summary.value = await requestNotificationSummary(authorizationHeader)
+      summary.value = await requestNotificationSummary(authorizationHeader);
     } catch (error) {
       actionErrorMessage.value =
-        error instanceof Error ? error.message : t('notifications.errors.loadSummaryFailed')
+        error instanceof Error
+          ? error.message
+          : t("notifications.errors.loadSummaryFailed");
     }
   }
 
   async function loadInbox() {
-    const authorizationHeader = authStore.authorizationHeader
+    const authorizationHeader = authStore.authorizationHeader;
     if (!authorizationHeader) {
-      notificationPage.value = null
-      inboxStatus.value = 'idle'
-      inboxErrorMessage.value = null
-      return
+      notificationPage.value = null;
+      inboxStatus.value = "idle";
+      inboxErrorMessage.value = null;
+      return;
     }
 
-    const requestToken = ++inboxRequestToken
-    inboxStatus.value = 'loading'
-    inboxErrorMessage.value = null
+    const requestToken = ++inboxRequestToken;
+    inboxStatus.value = "loading";
+    inboxErrorMessage.value = null;
 
     try {
       notificationPage.value = await requestNotifications(
         authorizationHeader,
-        buildNotificationRequestParams(activeFilters.value, lockedClassroomId.value ?? null),
-      )
+        buildNotificationRequestParams(
+          activeFilters.value,
+          lockedClassroomId.value ?? null,
+        ),
+      );
 
       if (requestToken !== inboxRequestToken) {
-        return
+        return;
       }
 
-      inboxStatus.value = 'ready'
+      inboxStatus.value = "ready";
     } catch (error) {
       if (requestToken !== inboxRequestToken) {
-        return
+        return;
       }
 
-      notificationPage.value = null
-      inboxStatus.value = 'error'
+      notificationPage.value = null;
+      inboxStatus.value = "error";
       inboxErrorMessage.value =
-        error instanceof Error ? error.message : t('notifications.errors.loadInboxFailed')
+        error instanceof Error
+          ? error.message
+          : t("notifications.errors.loadInboxFailed");
     }
   }
 
   async function refreshAfterNotificationUpdate() {
-    await Promise.all([loadInbox(), loadSummary()])
+    await Promise.all([loadInbox(), loadSummary()]);
   }
 
   function buildNextRouteQuery(nextState: NotificationQueryState) {
-    return serializeNotificationQuery(nextState, lockedClassroomId.value ?? null)
+    return serializeNotificationQuery(
+      nextState,
+      lockedClassroomId.value ?? null,
+    );
   }
 
   async function applyFilters() {
-    const nextState = cloneFilters(draftFilters)
-    nextState.page = 0
-    await router.replace({ query: buildNextRouteQuery(nextState) })
+    const nextState = cloneFilters(draftFilters);
+    nextState.page = 0;
+    await router.replace({ query: buildNextRouteQuery(nextState) });
   }
 
   async function clearFilters() {
-    const resetState = defaultNotificationQueryState()
+    const resetState = defaultNotificationQueryState();
     if (lockedClassroomId.value) {
-      resetState.classroomIds = [lockedClassroomId.value]
+      resetState.classroomIds = [lockedClassroomId.value];
     }
 
-    draftFilters.q = resetState.q
-    draftFilters.classroomIds = resetState.classroomIds
-    draftFilters.types = resetState.types
-    draftFilters.pupilUserIds = resetState.pupilUserIds
-    draftFilters.timeWindow = resetState.timeWindow
-    draftFilters.from = resetState.from
-    draftFilters.to = resetState.to
-    draftFilters.unreadOnly = resetState.unreadOnly
-    draftFilters.page = resetState.page
-
-    await router.replace({ query: buildNextRouteQuery(resetState) })
+    draftFilters.q = resetState.q;
+    draftFilters.classroomIds = resetState.classroomIds;
+    draftFilters.types = resetState.types;
+    draftFilters.pupilUserIds = resetState.pupilUserIds;
+    draftFilters.timeWindow = resetState.timeWindow;
+    draftFilters.from = resetState.from;
+    draftFilters.to = resetState.to;
+    draftFilters.unreadOnly = resetState.unreadOnly;
+    draftFilters.page = resetState.page;
+
+    await router.replace({ query: buildNextRouteQuery(resetState) });
   }
 
   async function goToPage(page: number) {
-    const nextState = cloneFilters(activeFilters.value)
-    nextState.page = Math.max(0, page)
-    await router.replace({ query: buildNextRouteQuery(nextState) })
+    const nextState = cloneFilters(activeFilters.value);
+    nextState.page = Math.max(0, page);
+    await router.replace({ query: buildNextRouteQuery(nextState) });
   }
 
   async function markAsRead(notificationId: number) {
-    const authorizationHeader = authStore.authorizationHeader
+    const authorizationHeader = authStore.authorizationHeader;
     if (!authorizationHeader || activeNotificationId.value !== null) {
-      return
+      return;
     }
 
-    actionErrorMessage.value = null
-    activeNotificationId.value = notificationId
+    actionErrorMessage.value = null;
+    activeNotificationId.value = notificationId;
 
     try {
-      await requestMarkNotificationRead(authorizationHeader, notificationId)
-      await refreshAfterNotificationUpdate()
+      await requestMarkNotificationRead(authorizationHeader, notificationId);
+      await refreshAfterNotificationUpdate();
     } catch (error) {
       actionErrorMessage.value =
-        error instanceof Error ? error.message : t('notifications.errors.markReadFailed')
+        error instanceof Error
+          ? error.message
+          : t("notifications.errors.markReadFailed");
     } finally {
-      activeNotificationId.value = null
+      activeNotificationId.value = null;
     }
   }
 
   async function dismissNotification(notificationId: number) {
-    const authorizationHeader = authStore.authorizationHeader
+    const authorizationHeader = authStore.authorizationHeader;
     if (!authorizationHeader || activeNotificationId.value !== null) {
-      return
+      return;
     }
 
-    actionErrorMessage.value = null
-    activeNotificationId.value = notificationId
+    actionErrorMessage.value = null;
+    activeNotificationId.value = notificationId;
 
     try {
-      await requestDismissNotification(authorizationHeader, notificationId)
-      await refreshAfterNotificationUpdate()
+      await requestDismissNotification(authorizationHeader, notificationId);
+      await refreshAfterNotificationUpdate();
     } catch (error) {
       actionErrorMessage.value =
-        error instanceof Error ? error.message : t('notifications.errors.dismissFailed')
+        error instanceof Error
+          ? error.message
+          : t("notifications.errors.dismissFailed");
     } finally {
-      activeNotificationId.value = null
+      activeNotificationId.value = null;
     }
   }
 
   async function toggleMute(type: NotificationType) {
-    const authorizationHeader = authStore.authorizationHeader
-    const classroomId = selectedMuteClassroomId.value
+    const authorizationHeader = authStore.authorizationHeader;
+    const classroomId = selectedMuteClassroomId.value;
 
     if (!authorizationHeader || !classroomId || activeMuteType.value !== null) {
-      return
+      return;
     }
 
-    actionErrorMessage.value = null
-    activeMuteType.value = type
+    actionErrorMessage.value = null;
+    activeMuteType.value = type;
 
     try {
       if (isMuted(classroomId, type)) {
-        await requestUnmuteNotification(authorizationHeader, classroomId, type)
+        await requestUnmuteNotification(authorizationHeader, classroomId, type);
       } else {
-        await requestMuteNotification(authorizationHeader, classroomId, type)
+        await requestMuteNotification(authorizationHeader, classroomId, type);
       }
 
-      mutes.value = await requestNotificationMutes(authorizationHeader)
+      mutes.value = await requestNotificationMutes(authorizationHeader);
     } catch (error) {
       actionErrorMessage.value =
-        error instanceof Error ? error.message : t('notifications.errors.muteFailed')
+        error instanceof Error
+          ? error.message
+          : t("notifications.errors.muteFailed");
     } finally {
-      activeMuteType.value = null
+      activeMuteType.value = null;
     }
   }
 
   watch(
     () => route.query,
     () => {
-      syncDraftFilters()
-      void loadInbox()
+      syncDraftFilters();
+      void loadInbox();
     },
     { deep: true, immediate: true },
-  )
+  );
 
   watch(
     () => lockedClassroomId.value,
     () => {
-      syncDraftFilters()
-      void loadReferenceData()
-      void loadPupilOptions()
-      void loadInbox()
+      syncDraftFilters();
+      void loadReferenceData();
+      void loadPupilOptions();
+      void loadInbox();
     },
-  )
+  );
 
   watch(
     () => authStore.authorizationHeader,
     () => {
-      actionErrorMessage.value = null
-      void loadReferenceData()
-      void loadSummary()
-      void loadInbox()
+      actionErrorMessage.value = null;
+      void loadReferenceData();
+      void loadSummary();
+      void loadInbox();
     },
     { immediate: true },
-  )
+  );
 
   watch(
     () => [...draftClassroomIds.value],
     () => {
-      void loadPupilOptions()
+      void loadPupilOptions();
     },
     { immediate: true },
-  )
+  );
 
   return {
     notificationTypes,
@@ -545,5 +606,5 @@ export function useNotificationsInbox(lockedClassroomId: Ref<number | null | und
     markAsRead,
     dismissNotification,
     toggleMute,
-  }
+  };
 }
diff --git a/src/notifications/notifications.filters.ts b/src/notifications/notifications.filters.ts
index 44facd90..6763c7c1 100644
--- a/src/notifications/notifications.filters.ts
+++ b/src/notifications/notifications.filters.ts
@@ -1,132 +1,141 @@
-import type { LocationQuery, LocationQueryRaw } from 'vue-router'
+import type { LocationQuery, LocationQueryRaw } from "vue-router";
 import {
   notificationTypes,
   type NotificationQueryState,
   type NotificationRequestParams,
   type NotificationTimeWindow,
   type NotificationType,
-} from '@/notifications/notifications.types'
+} from "@/notifications/notifications.types";
 
-const notificationTypeSet = new Set<NotificationType>(notificationTypes)
+const notificationTypeSet = new Set<NotificationType>(notificationTypes);
 
 export const defaultNotificationQueryState = (): NotificationQueryState => ({
-  q: '',
+  q: "",
   classroomIds: [],
   types: [],
   pupilUserIds: [],
-  timeWindow: 'all',
-  from: '',
-  to: '',
+  timeWindow: "all",
+  from: "",
+  to: "",
   unreadOnly: false,
   page: 0,
-})
+});
 
 function queryValueToString(value: LocationQuery[string] | undefined) {
   if (Array.isArray(value)) {
-    return value[0] ?? ''
+    return value[0] ?? "";
   }
 
-  return value ?? ''
+  return value ?? "";
 }
 
 function parseNumberList(value: LocationQuery[string] | undefined) {
   return queryValueToString(value)
-    .split(',')
+    .split(",")
     .map((item) => Number(item.trim()))
-    .filter((item) => Number.isInteger(item) && item > 0)
+    .filter((item) => Number.isInteger(item) && item > 0);
 }
 
 function parseNotificationTypeList(value: LocationQuery[string] | undefined) {
   return queryValueToString(value)
-    .split(',')
+    .split(",")
     .map((item) => item.trim())
-    .filter((item): item is NotificationType => notificationTypeSet.has(item as NotificationType))
+    .filter((item): item is NotificationType =>
+      notificationTypeSet.has(item as NotificationType),
+    );
 }
 
 function normalizeTimeWindow(value: string): NotificationTimeWindow {
-  if (value === '24h' || value === '7d' || value === '30d' || value === 'custom') {
-    return value
+  if (
+    value === "24h" ||
+    value === "7d" ||
+    value === "30d" ||
+    value === "custom"
+  ) {
+    return value;
   }
 
-  return 'all'
+  return "all";
 }
 
 export function parseNotificationQuery(
   query: LocationQuery,
   lockedClassroomId: number | null = null,
 ): NotificationQueryState {
-  const state = defaultNotificationQueryState()
-
-  state.q = queryValueToString(query.q).trim()
-  state.classroomIds = lockedClassroomId ? [lockedClassroomId] : parseNumberList(query.classrooms)
-  state.types = parseNotificationTypeList(query.types)
-  state.pupilUserIds = parseNumberList(query.pupils)
-  state.timeWindow = normalizeTimeWindow(queryValueToString(query.window))
-  state.from = queryValueToString(query.from)
-  state.to = queryValueToString(query.to)
-  state.unreadOnly = queryValueToString(query.unread) === '1'
-  state.page = Math.max(0, Number(queryValueToString(query.page)) || 0)
-
-  if (state.timeWindow !== 'custom') {
-    state.from = ''
-    state.to = ''
+  const state = defaultNotificationQueryState();
+
+  state.q = queryValueToString(query.q).trim();
+  state.classroomIds = lockedClassroomId
+    ? [lockedClassroomId]
+    : parseNumberList(query.classrooms);
+  state.types = parseNotificationTypeList(query.types);
+  state.pupilUserIds = parseNumberList(query.pupils);
+  state.timeWindow = normalizeTimeWindow(queryValueToString(query.window));
+  state.from = queryValueToString(query.from);
+  state.to = queryValueToString(query.to);
+  state.unreadOnly = queryValueToString(query.unread) === "1";
+  state.page = Math.max(0, Number(queryValueToString(query.page)) || 0);
+
+  if (state.timeWindow !== "custom") {
+    state.from = "";
+    state.to = "";
   }
 
-  return state
+  return state;
 }
 
 export function serializeNotificationQuery(
   state: NotificationQueryState,
   lockedClassroomId: number | null = null,
 ): LocationQueryRaw {
-  const query: LocationQueryRaw = {}
+  const query: LocationQueryRaw = {};
 
   if (state.q.trim()) {
-    query.q = state.q.trim()
+    query.q = state.q.trim();
   }
 
   if (!lockedClassroomId && state.classroomIds.length > 0) {
-    query.classrooms = state.classroomIds.join(',')
+    query.classrooms = state.classroomIds.join(",");
   }
 
   if (state.types.length > 0) {
-    query.types = state.types.join(',')
+    query.types = state.types.join(",");
   }
 
   if (state.pupilUserIds.length > 0) {
-    query.pupils = state.pupilUserIds.join(',')
+    query.pupils = state.pupilUserIds.join(",");
   }
 
-  if (state.timeWindow !== 'all') {
-    query.window = state.timeWindow
+  if (state.timeWindow !== "all") {
+    query.window = state.timeWindow;
   }
 
-  if (state.timeWindow === 'custom' && state.from) {
-    query.from = state.from
+  if (state.timeWindow === "custom" && state.from) {
+    query.from = state.from;
   }
 
-  if (state.timeWindow === 'custom' && state.to) {
-    query.to = state.to
+  if (state.timeWindow === "custom" && state.to) {
+    query.to = state.to;
   }
 
   if (state.unreadOnly) {
-    query.unread = '1'
+    query.unread = "1";
   }
 
   if (state.page > 0) {
-    query.page = String(state.page)
+    query.page = String(state.page);
   }
 
-  return query
+  return query;
 }
 
 function toIsoDateTime(value: string) {
   if (!value) {
-    return null
+    return null;
   }
 
-  const parsed = new Date(value)
-  return Number.isNaN(parsed.getTime()) ? null : parsed.toISOString()
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? null : parsed.toISOString();
 }
 
 export function buildNotificationRequestParams(
@@ -134,22 +143,22 @@ export function buildNotificationRequestParams(
   lockedClassroomId: number | null = null,
   now: Date = new Date(),
 ): NotificationRequestParams {
-  let from: string | null = null
-  let to: string | null = null
+  let from: string | null = null;
+  let to: string | null = null;
 
-  if (state.timeWindow === 'custom') {
-    from = toIsoDateTime(state.from)
-    to = toIsoDateTime(state.to)
-  } else if (state.timeWindow !== 'all') {
+  if (state.timeWindow === "custom") {
+    from = toIsoDateTime(state.from);
+    to = toIsoDateTime(state.to);
+  } else if (state.timeWindow !== "all") {
     const milliseconds =
-      state.timeWindow === '24h'
+      state.timeWindow === "24h"
         ? 24 * 60 * 60 * 1000
-        : state.timeWindow === '7d'
+        : state.timeWindow === "7d"
           ? 7 * 24 * 60 * 60 * 1000
-          : 30 * 24 * 60 * 60 * 1000
+          : 30 * 24 * 60 * 60 * 1000;
 
-    from = new Date(now.getTime() - milliseconds).toISOString()
-    to = now.toISOString()
+    from = new Date(now.getTime() - milliseconds).toISOString();
+    to = now.toISOString();
   }
 
   return {
@@ -162,5 +171,5 @@ export function buildNotificationRequestParams(
     unreadOnly: state.unreadOnly,
     page: state.page,
     size: 20,
-  }
+  };
 }
diff --git a/src/notifications/notifications.render.ts b/src/notifications/notifications.render.ts
index a23b4d32..c47f155a 100644
--- a/src/notifications/notifications.render.ts
+++ b/src/notifications/notifications.render.ts
@@ -1,18 +1,23 @@
-import type { ComposerTranslation } from 'vue-i18n'
-import type { NotificationResponse, NotificationType } from '@/notifications/notifications.types'
+import type { ComposerTranslation } from "vue-i18n";
+import type {
+  NotificationResponse,
+  NotificationType,
+} from "@/notifications/notifications.types";
 
-type NotificationRenderArgs = Record<string, string | number | boolean | null>
+type NotificationRenderArgs = Record<string, string | number | boolean | null>;
 
 export function parseNotificationJson(json: string | null) {
   if (!json) {
-    return {}
+    return {};
   }
 
   try {
-    const parsed = JSON.parse(json) as unknown
-    return parsed && typeof parsed === 'object' ? (parsed as NotificationRenderArgs) : {}
+    const parsed = JSON.parse(json) as unknown;
+    return parsed && typeof parsed === "object"
+      ? (parsed as NotificationRenderArgs)
+      : {};
   } catch {
-    return {}
+    return {};
   }
 }
 
@@ -20,65 +25,76 @@ export function getNotificationMessage(
   notification: NotificationResponse,
   t: ComposerTranslation,
 ) {
-  const renderArgs = parseNotificationJson(notification.renderArgsJson)
+  const renderArgs = parseNotificationJson(notification.renderArgsJson);
   const fallbackArgs = {
     classroomTitle: notification.classroomTitle,
-    pupilDisplayName: notification.pupilDisplayName ?? t('notifications.unknownPupil'),
-    stopTitle: notification.stopTitle ?? t('notifications.unknownStop'),
+    pupilDisplayName:
+      notification.pupilDisplayName ?? t("notifications.unknownPupil"),
+    stopTitle: notification.stopTitle ?? t("notifications.unknownStop"),
     ...renderArgs,
-  }
+  };
 
-  return t(notification.renderCode, fallbackArgs)
+  return t(notification.renderCode, fallbackArgs);
 }
 
-export function getNotificationTypeLabel(type: NotificationType, t: ComposerTranslation) {
-  return t(`notifications.types.${type}`)
+export function getNotificationTypeLabel(
+  type: NotificationType,
+  t: ComposerTranslation,
+) {
+  return t(`notifications.types.${type}`);
 }
 
-export function formatNotificationRelativeTime(value: string | null, t: ComposerTranslation, now = new Date()) {
+export function formatNotificationRelativeTime(
+  value: string | null,
+  t: ComposerTranslation,
+  now = new Date(),
+) {
   if (!value) {
-    return t('notifications.unknownTime')
+    return t("notifications.unknownTime");
   }
 
-  const date = new Date(value)
+  const date = new Date(value);
   if (Number.isNaN(date.getTime())) {
-    return t('notifications.unknownTime')
+    return t("notifications.unknownTime");
   }
 
-  const differenceMs = date.getTime() - now.getTime()
-  const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
-  const seconds = Math.round(differenceMs / 1000)
-  const minutes = Math.round(seconds / 60)
-  const hours = Math.round(minutes / 60)
-  const days = Math.round(hours / 24)
+  const differenceMs = date.getTime() - now.getTime();
+  const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+  const seconds = Math.round(differenceMs / 1000);
+  const minutes = Math.round(seconds / 60);
+  const hours = Math.round(minutes / 60);
+  const days = Math.round(hours / 24);
 
   if (Math.abs(seconds) < 60) {
-    return rtf.format(seconds, 'second')
+    return rtf.format(seconds, "second");
   }
 
   if (Math.abs(minutes) < 60) {
-    return rtf.format(minutes, 'minute')
+    return rtf.format(minutes, "minute");
   }
 
   if (Math.abs(hours) < 24) {
-    return rtf.format(hours, 'hour')
+    return rtf.format(hours, "hour");
   }
 
-  return rtf.format(days, 'day')
+  return rtf.format(days, "day");
 }
 
-export function formatNotificationAbsoluteTime(value: string | null, locale?: string) {
+export function formatNotificationAbsoluteTime(
+  value: string | null,
+  locale?: string,
+) {
   if (!value) {
-    return ''
+    return "";
   }
 
-  const date = new Date(value)
+  const date = new Date(value);
   if (Number.isNaN(date.getTime())) {
-    return ''
+    return "";
   }
 
   return new Intl.DateTimeFormat(locale, {
-    dateStyle: 'medium',
-    timeStyle: 'short',
-  }).format(date)
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(date);
 }
diff --git a/src/notifications/notifications.types.ts b/src/notifications/notifications.types.ts
index c3393d05..251fb5cc 100644
--- a/src/notifications/notifications.types.ts
+++ b/src/notifications/notifications.types.ts
@@ -1,79 +1,79 @@
 export const notificationTypes = [
-  'MAP_STOP_COMPLETED',
-  'GAME_COMPLETED',
-  'PUPIL_STUCK',
-  'WEEKLY_MYSTERY_SUBMITTED',
-  'INAPPROPRIATE_BEHAVIOUR',
-] as const
+  "MAP_STOP_COMPLETED",
+  "GAME_COMPLETED",
+  "PUPIL_STUCK",
+  "WEEKLY_MYSTERY_SUBMITTED",
+  "INAPPROPRIATE_BEHAVIOUR",
+] as const;
 
-export type NotificationType = (typeof notificationTypes)[number]
+export type NotificationType = (typeof notificationTypes)[number];
 
 export type NotificationResponse = {
-  id: number
-  classroomId: number
-  classroomTitle: string
-  pupilUserId: number | null
-  pupilDisplayName: string | null
-  type: NotificationType
-  renderCode: string
-  renderArgsJson: string | null
-  payloadJson: string | null
-  stopTitle: string | null
-  readAt: string | null
-  dismissedAt: string | null
-  resolvedAt: string | null
-  createdAt: string | null
-}
+  id: number;
+  classroomId: number;
+  classroomTitle: string;
+  pupilUserId: number | null;
+  pupilDisplayName: string | null;
+  type: NotificationType;
+  renderCode: string;
+  renderArgsJson: string | null;
+  payloadJson: string | null;
+  stopTitle: string | null;
+  readAt: string | null;
+  dismissedAt: string | null;
+  resolvedAt: string | null;
+  createdAt: string | null;
+};
 
 export type NotificationPageResponse = {
-  items: NotificationResponse[]
-  page: number
-  size: number
-  totalElements: number
-  totalPages: number
-}
+  items: NotificationResponse[];
+  page: number;
+  size: number;
+  totalElements: number;
+  totalPages: number;
+};
 
 export type NotificationSummaryResponse = {
-  unreadCount: number
-}
+  unreadCount: number;
+};
 
 export type NotificationMuteResponse = {
-  classroomId: number
-  type: NotificationType
-  createdAt: string | null
-}
+  classroomId: number;
+  type: NotificationType;
+  createdAt: string | null;
+};
 
-export type NotificationTimeWindow = 'all' | '24h' | '7d' | '30d' | 'custom'
+export type NotificationTimeWindow = "all" | "24h" | "7d" | "30d" | "custom";
 
 export type NotificationQueryState = {
-  q: string
-  classroomIds: number[]
-  types: NotificationType[]
-  pupilUserIds: number[]
-  timeWindow: NotificationTimeWindow
-  from: string
-  to: string
-  unreadOnly: boolean
-  page: number
-}
+  q: string;
+  classroomIds: number[];
+  types: NotificationType[];
+  pupilUserIds: number[];
+  timeWindow: NotificationTimeWindow;
+  from: string;
+  to: string;
+  unreadOnly: boolean;
+  page: number;
+};
 
 export type NotificationRequestParams = {
-  classroomIds: number[]
-  types: NotificationType[]
-  pupilUserIds: number[]
-  q: string | null
-  from: string | null
-  to: string | null
-  unreadOnly: boolean
-  page: number
-  size: number
-}
+  classroomIds: number[];
+  types: NotificationType[];
+  pupilUserIds: number[];
+  q: string | null;
+  from: string | null;
+  to: string | null;
+  unreadOnly: boolean;
+  page: number;
+  size: number;
+};
 
-export type NotificationLoadStatus = 'idle' | 'loading' | 'ready' | 'error'
+export type NotificationLoadStatus = "idle" | "loading" | "ready" | "error";
 
 export type NotificationPupilOption = {
-  classroomId: number
-  classroomTitle: string
-  userId: number
-  displayName: string
-}
+  classroomId: number;
+  classroomTitle: string;
+  userId: number;
+  displayName: string;
+};
diff --git a/src/notifications/pages/NotificationsPage.vue b/src/notifications/pages/NotificationsPage.vue
index a75b926c..42d56e5f 100644
--- a/src/notifications/pages/NotificationsPage.vue
+++ b/src/notifications/pages/NotificationsPage.vue
@@ -1,37 +1,43 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute } from 'vue-router'
-import NotificationsComponent from '@/notifications/components/NotificationsComponent.vue'
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import NotificationsComponent from "@/notifications/components/NotificationsComponent.vue";
 
-const route = useRoute()
-const { t } = useI18n()
+const route = useRoute();
+const { t } = useI18n();
 
 const lockedClassroomId = computed(() => {
-  const rawValue = route.params.classroomId
-  const parsedValue = Number(Array.isArray(rawValue) ? rawValue[0] : rawValue)
-  return Number.isInteger(parsedValue) && parsedValue > 0 ? parsedValue : null
-})
+  const rawValue = route.params.classroomId;
+  const parsedValue = Number(Array.isArray(rawValue) ? rawValue[0] : rawValue);
+  return Number.isInteger(parsedValue) && parsedValue > 0 ? parsedValue : null;
+});
 
 const pageTitle = computed(() =>
-  lockedClassroomId.value ? t('notificationsPage.classroomTitle') : t('notificationsPage.title'),
-)
+  lockedClassroomId.value
+    ? t("notificationsPage.classroomTitle")
+    : t("notificationsPage.title"),
+);
 
 const pageDescription = computed(() =>
   lockedClassroomId.value
-    ? t('notificationsPage.classroomDescriptionGeneric')
-    : t('notificationsPage.description'),
-)
+    ? t("notificationsPage.classroomDescriptionGeneric")
+    : t("notificationsPage.description"),
+);
 </script>
 
 <template>
   <main class="min-h-screen px-4 py-8 sm:px-6 lg:px-8">
     <div class="mx-auto flex w-full max-w-6xl flex-col gap-6">
       <section class="pt-10 text-center sm:pt-12">
-        <h1 class="text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl">
+        <h1
+          class="text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl"
+        >
           {{ pageTitle }}
         </h1>
-        <p class="mx-auto mt-3 max-w-3xl text-sm leading-relaxed text-slate-600 sm:text-base">
+        <p
+          class="mx-auto mt-3 max-w-3xl text-sm leading-relaxed text-slate-600 sm:text-base"
+        >
           {{ pageDescription }}
         </p>
       </section>
diff --git a/src/notifications/pages/__tests__/NotificationsPage.spec.ts b/src/notifications/pages/__tests__/NotificationsPage.spec.ts
index da8a9120..edffd48f 100644
--- a/src/notifications/pages/__tests__/NotificationsPage.spec.ts
+++ b/src/notifications/pages/__tests__/NotificationsPage.spec.ts
@@ -1,33 +1,36 @@
-import { describe, expect, it, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { reactive } from 'vue'
-import { createAppI18n } from '@/app/i18n'
-import NotificationsPage from '@/notifications/pages/NotificationsPage.vue'
+import { describe, expect, it, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { reactive } from "vue";
+import { createAppI18n } from "@/app/i18n";
+import NotificationsPage from "@/notifications/pages/NotificationsPage.vue";
 
 const route = reactive({
   params: {
-    classroomId: '42',
+    classroomId: "42",
   },
-})
+});
 
-vi.mock('vue-router', () => ({
+vi.mock("vue-router", () => ({
   useRoute: () => route,
-}))
+}));
 
-describe('NotificationsPage', () => {
-  it('forwards the locked classroom id to the shared notifications component', () => {
+describe("NotificationsPage", () => {
+  it("forwards the locked classroom id to the shared notifications component", () => {
     const wrapper = mount(NotificationsPage, {
       global: {
         plugins: [createAppI18n()],
         stubs: {
           NotificationsComponent: {
-            props: ['lockedClassroomId'],
-            template: '<div data-testid="notifications-component">{{ lockedClassroomId }}</div>',
+            props: ["lockedClassroomId"],
+            template:
+              '<div data-testid="notifications-component">{{ lockedClassroomId }}</div>',
           },
         },
       },
-    })
+    });
 
-    expect(wrapper.get('[data-testid="notifications-component"]').text()).toBe('42')
-  })
-})
+    expect(wrapper.get('[data-testid="notifications-component"]').text()).toBe(
+      "42",
+    );
+  });
+});
diff --git a/src/notifications/routes.ts b/src/notifications/routes.ts
index d3c71fcb..d74ed72a 100644
--- a/src/notifications/routes.ts
+++ b/src/notifications/routes.ts
@@ -8,7 +8,7 @@ export const notificationsRoutes: RouteRecordRaw[] = [
     name: "notifications",
     component: NotificationsPage,
     meta: {
-      backTarget: { name: 'teacher-home' },
+      backTarget: { name: "teacher-home" },
     },
   },
 ];
diff --git a/src/profile/api/profile.api.ts b/src/profile/api/profile.api.ts
index 580ccd12..3f801450 100644
--- a/src/profile/api/profile.api.ts
+++ b/src/profile/api/profile.api.ts
@@ -2,50 +2,51 @@ import type {
   CompleteCurrentUserOnboardingResponse,
   UpdateCurrentUserProfilePayload,
   UpdateCurrentUserProfileResponse,
-} from '@/profile/model/profile.types'
-import { readJsonErrorMessage } from '@/shared/api/response-errors'
+} from "@/profile/model/profile.types";
+import { readJsonErrorMessage } from "@/shared/api/response-errors";
 
-const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
-const PROFILE_API_BASE = `${API_BASE_URL}/api/v1/users/me`
+const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? "").replace(
+  /\/$/,
+  "",
+);
+const PROFILE_API_BASE = `${API_BASE_URL}/api/v1/users/me`;
 
 async function getResponseErrorMessage(response: Response) {
-  const fallbackMessage = `Profile request failed with status ${response.status}.`
-  const errorMessage = await readJsonErrorMessage(response)
+  const fallbackMessage = `Profile request failed with status ${response.status}.`;
+  const errorMessage = await readJsonErrorMessage(response);
 
-  if (errorMessage) return errorMessage
+  if (errorMessage) return errorMessage;
 
-  const text = await response.text().catch(() => '')
-  return text || fallbackMessage
+  const text = await response.text().catch(() => "");
+  return text || fallbackMessage;
 }
 
-async function fetchProfileJson<T>(
-  options: {
-    method?: string
-    body?: unknown
-    path?: string
-    authorizationHeader: string
-  },
-) {
+async function fetchProfileJson<T>(options: {
+  method?: string;
+  body?: unknown;
+  path?: string;
+  authorizationHeader: string;
+}) {
   const headers = new Headers({
     Authorization: options.authorizationHeader,
-  })
+  });
 
   if (options.body !== undefined) {
-    headers.set('Content-Type', 'application/json')
+    headers.set("Content-Type", "application/json");
   }
 
-  const response = await fetch(`${PROFILE_API_BASE}${options.path ?? ''}`, {
-    method: options.method ?? 'GET',
+  const response = await fetch(`${PROFILE_API_BASE}${options.path ?? ""}`, {
+    method: options.method ?? "GET",
     headers,
     body: options.body !== undefined ? JSON.stringify(options.body) : undefined,
-    credentials: 'include',
-  })
+    credentials: "include",
+  });
 
   if (!response.ok) {
-    throw new Error(await getResponseErrorMessage(response))
+    throw new Error(await getResponseErrorMessage(response));
   }
 
-  return (await response.json()) as T
+  return (await response.json()) as T;
 }
 
 export function requestUpdateCurrentUserProfile(
@@ -53,16 +54,18 @@ export function requestUpdateCurrentUserProfile(
   payload: UpdateCurrentUserProfilePayload,
 ) {
   return fetchProfileJson<UpdateCurrentUserProfileResponse>({
-    method: 'PUT',
+    method: "PUT",
     authorizationHeader,
     body: payload,
-  })
+  });
 }
 
-export function requestCompleteCurrentUserOnboarding(authorizationHeader: string) {
+export function requestCompleteCurrentUserOnboarding(
+  authorizationHeader: string,
+) {
   return fetchProfileJson<CompleteCurrentUserOnboardingResponse>({
-    method: 'PUT',
+    method: "PUT",
     authorizationHeader,
-    path: '/onboarding/completed',
-  })
+    path: "/onboarding/completed",
+  });
 }
diff --git a/src/profile/model/profile.types.ts b/src/profile/model/profile.types.ts
index 9df54c57..ad5bd2b7 100644
--- a/src/profile/model/profile.types.ts
+++ b/src/profile/model/profile.types.ts
@@ -1,8 +1,11 @@
-import type { CurrentUserProfileResponse, PupilProfile } from '@/auth/model/auth.types'
+import type {
+  CurrentUserProfileResponse,
+  PupilProfile,
+} from "@/auth/model/auth.types";
 
 export interface UpdateCurrentUserProfilePayload {
-  displayName: string
+  displayName: string;
 }
 
-export type UpdateCurrentUserProfileResponse = CurrentUserProfileResponse
-export type CompleteCurrentUserOnboardingResponse = PupilProfile
+export type UpdateCurrentUserProfileResponse = CurrentUserProfileResponse;
+export type CompleteCurrentUserOnboardingResponse = PupilProfile;
diff --git a/src/profile/pages/PupilProfilePage.vue b/src/profile/pages/PupilProfilePage.vue
index 6c11bdbb..156ba41e 100644
--- a/src/profile/pages/PupilProfilePage.vue
+++ b/src/profile/pages/PupilProfilePage.vue
@@ -1,184 +1,205 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { RouterLink, useRouter } from 'vue-router'
-import { useAuthStore } from '@/auth/model/auth.store'
-import AvatarComponent from '@/avatar/components/AvatarComponent.vue'
-import { requestUpdateCurrentUserProfile } from '@/profile/api/profile.api'
+import { computed, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { RouterLink, useRouter } from "vue-router";
+import { useAuthStore } from "@/auth/model/auth.store";
+import AvatarComponent from "@/avatar/components/AvatarComponent.vue";
+import { requestUpdateCurrentUserProfile } from "@/profile/api/profile.api";
 import { requestClassroomBannedWords } from "@/shared/moderation/moderation.api.ts";
 import { useProfanityFilter } from "@/shared/composables/useProfanityFilter.ts";
 
-const { t } = useI18n()
-const authStore = useAuthStore()
-const router = useRouter()
-const HOME_GUIDE_STORAGE_KEY = 'nettdetektivene.pupil-home.guide.seen'
-
-const defaultDisplayName = computed(() => t('pupilHome.defaultName'))
-const pupilProfile = computed(() => authStore.user?.pupilProfile ?? null)
-const currentLevel = computed(() => pupilProfile.value?.currentLevel ?? 1)
-const totalXp = computed(() => pupilProfile.value?.totalXp ?? 0)
-const savedDisplayName = ref(defaultDisplayName.value)
-const draftDisplayName = ref(defaultDisplayName.value)
-const isEditingName = ref(false)
-const isSavingName = ref(false)
-const saveErrorMessage = ref<string | null>(null)
-const saveSuccessMessage = ref<string | null>(null)
-const trimmedDraftDisplayName = computed(() => draftDisplayName.value.trim())
+const { t } = useI18n();
+const authStore = useAuthStore();
+const router = useRouter();
+const HOME_GUIDE_STORAGE_KEY = "nettdetektivene.pupil-home.guide.seen";
+
+const defaultDisplayName = computed(() => t("pupilHome.defaultName"));
+const pupilProfile = computed(() => authStore.user?.pupilProfile ?? null);
+const currentLevel = computed(() => pupilProfile.value?.currentLevel ?? 1);
+const totalXp = computed(() => pupilProfile.value?.totalXp ?? 0);
+const savedDisplayName = ref(defaultDisplayName.value);
+const draftDisplayName = ref(defaultDisplayName.value);
+const isEditingName = ref(false);
+const isSavingName = ref(false);
+const saveErrorMessage = ref<string | null>(null);
+const saveSuccessMessage = ref<string | null>(null);
+const trimmedDraftDisplayName = computed(() => draftDisplayName.value.trim());
 const normalizedDraftDisplayName = computed(() =>
-  trimmedDraftDisplayName.value.length > 0 ? trimmedDraftDisplayName.value : defaultDisplayName.value,
-)
-const isNameDirty = computed(() => normalizedDraftDisplayName.value !== savedDisplayName.value)
-const { hasProfanity } = useProfanityFilter()
-const bannedWords = ref<string[]>([])
+  trimmedDraftDisplayName.value.length > 0
+    ? trimmedDraftDisplayName.value
+    : defaultDisplayName.value,
+);
+const isNameDirty = computed(
+  () => normalizedDraftDisplayName.value !== savedDisplayName.value,
+);
+const { hasProfanity } = useProfanityFilter();
+const bannedWords = ref<string[]>([]);
 
 async function loadBannedWords() {
-  if (!authStore.authorizationHeader || !pupilProfile.value?.currentClassroomId) {
-    bannedWords.value = []
-    return
+  if (
+    !authStore.authorizationHeader ||
+    !pupilProfile.value?.currentClassroomId
+  ) {
+    bannedWords.value = [];
+    return;
   }
 
   try {
     const result = await requestClassroomBannedWords(
-        pupilProfile.value.currentClassroomId,
-        authStore.authorizationHeader,
-    )
-    bannedWords.value = result.map(entry => entry.word.toLowerCase())
+      pupilProfile.value.currentClassroomId,
+      authStore.authorizationHeader,
+    );
+    bannedWords.value = result.map((entry) => entry.word.toLowerCase());
   } catch {
-    bannedWords.value = []
+    bannedWords.value = [];
   }
 }
 
 function containsBannedWord(text: string, words: string[]) {
-  const normalized = text.toLowerCase()
-  return words.some(word => normalized.includes(word))
+  const normalized = text.toLowerCase();
+  return words.some((word) => normalized.includes(word));
 }
 
 const hasBadWords = computed(() => {
-  const name = normalizedDraftDisplayName.value
+  const name = normalizedDraftDisplayName.value;
 
-  return (
-      hasProfanity(name) ||
-      containsBannedWord(name, bannedWords.value)
-  )
-})
+  return hasProfanity(name) || containsBannedWord(name, bannedWords.value);
+});
 
 watch(
   pupilProfile,
   (profile) => {
-    const displayName = profile?.displayName?.trim() || defaultDisplayName.value
-    savedDisplayName.value = displayName
+    const displayName =
+      profile?.displayName?.trim() || defaultDisplayName.value;
+    savedDisplayName.value = displayName;
     if (!isEditingName.value) {
-      draftDisplayName.value = displayName
+      draftDisplayName.value = displayName;
     }
-    void loadBannedWords()
+    void loadBannedWords();
   },
   { immediate: true },
-)
+);
 
 const profileStats = computed(() => [
   {
-    label: t('pupilProfile.displayNameLabel'),
+    label: t("pupilProfile.displayNameLabel"),
     value: savedDisplayName.value,
-    cardClass: 'sm:col-span-2 lg:col-span-2',
-    valueClass: 'break-words',
+    cardClass: "sm:col-span-2 lg:col-span-2",
+    valueClass: "break-words",
   },
   {
-    label: t('pupilProfile.levelLabel'),
+    label: t("pupilProfile.levelLabel"),
     value: String(currentLevel.value),
   },
   {
-    label: t('pupilProfile.xpLabel'),
+    label: t("pupilProfile.xpLabel"),
     value: String(totalXp.value),
   },
-])
+]);
 
 function startEditingName() {
-  draftDisplayName.value = savedDisplayName.value
-  saveErrorMessage.value = null
-  saveSuccessMessage.value = null
-  isEditingName.value = true
+  draftDisplayName.value = savedDisplayName.value;
+  saveErrorMessage.value = null;
+  saveSuccessMessage.value = null;
+  isEditingName.value = true;
 }
 
 function cancelEditingName() {
-  draftDisplayName.value = savedDisplayName.value
-  saveErrorMessage.value = null
-  saveSuccessMessage.value = null
-  isEditingName.value = false
+  draftDisplayName.value = savedDisplayName.value;
+  saveErrorMessage.value = null;
+  saveSuccessMessage.value = null;
+  isEditingName.value = false;
 }
 
 async function replayHomeGuide() {
-  if (typeof window !== 'undefined' && typeof window.localStorage?.removeItem === 'function') {
-    window.localStorage.removeItem(HOME_GUIDE_STORAGE_KEY)
+  if (
+    typeof window !== "undefined" &&
+    typeof window.localStorage?.removeItem === "function"
+  ) {
+    window.localStorage.removeItem(HOME_GUIDE_STORAGE_KEY);
   }
 
-  await router.push('/pupil/home')
+  await router.push("/pupil/home");
 }
 
 async function saveDisplayName() {
-  if (!authStore.authorizationHeader || !isNameDirty.value || isSavingName.value) {
-    return
+  if (
+    !authStore.authorizationHeader ||
+    !isNameDirty.value ||
+    isSavingName.value
+  ) {
+    return;
   }
 
-  isSavingName.value = true
-  saveErrorMessage.value = null
-  saveSuccessMessage.value = null
+  isSavingName.value = true;
+  saveErrorMessage.value = null;
+  saveSuccessMessage.value = null;
 
   try {
-    const updatedDisplayName = normalizedDraftDisplayName.value
+    const updatedDisplayName = normalizedDraftDisplayName.value;
 
     if (hasProfanity(updatedDisplayName)) {
-      saveErrorMessage.value = t('pupilProfile.nameProfanityError')
-      isSavingName.value = false
-      return
+      saveErrorMessage.value = t("pupilProfile.nameProfanityError");
+      isSavingName.value = false;
+      return;
     }
 
     await requestUpdateCurrentUserProfile(authStore.authorizationHeader, {
       displayName: normalizedDraftDisplayName.value,
-    })
+    });
 
-    authStore.updatePupilDisplayName(updatedDisplayName)
-    savedDisplayName.value = updatedDisplayName
-    draftDisplayName.value = savedDisplayName.value
-    saveSuccessMessage.value = t('pupilProfile.nameUpdateSuccess')
-    isEditingName.value = false
+    authStore.updatePupilDisplayName(updatedDisplayName);
+    savedDisplayName.value = updatedDisplayName;
+    draftDisplayName.value = savedDisplayName.value;
+    saveSuccessMessage.value = t("pupilProfile.nameUpdateSuccess");
+    isEditingName.value = false;
 
     try {
-      await authStore.fetchCurrentUserProfile()
-    } catch {
-    }
+      await authStore.fetchCurrentUserProfile();
+    } catch {}
   } catch (error) {
     saveErrorMessage.value =
       error instanceof Error && error.message.trim().length > 0
         ? error.message
-        : t('pupilProfile.nameUpdateError')
+        : t("pupilProfile.nameUpdateError");
   } finally {
-    isSavingName.value = false
+    isSavingName.value = false;
   }
 }
 
 onMounted(() => {
   if (!authStore.authorizationHeader) {
-    return
+    return;
   }
 
-  void authStore.fetchCurrentUserProfile().catch(() => {})
-})
+  void authStore.fetchCurrentUserProfile().catch(() => {});
+});
 </script>
 
 <template>
   <section class="min-h-[calc(100vh-3rem)]">
-    <div class="relative min-h-[calc(100vh-3rem)] w-full px-4 py-8 sm:px-8 lg:px-16 lg:py-12">
+    <div
+      class="relative min-h-[calc(100vh-3rem)] w-full px-4 py-8 sm:px-8 lg:px-16 lg:py-12"
+    >
       <header class="mb-10 text-center">
-        <h1 class="text-[clamp(2.25rem,4vw,3rem)] font-medium leading-none tracking-tight text-zinc-900">
-          {{ t('pupilProfile.title') }}
+        <h1
+          class="text-[clamp(2.25rem,4vw,3rem)] font-medium leading-none tracking-tight text-zinc-900"
+        >
+          {{ t("pupilProfile.title") }}
         </h1>
-        <p class="mx-auto mt-3 max-w-2xl text-zinc-600">{{ t('pupilProfile.description') }}</p>
+        <p class="mx-auto mt-3 max-w-2xl text-zinc-600">
+          {{ t("pupilProfile.description") }}
+        </p>
       </header>
 
       <section class="max-w-4xl">
-        <h2 class="mb-6 text-[1.85rem] font-normal text-zinc-900">{{ t('pupilProfile.identityTitle') }}</h2>
+        <h2 class="mb-6 text-[1.85rem] font-normal text-zinc-900">
+          {{ t("pupilProfile.identityTitle") }}
+        </h2>
 
-        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(10rem,1fr))]">
+        <div
+          class="grid gap-4 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(10rem,1fr))]"
+        >
           <article
             v-for="stat in profileStats"
             :key="stat.label"
@@ -187,8 +208,13 @@ onMounted(() => {
               stat.cardClass,
             ]"
           >
-            <span class="mb-2 block text-sm text-zinc-500">{{ stat.label }}</span>
-            <strong :class="['text-xl font-semibold text-zinc-900', stat.valueClass]">{{ stat.value }}</strong>
+            <span class="mb-2 block text-sm text-zinc-500">{{
+              stat.label
+            }}</span>
+            <strong
+              :class="['text-xl font-semibold text-zinc-900', stat.valueClass]"
+              >{{ stat.value }}</strong
+            >
           </article>
         </div>
 
@@ -199,7 +225,7 @@ onMounted(() => {
               type="button"
               @click="void replayHomeGuide()"
             >
-              {{ t('pupilProfile.replayHomeGuideAction') }}
+              {{ t("pupilProfile.replayHomeGuideAction") }}
             </button>
           </div>
 
@@ -209,12 +235,18 @@ onMounted(() => {
             type="button"
             @click="startEditingName"
           >
-            {{ t('pupilProfile.editNameAction') }}
+            {{ t("pupilProfile.editNameAction") }}
           </button>
 
-          <form v-else class="grid max-w-md gap-4" @submit.prevent="saveDisplayName">
+          <form
+            v-else
+            class="grid max-w-md gap-4"
+            @submit.prevent="saveDisplayName"
+          >
             <label class="grid gap-2">
-              <span class="text-sm text-zinc-700">{{ t('pupilProfile.displayNameLabel') }}</span>
+              <span class="text-sm text-zinc-700">{{
+                t("pupilProfile.displayNameLabel")
+              }}</span>
               <input
                 v-model="draftDisplayName"
                 class="w-full rounded-lg border border-zinc-300 bg-white px-4 py-3 text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-zinc-900 focus:ring-2 focus:ring-zinc-900/10"
@@ -234,7 +266,11 @@ onMounted(() => {
                 :disabled="!isNameDirty || isSavingName || hasBadWords"
                 type="submit"
               >
-                {{ isSavingName ? t('pupilProfile.savingNameAction') : t('pupilProfile.saveNameAction') }}
+                {{
+                  isSavingName
+                    ? t("pupilProfile.savingNameAction")
+                    : t("pupilProfile.saveNameAction")
+                }}
               </button>
               <button
                 class="inline-flex items-center justify-center rounded-lg border border-zinc-300 bg-white px-4 py-3 text-zinc-900 transition hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-zinc-900/20"
@@ -242,13 +278,13 @@ onMounted(() => {
                 type="button"
                 @click="cancelEditingName"
               >
-                {{ t('pupilProfile.cancelNameAction') }}
+                {{ t("pupilProfile.cancelNameAction") }}
               </button>
             </div>
           </form>
 
           <p v-if="hasBadWords" class="text-sm text-red-600">
-            {{ t('pupilProfile.nameProfanityError') }}
+            {{ t("pupilProfile.nameProfanityError") }}
           </p>
           <p v-if="saveSuccessMessage" class="mt-4 text-sm text-emerald-700">
             {{ saveSuccessMessage }}
@@ -257,27 +293,33 @@ onMounted(() => {
       </section>
 
       <section class="mt-11 max-w-4xl">
-        <h2 class="mb-6 text-[1.85rem] font-normal text-zinc-900">{{ t('pupilProfile.avatarTitle') }}</h2>
-        <div class="max-w-136 rounded-2xl border border-zinc-200 bg-zinc-50 p-6 shadow-sm">
-          <div class="mb-6 flex justify-center rounded-xl border border-zinc-200 bg-white p-6">
+        <h2 class="mb-6 text-[1.85rem] font-normal text-zinc-900">
+          {{ t("pupilProfile.avatarTitle") }}
+        </h2>
+        <div
+          class="max-w-136 rounded-2xl border border-zinc-200 bg-zinc-50 p-6 shadow-sm"
+        >
+          <div
+            class="mb-6 flex justify-center rounded-xl border border-zinc-200 bg-white p-6"
+          >
             <AvatarComponent />
           </div>
           <p class="mb-4 text-zinc-600">
-            {{ t('pupilProfile.avatarPlaceholder') }}
+            {{ t("pupilProfile.avatarPlaceholder") }}
           </p>
           <ul class="mb-6 list-disc space-y-2 pl-5 text-zinc-700">
-            <li>{{ t('pupilProfile.avatarOptions.bodyType') }}</li>
-            <li>{{ t('pupilProfile.avatarOptions.eyeColor') }}</li>
-            <li>{{ t('pupilProfile.avatarOptions.skinTone') }}</li>
-            <li>{{ t('pupilProfile.avatarOptions.hairStyle') }}</li>
-            <li>{{ t('pupilProfile.avatarOptions.outfit') }}</li>
-            <li>{{ t('pupilProfile.avatarOptions.accessory') }}</li>
+            <li>{{ t("pupilProfile.avatarOptions.bodyType") }}</li>
+            <li>{{ t("pupilProfile.avatarOptions.eyeColor") }}</li>
+            <li>{{ t("pupilProfile.avatarOptions.skinTone") }}</li>
+            <li>{{ t("pupilProfile.avatarOptions.hairStyle") }}</li>
+            <li>{{ t("pupilProfile.avatarOptions.outfit") }}</li>
+            <li>{{ t("pupilProfile.avatarOptions.accessory") }}</li>
           </ul>
           <RouterLink
             class="inline-flex items-center justify-center rounded-lg border border-zinc-900 bg-zinc-900 px-4 py-3 text-white transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-zinc-900/20"
             :to="{ name: 'avatar-edit' }"
           >
-            {{ t('pupilProfile.avatarAction') }}
+            {{ t("pupilProfile.avatarAction") }}
           </RouterLink>
         </div>
       </section>
diff --git a/src/profile/pages/PupilSettingsPage.vue b/src/profile/pages/PupilSettingsPage.vue
index 96094b65..6740189f 100644
--- a/src/profile/pages/PupilSettingsPage.vue
+++ b/src/profile/pages/PupilSettingsPage.vue
@@ -1,99 +1,108 @@
 <script setup lang="ts">
-import { Music2, Volume2, VolumeX } from 'lucide-vue-next'
-import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { Music2, Volume2, VolumeX } from "lucide-vue-next";
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import {
   getPupilSoundtrackVolume,
   setPupilSoundtrackVolume,
-} from '@/app/audio/pupilSoundtrack'
-import { getPupilSfxVolume, setPupilSfxVolume } from '@/app/audio/pupilSfx'
+} from "@/app/audio/pupilSoundtrack";
+import { getPupilSfxVolume, setPupilSfxVolume } from "@/app/audio/pupilSfx";
 
-const { t } = useI18n()
+const { t } = useI18n();
 
-const musicVolume = ref(getPupilSoundtrackVolume())
-const sfxVolume = ref(getPupilSfxVolume())
-const previousMusicVolume = ref(musicVolume.value > 0 ? musicVolume.value : 50)
-const previousSfxVolume = ref(sfxVolume.value > 0 ? sfxVolume.value : 60)
+const musicVolume = ref(getPupilSoundtrackVolume());
+const sfxVolume = ref(getPupilSfxVolume());
+const previousMusicVolume = ref(musicVolume.value > 0 ? musicVolume.value : 50);
+const previousSfxVolume = ref(sfxVolume.value > 0 ? sfxVolume.value : 60);
 
 function sliderBackground(value: number) {
-  return `linear-gradient(to right, #a8a8a8 0%, #a8a8a8 ${value}%, #d9d9d9 ${value}%, #d9d9d9 100%)`
+  return `linear-gradient(to right, #a8a8a8 0%, #a8a8a8 ${value}%, #d9d9d9 ${value}%, #d9d9d9 100%)`;
 }
 
 function rememberSfxVolume() {
   if (sfxVolume.value > 0) {
-    previousSfxVolume.value = sfxVolume.value
+    previousSfxVolume.value = sfxVolume.value;
   }
 }
 
 function toggleMusicMute() {
   if (musicVolume.value === 0) {
-    musicVolume.value = previousMusicVolume.value > 0 ? previousMusicVolume.value : 50
-    return
+    musicVolume.value =
+      previousMusicVolume.value > 0 ? previousMusicVolume.value : 50;
+    return;
   }
 
-  previousMusicVolume.value = musicVolume.value
-  musicVolume.value = 0
+  previousMusicVolume.value = musicVolume.value;
+  musicVolume.value = 0;
 }
 
 function toggleSfxMute() {
   if (sfxVolume.value === 0) {
-    sfxVolume.value = previousSfxVolume.value > 0 ? previousSfxVolume.value : 50
-    return
+    sfxVolume.value =
+      previousSfxVolume.value > 0 ? previousSfxVolume.value : 50;
+    return;
   }
 
-  previousSfxVolume.value = sfxVolume.value
-  sfxVolume.value = 0
+  previousSfxVolume.value = sfxVolume.value;
+  sfxVolume.value = 0;
 }
 
 const musicStyle = computed(() => ({
   background: sliderBackground(musicVolume.value),
-}))
+}));
 
 const sfxStyle = computed(() => ({
   background: sliderBackground(sfxVolume.value),
-}))
+}));
 
-const isMusicMuted = computed(() => musicVolume.value === 0)
-const isSfxMuted = computed(() => sfxVolume.value === 0)
+const isMusicMuted = computed(() => musicVolume.value === 0);
+const isSfxMuted = computed(() => sfxVolume.value === 0);
 
 watch(
   musicVolume,
   (value) => {
     if (value > 0) {
-      previousMusicVolume.value = value
+      previousMusicVolume.value = value;
     }
 
-    setPupilSoundtrackVolume(value)
+    setPupilSoundtrackVolume(value);
   },
   { immediate: true },
-)
+);
 
 watch(
   sfxVolume,
   (value) => {
     if (value > 0) {
-      previousSfxVolume.value = value
+      previousSfxVolume.value = value;
     }
 
-    setPupilSfxVolume(value)
+    setPupilSfxVolume(value);
   },
   { immediate: true },
-)
-
+);
 </script>
 
 <template>
   <section class="min-h-[calc(100vh-3rem)]">
-    <div class="relative min-h-[calc(100vh-3rem)] w-full px-4 py-8 sm:px-8 lg:px-16 lg:py-12">
+    <div
+      class="relative min-h-[calc(100vh-3rem)] w-full px-4 py-8 sm:px-8 lg:px-16 lg:py-12"
+    >
       <header class="mb-10">
-        <h1 class="text-[clamp(2.25rem,4vw,3rem)] font-medium leading-none tracking-tight text-zinc-900">
-          {{ t('pupilSettings.title') }}
+        <h1
+          class="text-[clamp(2.25rem,4vw,3rem)] font-medium leading-none tracking-tight text-zinc-900"
+        >
+          {{ t("pupilSettings.title") }}
         </h1>
-        <p class="mt-3 max-w-2xl text-zinc-600">{{ t('pupilSettings.description') }}</p>
+        <p class="mt-3 max-w-2xl text-zinc-600">
+          {{ t("pupilSettings.description") }}
+        </p>
       </header>
 
       <section class="max-w-3xl">
-        <h2 class="mb-6 text-[1.85rem] font-normal text-zinc-900">{{ t('pupilSettings.audioTitle') }}</h2>
+        <h2 class="mb-6 text-[1.85rem] font-normal text-zinc-900">
+          {{ t("pupilSettings.audioTitle") }}
+        </h2>
 
         <div class="grid grid-cols-[3rem_minmax(0,1fr)] items-center gap-5">
           <button
@@ -105,16 +114,14 @@ watch(
             type="button"
             @click="toggleMusicMute"
           >
-            <VolumeX
-              v-if="isMusicMuted"
-              class="h-6 w-6"
-              aria-hidden="true"
-            />
+            <VolumeX v-if="isMusicMuted" class="h-6 w-6" aria-hidden="true" />
             <Music2 v-else class="h-6 w-6" aria-hidden="true" />
           </button>
 
           <label class="block">
-            <span class="mb-2 inline-block text-sm text-zinc-700">{{ t('pupilSettings.musicLabel') }}</span>
+            <span class="mb-2 inline-block text-sm text-zinc-700">{{
+              t("pupilSettings.musicLabel")
+            }}</span>
             <input
               v-model.number="musicVolume"
               :aria-label="t('pupilSettings.musicLabel')"
@@ -127,7 +134,9 @@ watch(
           </label>
         </div>
 
-        <div class="mt-6 grid grid-cols-[3rem_minmax(0,1fr)] items-center gap-5">
+        <div
+          class="mt-6 grid grid-cols-[3rem_minmax(0,1fr)] items-center gap-5"
+        >
           <button
             :aria-label="t('pupilSettings.toggleSfxMute')"
             :class="[
@@ -137,16 +146,14 @@ watch(
             type="button"
             @click="toggleSfxMute"
           >
-            <VolumeX
-              v-if="isSfxMuted"
-              class="h-6 w-6"
-              aria-hidden="true"
-            />
+            <VolumeX v-if="isSfxMuted" class="h-6 w-6" aria-hidden="true" />
             <Volume2 v-else class="h-6 w-6" aria-hidden="true" />
           </button>
 
           <label class="block">
-            <span class="mb-2 inline-block text-sm text-zinc-700">{{ t('pupilSettings.sfxLabel') }}</span>
+            <span class="mb-2 inline-block text-sm text-zinc-700">{{
+              t("pupilSettings.sfxLabel")
+            }}</span>
             <input
               v-model.number="sfxVolume"
               :aria-label="t('pupilSettings.sfxLabel')"
diff --git a/src/profile/pages/__tests__/PupilProfilePage.spec.ts b/src/profile/pages/__tests__/PupilProfilePage.spec.ts
index 1138b738..e9f0a500 100644
--- a/src/profile/pages/__tests__/PupilProfilePage.spec.ts
+++ b/src/profile/pages/__tests__/PupilProfilePage.spec.ts
@@ -1,29 +1,30 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import { nextTick } from 'vue'
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
+import { nextTick } from "vue";
 
-import PupilProfilePage from '@/profile/pages/PupilProfilePage.vue'
-import { createAppI18n } from '@/app/i18n'
-import { useAuthStore } from '@/auth/model/auth.store'
+import PupilProfilePage from "@/profile/pages/PupilProfilePage.vue";
+import { createAppI18n } from "@/app/i18n";
+import { useAuthStore } from "@/auth/model/auth.store";
 
-const pushMock = vi.fn()
-const HOME_GUIDE_STORAGE_KEY = 'nettdetektivene.pupil-home.guide.seen'
+const pushMock = vi.fn();
+const HOME_GUIDE_STORAGE_KEY = "nettdetektivene.pupil-home.guide.seen";
 
-vi.mock('vue-router', async () => {
-  const actual = await vi.importActual<typeof import('vue-router')>('vue-router')
+vi.mock("vue-router", async () => {
+  const actual =
+    await vi.importActual<typeof import("vue-router")>("vue-router");
 
   return {
     ...actual,
     useRouter: () => ({
       push: pushMock,
     }),
-  }
-})
+  };
+});
 
 function mountProfilePage() {
-  const pinia = createPinia()
-  setActivePinia(pinia)
+  const pinia = createPinia();
+  setActivePinia(pinia);
 
   return {
     authStore: useAuthStore(pinia),
@@ -35,113 +36,118 @@ function mountProfilePage() {
             template: '<div data-testid="avatar-component" />',
           },
           RouterLink: {
-            template: '<a><slot /></a>',
+            template: "<a><slot /></a>",
           },
         },
       },
     }),
-  }
+  };
 }
 
-function getStatValue(wrapper: ReturnType<typeof mountProfilePage>['wrapper'], index: number) {
-  const cards = wrapper.findAll('article')
-  const card = cards[index]
+function getStatValue(
+  wrapper: ReturnType<typeof mountProfilePage>["wrapper"],
+  index: number,
+) {
+  const cards = wrapper.findAll("article");
+  const card = cards[index];
 
-  expect(card).toBeDefined()
-  return card!.find('strong').text()
+  expect(card).toBeDefined();
+  return card!.find("strong").text();
 }
 
-describe('PupilProfilePage', () => {
+describe("PupilProfilePage", () => {
   beforeEach(() => {
-    setActivePinia(createPinia())
-    pushMock.mockReset()
-    Object.defineProperty(window, 'localStorage', {
+    setActivePinia(createPinia());
+    pushMock.mockReset();
+    Object.defineProperty(window, "localStorage", {
       value: {
         getItem: (key: string) => window.sessionStorage.getItem(key),
-        setItem: (key: string, value: string) => window.sessionStorage.setItem(key, value),
+        setItem: (key: string, value: string) =>
+          window.sessionStorage.setItem(key, value),
         removeItem: (key: string) => window.sessionStorage.removeItem(key),
       },
       configurable: true,
-    })
-    window.sessionStorage.clear()
-  })
+    });
+    window.sessionStorage.clear();
+  });
 
-  it('renders classroom-scoped level and xp from the auth store profile', async () => {
-    const { authStore, wrapper } = mountProfilePage()
+  it("renders classroom-scoped level and xp from the auth store profile", async () => {
+    const { authStore, wrapper } = mountProfilePage();
 
     authStore.user = {
-      subject: 'pupil-1',
-      portalType: 'PUPIL',
+      subject: "pupil-1",
+      portalType: "PUPIL",
       email: null,
-      username: 'ada',
+      username: "ada",
       authorities: [],
       pupilProfile: {
-        displayName: 'Ada',
+        displayName: "Ada",
         totalXp: 480,
         currentLevel: 4,
         currentClassroomId: 101,
         hasCompletedOnboarding: true,
       },
       teacherProfile: null,
-    }
+    };
 
-    await nextTick()
+    await nextTick();
 
-    expect(getStatValue(wrapper, 0)).toBe('Ada')
-    expect(getStatValue(wrapper, 1)).toBe('4')
-    expect(getStatValue(wrapper, 2)).toBe('480')
-  })
+    expect(getStatValue(wrapper, 0)).toBe("Ada");
+    expect(getStatValue(wrapper, 1)).toBe("4");
+    expect(getStatValue(wrapper, 2)).toBe("480");
+  });
 
-  it('falls back to default level and xp before the pupil profile is hydrated', async () => {
-    const { authStore, wrapper } = mountProfilePage()
+  it("falls back to default level and xp before the pupil profile is hydrated", async () => {
+    const { authStore, wrapper } = mountProfilePage();
 
     authStore.user = {
-      subject: 'pupil-1',
-      portalType: 'PUPIL',
+      subject: "pupil-1",
+      portalType: "PUPIL",
       email: null,
-      username: 'ada',
+      username: "ada",
       authorities: [],
       pupilProfile: null,
       teacherProfile: null,
-    }
+    };
 
-    await nextTick()
+    await nextTick();
 
-    expect(getStatValue(wrapper, 0)).toBe('Elev')
-    expect(getStatValue(wrapper, 1)).toBe('1')
-    expect(getStatValue(wrapper, 2)).toBe('0')
-  })
+    expect(getStatValue(wrapper, 0)).toBe("Elev");
+    expect(getStatValue(wrapper, 1)).toBe("1");
+    expect(getStatValue(wrapper, 2)).toBe("0");
+  });
 
-  it('lets the pupil reset and replay the home guide', async () => {
-    const { authStore, wrapper } = mountProfilePage()
+  it("lets the pupil reset and replay the home guide", async () => {
+    const { authStore, wrapper } = mountProfilePage();
 
-    window.localStorage.setItem(HOME_GUIDE_STORAGE_KEY, 'true')
+    window.localStorage.setItem(HOME_GUIDE_STORAGE_KEY, "true");
     authStore.user = {
-      subject: 'pupil-1',
-      portalType: 'PUPIL',
+      subject: "pupil-1",
+      portalType: "PUPIL",
       email: null,
-      username: 'ada',
+      username: "ada",
       authorities: [],
       pupilProfile: {
-        displayName: 'Ada',
+        displayName: "Ada",
         totalXp: 480,
         currentLevel: 4,
         currentClassroomId: 101,
         hasCompletedOnboarding: true,
       },
       teacherProfile: null,
-    }
+    };
 
-    await nextTick()
+    await nextTick();
 
-    const replayButton = wrapper.findAll('button').find((button) =>
-      button.text() === 'Vis hjemskjerm-guiden igjen')
+    const replayButton = wrapper
+      .findAll("button")
+      .find((button) => button.text() === "Vis hjemskjerm-guiden igjen");
 
-    expect(replayButton).toBeDefined()
+    expect(replayButton).toBeDefined();
 
-    await replayButton!.trigger('click')
+    await replayButton!.trigger("click");
 
-    expect(window.localStorage.getItem(HOME_GUIDE_STORAGE_KEY)).toBeNull()
-    expect(pushMock).toHaveBeenCalledWith('/pupil/home')
-  })
-})
+    expect(window.localStorage.getItem(HOME_GUIDE_STORAGE_KEY)).toBeNull();
+    expect(pushMock).toHaveBeenCalledWith("/pupil/home");
+  });
+});
diff --git a/src/profile/pages/__tests__/PupilSettingsPage.spec.ts b/src/profile/pages/__tests__/PupilSettingsPage.spec.ts
index 0376db1f..e61c9aa6 100644
--- a/src/profile/pages/__tests__/PupilSettingsPage.spec.ts
+++ b/src/profile/pages/__tests__/PupilSettingsPage.spec.ts
@@ -1,62 +1,62 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { mount } from "@vue/test-utils";
 
-import PupilSettingsPage from '@/profile/pages/PupilSettingsPage.vue'
-import { createAppI18n } from '@/app/i18n'
+import PupilSettingsPage from "@/profile/pages/PupilSettingsPage.vue";
+import { createAppI18n } from "@/app/i18n";
 import {
   getPupilSoundtrackVolume,
   setPupilSoundtrackVolume,
-} from '@/app/audio/pupilSoundtrack'
-import { getPupilSfxVolume, setPupilSfxVolume } from '@/app/audio/pupilSfx'
+} from "@/app/audio/pupilSoundtrack";
+import { getPupilSfxVolume, setPupilSfxVolume } from "@/app/audio/pupilSfx";
 
-vi.mock('@/app/audio/pupilSoundtrack', () => ({
+vi.mock("@/app/audio/pupilSoundtrack", () => ({
   getPupilSoundtrackVolume: vi.fn(() => 35),
   setPupilSoundtrackVolume: vi.fn(),
-}))
+}));
 
-vi.mock('@/app/audio/pupilSfx', () => ({
+vi.mock("@/app/audio/pupilSfx", () => ({
   getPupilSfxVolume: vi.fn(() => 60),
   setPupilSfxVolume: vi.fn(),
-}))
+}));
 
-describe('PupilSettingsPage', () => {
+describe("PupilSettingsPage", () => {
   beforeEach(() => {
-    vi.clearAllMocks()
-  })
+    vi.clearAllMocks();
+  });
 
-  it('binds the music slider to the shared soundtrack volume', async () => {
+  it("binds the music slider to the shared soundtrack volume", async () => {
     const wrapper = mount(PupilSettingsPage, {
       global: {
         plugins: [createAppI18n()],
       },
-    })
+    });
 
-    const musicSlider = wrapper.findAll('input[type="range"]')[0]
+    const musicSlider = wrapper.findAll('input[type="range"]')[0];
 
-    expect(getPupilSoundtrackVolume).toHaveBeenCalledTimes(1)
-    expect(setPupilSoundtrackVolume).toHaveBeenCalledWith(35)
-    expect(musicSlider?.element).toHaveProperty('value', '35')
+    expect(getPupilSoundtrackVolume).toHaveBeenCalledTimes(1);
+    expect(setPupilSoundtrackVolume).toHaveBeenCalledWith(35);
+    expect(musicSlider?.element).toHaveProperty("value", "35");
 
-    await musicSlider!.setValue(80)
+    await musicSlider!.setValue(80);
 
-    expect(setPupilSoundtrackVolume).toHaveBeenLastCalledWith(80)
-  })
+    expect(setPupilSoundtrackVolume).toHaveBeenLastCalledWith(80);
+  });
 
-  it('binds the sfx slider to the shared sfx volume', async () => {
+  it("binds the sfx slider to the shared sfx volume", async () => {
     const wrapper = mount(PupilSettingsPage, {
       global: {
         plugins: [createAppI18n()],
       },
-    })
+    });
 
-    const sfxSlider = wrapper.findAll('input[type="range"]')[1]
+    const sfxSlider = wrapper.findAll('input[type="range"]')[1];
 
-    expect(getPupilSfxVolume).toHaveBeenCalledTimes(1)
-    expect(setPupilSfxVolume).toHaveBeenCalledWith(60)
-    expect(sfxSlider?.element).toHaveProperty('value', '60')
+    expect(getPupilSfxVolume).toHaveBeenCalledTimes(1);
+    expect(setPupilSfxVolume).toHaveBeenCalledWith(60);
+    expect(sfxSlider?.element).toHaveProperty("value", "60");
 
-    await sfxSlider!.setValue(25)
+    await sfxSlider!.setValue(25);
 
-    expect(setPupilSfxVolume).toHaveBeenLastCalledWith(25)
-  })
-})
+    expect(setPupilSfxVolume).toHaveBeenLastCalledWith(25);
+  });
+});
diff --git a/src/profile/routes.ts b/src/profile/routes.ts
index e9340890..467efb06 100644
--- a/src/profile/routes.ts
+++ b/src/profile/routes.ts
@@ -1,7 +1,7 @@
 import type { RouteRecordRaw } from "vue-router";
 
-import PupilProfilePage from '@/profile/pages/PupilProfilePage.vue'
-import PupilSettingsPage from '@/profile/pages/PupilSettingsPage.vue'
+import PupilProfilePage from "@/profile/pages/PupilProfilePage.vue";
+import PupilSettingsPage from "@/profile/pages/PupilSettingsPage.vue";
 
 export const profileRoutes: RouteRecordRaw[] = [
   {
@@ -9,15 +9,15 @@ export const profileRoutes: RouteRecordRaw[] = [
     name: "pupil-profile",
     component: PupilProfilePage,
     meta: {
-      backTarget: { name: 'pupil-home' },
+      backTarget: { name: "pupil-home" },
     },
   },
   {
-    path: 'settings',
-    name: 'pupil-settings',
+    path: "settings",
+    name: "pupil-settings",
     component: PupilSettingsPage,
     meta: {
-      backTarget: { name: 'pupil-home' },
+      backTarget: { name: "pupil-home" },
     },
   },
-]
+];
diff --git a/src/pupil-portal/components/DashboardCard.vue b/src/pupil-portal/components/DashboardCard.vue
index a8878a14..b18de66c 100644
--- a/src/pupil-portal/components/DashboardCard.vue
+++ b/src/pupil-portal/components/DashboardCard.vue
@@ -2,22 +2,26 @@
 import { RouterLink } from "vue-router";
 
 defineProps<{
-
-  title: string
-  description: string
-  to: string
-  central?: boolean
+  title: string;
+  description: string;
+  to: string;
+  central?: boolean;
   //a component to skip styling, so if it has an image, it removes the box
-  plain?: boolean
-}>()
-
+  plain?: boolean;
+}>();
 </script>
 
 <template>
-
   <!-- accepts array if image -->
-  <RouterLink :to="to" :class="['dashboard-card transition-colors', plain ? '' : 'bg-card text-card-foreground border border-border rounded-lg p-4 shadow-sm hover:bg-accent']">
-
+  <RouterLink
+    :to="to"
+    :class="[
+      'dashboard-card transition-colors',
+      plain
+        ? ''
+        : 'bg-card text-card-foreground border border-border rounded-lg p-4 shadow-sm hover:bg-accent',
+    ]"
+  >
     <h3 class="title font-medium">{{ title }}</h3>
 
     <p
diff --git a/src/pupil-portal/pages/PupilHomePage.vue b/src/pupil-portal/pages/PupilHomePage.vue
index 7e0281fd..59bb7400 100644
--- a/src/pupil-portal/pages/PupilHomePage.vue
+++ b/src/pupil-portal/pages/PupilHomePage.vue
@@ -1,181 +1,209 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import { RouterLink } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import AvatarComponent from '@/avatar/components/AvatarComponent.vue'
-import LogoutButton from '@/shared/components/LogoutButton.vue'
-import corkboard1 from '@/pupil-portal/components/images/special/Corkboard1.webp'
-import leaderboard from '@/pupil-portal/components/images/special/Leaderboard.webp'
-import leaderboardEng from '@/pupil-portal/components/images/special/lead_eng.webp'
-import medal from '@/pupil-portal/components/images/Medal.png'
-import help from '@/pupil-portal/components/images/special/Help.webp'
-import mystery from '@/pupil-portal/components/images/special/Mystery.webp'
-import mysteryEng from '@/pupil-portal/components/images/special/myst_eng.webp'
-import notebookEng from '@/pupil-portal/components/images/special/note_eng.webp'
-import notebook from '@/pupil-portal/components/images/special/note_nor.webp'
-import map from '@/pupil-portal/components/images/map.webp'
-import settings from '@/pupil-portal/components/images/special/settings.webp'
-import profilPortrait from '@/pupil-portal/components/images/special/profil-portrait.webp'
-
-const { t, locale } = useI18n()
-const HOME_GUIDE_STORAGE_KEY = 'nettdetektivene.pupil-home.guide.seen'
-
-const leaderboardImg = computed(() => locale.value === 'en' ? leaderboardEng : leaderboard)
-const mysteryImg = computed(() => locale.value === 'en' ? mysteryEng : mystery)
-const notebookImg = computed(() => locale.value === 'en' ? notebookEng : notebook)
-
-const isGuideVisible = ref(false)
-const activeGuideStepIndex = ref(0)
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { RouterLink } from "vue-router";
+import { useI18n } from "vue-i18n";
+import AvatarComponent from "@/avatar/components/AvatarComponent.vue";
+import LogoutButton from "@/shared/components/LogoutButton.vue";
+import corkboard1 from "@/pupil-portal/components/images/special/Corkboard1.webp";
+import leaderboard from "@/pupil-portal/components/images/special/Leaderboard.webp";
+import leaderboardEng from "@/pupil-portal/components/images/special/lead_eng.webp";
+import medal from "@/pupil-portal/components/images/Medal.png";
+import help from "@/pupil-portal/components/images/special/Help.webp";
+import mystery from "@/pupil-portal/components/images/special/Mystery.webp";
+import mysteryEng from "@/pupil-portal/components/images/special/myst_eng.webp";
+import notebookEng from "@/pupil-portal/components/images/special/note_eng.webp";
+import notebook from "@/pupil-portal/components/images/special/note_nor.webp";
+import map from "@/pupil-portal/components/images/map.webp";
+import settings from "@/pupil-portal/components/images/special/settings.webp";
+import profilPortrait from "@/pupil-portal/components/images/special/profil-portrait.webp";
+
+const { t, locale } = useI18n();
+const HOME_GUIDE_STORAGE_KEY = "nettdetektivene.pupil-home.guide.seen";
+
+const leaderboardImg = computed(() =>
+  locale.value === "en" ? leaderboardEng : leaderboard,
+);
+const mysteryImg = computed(() =>
+  locale.value === "en" ? mysteryEng : mystery,
+);
+const notebookImg = computed(() =>
+  locale.value === "en" ? notebookEng : notebook,
+);
+
+const isGuideVisible = ref(false);
+const activeGuideStepIndex = ref(0);
 const guideSteps = computed(() => [
   {
-    id: 'profile',
-    title: t('pupilHome.guide.profileTitle'),
-    description: t('pupilHome.guide.profileDescription'),
+    id: "profile",
+    title: t("pupilHome.guide.profileTitle"),
+    description: t("pupilHome.guide.profileDescription"),
   },
   {
-    id: 'map',
-    title: t('pupilHome.guide.mapTitle'),
-    description: t('pupilHome.guide.mapDescription'),
+    id: "map",
+    title: t("pupilHome.guide.mapTitle"),
+    description: t("pupilHome.guide.mapDescription"),
   },
   {
-    id: 'notebook',
-    title: t('pupilHome.guide.notebookTitle'),
-    description: t('pupilHome.guide.notebookDescription'),
+    id: "notebook",
+    title: t("pupilHome.guide.notebookTitle"),
+    description: t("pupilHome.guide.notebookDescription"),
   },
   {
-    id: 'leaderboard',
-    title: t('pupilHome.guide.leaderboardTitle'),
-    description: t('pupilHome.guide.leaderboardDescription'),
+    id: "leaderboard",
+    title: t("pupilHome.guide.leaderboardTitle"),
+    description: t("pupilHome.guide.leaderboardDescription"),
   },
   {
-    id: 'medals',
-    title: t('pupilHome.guide.medalsTitle'),
-    description: t('pupilHome.guide.medalsDescription'),
+    id: "medals",
+    title: t("pupilHome.guide.medalsTitle"),
+    description: t("pupilHome.guide.medalsDescription"),
   },
   {
-    id: 'mystery',
-    title: t('pupilHome.guide.mysteryTitle'),
-    description: t('pupilHome.guide.mysteryDescription'),
+    id: "mystery",
+    title: t("pupilHome.guide.mysteryTitle"),
+    description: t("pupilHome.guide.mysteryDescription"),
   },
   {
-    id: 'help',
-    title: t('pupilHome.guide.helpTitle'),
-    description: t('pupilHome.guide.helpDescription'),
+    id: "help",
+    title: t("pupilHome.guide.helpTitle"),
+    description: t("pupilHome.guide.helpDescription"),
   },
-])
-const activeGuideStep = computed(() => guideSteps.value[activeGuideStepIndex.value] ?? guideSteps.value[0])
-const isFirstGuideStep = computed(() => activeGuideStepIndex.value === 0)
-const isLastGuideStep = computed(() => activeGuideStepIndex.value === guideSteps.value.length - 1)
+]);
+const activeGuideStep = computed(
+  () => guideSteps.value[activeGuideStepIndex.value] ?? guideSteps.value[0],
+);
+const isFirstGuideStep = computed(() => activeGuideStepIndex.value === 0);
+const isLastGuideStep = computed(
+  () => activeGuideStepIndex.value === guideSteps.value.length - 1,
+);
 const guidePanelClass = computed(() => {
   switch (activeGuideStep.value?.id) {
-    case 'notebook':
-    case 'leaderboard':
-    case 'mystery':
-    case 'help':
-      return 'inset-x-4 top-4 bottom-auto sm:inset-x-8 sm:top-8'
-    case 'profile':
-    case 'medals':
-      return 'inset-x-auto right-4 left-auto w-[min(100%-2rem,32rem)] sm:right-8'
+    case "notebook":
+    case "leaderboard":
+    case "mystery":
+    case "help":
+      return "inset-x-4 top-4 bottom-auto sm:inset-x-8 sm:top-8";
+    case "profile":
+    case "medals":
+      return "inset-x-auto right-4 left-auto w-[min(100%-2rem,32rem)] sm:right-8";
     default:
-      return 'inset-x-4 bottom-4 sm:inset-x-8'
+      return "inset-x-4 bottom-4 sm:inset-x-8";
   }
-})
+});
 
 function canUseStorage() {
-  return typeof window !== 'undefined' && typeof window.localStorage?.getItem === 'function'
+  return (
+    typeof window !== "undefined" &&
+    typeof window.localStorage?.getItem === "function"
+  );
 }
 
 function hasSeenHomeGuide() {
-  return canUseStorage() && window.localStorage.getItem(HOME_GUIDE_STORAGE_KEY) === 'true'
+  return (
+    canUseStorage() &&
+    window.localStorage.getItem(HOME_GUIDE_STORAGE_KEY) === "true"
+  );
 }
 
 function persistHomeGuideSeen() {
   if (!canUseStorage()) {
-    return
+    return;
   }
 
-  window.localStorage.setItem(HOME_GUIDE_STORAGE_KEY, 'true')
+  window.localStorage.setItem(HOME_GUIDE_STORAGE_KEY, "true");
 }
 
 function dismissGuide() {
-  isGuideVisible.value = false
-  persistHomeGuideSeen()
+  isGuideVisible.value = false;
+  persistHomeGuideSeen();
 }
 
 function goToPreviousGuideStep() {
-  activeGuideStepIndex.value = Math.max(0, activeGuideStepIndex.value - 1)
+  activeGuideStepIndex.value = Math.max(0, activeGuideStepIndex.value - 1);
 }
 
 function goToNextGuideStep() {
   if (isLastGuideStep.value) {
-    dismissGuide()
-    return
+    dismissGuide();
+    return;
   }
 
-  activeGuideStepIndex.value += 1
+  activeGuideStepIndex.value += 1;
 }
 
 function goToGuideStep(index: number) {
-  activeGuideStepIndex.value = Math.min(Math.max(index, 0), guideSteps.value.length - 1)
+  activeGuideStepIndex.value = Math.min(
+    Math.max(index, 0),
+    guideSteps.value.length - 1,
+  );
 }
 
 function handleGuideKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && isGuideVisible.value) {
-    dismissGuide()
+  if (event.key === "Escape" && isGuideVisible.value) {
+    dismissGuide();
   }
 }
 
 function guideClass(stepId: string) {
   return isGuideVisible.value && activeGuideStep.value?.id === stepId
-    ? 'z-30 ring-4 ring-amber-300 ring-offset-6 ring-offset-[rgba(255,248,235,0.95)] rounded-2xl'
-    : ''
+    ? "z-30 ring-4 ring-amber-300 ring-offset-6 ring-offset-[rgba(255,248,235,0.95)] rounded-2xl"
+    : "";
 }
 
 function tileClass(stepId?: string) {
   return [
-    isGuideVisible.value ? 'pointer-events-none' : 'hover:scale-110',
-    stepId ? guideClass(stepId) : '',
-  ]
+    isGuideVisible.value ? "pointer-events-none" : "hover:scale-110",
+    stepId ? guideClass(stepId) : "",
+  ];
 }
 
 onMounted(() => {
   if (!hasSeenHomeGuide()) {
-    isGuideVisible.value = true
-    activeGuideStepIndex.value = 0
+    isGuideVisible.value = true;
+    activeGuideStepIndex.value = 0;
   }
 
-  window.addEventListener('keydown', handleGuideKeydown)
-})
+  window.addEventListener("keydown", handleGuideKeydown);
+});
 
 onBeforeUnmount(() => {
-  window.removeEventListener('keydown', handleGuideKeydown)
-})
+  window.removeEventListener("keydown", handleGuideKeydown);
+});
 </script>
 
 <template>
-  <section class="p-5 h-screen bg-background flex flex-col overflow-hidden items-center">
+  <section
+    class="p-5 h-screen bg-background flex flex-col overflow-hidden items-center"
+  >
     <div class="flex justify-center items-center mb-5 w-full">
       <h1 class="text-4xl font-bold text-primary">
-        {{ t('pupilHome.title') }}
+        {{ t("pupilHome.title") }}
       </h1>
     </div>
 
     <div class="flex-1 flex items-center justify-center min-h-0 w-full">
       <div
         class="relative rounded-lg w-full"
-        style="aspect-ratio: 16/9; max-height: 100%;"
-        :style="{ backgroundImage: `url(${corkboard1})`, backgroundSize: '100% 100%', backgroundPosition: 'center' }"
+        style="aspect-ratio: 16/9; max-height: 100%"
+        :style="{
+          backgroundImage: `url(${corkboard1})`,
+          backgroundSize: '100% 100%',
+          backgroundPosition: 'center',
+        }"
       >
         <RouterLink
           to="/pupil/profile"
           class="absolute transition-transform duration-200"
           :class="tileClass('profile')"
-          style="top: 12%; left: 10%; width: 15%;"
+          style="top: 12%; left: 10%; width: 15%"
           :title="t('pupilHome.cards.profileTitle')"
           data-guide-id="profile"
         >
           <div class="relative w-full">
-            <div class="absolute bg-white" style="top: 10%; left: 15%; width: 70%; height: 70%;">
+            <div
+              class="absolute bg-white"
+              style="top: 10%; left: 15%; width: 70%; height: 70%"
+            >
               <AvatarComponent size="100%" />
             </div>
             <img :src="profilPortrait" class="w-full block relative" />
@@ -186,7 +214,7 @@ onBeforeUnmount(() => {
           to="/pupil/settings"
           class="absolute transition-transform duration-200"
           :class="tileClass()"
-          style="top: 7%; right: 5%; width: 4%;"
+          style="top: 7%; right: 5%; width: 4%"
           :title="t('pupilHome.cards.settingsTitle')"
         >
           <img :src="settings" class="w-full rounded" />
@@ -196,7 +224,7 @@ onBeforeUnmount(() => {
           to="/pupil/map"
           class="absolute transition-transform duration-200"
           :class="tileClass('map')"
-          style="top: 7%; left: 30%; width: 48%;"
+          style="top: 7%; left: 30%; width: 48%"
           :title="t('pupilHome.cards.mapTitle')"
           data-guide-id="map"
         >
@@ -207,7 +235,7 @@ onBeforeUnmount(() => {
           to="/pupil/notebook"
           class="absolute transition-transform duration-200"
           :class="tileClass('notebook')"
-          style="bottom: 7%; left: 45%; width: 13%;"
+          style="bottom: 7%; left: 45%; width: 13%"
           :title="t('pupilHome.cards.notebookTitle')"
           data-guide-id="notebook"
         >
@@ -218,7 +246,7 @@ onBeforeUnmount(() => {
           to="/pupil/medals"
           class="absolute transition-transform duration-200"
           :class="tileClass('medals')"
-          style="top: 20%; right: 15%; width: 8%;"
+          style="top: 20%; right: 15%; width: 8%"
           :title="t('pupilHome.cards.medalsTitle')"
           data-guide-id="medals"
         >
@@ -229,7 +257,7 @@ onBeforeUnmount(() => {
           to="/pupil/leaderboard"
           class="absolute transition-transform duration-200"
           :class="tileClass('leaderboard')"
-          style="bottom: 22%; left: 10%; width: 20%;"
+          style="bottom: 22%; left: 10%; width: 20%"
           :title="t('pupilHome.cards.leaderboardTitle')"
           data-guide-id="leaderboard"
         >
@@ -240,7 +268,7 @@ onBeforeUnmount(() => {
           to="/pupil/mystery"
           class="absolute transition-transform duration-200"
           :class="tileClass('mystery')"
-          style="bottom: 10%; right: 12%; width: 16%;"
+          style="bottom: 10%; right: 12%; width: 16%"
           :title="t('pupilHome.cards.mysteryTitle')"
           data-guide-id="mystery"
         >
@@ -251,7 +279,7 @@ onBeforeUnmount(() => {
           to="/pupil/help"
           class="absolute transition-transform duration-200"
           :class="tileClass('help')"
-          style="bottom: 9%; left: 7%; width: 5%;"
+          style="bottom: 9%; left: 7%; width: 5%"
           :title="t('pupilHome.cards.helpTitle')"
           data-guide-id="help"
         >
@@ -276,12 +304,17 @@ onBeforeUnmount(() => {
       :class="guidePanelClass"
       aria-live="polite"
     >
-      <div class="mb-3 flex items-center gap-2" :aria-label="t('pupilHome.guide.progressLabel')">
+      <div
+        class="mb-3 flex items-center gap-2"
+        :aria-label="t('pupilHome.guide.progressLabel')"
+      >
         <button
           v-for="(step, index) in guideSteps"
           :key="step.id"
           class="h-2.5 w-2.5 rounded-full border border-amber-700 transition focus:outline-none focus:ring-2 focus:ring-amber-700/40"
-          :class="index <= activeGuideStepIndex ? 'bg-amber-700' : 'bg-transparent'"
+          :class="
+            index <= activeGuideStepIndex ? 'bg-amber-700' : 'bg-transparent'
+          "
           :aria-label="step.title"
           :aria-current="index === activeGuideStepIndex ? 'step' : undefined"
           type="button"
@@ -301,7 +334,7 @@ onBeforeUnmount(() => {
           type="button"
           @click="dismissGuide"
         >
-          {{ t('common.skip') }}
+          {{ t("common.skip") }}
         </button>
 
         <div class="flex flex-wrap gap-3">
@@ -311,14 +344,18 @@ onBeforeUnmount(() => {
             type="button"
             @click="goToPreviousGuideStep"
           >
-            {{ t('common.back') }}
+            {{ t("common.back") }}
           </button>
           <button
             class="inline-flex items-center justify-center rounded-full bg-amber-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-700"
             type="button"
             @click="goToNextGuideStep"
           >
-            {{ isLastGuideStep ? t('pupilHome.guide.doneAction') : t('pupilHome.guide.nextAction') }}
+            {{
+              isLastGuideStep
+                ? t("pupilHome.guide.doneAction")
+                : t("pupilHome.guide.nextAction")
+            }}
           </button>
         </div>
       </div>
diff --git a/src/pupil-portal/pages/PupilOnboardingPage.vue b/src/pupil-portal/pages/PupilOnboardingPage.vue
index 888b63df..9182ca01 100644
--- a/src/pupil-portal/pages/PupilOnboardingPage.vue
+++ b/src/pupil-portal/pages/PupilOnboardingPage.vue
@@ -1,54 +1,61 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import AvatarComponent from '@/avatar/components/AvatarComponent.vue'
-import AvatarAssetComponent from '@/avatar/components/AvatarAssetComponent.vue'
-import { hatAssets, outfitAssets, skinToneAssets } from '@/avatar/model/avatarAssets'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { useAvatarStore } from '@/avatar/model/avatar.store'
-import { requestCompleteCurrentUserOnboarding } from '@/profile/api/profile.api'
-import type { AvatarAssetAvailability } from '@/avatar/model/avatar.types'
-
-type OnboardingStep = 'intro' | 'avatar'
-const HOME_GUIDE_STORAGE_KEY = 'nettdetektivene.pupil-home.guide.seen'
-
-const router = useRouter()
-const { t } = useI18n()
-const authStore = useAuthStore()
-const avatarStore = useAvatarStore()
-const { avatar, avatarAssets } = storeToRefs(avatarStore)
-
-const currentStep = ref<OnboardingStep>('intro')
-const isCompleting = ref(false)
-const completionError = ref<string | null>(null)
-
-const canStartGame = computed(() =>
-  Boolean(avatar.value) && !avatarStore.isBusy && !isCompleting.value)
+import { computed, onMounted, ref } from "vue";
+import { storeToRefs } from "pinia";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import AvatarComponent from "@/avatar/components/AvatarComponent.vue";
+import AvatarAssetComponent from "@/avatar/components/AvatarAssetComponent.vue";
+import {
+  hatAssets,
+  outfitAssets,
+  skinToneAssets,
+} from "@/avatar/model/avatarAssets";
+import { useAuthStore } from "@/auth/model/auth.store";
+import { useAvatarStore } from "@/avatar/model/avatar.store";
+import { requestCompleteCurrentUserOnboarding } from "@/profile/api/profile.api";
+import type { AvatarAssetAvailability } from "@/avatar/model/avatar.types";
+
+type OnboardingStep = "intro" | "avatar";
+const HOME_GUIDE_STORAGE_KEY = "nettdetektivene.pupil-home.guide.seen";
+
+const router = useRouter();
+const { t } = useI18n();
+const authStore = useAuthStore();
+const avatarStore = useAvatarStore();
+const { avatar, avatarAssets } = storeToRefs(avatarStore);
+
+const currentStep = ref<OnboardingStep>("intro");
+const isCompleting = ref(false);
+const completionError = ref<string | null>(null);
+
+const canStartGame = computed(
+  () => Boolean(avatar.value) && !avatarStore.isBusy && !isCompleting.value,
+);
 
 const displayName = computed(() =>
-  authStore.portalType === 'PUPIL'
-    ? authStore.user?.pupilProfile?.displayName ?? t('avatarEditor.fallbackDisplayName')
-    : t('avatarEditor.fallbackDisplayName'))
+  authStore.portalType === "PUPIL"
+    ? (authStore.user?.pupilProfile?.displayName ??
+      t("avatarEditor.fallbackDisplayName"))
+    : t("avatarEditor.fallbackDisplayName"),
+);
 
 function goToAvatarStep() {
-  completionError.value = null
-  currentStep.value = 'avatar'
+  completionError.value = null;
+  currentStep.value = "avatar";
 }
 
 function goToIntroStep() {
-  completionError.value = null
-  currentStep.value = 'intro'
+  completionError.value = null;
+  currentStep.value = "intro";
 }
 
 async function ensureAvatarLoaded() {
   if (!avatar.value && !avatarStore.isBusy) {
-    await avatarStore.fetchAvatar()
+    await avatarStore.fetchAvatar();
   }
 
   if (!avatarAssets.value) {
-    await avatarStore.fetchAvatarAssets()
+    await avatarStore.fetchAvatarAssets();
   }
 }
 
@@ -56,138 +63,147 @@ function resolveAssetAvailability(
   options: AvatarAssetAvailability[] | undefined,
   assetId: string,
 ): AvatarAssetAvailability | undefined {
-  return options?.find(option => option.id === assetId)
+  return options?.find((option) => option.id === assetId);
 }
 
-function isAssetLocked(options: AvatarAssetAvailability[] | undefined, assetId: string): boolean {
-  const option = resolveAssetAvailability(options, assetId)
-  return option ? !option.unlocked : true
+function isAssetLocked(
+  options: AvatarAssetAvailability[] | undefined,
+  assetId: string,
+): boolean {
+  const option = resolveAssetAvailability(options, assetId);
+  return option ? !option.unlocked : true;
 }
 
-function getLockedText(options: AvatarAssetAvailability[] | undefined, assetId: string): string | null {
-  const option = resolveAssetAvailability(options, assetId)
+function getLockedText(
+  options: AvatarAssetAvailability[] | undefined,
+  assetId: string,
+): string | null {
+  const option = resolveAssetAvailability(options, assetId);
   if (!option || option.unlocked) {
-    return null
+    return null;
   }
 
-  return t('avatarEditor.unlocksAtLevel', { level: option.unlocksAtLevel })
+  return t("avatarEditor.unlocksAtLevel", { level: option.unlocksAtLevel });
 }
 
 async function selectSkinTone(skinTone: string) {
-  await ensureAvatarLoaded()
+  await ensureAvatarLoaded();
   if (
     !avatar.value ||
     avatar.value.skinColorId === skinTone ||
     isAssetLocked(avatarAssets.value?.skinColors, skinTone)
   ) {
-    return
+    return;
   }
 
   await avatarStore.updateAvatar({
     hatId: avatar.value.hatId,
     skinColorId: skinTone,
     outfitId: avatar.value.outfitId,
-  })
+  });
 }
 
 async function selectOutfitStyle(outfitStyle: string) {
-  await ensureAvatarLoaded()
+  await ensureAvatarLoaded();
   if (
     !avatar.value ||
     avatar.value.outfitId === outfitStyle ||
     isAssetLocked(avatarAssets.value?.outfits, outfitStyle)
   ) {
-    return
+    return;
   }
 
   await avatarStore.updateAvatar({
     hatId: avatar.value.hatId,
     skinColorId: avatar.value.skinColorId,
     outfitId: outfitStyle,
-  })
+  });
 }
 
 async function selectHat(hatId: string) {
-  await ensureAvatarLoaded()
+  await ensureAvatarLoaded();
   if (
     !avatar.value ||
     avatar.value.hatId === hatId ||
     isAssetLocked(avatarAssets.value?.hats, hatId)
   ) {
-    return
+    return;
   }
 
   await avatarStore.updateAvatar({
     hatId,
     skinColorId: avatar.value.skinColorId,
     outfitId: avatar.value.outfitId,
-  })
+  });
 }
 
 function asErrorMessage(error: unknown) {
   if (error instanceof Error && error.message.trim().length > 0) {
-    return error.message
+    return error.message;
   }
 
-  return t('onboarding.errors.complete')
+  return t("onboarding.errors.complete");
 }
 
 function resetHomeGuideSeenState() {
-  if (typeof window === 'undefined' || typeof window.localStorage?.removeItem !== 'function') {
-    return
+  if (
+    typeof window === "undefined" ||
+    typeof window.localStorage?.removeItem !== "function"
+  ) {
+    return;
   }
 
-  window.localStorage.removeItem(HOME_GUIDE_STORAGE_KEY)
+  window.localStorage.removeItem(HOME_GUIDE_STORAGE_KEY);
 }
 
 async function completeOnboarding() {
   if (!authStore.authorizationHeader || !canStartGame.value) {
-    return
+    return;
   }
 
-  isCompleting.value = true
-  completionError.value = null
+  isCompleting.value = true;
+  completionError.value = null;
 
   try {
-    await requestCompleteCurrentUserOnboarding(authStore.authorizationHeader)
-    authStore.markOnboardingCompleted()
-    resetHomeGuideSeenState()
-    await router.replace({ name: 'pupil-home' })
+    await requestCompleteCurrentUserOnboarding(authStore.authorizationHeader);
+    authStore.markOnboardingCompleted();
+    resetHomeGuideSeenState();
+    await router.replace({ name: "pupil-home" });
   } catch (error) {
-    completionError.value = asErrorMessage(error)
+    completionError.value = asErrorMessage(error);
   } finally {
-    isCompleting.value = false
+    isCompleting.value = false;
   }
 }
 
 onMounted(() => {
-  void ensureAvatarLoaded().catch(() => {})
-})
+  void ensureAvatarLoaded().catch(() => {});
+});
 </script>
 
 <template>
   <main class="onboarding-page">
     <section v-if="currentStep === 'intro'" class="intro-shell">
       <div class="intro-panel">
-        <p class="eyebrow">{{ t('onboarding.intro.eyebrow') }}</p>
-        <h1>{{ t('onboarding.intro.title') }}</h1>
-        <p class="lead">{{ t('onboarding.intro.lead') }}</p>
+        <p class="eyebrow">{{ t("onboarding.intro.eyebrow") }}</p>
+        <h1>{{ t("onboarding.intro.title") }}</h1>
+        <p class="lead">{{ t("onboarding.intro.lead") }}</p>
         <div class="story-box">
-          <p>{{ t('onboarding.intro.paragraphOne') }}</p>
-          <p>{{ t('onboarding.intro.paragraphTwo') }}</p>
-          <p>{{ t('onboarding.intro.paragraphThree') }}</p>
+          <p>{{ t("onboarding.intro.paragraphOne") }}</p>
+          <p>{{ t("onboarding.intro.paragraphTwo") }}</p>
+          <p>{{ t("onboarding.intro.paragraphThree") }}</p>
         </div>
         <button class="primary-button" type="button" @click="goToAvatarStep">
-          {{ t('onboarding.intro.continue') }}
+          {{ t("onboarding.intro.continue") }}
         </button>
       </div>
     </section>
 
     <section v-else class="avatar-shell">
       <header class="avatar-header">
-        <p class="eyebrow">{{ t('onboarding.avatar.eyebrow') }}</p>
-        <h1>{{ t('onboarding.avatar.title') }}</h1>
-        <p class="lead">{{ t('onboarding.avatar.lead') }}</p>
+        <p class="eyebrow">{{ t("onboarding.avatar.eyebrow") }}</p>
+        <h1>{{ t("onboarding.avatar.title") }}</h1>
+        <p class="lead">{{ t("onboarding.avatar.lead") }}</p>
       </header>
 
       <div class="avatar-layout">
@@ -196,17 +212,24 @@ onMounted(() => {
         </div>
 
         <div class="avatar-controls">
-          <h2 class="name-field">{{ t('avatarEditor.detectiveName', { name: displayName }) }}</h2>
+          <h2 class="name-field">
+            {{ t("avatarEditor.detectiveName", { name: displayName }) }}
+          </h2>
 
           <section class="avatar-section">
-            <h3>{{ t('avatarEditor.sections.skinColor') }}</h3>
+            <h3>{{ t("avatarEditor.sections.skinColor") }}</h3>
             <div class="avatar-assets-grid">
               <AvatarAssetComponent
                 v-for="skinToneAsset in skinToneAssets"
                 :key="skinToneAsset.key"
                 :avatar-asset="skinToneAsset"
-                :disabled="avatarStore.isBusy || isAssetLocked(avatarAssets?.skinColors, skinToneAsset.key)"
-                :lock-text="getLockedText(avatarAssets?.skinColors, skinToneAsset.key)"
+                :disabled="
+                  avatarStore.isBusy ||
+                  isAssetLocked(avatarAssets?.skinColors, skinToneAsset.key)
+                "
+                :lock-text="
+                  getLockedText(avatarAssets?.skinColors, skinToneAsset.key)
+                "
                 :is-selected="avatar?.skinColorId === skinToneAsset.key"
                 @select="void selectSkinTone(skinToneAsset.key)"
               />
@@ -214,13 +237,16 @@ onMounted(() => {
           </section>
 
           <section class="avatar-section">
-            <h3>{{ t('avatarEditor.sections.hats') }}</h3>
+            <h3>{{ t("avatarEditor.sections.hats") }}</h3>
             <div class="avatar-assets-grid">
               <AvatarAssetComponent
                 v-for="hatAsset in hatAssets"
                 :key="hatAsset.key"
                 :avatar-asset="hatAsset"
-                :disabled="avatarStore.isBusy || isAssetLocked(avatarAssets?.hats, hatAsset.key)"
+                :disabled="
+                  avatarStore.isBusy ||
+                  isAssetLocked(avatarAssets?.hats, hatAsset.key)
+                "
                 :lock-text="getLockedText(avatarAssets?.hats, hatAsset.key)"
                 :is-selected="avatar?.hatId === hatAsset.key"
                 @select="void selectHat(hatAsset.key)"
@@ -229,27 +255,34 @@ onMounted(() => {
           </section>
 
           <section class="avatar-section">
-            <h3>{{ t('avatarEditor.sections.outfits') }}</h3>
+            <h3>{{ t("avatarEditor.sections.outfits") }}</h3>
             <div class="avatar-assets-grid">
               <AvatarAssetComponent
                 v-for="outfitAsset in outfitAssets"
                 :key="outfitAsset.key"
                 :avatar-asset="outfitAsset"
-                :disabled="avatarStore.isBusy || isAssetLocked(avatarAssets?.outfits, outfitAsset.key)"
-                :lock-text="getLockedText(avatarAssets?.outfits, outfitAsset.key)"
+                :disabled="
+                  avatarStore.isBusy ||
+                  isAssetLocked(avatarAssets?.outfits, outfitAsset.key)
+                "
+                :lock-text="
+                  getLockedText(avatarAssets?.outfits, outfitAsset.key)
+                "
                 :is-selected="avatar?.outfitId === outfitAsset.key"
                 @select="void selectOutfitStyle(outfitAsset.key)"
               />
             </div>
           </section>
 
-          <p v-if="avatarStore.errorMessage" class="error-text">{{ avatarStore.errorMessage }}</p>
+          <p v-if="avatarStore.errorMessage" class="error-text">
+            {{ avatarStore.errorMessage }}
+          </p>
         </div>
       </div>
 
       <div class="actions">
         <button class="secondary-button" type="button" @click="goToIntroStep">
-          {{ t('common.back') }}
+          {{ t("common.back") }}
         </button>
         <button
           class="primary-button"
@@ -257,7 +290,11 @@ onMounted(() => {
           type="button"
           @click="void completeOnboarding()"
         >
-          {{ isCompleting ? t('onboarding.avatar.completing') : t('common.startGame') }}
+          {{
+            isCompleting
+              ? t("onboarding.avatar.completing")
+              : t("common.startGame")
+          }}
         </button>
       </div>
       <p v-if="completionError" class="error-text">{{ completionError }}</p>
diff --git a/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts b/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts
index 0cc52da1..d4ece0c6 100644
--- a/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts
+++ b/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts
@@ -1,31 +1,31 @@
-import { beforeEach, describe, expect, it } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import { nextTick } from 'vue'
-import { createMemoryHistory, createRouter } from 'vue-router'
+import { beforeEach, describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
+import { nextTick } from "vue";
+import { createMemoryHistory, createRouter } from "vue-router";
 
-import PupilHomePage from '@/pupil-portal/pages/PupilHomePage.vue'
-import { createAppI18n } from '@/app/i18n'
-import { useAuthStore } from '@/auth/model/auth.store'
+import PupilHomePage from "@/pupil-portal/pages/PupilHomePage.vue";
+import { createAppI18n } from "@/app/i18n";
+import { useAuthStore } from "@/auth/model/auth.store";
 
-const HOME_GUIDE_STORAGE_KEY = 'nettdetektivene.pupil-home.guide.seen'
+const HOME_GUIDE_STORAGE_KEY = "nettdetektivene.pupil-home.guide.seen";
 
 function mountHomePage() {
-  const pinia = createPinia()
-  setActivePinia(pinia)
+  const pinia = createPinia();
+  setActivePinia(pinia);
   const router = createRouter({
     history: createMemoryHistory(),
     routes: [
-      { path: '/pupil/profile', component: { template: '<div />' } },
-      { path: '/pupil/settings', component: { template: '<div />' } },
-      { path: '/pupil/map', component: { template: '<div />' } },
-      { path: '/pupil/notebook', component: { template: '<div />' } },
-      { path: '/pupil/medals', component: { template: '<div />' } },
-      { path: '/pupil/leaderboard', component: { template: '<div />' } },
-      { path: '/pupil/mystery', component: { template: '<div />' } },
-      { path: '/pupil/help', component: { template: '<div />' } },
+      { path: "/pupil/profile", component: { template: "<div />" } },
+      { path: "/pupil/settings", component: { template: "<div />" } },
+      { path: "/pupil/map", component: { template: "<div />" } },
+      { path: "/pupil/notebook", component: { template: "<div />" } },
+      { path: "/pupil/medals", component: { template: "<div />" } },
+      { path: "/pupil/leaderboard", component: { template: "<div />" } },
+      { path: "/pupil/mystery", component: { template: "<div />" } },
+      { path: "/pupil/help", component: { template: "<div />" } },
     ],
-  })
+  });
 
   return {
     authStore: useAuthStore(pinia),
@@ -42,78 +42,81 @@ function mountHomePage() {
         },
       },
     }),
-  }
+  };
 }
 
-describe('PupilHomePage', () => {
+describe("PupilHomePage", () => {
   beforeEach(() => {
-    setActivePinia(createPinia())
-    Object.defineProperty(window, 'localStorage', {
+    setActivePinia(createPinia());
+    Object.defineProperty(window, "localStorage", {
       value: {
         getItem: (key: string) => window.sessionStorage.getItem(key),
-        setItem: (key: string, value: string) => window.sessionStorage.setItem(key, value),
+        setItem: (key: string, value: string) =>
+          window.sessionStorage.setItem(key, value),
         removeItem: (key: string) => window.sessionStorage.removeItem(key),
       },
       configurable: true,
-    })
-    window.sessionStorage.clear()
-  })
+    });
+    window.sessionStorage.clear();
+  });
 
-  it('shows the home guide for first-time pupils and allows skipping it', async () => {
-    const { authStore, wrapper } = mountHomePage()
+  it("shows the home guide for first-time pupils and allows skipping it", async () => {
+    const { authStore, wrapper } = mountHomePage();
 
     authStore.user = {
-      subject: 'pupil-1',
-      portalType: 'PUPIL',
+      subject: "pupil-1",
+      portalType: "PUPIL",
       email: null,
-      username: 'ada',
+      username: "ada",
       authorities: [],
       pupilProfile: {
-        displayName: 'Ada',
+        displayName: "Ada",
         totalXp: 480,
         currentLevel: 4,
         currentClassroomId: 101,
         hasCompletedOnboarding: true,
       },
       teacherProfile: null,
-    }
+    };
 
-    await nextTick()
+    await nextTick();
 
-    expect(wrapper.text()).toContain('Dette er profilen din')
+    expect(wrapper.text()).toContain("Dette er profilen din");
 
-    const skipButton = wrapper.findAll('button').find((button) => button.text() === 'Hopp over')
-    expect(skipButton).toBeDefined()
+    const skipButton = wrapper
+      .findAll("button")
+      .find((button) => button.text() === "Hopp over");
+    expect(skipButton).toBeDefined();
 
-    await skipButton!.trigger('click')
-    await nextTick()
+    await skipButton!.trigger("click");
+    await nextTick();
 
-    expect(wrapper.text()).not.toContain('Dette er profilen din')
-    expect(window.localStorage.getItem(HOME_GUIDE_STORAGE_KEY)).toBe('true')
-  })
+    expect(wrapper.text()).not.toContain("Dette er profilen din");
+    expect(window.localStorage.getItem(HOME_GUIDE_STORAGE_KEY)).toBe("true");
+  });
 
-  it('does not show the home guide when it has already been dismissed', async () => {
-    window.localStorage.setItem(HOME_GUIDE_STORAGE_KEY, 'true')
-    const { authStore, wrapper } = mountHomePage()
+  it("does not show the home guide when it has already been dismissed", async () => {
+    window.localStorage.setItem(HOME_GUIDE_STORAGE_KEY, "true");
+    const { authStore, wrapper } = mountHomePage();
 
     authStore.user = {
-      subject: 'pupil-1',
-      portalType: 'PUPIL',
+      subject: "pupil-1",
+      portalType: "PUPIL",
       email: null,
-      username: 'ada',
+      username: "ada",
       authorities: [],
       pupilProfile: {
-        displayName: 'Ada',
+        displayName: "Ada",
         totalXp: 480,
         currentLevel: 4,
         currentClassroomId: 101,
         hasCompletedOnboarding: true,
       },
       teacherProfile: null,
-    }
+    };
 
-    await nextTick()
+    await nextTick();
 
-    expect(wrapper.text()).not.toContain('Dette er profilen din')
-  })
-})
+    expect(wrapper.text()).not.toContain("Dette er profilen din");
+  });
+});
diff --git a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
index bbc17ffc..55df4fde 100644
--- a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
+++ b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
@@ -1,75 +1,79 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { flushPromises, mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import { nextTick } from 'vue'
-import PupilOnboardingPage from '@/pupil-portal/pages/PupilOnboardingPage.vue'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { useAvatarStore } from '@/avatar/model/avatar.store'
-import { requestCompleteCurrentUserOnboarding } from '@/profile/api/profile.api'
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
+import { nextTick } from "vue";
+import PupilOnboardingPage from "@/pupil-portal/pages/PupilOnboardingPage.vue";
+import { useAuthStore } from "@/auth/model/auth.store";
+import { useAvatarStore } from "@/avatar/model/avatar.store";
+import { requestCompleteCurrentUserOnboarding } from "@/profile/api/profile.api";
 
-const replaceMock = vi.fn()
+const replaceMock = vi.fn();
 
-vi.mock('vue-i18n', () => ({
+vi.mock("vue-i18n", () => ({
   useI18n: () => ({
     t: (key: string) => key,
   }),
-}))
+}));
 
-vi.mock('vue-router', () => ({
+vi.mock("vue-router", () => ({
   useRouter: () => ({
     replace: replaceMock,
   }),
-}))
+}));
 
-vi.mock('@/profile/api/profile.api', () => ({
+vi.mock("@/profile/api/profile.api", () => ({
   requestCompleteCurrentUserOnboarding: vi.fn(),
-}))
+}));
 
-describe('PupilOnboardingPage', () => {
+describe("PupilOnboardingPage", () => {
   beforeEach(() => {
-    setActivePinia(createPinia())
-    replaceMock.mockReset()
-    vi.mocked(requestCompleteCurrentUserOnboarding).mockReset()
-    Object.defineProperty(window, 'localStorage', {
+    setActivePinia(createPinia());
+    replaceMock.mockReset();
+    vi.mocked(requestCompleteCurrentUserOnboarding).mockReset();
+    Object.defineProperty(window, "localStorage", {
       value: {
         getItem: (key: string) => window.sessionStorage.getItem(key),
-        setItem: (key: string, value: string) => window.sessionStorage.setItem(key, value),
+        setItem: (key: string, value: string) =>
+          window.sessionStorage.setItem(key, value),
         removeItem: (key: string) => window.sessionStorage.removeItem(key),
       },
       configurable: true,
-    })
-    window.sessionStorage.clear()
-  })
+    });
+    window.sessionStorage.clear();
+  });
 
-  it('completes onboarding and redirects to pupil home', async () => {
-    const authStore = useAuthStore()
-    const avatarStore = useAvatarStore()
-    window.localStorage.setItem('nettdetektivene.pupil-home.guide.seen', 'true')
+  it("completes onboarding and redirects to pupil home", async () => {
+    const authStore = useAuthStore();
+    const avatarStore = useAvatarStore();
+    window.localStorage.setItem(
+      "nettdetektivene.pupil-home.guide.seen",
+      "true",
+    );
 
-    authStore.accessToken = 'access-token'
+    authStore.accessToken = "access-token";
     authStore.user = {
-      subject: 'pupil-1',
-      portalType: 'PUPIL',
+      subject: "pupil-1",
+      portalType: "PUPIL",
       email: null,
-      username: 'ada',
+      username: "ada",
       authorities: [],
       pupilProfile: {
-        displayName: 'Ada',
+        displayName: "Ada",
         totalXp: 0,
         currentLevel: 1,
         currentClassroomId: null,
         hasCompletedOnboarding: false,
       },
       teacherProfile: null,
-    }
+    };
 
     vi.mocked(requestCompleteCurrentUserOnboarding).mockResolvedValue({
-      displayName: 'Ada',
+      displayName: "Ada",
       totalXp: 0,
       currentLevel: 1,
       currentClassroomId: null,
       hasCompletedOnboarding: true,
-    })
+    });
 
     const wrapper = mount(PupilOnboardingPage, {
       global: {
@@ -78,31 +82,36 @@ describe('PupilOnboardingPage', () => {
             template: '<div data-testid="avatar-component" />',
           },
           AvatarAssetComponent: {
-            template: '<button type="button" data-testid="avatar-asset-component" />',
+            template:
+              '<button type="button" data-testid="avatar-asset-component" />',
           },
         },
       },
-    })
+    });
 
     avatarStore.avatar = {
-      hatId: 'detective-default',
-      skinColorId: 'light',
-      outfitId: 'starter',
-    }
-    avatarStore.status = 'ready'
-    await nextTick()
+      hatId: "detective-default",
+      skinColorId: "light",
+      outfitId: "starter",
+    };
+    avatarStore.status = "ready";
+    await nextTick();
 
-    await wrapper.get('button.primary-button').trigger('click')
-    await nextTick()
+    await wrapper.get("button.primary-button").trigger("click");
+    await nextTick();
 
-    const startGameButton = wrapper.get('.actions button.primary-button')
+    const startGameButton = wrapper.get(".actions button.primary-button");
 
-    await startGameButton.trigger('click')
-    await flushPromises()
+    await startGameButton.trigger("click");
+    await flushPromises();
 
-    expect(requestCompleteCurrentUserOnboarding).toHaveBeenCalledWith('Bearer access-token')
-    expect(authStore.user?.pupilProfile?.hasCompletedOnboarding).toBe(true)
-    expect(window.localStorage.getItem('nettdetektivene.pupil-home.guide.seen')).toBeNull()
-    expect(replaceMock).toHaveBeenCalledWith({ name: 'pupil-home' })
-  })
-})
+    expect(requestCompleteCurrentUserOnboarding).toHaveBeenCalledWith(
+      "Bearer access-token",
+    );
+    expect(authStore.user?.pupilProfile?.hasCompletedOnboarding).toBe(true);
+    expect(
+      window.localStorage.getItem("nettdetektivene.pupil-home.guide.seen"),
+    ).toBeNull();
+    expect(replaceMock).toHaveBeenCalledWith({ name: "pupil-home" });
+  });
+});
diff --git a/src/shared/api/response-errors.ts b/src/shared/api/response-errors.ts
index 57a850ec..0ee45778 100644
--- a/src/shared/api/response-errors.ts
+++ b/src/shared/api/response-errors.ts
@@ -1,17 +1,21 @@
 type ErrorResponseBody = {
-  message?: string
-  detail?: string
-  error?: string
-}
+  message?: string;
+  detail?: string;
+  error?: string;
+};
 
-export async function readJsonErrorMessage(response: Response): Promise<string | null> {
-  const contentType = response.headers.get('content-type') ?? ''
+export async function readJsonErrorMessage(
+  response: Response,
+): Promise<string | null> {
+  const contentType = response.headers.get("content-type") ?? "";
 
-  if (!contentType.includes('application/json')) {
-    return null
+  if (!contentType.includes("application/json")) {
+    return null;
   }
 
-  const body = (await response.json().catch(() => null)) as ErrorResponseBody | null
+  const body = (await response
+    .json()
+    .catch(() => null)) as ErrorResponseBody | null;
 
-  return body?.detail ?? body?.message ?? body?.error ?? null
+  return body?.detail ?? body?.message ?? body?.error ?? null;
 }
diff --git a/src/shared/components/AppCelebration.vue b/src/shared/components/AppCelebration.vue
index b20b9492..58f76a27 100644
--- a/src/shared/components/AppCelebration.vue
+++ b/src/shared/components/AppCelebration.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script setup lang="ts">
-import confetti from 'canvas-confetti';
-import { onMounted } from 'vue';
-import { playCelebrationSound } from '@/app/audio/celebrationSound';
+import confetti from "canvas-confetti";
+import { onMounted } from "vue";
+import { playCelebrationSound } from "@/app/audio/celebrationSound";
 
 defineProps<{
   trigger?: boolean;
@@ -18,9 +18,10 @@ const launchConfetti = () => {
   const animationEnd = Date.now() + duration;
   const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
 
-  const randomInRange = (min: number, max: number) => Math.random() * (max - min) + min;
+  const randomInRange = (min: number, max: number) =>
+    Math.random() * (max - min) + min;
 
-  const interval: ReturnType<typeof setInterval> = setInterval(function() {
+  const interval: ReturnType<typeof setInterval> = setInterval(function () {
     const timeLeft = animationEnd - Date.now();
 
     if (timeLeft <= 0) {
@@ -28,8 +29,16 @@ const launchConfetti = () => {
     }
 
     const particleCount = 50 * (timeLeft / duration);
-    confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
-    confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
+    confetti({
+      ...defaults,
+      particleCount,
+      origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
+    });
+    confetti({
+      ...defaults,
+      particleCount,
+      origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
+    });
   }, 250);
 };
 
diff --git a/src/shared/components/BackButton.vue b/src/shared/components/BackButton.vue
index c49fb9f2..d5517763 100644
--- a/src/shared/components/BackButton.vue
+++ b/src/shared/components/BackButton.vue
@@ -1,41 +1,41 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import type { RouteLocationRaw } from 'vue-router'
-import { useRoute, useRouter } from 'vue-router'
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import type { RouteLocationRaw } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 
-const { t } = useI18n()
-const route = useRoute()
-const router = useRouter()
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
 
 const fallbackRoute = computed<RouteLocationRaw>(() => {
-  if (route.path.startsWith('/teacher')) {
-    return { name: 'teacher-home' }
+  if (route.path.startsWith("/teacher")) {
+    return { name: "teacher-home" };
   }
 
-  if (route.path.startsWith('/pupil')) {
-    return { name: 'pupil-home' }
+  if (route.path.startsWith("/pupil")) {
+    return { name: "pupil-home" };
   }
 
-  return { name: 'root' }
-})
+  return { name: "root" };
+});
 
 const backTarget = computed<RouteLocationRaw>(() => {
   const matchedRouteWithTarget = [...route.matched]
     .reverse()
-    .find((record) => record.meta.backTarget !== undefined)
+    .find((record) => record.meta.backTarget !== undefined);
 
-  const target = matchedRouteWithTarget?.meta.backTarget
-  if (typeof target === 'function') {
-    return target(route)
+  const target = matchedRouteWithTarget?.meta.backTarget;
+  if (typeof target === "function") {
+    return target(route);
   }
 
-  return target ?? fallbackRoute.value
-})
+  return target ?? fallbackRoute.value;
+});
 
 const goBack = (): void => {
-  router.push(backTarget.value)
-}
+  router.push(backTarget.value);
+};
 </script>
 
 <template>
@@ -52,6 +52,6 @@ const goBack = (): void => {
         class="absolute left-[1.45rem] top-1/2 h-[0.42rem] w-[1.8rem] -translate-y-1/2 bg-gray-800"
       />
     </span>
-    <span class="sr-only">{{ t('common.back') }}</span>
+    <span class="sr-only">{{ t("common.back") }}</span>
   </button>
 </template>
diff --git a/src/shared/components/LogoutButton.vue b/src/shared/components/LogoutButton.vue
index 8b3ba97e..c0abd8e2 100644
--- a/src/shared/components/LogoutButton.vue
+++ b/src/shared/components/LogoutButton.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
-import { useAuthStore } from '@/auth/model/auth.store'
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { useAuthStore } from "@/auth/model/auth.store";
 
-const { t } = useI18n()
-const authStore = useAuthStore()
-const router = useRouter()
+const { t } = useI18n();
+const authStore = useAuthStore();
+const router = useRouter();
 
 async function logOut() {
-  await authStore.logout()
+  await authStore.logout();
   await router.push({
-    name: 'login',
-  })
+    name: "login",
+  });
 }
 </script>
 
@@ -40,6 +40,6 @@ async function logOut() {
         />
       </svg>
     </span>
-    <span>{{ t('shared.logout') }}</span>
+    <span>{{ t("shared.logout") }}</span>
   </button>
 </template>
diff --git a/src/shared/components/NewClassroomButton.vue b/src/shared/components/NewClassroomButton.vue
index 6cbe2f62..1a0909f5 100644
--- a/src/shared/components/NewClassroomButton.vue
+++ b/src/shared/components/NewClassroomButton.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
+import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 
-const router = useRouter()
+const router = useRouter();
 const { t } = useI18n();
 
 const goToNewClassroom = (): void => {
diff --git a/src/shared/components/NotificationButton.vue b/src/shared/components/NotificationButton.vue
index 3a549f9d..77bfa176 100644
--- a/src/shared/components/NotificationButton.vue
+++ b/src/shared/components/NotificationButton.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router";
 
 const router = useRouter();
 
 const goToNotifications = (): void => {
-  router.push({ name: 'notifications' });
+  router.push({ name: "notifications" });
 };
 </script>
 
diff --git a/src/shared/components/SettingsButton.vue b/src/shared/components/SettingsButton.vue
index 3dc37a83..b242fc87 100644
--- a/src/shared/components/SettingsButton.vue
+++ b/src/shared/components/SettingsButton.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router";
 
 const router = useRouter();
 
 const goToSettings = (): void => {
-  router.push({ name: 'teacher-settings' });
+  router.push({ name: "teacher-settings" });
 };
 </script>
 
diff --git a/src/shared/composables/useProfanityFilter.ts b/src/shared/composables/useProfanityFilter.ts
index c3c7c021..aa9032af 100644
--- a/src/shared/composables/useProfanityFilter.ts
+++ b/src/shared/composables/useProfanityFilter.ts
@@ -1,66 +1,58 @@
-import leoProfanity from "leo-profanity"
+import leoProfanity from "leo-profanity";
 
-let initialized = false
+let initialized = false;
 
 function init() {
-  if (initialized) return
+  if (initialized) return;
 
-  leoProfanity.clearList()
+  leoProfanity.clearList();
 
-  leoProfanity.loadDictionary("en")
+  leoProfanity.loadDictionary("en");
 
-  leoProfanity.add([
-    "faen",
-    "jævlig",
-    "dritt",
-    "helvete",
-    "idiot",
-  ])
+  leoProfanity.add(["faen", "jævlig", "dritt", "helvete", "idiot"]);
 
-  initialized = true
+  initialized = true;
 }
 
 // normalization
 function normalize(text: string) {
   return text
-  .toLowerCase()
-  .replace(/[@4]/g, "a")
-  .replace(/1/g, "i")
-  .replace(/3/g, "e")
-  .replace(/0/g, "o")
-  .replace(/\s+/g, "")
-  .replace(/[^a-zæøå]/g, "")
+    .toLowerCase()
+    .replace(/[@4]/g, "a")
+    .replace(/1/g, "i")
+    .replace(/3/g, "e")
+    .replace(/0/g, "o")
+    .replace(/\s+/g, "")
+    .replace(/[^a-zæøå]/g, "");
 }
 
 export function useProfanityFilter() {
-  init()
+  init();
 
   function hasProfanity(text: string): boolean {
-    const normalized = normalize(text)
+    const normalized = normalize(text);
 
     if (leoProfanity.check(text) || leoProfanity.check(normalized)) {
-      return true
+      return true;
     }
 
-    const badWords = leoProfanity.list()
+    const badWords = leoProfanity.list();
 
-    return badWords.some(word =>
-    normalized.includes(word)
-    )
+    return badWords.some((word) => normalized.includes(word));
   }
 
   function clean(text: string): string {
-    return leoProfanity.clean(text)
+    return leoProfanity.clean(text);
   }
 
   function sanitize(text: string): string {
-    if (!hasProfanity(text)) return text
-    return clean(text)
+    if (!hasProfanity(text)) return text;
+    return clean(text);
   }
 
   return {
     hasProfanity,
     clean,
     sanitize,
-  }
-}
\ No newline at end of file
+  };
+}
diff --git a/src/shared/moderation/banned-words.ts b/src/shared/moderation/banned-words.ts
index a9b6312b..607529fa 100644
--- a/src/shared/moderation/banned-words.ts
+++ b/src/shared/moderation/banned-words.ts
@@ -1,36 +1,38 @@
 export type ModerationResult = {
-  blockedWords: string[]
-  hasBlockedWords: boolean
-}
+  blockedWords: string[];
+  hasBlockedWords: boolean;
+};
 
 function escapeRegExp(value: string) {
-  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
-function findBlockedWords(
-  text: string,
-  bannedWords: readonly string[],
-) {
-  const normalized = text.trim()
+function findBlockedWords(text: string, bannedWords: readonly string[]) {
+  const normalized = text.trim();
 
   if (!normalized) {
-    return []
+    return [];
   }
 
   return bannedWords.filter((word) => {
-    const pattern = new RegExp(`(^|[^\\p{L}\\p{N}_])${escapeRegExp(word)}([^\\p{L}\\p{N}_]|$)`, 'iu')
-    return pattern.test(normalized)
-  })
+    const pattern = new RegExp(
+      `(^|[^\\p{L}\\p{N}_])${escapeRegExp(word)}([^\\p{L}\\p{N}_]|$)`,
+      "iu",
+    );
+    return pattern.test(normalized);
+  });
 }
 
 export function moderateText(
   values: string[],
   bannedWords: readonly string[],
 ): ModerationResult {
-  const blockedWords = [...new Set(values.flatMap((value) => findBlockedWords(value, bannedWords)))]
+  const blockedWords = [
+    ...new Set(values.flatMap((value) => findBlockedWords(value, bannedWords))),
+  ];
 
   return {
     blockedWords,
     hasBlockedWords: blockedWords.length > 0,
-  }
+  };
 }
diff --git a/src/shared/moderation/moderation.api.ts b/src/shared/moderation/moderation.api.ts
index bcba0dac..2269a61f 100644
--- a/src/shared/moderation/moderation.api.ts
+++ b/src/shared/moderation/moderation.api.ts
@@ -1,15 +1,18 @@
-import { fetchJson } from '@/auth/api/auth.api'
+import { fetchJson } from "@/auth/api/auth.api";
 
-const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
+const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? "").replace(
+  /\/$/,
+  "",
+);
 
 export type ClassroomBannedWordResponse = {
-  id: number
-  classroomId: number
-  word: string
-  createdByTeacherUserId: number
-  createdAt: string | null
-  updatedAt: string | null
-}
+  id: number;
+  classroomId: number;
+  word: string;
+  createdByTeacherUserId: number;
+  createdAt: string | null;
+  updatedAt: string | null;
+};
 
 export function requestClassroomBannedWords(
   classroomId: number,
@@ -22,7 +25,7 @@ export function requestClassroomBannedWords(
         Authorization: authorizationHeader,
       },
     },
-  )
+  );
 }
 
 export function requestTeacherClassroomBannedWords(
@@ -36,7 +39,7 @@ export function requestTeacherClassroomBannedWords(
         Authorization: authorizationHeader,
       },
     },
-  )
+  );
 }
 
 export function requestCreateTeacherClassroomBannedWord(
@@ -47,7 +50,7 @@ export function requestCreateTeacherClassroomBannedWord(
   return fetchJson<ClassroomBannedWordResponse>(
     `${API_BASE_URL}/api/v1/teacher/classrooms/${classroomId}/moderation/banned-words`,
     {
-      method: 'POST',
+      method: "POST",
       headers: {
         Authorization: authorizationHeader,
       },
@@ -55,7 +58,7 @@ export function requestCreateTeacherClassroomBannedWord(
         word,
       },
     },
-  )
+  );
 }
 
 export function requestUpdateTeacherClassroomBannedWord(
@@ -67,7 +70,7 @@ export function requestUpdateTeacherClassroomBannedWord(
   return fetchJson<ClassroomBannedWordResponse>(
     `${API_BASE_URL}/api/v1/teacher/classrooms/${classroomId}/moderation/banned-words/${bannedWordId}`,
     {
-      method: 'PUT',
+      method: "PUT",
       headers: {
         Authorization: authorizationHeader,
       },
@@ -75,7 +78,7 @@ export function requestUpdateTeacherClassroomBannedWord(
         word,
       },
     },
-  )
+  );
 }
 
 export function requestDeleteTeacherClassroomBannedWord(
@@ -86,10 +89,10 @@ export function requestDeleteTeacherClassroomBannedWord(
   return fetchJson<void>(
     `${API_BASE_URL}/api/v1/teacher/classrooms/${classroomId}/moderation/banned-words/${bannedWordId}`,
     {
-      method: 'DELETE',
+      method: "DELETE",
       headers: {
         Authorization: authorizationHeader,
       },
     },
-  )
+  );
 }
diff --git a/src/stops/api/stops.api.ts b/src/stops/api/stops.api.ts
index c9a36999..b0655a4d 100644
--- a/src/stops/api/stops.api.ts
+++ b/src/stops/api/stops.api.ts
@@ -1,7 +1,10 @@
-import { readJsonErrorMessage } from '@/shared/api/response-errors'
+import { readJsonErrorMessage } from "@/shared/api/response-errors";
 
-export const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
-const CLASSROOMS_BASE = `${API_BASE_URL}/api/v1/classrooms`
+export const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? "").replace(
+  /\/$/,
+  "",
+);
+const CLASSROOMS_BASE = `${API_BASE_URL}/api/v1/classrooms`;
 
 async function fetchJson<T>(
   url: string,
@@ -12,154 +15,154 @@ async function fetchJson<T>(
     ...init,
     headers: {
       Authorization: authorizationHeader,
-       ...init.headers,
+      ...init.headers,
     },
-    credentials: 'include',
-  })
+    credentials: "include",
+  });
 
   if (!response.ok) {
-    const fallback = `Request failed with status ${response.status}`
-    const errorMessage = await readJsonErrorMessage(response)
+    const fallback = `Request failed with status ${response.status}`;
+    const errorMessage = await readJsonErrorMessage(response);
 
     if (errorMessage) {
-      throw new Error(errorMessage)
+      throw new Error(errorMessage);
     }
 
-    const text = await response.text().catch(() => '')
-    throw new Error(text || fallback)
+    const text = await response.text().catch(() => "");
+    throw new Error(text || fallback);
   }
 
-  return (await response.json()) as T
+  return (await response.json()) as T;
 }
 
 // ---- Response shapes (mirrors backend TaskResponses.kt) ----
 
 export interface LocalizedText {
-  nb: string
-  en: string
+  nb: string;
+  en: string;
 }
 
 export interface LocalizedOptionalText {
-  nb: string | null
-  en: string | null
+  nb: string | null;
+  en: string | null;
 }
 
 export interface TaskOptionResponse {
-  id: number
-  optionOrder: number
-  optionText: LocalizedText
-  isCorrect: boolean | null
-  explanationText: LocalizedOptionalText | null
+  id: number;
+  optionOrder: number;
+  optionText: LocalizedText;
+  isCorrect: boolean | null;
+  explanationText: LocalizedOptionalText | null;
 }
 
 export interface TaskItemResponse {
-  id: number
-  itemOrder: number
-  promptText: LocalizedText
-  mediaUrl: string | null
-  metadataJson: string | null
-  options: TaskOptionResponse[]
+  id: number;
+  itemOrder: number;
+  promptText: LocalizedText;
+  mediaUrl: string | null;
+  metadataJson: string | null;
+  options: TaskOptionResponse[];
 }
 
 export interface TaskResponse {
-  id: number
-  classroomId: number
-  stopId: number
-  createdByTeacherId: number
-  title: LocalizedText
-  introText: LocalizedOptionalText | null
-  difficultyLevel: number
-  taskType: TaskType
-  passingRule: string
-  passingScore: number | null
-  maxScore: number
-  published: boolean
-  items: TaskItemResponse[]
+  id: number;
+  classroomId: number;
+  stopId: number;
+  createdByTeacherId: number;
+  title: LocalizedText;
+  introText: LocalizedOptionalText | null;
+  difficultyLevel: number;
+  taskType: TaskType;
+  passingRule: string;
+  passingScore: number | null;
+  maxScore: number;
+  published: boolean;
+  items: TaskItemResponse[];
 }
 
 export interface TaskSummaryResponse {
-  id: number
-  classroomId: number
-  stopId: number
-  title: LocalizedText
-  difficultyLevel: number
-  taskType: TaskType
-  published: boolean
-  itemCount: number
+  id: number;
+  classroomId: number;
+  stopId: number;
+  title: LocalizedText;
+  difficultyLevel: number;
+  taskType: TaskType;
+  published: boolean;
+  itemCount: number;
 }
 
 export interface SubmitStopTaskAnswerPayload {
-  taskId: number
+  taskId: number;
   itemAnswers: Array<{
-    itemId: number
-    selectedOptionId: number
-  }>
+    itemId: number;
+    selectedOptionId: number;
+  }>;
 }
 
 export interface SubmitStopAnswersPayload {
-  stopId: number
-  taskAnswers: SubmitStopTaskAnswerPayload[]
+  stopId: number;
+  taskAnswers: SubmitStopTaskAnswerPayload[];
 }
 
 export interface TaskSubmissionResultResponse {
-  taskId: number
-  title: LocalizedText
-  passed: boolean
-  score: number
-  maxScore: number
-  feedbackText: LocalizedOptionalText | null
+  taskId: number;
+  title: LocalizedText;
+  passed: boolean;
+  score: number;
+  maxScore: number;
+  feedbackText: LocalizedOptionalText | null;
 }
 
 export interface StopSubmissionResponse {
-  stopId: number
-  passed: boolean
-  score: number
-  maxScore: number
-  stopStatus: string
-  completedAt: string | null
-  taskResults: TaskSubmissionResultResponse[]
+  stopId: number;
+  passed: boolean;
+  score: number;
+  maxScore: number;
+  stopStatus: string;
+  completedAt: string | null;
+  taskResults: TaskSubmissionResultResponse[];
 }
 
 // Mirrors backend TaskType enum exactly
 export type TaskType =
-  | 'NEWS_COMPARISON'
-  | 'IMAGE_ASSESSMENT'
-  | 'IMAGE_SELECT'
-  | 'PASSWORD_EVALUATION'
-  | 'SOCIAL_SCENARIO'
-  | 'FINAL_BOSS'
-  | 'GENERIC'
+  | "NEWS_COMPARISON"
+  | "IMAGE_ASSESSMENT"
+  | "IMAGE_SELECT"
+  | "PASSWORD_EVALUATION"
+  | "SOCIAL_SCENARIO"
+  | "FINAL_BOSS"
+  | "GENERIC";
 
 // ---- Metadata shapes per task type ----
 
 // Used in TaskItem.metadataJson for NEWS_COMPARISON tasks
 export interface NewsComparisonArticleMeta {
-  optionOrder: number
-  domain: string | null
-  headline: LocalizedText | null
-  body: LocalizedText | null
-  mediaUrl: string | null
+  optionOrder: number;
+  domain: string | null;
+  headline: LocalizedText | null;
+  body: LocalizedText | null;
+  mediaUrl: string | null;
 }
 
 export interface NewsComparisonTaskMeta {
-  articles: NewsComparisonArticleMeta[]
+  articles: NewsComparisonArticleMeta[];
 }
 
 // Used in TaskItem.metadataJson for IMAGE_SELECT tasks (itemOrder=1, header)
 // Carries localized image URLs so each locale can show a different screenshot.
 export interface ImageSelectHeaderMeta {
-  mediaUrl: { nb: string; en: string }
+  mediaUrl: { nb: string; en: string };
 }
 
 // Used in TaskItem.metadataJson for IMAGE_SELECT tasks (itemOrder>1, hotspots)
 export interface ImageSelectHotspotMeta {
-  x: number
-  y: number
-  width: number
-  height: number
-  isHotspot: true
-  isTrustworthy: boolean
-  hasActionQuestion?: boolean
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  isHotspot: true;
+  isTrustworthy: boolean;
+  hasActionQuestion?: boolean;
 }
 
 // ---- API functions ----
@@ -172,7 +175,7 @@ export function requestTasksForStop(
   return fetchJson<TaskSummaryResponse[]>(
     `${CLASSROOMS_BASE}/${classroomId}/tasks?stopId=${stopId}`,
     authorizationHeader,
-)
+  );
 }
 
 export function requestTask(
@@ -183,7 +186,7 @@ export function requestTask(
   return fetchJson<TaskResponse>(
     `${CLASSROOMS_BASE}/${classroomId}/tasks/${taskId}`,
     authorizationHeader,
-)
+  );
 }
 
 export function requestSubmitStopAnswers(
@@ -195,9 +198,9 @@ export function requestSubmitStopAnswers(
     `${CLASSROOMS_BASE}/${classroomId}/tasks/submit-stop`,
     authorizationHeader,
     {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify(payload),
     },
-  )
+  );
 }
diff --git a/src/stops/components/StopFailureModal.vue b/src/stops/components/StopFailureModal.vue
index c523e486..7b4b7844 100644
--- a/src/stops/components/StopFailureModal.vue
+++ b/src/stops/components/StopFailureModal.vue
@@ -1,53 +1,55 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import type { TaskSubmissionResultResponse, StopSubmissionResponse } from '@/stops/api/stops.api'
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import type {
+  TaskSubmissionResultResponse,
+  StopSubmissionResponse,
+} from "@/stops/api/stops.api";
 
 const props = defineProps<{
-  stopTitle: string | null
-  submissionResult: StopSubmissionResponse
-}>()
+  stopTitle: string | null;
+  submissionResult: StopSubmissionResponse;
+}>();
 
 const emit = defineEmits<{
-  tryAgain: []
-}>()
+  tryAgain: [];
+}>();
 
-const { t } = useI18n()
+const { t } = useI18n();
 
-const failedTaskResults = computed<TaskSubmissionResultResponse[]>(
-    () => props.submissionResult.taskResults.filter((r) => !r.passed),
-)
+const failedTaskResults = computed<TaskSubmissionResultResponse[]>(() =>
+  props.submissionResult.taskResults.filter((r) => !r.passed),
+);
 
 const earnedStars = computed<0 | 1 | 2 | 3>(() => {
-  const { score, maxScore } = props.submissionResult
-  if (maxScore === 0) return 0
-  const ratio = score / maxScore
-  if (ratio >= 2 / 3) return 3
-  if (ratio >= 1 / 3) return 2
-  if (ratio > 0) return 1
-  return 0
-})
+  const { score, maxScore } = props.submissionResult;
+  if (maxScore === 0) return 0;
+  const ratio = score / maxScore;
+  if (ratio >= 2 / 3) return 3;
+  if (ratio >= 1 / 3) return 2;
+  if (ratio > 0) return 1;
+  return 0;
+});
 </script>
 
 <template>
   <div
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
-      role="dialog"
-      aria-modal="true"
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+    role="dialog"
+    aria-modal="true"
   >
     <div class="w-full max-w-sm rounded-3xl bg-white p-8 shadow-2xl">
       <!-- Icon + title -->
       <div class="mb-6 flex flex-col items-center gap-3 text-center">
-        <div class="flex h-16 w-16 items-center justify-center rounded-full bg-red-100 text-4xl">
+        <div
+          class="flex h-16 w-16 items-center justify-center rounded-full bg-red-100 text-4xl"
+        >
           ❌
         </div>
         <h2 class="text-2xl font-bold text-gray-900">
-          {{ t('failure.stop_failed_title') }}
+          {{ t("failure.stop_failed_title") }}
         </h2>
-        <p
-            v-if="stopTitle"
-            class="text-sm text-gray-500"
-        >
+        <p v-if="stopTitle" class="text-sm text-gray-500">
           {{ stopTitle }}
         </p>
       </div>
@@ -55,34 +57,34 @@ const earnedStars = computed<0 | 1 | 2 | 3>(() => {
       <!-- Stars earned -->
       <div class="mb-6 flex flex-col items-center gap-1">
         <p class="text-xs font-semibold uppercase tracking-wide text-gray-400">
-          {{ t('stop.starsEarned') }}
+          {{ t("stop.starsEarned") }}
         </p>
         <div class="flex gap-1 text-3xl">
           <span
-              v-for="n in 3"
-              :key="n"
-              :class="n <= earnedStars ? 'opacity-100' : 'opacity-20'"
-          >⭐</span>
+            v-for="n in 3"
+            :key="n"
+            :class="n <= earnedStars ? 'opacity-100' : 'opacity-20'"
+            >⭐</span
+          >
         </div>
         <p class="mt-1 text-sm text-gray-500">
           {{ submissionResult.score }} / {{ submissionResult.maxScore }}
-          {{ t('stop.points') }}
+          {{ t("stop.points") }}
         </p>
       </div>
 
       <!-- Failed task list -->
-      <div
-          v-if="failedTaskResults.length > 0"
-          class="mb-6"
-      >
-        <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-400">
-          {{ t('stop.tasksToRetry') }}
+      <div v-if="failedTaskResults.length > 0" class="mb-6">
+        <p
+          class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-400"
+        >
+          {{ t("stop.tasksToRetry") }}
         </p>
         <ul class="flex flex-col gap-1.5">
           <li
-              v-for="result in failedTaskResults"
-              :key="result.taskId"
-              class="flex items-center gap-2 rounded-xl border border-red-100 bg-red-50 px-3 py-2 text-sm"
+            v-for="result in failedTaskResults"
+            :key="result.taskId"
+            class="flex items-center gap-2 rounded-xl border border-red-100 bg-red-50 px-3 py-2 text-sm"
           >
             <span class="shrink-0 text-red-500">✗</span>
             <span class="font-medium text-red-900">
@@ -94,12 +96,12 @@ const earnedStars = computed<0 | 1 | 2 | 3>(() => {
 
       <!-- Try again -->
       <button
-          type="button"
-          class="w-full rounded-2xl bg-indigo-600 px-6 py-3 text-sm font-bold text-white transition-colors hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
-          @click="emit('tryAgain')"
+        type="button"
+        class="w-full rounded-2xl bg-indigo-600 px-6 py-3 text-sm font-bold text-white transition-colors hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+        @click="emit('tryAgain')"
       >
-        {{ t('failure.try_again') }}
+        {{ t("failure.try_again") }}
       </button>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/stops/components/StopTaskView.vue b/src/stops/components/StopTaskView.vue
index 3fe74d59..75cdc7c3 100644
--- a/src/stops/components/StopTaskView.vue
+++ b/src/stops/components/StopTaskView.vue
@@ -1,123 +1,134 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import TaskCard from '@/stops/components/TaskCard.vue'
-import StopFailureModal from '@/stops/components/StopFailureModal.vue'
-import type { MapStopOverview } from '@/map/model/map.types'
-import type { TaskResponse, TaskSubmissionResultResponse, StopSubmissionResponse } from '@/stops/api/stops.api'
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import TaskCard from "@/stops/components/TaskCard.vue";
+import StopFailureModal from "@/stops/components/StopFailureModal.vue";
+import type { MapStopOverview } from "@/map/model/map.types";
+import type {
+  TaskResponse,
+  TaskSubmissionResultResponse,
+  StopSubmissionResponse,
+} from "@/stops/api/stops.api";
 
 const props = defineProps<{
-  answers: Map<number, Map<number, number>>
-  badgeLabel?: string | null
-  canFinish: boolean
-  errorMessage: string | null
-  finishButtonLabel: string
-  showAnswers: boolean
-  status: 'idle' | 'loading' | 'loaded' | 'error'
-  stopOverview: MapStopOverview | null
-  submitErrorMessage?: string | null
-  taskResults?: Map<number, TaskSubmissionResultResponse>
-  submissionResult?: StopSubmissionResponse | null
-  tasks: TaskResponse[]
+  answers: Map<number, Map<number, number>>;
+  badgeLabel?: string | null;
+  canFinish: boolean;
+  errorMessage: string | null;
+  finishButtonLabel: string;
+  showAnswers: boolean;
+  status: "idle" | "loading" | "loaded" | "error";
+  stopOverview: MapStopOverview | null;
+  submitErrorMessage?: string | null;
+  taskResults?: Map<number, TaskSubmissionResultResponse>;
+  submissionResult?: StopSubmissionResponse | null;
+  tasks: TaskResponse[];
   /**
    * When set, the stepper jumps to this index. Used after a failed submission
    * to land on the first task that failed.
    */
-  retryTaskIndex?: number | null
-}>()
+  retryTaskIndex?: number | null;
+}>();
 
 const emit = defineEmits<{
-  finish: []
-  retry: [taskId: number]
-  select: [taskId: number, itemId: number, optionId: number]
+  finish: [];
+  retry: [taskId: number];
+  select: [taskId: number, itemId: number, optionId: number];
   /** Parent clears submissionResult and resets retry state */
-  dismissFailure: []
-}>()
+  dismissFailure: [];
+}>();
 
-const { t } = useI18n()
+const { t } = useI18n();
 
-const currentIndex = ref(0)
+const currentIndex = ref(0);
 
-const hasTasks = computed(() => props.status === 'loaded' && props.tasks.length > 0)
-const currentTask = computed(() => props.tasks[currentIndex.value] ?? null)
-const isFirst = computed(() => currentIndex.value === 0)
-const isLast = computed(() => currentIndex.value === props.tasks.length - 1)
+const hasTasks = computed(
+  () => props.status === "loaded" && props.tasks.length > 0,
+);
+const currentTask = computed(() => props.tasks[currentIndex.value] ?? null);
+const isFirst = computed(() => currentIndex.value === 0);
+const isLast = computed(() => currentIndex.value === props.tasks.length - 1);
 
 function goNext() {
-  if (!isLast.value) currentIndex.value++
+  if (!isLast.value) currentIndex.value++;
 }
 
 function goPrev() {
-  if (!isFirst.value) currentIndex.value--
+  if (!isFirst.value) currentIndex.value--;
 }
 
 // Jump to the first failed task when the parent signals it
 watch(
-    () => props.retryTaskIndex,
-    (idx) => {
-      if (idx != null && idx >= 0) currentIndex.value = idx
-    },
-)
+  () => props.retryTaskIndex,
+  (idx) => {
+    if (idx != null && idx >= 0) currentIndex.value = idx;
+  },
+);
 
 // Whether the current task has been fully answered
 const currentTaskAnswered = computed(() => {
-  if (!currentTask.value) return false
-  const task = currentTask.value
-  const answerableItems = task.items.filter((item) => item.options.length > 0)
+  if (!currentTask.value) return false;
+  const task = currentTask.value;
+  const answerableItems = task.items.filter((item) => item.options.length > 0);
   const hotspotItems = task.items.filter((item) => {
-    if (item.options.length > 0) return false
-    if (!item.metadataJson) return false
+    if (item.options.length > 0) return false;
+    if (!item.metadataJson) return false;
     try {
-      return (JSON.parse(item.metadataJson) as { isHotspot?: boolean }).isHotspot
+      return (JSON.parse(item.metadataJson) as { isHotspot?: boolean })
+        .isHotspot;
     } catch {
-      return false
+      return false;
     }
-  })
-  const required = [...answerableItems, ...hotspotItems]
-  if (required.length === 0) return false
-  return required.every((item) => props.answers.get(task.id)?.has(item.id) ?? false)
-})
+  });
+  const required = [...answerableItems, ...hotspotItems];
+  if (required.length === 0) return false;
+  return required.every(
+    (item) => props.answers.get(task.id)?.has(item.id) ?? false,
+  );
+});
 
 const showFailureModal = computed(
-    () => props.submissionResult != null && !props.submissionResult.passed,
-)
+  () => props.submissionResult != null && !props.submissionResult.passed,
+);
 </script>
 
 <template>
   <div class="min-h-screen bg-gray-50 pb-32">
     <!-- Header -->
-    <header class="sticky top-0 z-10 border-b border-gray-200 bg-white px-4 py-5 shadow-sm">
+    <header
+      class="sticky top-0 z-10 border-b border-gray-200 bg-white px-4 py-5 shadow-sm"
+    >
       <div class="mx-auto flex max-w-2xl items-center gap-3">
         <div>
           <p
-              v-if="stopOverview?.category"
-              class="text-xs font-semibold uppercase tracking-wide text-indigo-600"
+            v-if="stopOverview?.category"
+            class="text-xs font-semibold uppercase tracking-wide text-indigo-600"
           >
             {{ stopOverview.category }}
           </p>
           <p
-              v-if="badgeLabel"
-              class="mt-1 inline-flex rounded-full bg-amber-100 px-2 py-1 text-[0.65rem] font-black uppercase tracking-[0.16em] text-amber-700"
+            v-if="badgeLabel"
+            class="mt-1 inline-flex rounded-full bg-amber-100 px-2 py-1 text-[0.65rem] font-black uppercase tracking-[0.16em] text-amber-700"
           >
             {{ badgeLabel }}
           </p>
           <h1 class="text-xl leading-tight font-bold text-gray-900">
-            {{ stopOverview?.title ?? '' }}
+            {{ stopOverview?.title ?? "" }}
           </h1>
         </div>
       </div>
 
       <!-- Progress indicator dots -->
       <div
-          v-if="hasTasks"
-          class="mx-auto mt-3 flex max-w-2xl items-center justify-center gap-1.5"
+        v-if="hasTasks"
+        class="mx-auto mt-3 flex max-w-2xl items-center justify-center gap-1.5"
       >
         <button
-            v-for="(task, idx) in tasks"
-            :key="task.id"
-            type="button"
-            class="h-2 rounded-full transition-all duration-200"
-            :class="[
+          v-for="(task, idx) in tasks"
+          :key="task.id"
+          type="button"
+          class="h-2 rounded-full transition-all duration-200"
+          :class="[
             idx === currentIndex
               ? 'w-6 bg-indigo-600'
               : taskResults?.get(task.id)?.passed === false
@@ -126,8 +137,8 @@ const showFailureModal = computed(
                   ? 'w-2 bg-emerald-400'
                   : 'w-2 bg-gray-300',
           ]"
-            :aria-label="`${t('stop.goToTask')} ${idx + 1}`"
-            @click="currentIndex = idx"
+          :aria-label="`${t('stop.goToTask')} ${idx + 1}`"
+          @click="currentIndex = idx"
         />
       </div>
     </header>
@@ -136,17 +147,19 @@ const showFailureModal = computed(
     <main class="mx-auto max-w-2xl px-4 py-8">
       <!-- Loading -->
       <div
-          v-if="status === 'loading' || status === 'idle'"
-          class="flex flex-col items-center gap-3 py-16 text-gray-400"
+        v-if="status === 'loading' || status === 'idle'"
+        class="flex flex-col items-center gap-3 py-16 text-gray-400"
       >
-        <div class="h-8 w-8 animate-spin rounded-full border-2 border-indigo-300 border-t-indigo-600" />
-        <p class="text-sm">{{ t('stop.loading') }}</p>
+        <div
+          class="h-8 w-8 animate-spin rounded-full border-2 border-indigo-300 border-t-indigo-600"
+        />
+        <p class="text-sm">{{ t("stop.loading") }}</p>
       </div>
 
       <!-- Load error -->
       <div
-          v-else-if="status === 'error'"
-          class="rounded-xl border border-red-200 bg-red-50 p-6 text-center"
+        v-else-if="status === 'error'"
+        class="rounded-xl border border-red-200 bg-red-50 p-6 text-center"
       >
         <p class="text-sm font-medium text-red-700">{{ errorMessage }}</p>
       </div>
@@ -154,77 +167,89 @@ const showFailureModal = computed(
       <template v-else>
         <!-- Submit error banner -->
         <div
-            v-if="submitErrorMessage"
-            class="mb-6 rounded-xl border border-red-200 bg-red-50 p-4"
+          v-if="submitErrorMessage"
+          class="mb-6 rounded-xl border border-red-200 bg-red-50 p-4"
         >
-          <p class="text-sm font-medium text-red-700">{{ submitErrorMessage }}</p>
+          <p class="text-sm font-medium text-red-700">
+            {{ submitErrorMessage }}
+          </p>
         </div>
 
         <!-- No tasks -->
         <div
-            v-if="!hasTasks"
-            class="rounded-xl border border-slate-200 bg-white p-6 text-center text-sm text-slate-500"
+          v-if="!hasTasks"
+          class="rounded-xl border border-slate-200 bg-white p-6 text-center text-sm text-slate-500"
         >
-          {{ t('stop.noTasks') }}
+          {{ t("stop.noTasks") }}
         </div>
 
         <!-- Stepper: single task at a time -->
         <template v-else-if="currentTask">
-          <p class="mb-4 text-xs font-semibold uppercase tracking-wide text-gray-400">
-            {{ t('stop.taskOf', { current: currentIndex + 1, total: tasks.length }) }}
+          <p
+            class="mb-4 text-xs font-semibold uppercase tracking-wide text-gray-400"
+          >
+            {{
+              t("stop.taskOf", {
+                current: currentIndex + 1,
+                total: tasks.length,
+              })
+            }}
           </p>
 
           <TaskCard
-              :task="currentTask"
-              :selected-answers="answers.get(currentTask.id)"
-              :result="taskResults?.get(currentTask.id) ?? null"
-              :show-answers="showAnswers"
-              :reveal-answers="false"
-              @retry="(taskId) => emit('retry', taskId)"
-              @select="(taskId, itemId, optionId) => emit('select', taskId, itemId, optionId)"
+            :task="currentTask"
+            :selected-answers="answers.get(currentTask.id)"
+            :result="taskResults?.get(currentTask.id) ?? null"
+            :show-answers="showAnswers"
+            :reveal-answers="false"
+            @retry="(taskId) => emit('retry', taskId)"
+            @select="
+              (taskId, itemId, optionId) =>
+                emit('select', taskId, itemId, optionId)
+            "
           />
 
           <!-- Navigation row -->
           <div class="mt-8 flex items-center gap-3">
             <button
-                type="button"
-                class="flex items-center gap-1 rounded-2xl border border-gray-200 bg-white px-5 py-3 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-40"
-                :disabled="isFirst"
-                @click="goPrev"
+              type="button"
+              class="flex items-center gap-1 rounded-2xl border border-gray-200 bg-white px-5 py-3 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-40"
+              :disabled="isFirst"
+              @click="goPrev"
             >
-              ← {{ t('stop.previous') }}
+              ← {{ t("stop.previous") }}
             </button>
 
             <!-- Finish (last task) -->
             <button
-                v-if="isLast"
-                type="button"
-                class="flex-1 rounded-2xl py-3 text-sm font-bold transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
-                :class="
+              v-if="isLast"
+              type="button"
+              class="flex-1 rounded-2xl py-3 text-sm font-bold transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+              :class="
                 canFinish
                   ? 'bg-indigo-600 text-white hover:bg-indigo-700'
                   : 'cursor-not-allowed bg-gray-200 text-gray-400'
               "
-                :disabled="!canFinish"
-                @click="emit('finish')"
+              :disabled="!canFinish"
+              @click="emit('finish')"
             >
               {{ finishButtonLabel }}
             </button>
 
             <!-- Next (not last) -->
             <button
-                v-else
-                type="button"
-                class="flex-1 rounded-2xl py-3 text-sm font-bold transition-colors duration-150"
-                :class="
+              v-else
+              type="button"
+              class="flex-1 rounded-2xl py-3 text-sm font-bold transition-colors duration-150"
+              :class="
                 currentTaskAnswered
                   ? 'bg-indigo-600 text-white hover:bg-indigo-700'
                   : 'cursor-not-allowed bg-gray-100 text-gray-400'
               "
-                :disabled="!currentTaskAnswered"
-                @click="goNext"
+              :disabled="!currentTaskAnswered"
+              @click="goNext"
             >
-              {{ t('stop.next') }} →
+              {{ t("stop.next") }} →
             </button>
           </div>
         </template>
@@ -234,20 +259,20 @@ const showFailureModal = computed(
     <!-- Failure modal -->
     <Teleport to="body">
       <Transition
-          enter-active-class="transition-opacity duration-200"
-          enter-from-class="opacity-0"
-          enter-to-class="opacity-100"
-          leave-active-class="transition-opacity duration-150"
-          leave-from-class="opacity-100"
-          leave-to-class="opacity-0"
+        enter-active-class="transition-opacity duration-200"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition-opacity duration-150"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
       >
         <StopFailureModal
-            v-if="showFailureModal && submissionResult != null"
-            :stop-title="stopOverview?.title ?? null"
-            :submission-result="submissionResult"
-            @try-again="emit('dismissFailure')"
+          v-if="showFailureModal && submissionResult != null"
+          :stop-title="stopOverview?.title ?? null"
+          :submission-result="submissionResult"
+          @try-again="emit('dismissFailure')"
         />
       </Transition>
     </Teleport>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/stops/components/TaskCard.vue b/src/stops/components/TaskCard.vue
index 48420dc6..148c59f5 100644
--- a/src/stops/components/TaskCard.vue
+++ b/src/stops/components/TaskCard.vue
@@ -31,15 +31,13 @@ const lang = computed(() => (locale.value === "nb" ? "nb" : "en"));
 const title = computed(() => props.task.title[lang.value]);
 const introText = computed(() => props.task.introText?.[lang.value] ?? null);
 const feedbackText = computed(
-    () => props.result?.feedbackText?.[lang.value] ?? null,
+  () => props.result?.feedbackText?.[lang.value] ?? null,
 );
 const firstItem = computed(() => props.task.items[0] ?? null);
 const showTaskAnswers = computed(
-    () => props.showAnswers || (props.revealAnswers ?? false),
-);
-const showImageAssessmentReview = computed(
-    () => props.revealAnswers ?? false,
+  () => props.showAnswers || (props.revealAnswers ?? false),
 );
+const showImageAssessmentReview = computed(() => props.revealAnswers ?? false);
 </script>
 
 <template>
@@ -52,71 +50,71 @@ const showImageAssessmentReview = computed(
 
     <!-- Task body - switches on taskType -->
     <SourceComparisonCard
-        v-if="task.taskType === 'NEWS_COMPARISON' && firstItem"
-        :task-id="task.id"
-        :item="firstItem"
-        :selected-option-id="props.selectedAnswers?.get(firstItem.id) ?? null"
-        :show-answers="showTaskAnswers"
-        @select="
+      v-if="task.taskType === 'NEWS_COMPARISON' && firstItem"
+      :task-id="task.id"
+      :item="firstItem"
+      :selected-option-id="props.selectedAnswers?.get(firstItem.id) ?? null"
+      :show-answers="showTaskAnswers"
+      @select="
         (taskId, itemId, optionId) => emit('select', taskId, itemId, optionId)
       "
     />
 
     <ImageAssessmentCard
-        v-else-if="task.taskType === 'IMAGE_ASSESSMENT'"
-        :task-id="task.id"
-        :items="task.items"
-        :selected-answers="selectedAnswers"
-        :show-answers="props.showAnswers"
-        :show-selected-review="showImageAssessmentReview"
-        @select="
+      v-else-if="task.taskType === 'IMAGE_ASSESSMENT'"
+      :task-id="task.id"
+      :items="task.items"
+      :selected-answers="selectedAnswers"
+      :show-answers="props.showAnswers"
+      :show-selected-review="showImageAssessmentReview"
+      @select="
         (taskId, itemId, optionId) => emit('select', taskId, itemId, optionId)
       "
     />
 
     <ImageSelectCard
-        v-else-if="task.taskType === 'IMAGE_SELECT'"
-        :task-id="task.id"
-        :items="task.items"
-        :selected-answers="selectedAnswers"
-        :show-answers="showAnswers"
-        @select="
+      v-else-if="task.taskType === 'IMAGE_SELECT'"
+      :task-id="task.id"
+      :items="task.items"
+      :selected-answers="selectedAnswers"
+      :show-answers="showAnswers"
+      @select="
         (taskId, itemId, optionId) => emit('select', taskId, itemId, optionId)
       "
     />
 
     <PasswordBankCard
-        v-else-if="task.taskType === 'PASSWORD_EVALUATION' && firstItem"
-        :task-id="task.id"
-        :item="firstItem"
-        :selected-option-id="props.selectedAnswers?.get(firstItem.id) ?? null"
-        @select="
+      v-else-if="task.taskType === 'PASSWORD_EVALUATION' && firstItem"
+      :task-id="task.id"
+      :item="firstItem"
+      :selected-option-id="props.selectedAnswers?.get(firstItem.id) ?? null"
+      @select="
         (taskId, itemId, optionId) => emit('select', taskId, itemId, optionId)
       "
     />
 
     <SocialMarketplaceCard
-        v-else-if="task.taskType == 'SOCIAL_SCENARIO' && firstItem"
-        :task-id="task.id"
-        :item="firstItem"
-        :selected-option-id="props.selectedAnswers?.get(firstItem.id) ?? null"
-        @select="
+      v-else-if="task.taskType == 'SOCIAL_SCENARIO' && firstItem"
+      :task-id="task.id"
+      :item="firstItem"
+      :selected-option-id="props.selectedAnswers?.get(firstItem.id) ?? null"
+      @select="
         (taskId, itemId, optionId) => emit('select', taskId, itemId, optionId)
       "
     />
 
     <!-- Fallback for unimplemented task types -->
     <div
-        v-else
-        class="rounded-xl border border-dashed border-gray-300 p-6 text-center text-sm text-gray-400"
+      v-else
+      class="rounded-xl border border-dashed border-gray-300 p-6 text-center text-sm text-gray-400"
     >
       {{ $t("stop.unsupportedTaskType", { type: task.taskType }) }}
     </div>
 
     <div
-        v-if="result"
-        class="rounded-2xl border px-4 py-3"
-        :class="
+      v-if="result"
+      class="rounded-2xl border px-4 py-3"
+      :class="
         result.passed
           ? 'border-emerald-200 bg-emerald-50 text-emerald-900'
           : 'border-red-200 bg-red-50 text-red-900'
@@ -131,19 +129,19 @@ const showImageAssessmentReview = computed(
         </p>
       </div>
       <p
-          v-if="feedbackText"
-          class="mt-2 text-sm leading-relaxed whitespace-pre-line"
+        v-if="feedbackText"
+        class="mt-2 text-sm leading-relaxed whitespace-pre-line"
       >
         {{ feedbackText }}
       </p>
       <button
-          v-if="!result.passed"
-          type="button"
-          class="mt-3 inline-flex rounded-xl bg-white px-4 py-2 text-sm font-semibold text-red-700 ring-1 ring-inset ring-red-200 transition-colors hover:bg-red-100"
-          @click="emit('retry', task.id)"
+        v-if="!result.passed"
+        type="button"
+        class="mt-3 inline-flex rounded-xl bg-white px-4 py-2 text-sm font-semibold text-red-700 ring-1 ring-inset ring-red-200 transition-colors hover:bg-red-100"
+        @click="emit('retry', task.id)"
       >
         {{ $t("failure.try_again") }}
       </button>
     </div>
   </article>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/stops/components/tasks/EmailReviewCard.vue b/src/stops/components/tasks/EmailReviewCard.vue
index b5bda162..4a5bb1a7 100644
--- a/src/stops/components/tasks/EmailReviewCard.vue
+++ b/src/stops/components/tasks/EmailReviewCard.vue
@@ -1,126 +1,137 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import type { TaskItemResponse, TaskOptionResponse } from '@/stops/api/stops.api'
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import type {
+  TaskItemResponse,
+  TaskOptionResponse,
+} from "@/stops/api/stops.api";
 
 export interface EmailPartMeta {
-  emailPart: 'sender' | 'subject' | 'body'
-  isHotspot: boolean
-  displayText: string
-  isTrustworthy?: boolean
-  hasActionQuestion?: boolean
+  emailPart: "sender" | "subject" | "body";
+  isHotspot: boolean;
+  displayText: string;
+  isTrustworthy?: boolean;
+  hasActionQuestion?: boolean;
 }
 
 const props = defineProps<{
-  taskId: number
-  items: TaskItemResponse[]
-  selectedAnswers: Map<number, number> | undefined
-  showAnswers: boolean
-}>()
+  taskId: number;
+  items: TaskItemResponse[];
+  selectedAnswers: Map<number, number> | undefined;
+  showAnswers: boolean;
+}>();
 
 const emit = defineEmits<{
-  select: [taskId: number, itemId: number, optionId: number]
-}>()
+  select: [taskId: number, itemId: number, optionId: number];
+}>();
 
-const { locale } = useI18n()
-const lang = computed(() => (locale.value === 'nb' ? 'nb' : 'en'))
+const { locale } = useI18n();
+const lang = computed(() => (locale.value === "nb" ? "nb" : "en"));
 
-const revealedIds = ref<Set<number>>(new Set())
+const revealedIds = ref<Set<number>>(new Set());
 
 const sortedItems = computed(() =>
-    [...props.items].sort((a, b) => a.itemOrder - b.itemOrder),
-)
+  [...props.items].sort((a, b) => a.itemOrder - b.itemOrder),
+);
 
 function parseMeta(item: TaskItemResponse): EmailPartMeta | null {
-  if (!item.metadataJson) return null
+  if (!item.metadataJson) return null;
   try {
-    return JSON.parse(item.metadataJson) as EmailPartMeta
+    return JSON.parse(item.metadataJson) as EmailPartMeta;
   } catch {
-    return null
+    return null;
   }
 }
 
 function displayText(item: TaskItemResponse): string {
-  return parseMeta(item)?.displayText ?? ''
+  return parseMeta(item)?.displayText ?? "";
 }
 
 function feedbackText(item: TaskItemResponse): string {
-  return item.promptText[lang.value]
+  return item.promptText[lang.value];
 }
 
 function isHotspot(item: TaskItemResponse): boolean {
-  return parseMeta(item)?.isHotspot === true
+  return parseMeta(item)?.isHotspot === true;
 }
 
 function isTrustworthy(item: TaskItemResponse): boolean {
-  return parseMeta(item)?.isTrustworthy === true
+  return parseMeta(item)?.isTrustworthy === true;
 }
 
 function hasActionQuestion(item: TaskItemResponse): boolean {
-  return parseMeta(item)?.hasActionQuestion === true
+  return parseMeta(item)?.hasActionQuestion === true;
 }
 
 function isRevealed(item: TaskItemResponse): boolean {
-  return revealedIds.value.has(item.id)
+  return revealedIds.value.has(item.id);
 }
 
 function reveal(item: TaskItemResponse): void {
-  if (isRevealed(item)) return
-  revealedIds.value = new Set(revealedIds.value).add(item.id)
+  if (isRevealed(item)) return;
+  revealedIds.value = new Set(revealedIds.value).add(item.id);
   // Record reveal-only hotspots in the store so allAnswered can track them
   if (!hasActionQuestion(item)) {
-    emit('select', props.taskId, item.id, 0)
+    emit("select", props.taskId, item.id, 0);
   }
 }
 
 function chosenOptionId(item: TaskItemResponse): number | null {
-  return props.selectedAnswers?.get(item.id) ?? null
+  return props.selectedAnswers?.get(item.id) ?? null;
 }
 
-function chooseOption(item: TaskItemResponse, option: TaskOptionResponse): void {
-  if (chosenOptionId(item) !== null) return
-  emit('select', props.taskId, item.id, option.id)
+function chooseOption(
+  item: TaskItemResponse,
+  option: TaskOptionResponse,
+): void {
+  if (chosenOptionId(item) !== null) return;
+  emit("select", props.taskId, item.id, option.id);
 }
 
 function optionText(option: TaskOptionResponse): string {
-  return option.optionText[lang.value]
+  return option.optionText[lang.value];
 }
 
 function explanationText(option: TaskOptionResponse): string | null {
-  return option.explanationText?.[lang.value] ?? null
+  return option.explanationText?.[lang.value] ?? null;
 }
 
 function partLabel(item: TaskItemResponse): string | null {
-  const part = parseMeta(item)?.emailPart
-  if (part === 'sender') return lang.value === 'nb' ? 'Fra:' : 'From:'
-  if (part === 'subject') return lang.value === 'nb' ? 'Emne:' : 'Subject:'
-  return null
+  const part = parseMeta(item)?.emailPart;
+  if (part === "sender") return lang.value === "nb" ? "Fra:" : "From:";
+  if (part === "subject") return lang.value === "nb" ? "Emne:" : "Subject:";
+  return null;
 }
 
 const headerItems = computed(() =>
-    sortedItems.value.filter((item) => {
-      const part = parseMeta(item)?.emailPart
-      return part === 'sender' || part === 'subject'
-    }),
-)
+  sortedItems.value.filter((item) => {
+    const part = parseMeta(item)?.emailPart;
+    return part === "sender" || part === "subject";
+  }),
+);
 
 const bodyItems = computed(() =>
-    sortedItems.value.filter((item) => parseMeta(item)?.emailPart === 'body'),
-)
+  sortedItems.value.filter((item) => parseMeta(item)?.emailPart === "body"),
+);
 </script>
 
 <template>
   <!-- cursor-text on the whole card — applies to all children including buttons -->
-  <div class="rounded-2xl border border-gray-200 bg-white overflow-hidden cursor-pointer">
-
+  <div
+    class="rounded-2xl border border-gray-200 bg-white overflow-hidden cursor-pointer"
+  >
     <!-- Email chrome bar -->
-    <div class="bg-gray-100 border-b border-gray-200 px-4 py-2 flex items-center gap-2">
+    <div
+      class="bg-gray-100 border-b border-gray-200 px-4 py-2 flex items-center gap-2"
+    >
       <div class="flex gap-1.5">
         <span class="w-3 h-3 rounded-full bg-gray-300 block" />
         <span class="w-3 h-3 rounded-full bg-gray-300 block" />
         <span class="w-3 h-3 rounded-full bg-gray-300 block" />
       </div>
-      <span class="text-xs text-gray-400 font-mono">{{ $t('stop.email.inbox') }}</span>
+      <span class="text-xs text-gray-400 font-mono">{{
+        $t("stop.email.inbox")
+      }}</span>
     </div>
 
     <!-- Email header — sender and subject rows -->
@@ -133,40 +144,51 @@ const bodyItems = computed(() =>
 
           <!-- Hotspot header field — no border/background until revealed -->
           <button
-              v-if="isHotspot(item)"
-              type="button"
-              class="text-left transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
-              :class="
+            v-if="isHotspot(item)"
+            type="button"
+            class="text-left transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+            :class="
               isRevealed(item)
                 ? isTrustworthy(item)
                   ? 'rounded-lg px-2 py-0.5 -mx-2 border border-emerald-200 bg-emerald-50'
                   : 'rounded-lg px-2 py-0.5 -mx-2 border border-amber-200 bg-amber-50'
                 : ''
             "
-              :disabled="isRevealed(item)"
-              @click="reveal(item)"
+            :disabled="isRevealed(item)"
+            @click="reveal(item)"
           >
             <span
-                class="font-mono text-xs leading-5 break-all block"
-                :class="
+              class="font-mono text-xs leading-5 break-all block"
+              :class="
                 isRevealed(item)
-                  ? isTrustworthy(item) ? 'text-emerald-900' : 'text-amber-900'
+                  ? isTrustworthy(item)
+                    ? 'text-emerald-900'
+                    : 'text-amber-900'
                   : 'text-gray-800'
               "
-            >{{ displayText(item) }}</span>
+              >{{ displayText(item) }}</span
+            >
             <span
-                v-if="isRevealed(item)"
-                class="block mt-1 text-xs leading-relaxed font-sans"
-                :class="isTrustworthy(item) ? 'text-emerald-700' : 'text-amber-700'"
-            >{{ feedbackText(item) }}</span>
+              v-if="isRevealed(item)"
+              class="block mt-1 text-xs leading-relaxed font-sans"
+              :class="
+                isTrustworthy(item) ? 'text-emerald-700' : 'text-amber-700'
+              "
+              >{{ feedbackText(item) }}</span
+            >
           </button>
 
           <!-- Plain header field -->
           <span
-              v-else
-              class="font-mono text-xs leading-5 text-gray-800 self-start"
-              :class="parseMeta(item)?.emailPart === 'subject' ? 'font-sans font-semibold text-sm text-gray-900' : ''"
-          >{{ displayText(item) }}</span>
+            v-else
+            class="font-mono text-xs leading-5 text-gray-800 self-start"
+            :class="
+              parseMeta(item)?.emailPart === 'subject'
+                ? 'font-sans font-semibold text-sm text-gray-900'
+                : ''
+            "
+            >{{ displayText(item) }}</span
+          >
         </template>
       </div>
     </div>
@@ -174,37 +196,39 @@ const bodyItems = computed(() =>
     <!-- Email body -->
     <div class="px-5 py-4 flex flex-col gap-3">
       <template v-for="item in bodyItems" :key="item.id">
-
         <!-- Hotspot body block — looks like plain text until revealed -->
         <template v-if="isHotspot(item)">
           <button
-              type="button"
-              class="w-full text-left transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
-              :class="
+            type="button"
+            class="w-full text-left transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+            :class="
               isRevealed(item)
                 ? isTrustworthy(item)
                   ? 'rounded-xl border-2 border-emerald-300 bg-emerald-50 px-4 py-3'
                   : 'rounded-xl border-2 border-amber-300 bg-amber-50 px-4 py-3'
                 : ''
             "
-              :disabled="isRevealed(item)"
-              @click="reveal(item)"
+            :disabled="isRevealed(item)"
+            @click="reveal(item)"
           >
             <div class="flex items-start justify-between gap-3">
               <span
-                  class="text-sm leading-relaxed"
-                  :class="
+                class="text-sm leading-relaxed"
+                :class="
                   isRevealed(item)
-                    ? isTrustworthy(item) ? 'text-emerald-900' : 'text-amber-900'
+                    ? isTrustworthy(item)
+                      ? 'text-emerald-900'
+                      : 'text-amber-900'
                     : 'text-gray-800'
                 "
-              >{{ displayText(item) }}</span>
+                >{{ displayText(item) }}</span
+              >
             </div>
 
             <div
-                v-if="isRevealed(item)"
-                class="mt-2 pt-2 border-t text-xs leading-relaxed"
-                :class="
+              v-if="isRevealed(item)"
+              class="mt-2 pt-2 border-t text-xs leading-relaxed"
+              :class="
                 isTrustworthy(item)
                   ? 'border-emerald-200 text-emerald-800'
                   : 'border-amber-200 text-amber-800'
@@ -216,28 +240,30 @@ const bodyItems = computed(() =>
 
           <!-- Action question — outside the button to avoid interactive element nesting -->
           <div
-              v-if="isRevealed(item) && hasActionQuestion(item)"
-              class="flex flex-col gap-2 px-1 cursor-default"
+            v-if="isRevealed(item) && hasActionQuestion(item)"
+            class="flex flex-col gap-2 px-1 cursor-default"
           >
-            <p class="text-xs font-black uppercase tracking-[0.16em] text-gray-400">
-              {{ $t('stop.email.whatWouldYouDo') }}
+            <p
+              class="text-xs font-black uppercase tracking-[0.16em] text-gray-400"
+            >
+              {{ $t("stop.email.whatWouldYouDo") }}
             </p>
 
             <div class="flex flex-col gap-2">
               <button
-                  v-for="option in item.options"
-                  :key="option.id"
-                  type="button"
-                  class="w-full text-left rounded-xl border px-3 py-2.5 text-sm transition-colors duration-150 cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
-                  :class="
-                    chosenOptionId(item) === null
-                      ? 'border-gray-200 bg-white hover:border-indigo-300 hover:bg-indigo-50 text-gray-700'
-                      : chosenOptionId(item) === option.id
-                        ? 'border-indigo-300 bg-indigo-50 text-indigo-900 font-semibold'
-                        : 'border-gray-100 bg-gray-50 text-gray-400'
-                  "
-                  :disabled="chosenOptionId(item) !== null"
-                  @click="chooseOption(item, option)"
+                v-for="option in item.options"
+                :key="option.id"
+                type="button"
+                class="w-full text-left rounded-xl border px-3 py-2.5 text-sm transition-colors duration-150 cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+                :class="
+                  chosenOptionId(item) === null
+                    ? 'border-gray-200 bg-white hover:border-indigo-300 hover:bg-indigo-50 text-gray-700'
+                    : chosenOptionId(item) === option.id
+                      ? 'border-indigo-300 bg-indigo-50 text-indigo-900 font-semibold'
+                      : 'border-gray-100 bg-gray-50 text-gray-400'
+                "
+                :disabled="chosenOptionId(item) !== null"
+                @click="chooseOption(item, option)"
               >
                 {{ optionText(option) }}
               </button>
@@ -246,9 +272,16 @@ const bodyItems = computed(() =>
             <template v-if="chosenOptionId(item) !== null">
               <template v-for="option in item.options" :key="option.id">
                 <span
-                    v-if="chosenOptionId(item) === option.id && explanationText(option)"
-                    class="inline-block rounded-lg px-3 py-2 text-sm leading-relaxed"
-                    :class="option.isCorrect ? 'bg-emerald-100 text-emerald-900' : 'bg-rose-100 text-rose-900'"
+                  v-if="
+                    chosenOptionId(item) === option.id &&
+                    explanationText(option)
+                  "
+                  class="inline-block rounded-lg px-3 py-2 text-sm leading-relaxed"
+                  :class="
+                    option.isCorrect
+                      ? 'bg-emerald-100 text-emerald-900'
+                      : 'bg-rose-100 text-rose-900'
+                  "
                 >
                   {{ explanationText(option) }}
                 </span>
@@ -258,59 +291,68 @@ const bodyItems = computed(() =>
         </template>
 
         <!-- Plain body block -->
-        <p
-            v-else
-            class="text-sm leading-relaxed text-gray-800"
-        >
+        <p v-else class="text-sm leading-relaxed text-gray-800">
           {{ displayText(item) }}
         </p>
-
       </template>
     </div>
 
     <!-- Answer key (teacher / review mode) -->
     <div
-        v-if="showAnswers"
-        class="border-t border-slate-200 bg-slate-50 px-5 py-4"
+      v-if="showAnswers"
+      class="border-t border-slate-200 bg-slate-50 px-5 py-4"
     >
-      <p class="text-xs font-black uppercase tracking-[0.16em] text-slate-500 mb-3">
-        {{ $t('stop.answerKey') }}
+      <p
+        class="text-xs font-black uppercase tracking-[0.16em] text-slate-500 mb-3"
+      >
+        {{ $t("stop.answerKey") }}
       </p>
       <ul class="space-y-3">
         <template v-for="item in sortedItems" :key="item.id">
           <li
-              v-if="item.options.length > 0"
-              class="rounded-2xl border border-slate-200 bg-white px-3 py-3"
+            v-if="item.options.length > 0"
+            class="rounded-2xl border border-slate-200 bg-white px-3 py-3"
           >
             <p class="text-xs text-slate-500 mb-2 leading-relaxed font-mono">
               {{ displayText(item) }}
             </p>
             <ul class="space-y-2">
               <li
-                  v-for="option in item.options"
-                  :key="option.id"
-                  class="rounded-xl border px-3 py-2"
-                  :class="
+                v-for="option in item.options"
+                :key="option.id"
+                class="rounded-xl border px-3 py-2"
+                :class="
                   option.isCorrect
                     ? 'border-emerald-200 bg-emerald-50 text-emerald-900'
                     : 'border-rose-200 bg-rose-50 text-rose-900'
                 "
               >
                 <div class="flex items-center justify-between gap-3">
-                  <span class="text-sm font-semibold">{{ optionText(option) }}</span>
+                  <span class="text-sm font-semibold">{{
+                    optionText(option)
+                  }}</span>
                   <span
-                      class="rounded-full px-2 py-1 text-[0.65rem] font-black uppercase tracking-[0.14em] shrink-0"
-                      :class="
+                    class="rounded-full px-2 py-1 text-[0.65rem] font-black uppercase tracking-[0.14em] shrink-0"
+                    :class="
                       option.isCorrect
                         ? 'bg-emerald-200/80 text-emerald-900'
                         : 'bg-rose-200/80 text-rose-900'
                     "
                   >
-                    {{ option.isCorrect ? $t('stop.correct') : $t('stop.incorrect') }}
+                    {{
+                      option.isCorrect
+                        ? $t("stop.correct")
+                        : $t("stop.incorrect")
+                    }}
                   </span>
                 </div>
-                <p v-if="explanationText(option)" class="mt-1.5 text-sm leading-6">
-                  <span class="font-semibold">{{ $t('stop.explanation') }}:</span>
+                <p
+                  v-if="explanationText(option)"
+                  class="mt-1.5 text-sm leading-6"
+                >
+                  <span class="font-semibold"
+                    >{{ $t("stop.explanation") }}:</span
+                  >
                   {{ explanationText(option) }}
                 </p>
               </li>
@@ -319,6 +361,5 @@ const bodyItems = computed(() =>
         </template>
       </ul>
     </div>
-
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/stops/components/tasks/ImageSelectCard.vue b/src/stops/components/tasks/ImageSelectCard.vue
index aa86dd1c..9db2f8e3 100644
--- a/src/stops/components/tasks/ImageSelectCard.vue
+++ b/src/stops/components/tasks/ImageSelectCard.vue
@@ -1,148 +1,158 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import type { TaskItemResponse, TaskOptionResponse, ImageSelectHeaderMeta, ImageSelectHotspotMeta } from '@/stops/api/stops.api'
-import { API_BASE_URL } from '@/stops/api/stops.api'
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import type {
+  TaskItemResponse,
+  TaskOptionResponse,
+  ImageSelectHeaderMeta,
+  ImageSelectHotspotMeta,
+} from "@/stops/api/stops.api";
+import { API_BASE_URL } from "@/stops/api/stops.api";
 
 const props = defineProps<{
-  taskId: number
-  items: TaskItemResponse[]
-  selectedAnswers: Map<number, number> | undefined
-  showAnswers: boolean
-}>()
+  taskId: number;
+  items: TaskItemResponse[];
+  selectedAnswers: Map<number, number> | undefined;
+  showAnswers: boolean;
+}>();
 
 const emit = defineEmits<{
-  select: [taskId: number, itemId: number, optionId: number]
-}>()
+  select: [taskId: number, itemId: number, optionId: number];
+}>();
 
-const { locale } = useI18n()
-const lang = computed(() => (locale.value === 'nb' ? 'nb' : 'en'))
+const { locale } = useI18n();
+const lang = computed(() => (locale.value === "nb" ? "nb" : "en"));
 
-const revealedIds = ref<Set<number>>(new Set())
+const revealedIds = ref<Set<number>>(new Set());
 
 const sortedItems = computed(() =>
-    [...props.items].sort((a, b) => a.itemOrder - b.itemOrder),
-)
+  [...props.items].sort((a, b) => a.itemOrder - b.itemOrder),
+);
 
 /** The sentinel item at itemOrder=0 carrying the image asset path. */
-const headerItem = computed(() =>
-    sortedItems.value.find((item) => item.itemOrder === 1) ?? null,
-)
+const headerItem = computed(
+  () => sortedItems.value.find((item) => item.itemOrder === 1) ?? null,
+);
 
 /** All hotspot items, in order. */
 const hotspotItems = computed(() =>
-    sortedItems.value.filter((item) => item.itemOrder > 1),
-)
+  sortedItems.value.filter((item) => item.itemOrder > 1),
+);
 
-function parseHotspotMeta(item: TaskItemResponse): ImageSelectHotspotMeta | null {
-  if (!item.metadataJson) return null
+function parseHotspotMeta(
+  item: TaskItemResponse,
+): ImageSelectHotspotMeta | null {
+  if (!item.metadataJson) return null;
   try {
-    const parsed = JSON.parse(item.metadataJson)
-    return 'x' in parsed ? (parsed as ImageSelectHotspotMeta) : null
+    const parsed = JSON.parse(item.metadataJson);
+    return "x" in parsed ? (parsed as ImageSelectHotspotMeta) : null;
   } catch {
-    return null
+    return null;
   }
 }
 
 const imageUrl = computed((): string | null => {
-  if (!headerItem.value?.metadataJson) return null
+  if (!headerItem.value?.metadataJson) return null;
   try {
-    const meta = JSON.parse(headerItem.value.metadataJson) as ImageSelectHeaderMeta
-    const localizedPath = meta.mediaUrl?.[lang.value as 'nb' | 'en'] ?? null
-    if (!localizedPath) return null
-    return `${API_BASE_URL}${localizedPath}`
+    const meta = JSON.parse(
+      headerItem.value.metadataJson,
+    ) as ImageSelectHeaderMeta;
+    const localizedPath = meta.mediaUrl?.[lang.value as "nb" | "en"] ?? null;
+    if (!localizedPath) return null;
+    return `${API_BASE_URL}${localizedPath}`;
   } catch {
-    return null
+    return null;
   }
-})
+});
 
 function isRevealed(item: TaskItemResponse): boolean {
-  return revealedIds.value.has(item.id)
+  return revealedIds.value.has(item.id);
 }
 
 function isTrustworthy(item: TaskItemResponse): boolean {
-  return parseHotspotMeta(item)?.isTrustworthy === true
+  return parseHotspotMeta(item)?.isTrustworthy === true;
 }
 
 function hasActionQuestion(item: TaskItemResponse): boolean {
-  return parseHotspotMeta(item)?.hasActionQuestion === true
+  return parseHotspotMeta(item)?.hasActionQuestion === true;
 }
 
 function reveal(item: TaskItemResponse): void {
-  if (isRevealed(item)) return
-  revealedIds.value = new Set(revealedIds.value).add(item.id)
+  if (isRevealed(item)) return;
+  revealedIds.value = new Set(revealedIds.value).add(item.id);
   if (!hasActionQuestion(item)) {
-    emit('select', props.taskId, item.id, 0)
+    emit("select", props.taskId, item.id, 0);
   }
 }
 
 function chosenOptionId(item: TaskItemResponse): number | null {
-  return props.selectedAnswers?.get(item.id) ?? null
+  return props.selectedAnswers?.get(item.id) ?? null;
 }
 
-function chooseOption(item: TaskItemResponse, option: TaskOptionResponse): void {
-  if (chosenOptionId(item) !== null) return
-  emit('select', props.taskId, item.id, option.id)
+function chooseOption(
+  item: TaskItemResponse,
+  option: TaskOptionResponse,
+): void {
+  if (chosenOptionId(item) !== null) return;
+  emit("select", props.taskId, item.id, option.id);
 }
 
 function optionText(option: TaskOptionResponse): string {
-  return option.optionText[lang.value]
+  return option.optionText[lang.value];
 }
 
 function explanationText(option: TaskOptionResponse): string | null {
-  return option.explanationText?.[lang.value] ?? null
+  return option.explanationText?.[lang.value] ?? null;
 }
 
 function feedbackText(item: TaskItemResponse): string {
-  return item.promptText[lang.value]
+  return item.promptText[lang.value];
 }
 
 function hotspotNumber(item: TaskItemResponse): number {
-  return hotspotItems.value.indexOf(item) + 1
+  return hotspotItems.value.indexOf(item) + 1;
 }
 </script>
 
 <template>
   <div class="rounded-2xl border border-gray-200 bg-white overflow-hidden">
-
     <!-- Image with hotspot overlays -->
     <div class="relative select-none" v-if="imageUrl">
-      <img
-          :src="imageUrl"
-          alt=""
-          class="w-full block"
-          draggable="false"
-      />
+      <img :src="imageUrl" alt="" class="w-full block" draggable="false" />
 
       <!-- Hotspot overlays -->
       <template v-for="(item, index) in hotspotItems" :key="item.id">
-        <template v-if="parseHotspotMeta(item) as ImageSelectHotspotMeta | null">
+        <template
+          v-if="parseHotspotMeta(item) as ImageSelectHotspotMeta | null"
+        >
           <button
-              type="button"
-              class="absolute transition-all duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-500 focus-visible:outline-offset-1"
-              :style="{
-              left:   parseHotspotMeta(item)!.x + '%',
-              top:    parseHotspotMeta(item)!.y + '%',
-              width:  parseHotspotMeta(item)!.width + '%',
+            type="button"
+            class="absolute transition-all duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-500 focus-visible:outline-offset-1"
+            :style="{
+              left: parseHotspotMeta(item)!.x + '%',
+              top: parseHotspotMeta(item)!.y + '%',
+              width: parseHotspotMeta(item)!.width + '%',
               height: parseHotspotMeta(item)!.height + '%',
             }"
-              :class="
+            :class="
               isRevealed(item)
                 ? isTrustworthy(item)
                   ? 'border-2 border-emerald-400 bg-emerald-400/10 cursor-default'
                   : 'border-2 border-amber-400 bg-amber-400/10 cursor-default'
                 : 'border-2 border-transparent hover:border-indigo-400/60 hover:bg-indigo-400/10 cursor-pointer'
             "
-              :disabled="isRevealed(item)"
-              :aria-label="`Hotspot ${index + 1}`"
-              @click="reveal(item)"
+            :disabled="isRevealed(item)"
+            :aria-label="`Hotspot ${index + 1}`"
+            @click="reveal(item)"
           >
             <!-- Number badge — shown once revealed -->
             <span
-                v-if="isRevealed(item)"
-                :class="isTrustworthy(item)
-                ? 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-emerald-400 text-emerald-900 text-xs font-black flex items-center justify-center leading-none'
-                : 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-amber-400 text-amber-900 text-xs font-black flex items-center justify-center leading-none'"
+              v-if="isRevealed(item)"
+              :class="
+                isTrustworthy(item)
+                  ? 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-emerald-400 text-emerald-900 text-xs font-black flex items-center justify-center leading-none'
+                  : 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-amber-400 text-amber-900 text-xs font-black flex items-center justify-center leading-none'
+              "
             >
               {{ hotspotNumber(item) }}
             </span>
@@ -153,43 +163,52 @@ function hotspotNumber(item: TaskItemResponse): number {
 
     <!-- Explanations below the image -->
     <div
-        v-if="hotspotItems.some(isRevealed)"
-        class="border-t border-gray-100 px-5 py-4 flex flex-col gap-4"
+      v-if="hotspotItems.some(isRevealed)"
+      class="border-t border-gray-100 px-5 py-4 flex flex-col gap-4"
     >
       <template v-for="item in hotspotItems" :key="'exp-' + item.id">
         <div v-if="isRevealed(item)" class="flex gap-3">
-
           <!-- Number badge -->
-          <span class="shrink-0 w-6 h-6 rounded-full text-xs font-black flex items-center justify-center mt-0.5"
-                :class="isTrustworthy(item) ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800'">
+          <span
+            class="shrink-0 w-6 h-6 rounded-full text-xs font-black flex items-center justify-center mt-0.5"
+            :class="
+              isTrustworthy(item)
+                ? 'bg-emerald-100 text-emerald-800'
+                : 'bg-amber-100 text-amber-800'
+            "
+          >
             {{ hotspotNumber(item) }}
           </span>
 
           <div class="flex flex-col gap-2 flex-1">
             <!-- Feedback text -->
-            <p class="text-sm leading-relaxed text-gray-800">{{ feedbackText(item) }}</p>
+            <p class="text-sm leading-relaxed text-gray-800">
+              {{ feedbackText(item) }}
+            </p>
 
             <!-- Action question -->
             <template v-if="hasActionQuestion(item)">
-              <p class="text-xs font-black uppercase tracking-[0.16em] text-gray-400 mt-1">
-                {{ $t('stop.email.whatWouldYouDo') }}
+              <p
+                class="text-xs font-black uppercase tracking-[0.16em] text-gray-400 mt-1"
+              >
+                {{ $t("stop.email.whatWouldYouDo") }}
               </p>
 
               <div class="flex flex-col gap-2">
                 <button
-                    v-for="option in item.options"
-                    :key="option.id"
-                    type="button"
-                    class="w-full text-left rounded-xl border px-3 py-2.5 text-sm transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
-                    :class="
+                  v-for="option in item.options"
+                  :key="option.id"
+                  type="button"
+                  class="w-full text-left rounded-xl border px-3 py-2.5 text-sm transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+                  :class="
                     chosenOptionId(item) === null
                       ? 'border-gray-200 bg-white hover:border-indigo-300 hover:bg-indigo-50 text-gray-700 cursor-pointer'
                       : chosenOptionId(item) === option.id
                         ? 'border-indigo-300 bg-indigo-50 text-indigo-900 font-semibold cursor-default'
                         : 'border-gray-100 bg-gray-50 text-gray-400 cursor-default'
                   "
-                    :disabled="chosenOptionId(item) !== null"
-                    @click="chooseOption(item, option)"
+                  :disabled="chosenOptionId(item) !== null"
+                  @click="chooseOption(item, option)"
                 >
                   {{ optionText(option) }}
                 </button>
@@ -199,9 +218,16 @@ function hotspotNumber(item: TaskItemResponse): number {
               <template v-if="chosenOptionId(item) !== null">
                 <template v-for="option in item.options" :key="option.id">
                   <span
-                      v-if="chosenOptionId(item) === option.id && explanationText(option)"
-                      class="inline-block rounded-lg px-3 py-2 text-sm leading-relaxed"
-                      :class="option.isCorrect ? 'bg-emerald-100 text-emerald-900' : 'bg-rose-100 text-rose-900'"
+                    v-if="
+                      chosenOptionId(item) === option.id &&
+                      explanationText(option)
+                    "
+                    class="inline-block rounded-lg px-3 py-2 text-sm leading-relaxed"
+                    :class="
+                      option.isCorrect
+                        ? 'bg-emerald-100 text-emerald-900'
+                        : 'bg-rose-100 text-rose-900'
+                    "
                   >
                     {{ explanationText(option) }}
                   </span>
@@ -215,47 +241,60 @@ function hotspotNumber(item: TaskItemResponse): number {
 
     <!-- Answer key (teacher / review mode) -->
     <div
-        v-if="showAnswers"
-        class="border-t border-slate-200 bg-slate-50 px-5 py-4"
+      v-if="showAnswers"
+      class="border-t border-slate-200 bg-slate-50 px-5 py-4"
     >
-      <p class="text-xs font-black uppercase tracking-[0.16em] text-slate-500 mb-3">
-        {{ $t('stop.answerKey') }}
+      <p
+        class="text-xs font-black uppercase tracking-[0.16em] text-slate-500 mb-3"
+      >
+        {{ $t("stop.answerKey") }}
       </p>
       <ul class="space-y-3">
         <template v-for="item in hotspotItems" :key="item.id">
           <li
-              v-if="item.options.length > 0"
-              class="rounded-2xl border border-slate-200 bg-white px-3 py-3"
+            v-if="item.options.length > 0"
+            class="rounded-2xl border border-slate-200 bg-white px-3 py-3"
           >
             <p class="text-xs text-slate-500 mb-2 leading-relaxed">
               {{ feedbackText(item) }}
             </p>
             <ul class="space-y-2">
               <li
-                  v-for="option in item.options"
-                  :key="option.id"
-                  class="rounded-xl border px-3 py-2"
-                  :class="
+                v-for="option in item.options"
+                :key="option.id"
+                class="rounded-xl border px-3 py-2"
+                :class="
                   option.isCorrect
                     ? 'border-emerald-200 bg-emerald-50 text-emerald-900'
                     : 'border-rose-200 bg-rose-50 text-rose-900'
                 "
               >
                 <div class="flex items-center justify-between gap-3">
-                  <span class="text-sm font-semibold">{{ optionText(option) }}</span>
+                  <span class="text-sm font-semibold">{{
+                    optionText(option)
+                  }}</span>
                   <span
-                      class="rounded-full px-2 py-1 text-[0.65rem] font-black uppercase tracking-[0.14em] shrink-0"
-                      :class="
+                    class="rounded-full px-2 py-1 text-[0.65rem] font-black uppercase tracking-[0.14em] shrink-0"
+                    :class="
                       option.isCorrect
                         ? 'bg-emerald-200/80 text-emerald-900'
                         : 'bg-rose-200/80 text-rose-900'
                     "
                   >
-                    {{ option.isCorrect ? $t('stop.correct') : $t('stop.incorrect') }}
+                    {{
+                      option.isCorrect
+                        ? $t("stop.correct")
+                        : $t("stop.incorrect")
+                    }}
                   </span>
                 </div>
-                <p v-if="explanationText(option)" class="mt-1.5 text-sm leading-6">
-                  <span class="font-semibold">{{ $t('stop.explanation') }}:</span>
+                <p
+                  v-if="explanationText(option)"
+                  class="mt-1.5 text-sm leading-6"
+                >
+                  <span class="font-semibold"
+                    >{{ $t("stop.explanation") }}:</span
+                  >
                   {{ explanationText(option) }}
                 </p>
               </li>
@@ -264,6 +303,5 @@ function hotspotNumber(item: TaskItemResponse): number {
         </template>
       </ul>
     </div>
-
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/stops/components/tasks/SourceComparisonCard.vue b/src/stops/components/tasks/SourceComparisonCard.vue
index 1754afb4..3a1e63ca 100644
--- a/src/stops/components/tasks/SourceComparisonCard.vue
+++ b/src/stops/components/tasks/SourceComparisonCard.vue
@@ -1,71 +1,84 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import type { TaskItemResponse } from '@/stops/api/stops.api'
-import type { NewsComparisonArticleMeta, NewsComparisonTaskMeta } from '@/stops/api/stops.api'
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import type { TaskItemResponse } from "@/stops/api/stops.api";
+import type {
+  NewsComparisonArticleMeta,
+  NewsComparisonTaskMeta,
+} from "@/stops/api/stops.api";
 
 const props = defineProps<{
-  taskId: number
-  item: TaskItemResponse
-  selectedOptionId: number | null
-  showAnswers: boolean
-}>()
+  taskId: number;
+  item: TaskItemResponse;
+  selectedOptionId: number | null;
+  showAnswers: boolean;
+}>();
 
 const emit = defineEmits<{
-  select: [taskId: number, itemId: number, optionId: number]
-}>()
+  select: [taskId: number, itemId: number, optionId: number];
+}>();
 
-const { locale } = useI18n()
-const lang = computed(() => (locale.value === 'nb' ? 'nb' : 'en'))
+const { locale } = useI18n();
+const lang = computed(() => (locale.value === "nb" ? "nb" : "en"));
 
 function promptText(item: TaskItemResponse): string {
-  return item.promptText[lang.value]
+  return item.promptText[lang.value];
 }
 
 function articleMetadata(): NewsComparisonArticleMeta[] {
-  if (!props.item.metadataJson) return []
+  if (!props.item.metadataJson) return [];
   try {
-    return (JSON.parse(props.item.metadataJson) as NewsComparisonTaskMeta).articles ?? []
+    return (
+      (JSON.parse(props.item.metadataJson) as NewsComparisonTaskMeta)
+        .articles ?? []
+    );
   } catch {
-    return []
+    return [];
   }
 }
 
 function articleMetaFor(optionOrder: number): NewsComparisonArticleMeta | null {
-  return articleMetadata().find((article) => article.optionOrder === optionOrder) ?? null
+  return (
+    articleMetadata().find((article) => article.optionOrder === optionOrder) ??
+    null
+  );
 }
 
 function domain(optionOrder: number): string | null {
-  return articleMetaFor(optionOrder)?.domain ?? null
+  return articleMetaFor(optionOrder)?.domain ?? null;
 }
 
 function mediaUrl(optionOrder: number): string | null {
-  return articleMetaFor(optionOrder)?.mediaUrl ?? null
+  return articleMetaFor(optionOrder)?.mediaUrl ?? null;
 }
 
 function articleHeadline(optionOrder: number, text: string): string {
-  return articleMetaFor(optionOrder)?.headline?.[lang.value] ?? text.split('\n\n')[0]?.trim() ?? ''
+  return (
+    articleMetaFor(optionOrder)?.headline?.[lang.value] ??
+    text.split("\n\n")[0]?.trim() ??
+    ""
+  );
 }
 
 function articleBody(optionOrder: number, text: string): string | null {
-  const metadataBody = articleMetaFor(optionOrder)?.body?.[lang.value]
-  if (metadataBody) return metadataBody
-  const [, ...rest] = text.split('\n\n')
-  const body = rest.join('\n\n').trim()
-  return body || null
+  const metadataBody = articleMetaFor(optionOrder)?.body?.[lang.value];
+  if (metadataBody) return metadataBody;
+  const [, ...rest] = text.split("\n\n");
+  const body = rest.join("\n\n").trim();
+  return body || null;
 }
 
 function isSelected(optionId: number): boolean {
-  return props.selectedOptionId === optionId
+  return props.selectedOptionId === optionId;
 }
 
 function select(optionId: number): void {
-  emit('select', props.taskId, props.item.id, optionId)
+  emit("select", props.taskId, props.item.id, optionId);
 }
 
 const sortedOptions = computed(() =>
   [...props.item.options].sort((a, b) => a.optionOrder - b.optionOrder),
-)
+);
 </script>
 
 <template>
@@ -87,7 +100,9 @@ const sortedOptions = computed(() =>
         "
         @click="select(option.id)"
       >
-        <div class="w-full px-4 py-2 bg-gray-100 border-b border-gray-200 flex items-center gap-2">
+        <div
+          class="w-full px-4 py-2 bg-gray-100 border-b border-gray-200 flex items-center gap-2"
+        >
           <div class="flex gap-1.5">
             <span class="w-3 h-3 rounded-full bg-gray-300 block" />
             <span class="w-3 h-3 rounded-full bg-gray-300 block" />
@@ -126,8 +141,8 @@ const sortedOptions = computed(() =>
           class="w-full px-5 pb-5 flex items-center justify-center gap-2 text-sm font-semibold transition-colors duration-150"
           :class="isSelected(option.id) ? 'text-indigo-600' : 'text-gray-400'"
         >
-          <span v-if="isSelected(option.id)">✓ {{ $t('stop.selected') }}</span>
-          <span v-else>{{ $t('stop.selectThis') }}</span>
+          <span v-if="isSelected(option.id)">✓ {{ $t("stop.selected") }}</span>
+          <span v-else>{{ $t("stop.selectThis") }}</span>
         </div>
       </button>
     </div>
@@ -137,7 +152,7 @@ const sortedOptions = computed(() =>
       class="rounded-2xl border border-slate-200 bg-slate-50 p-4"
     >
       <p class="text-xs font-black uppercase tracking-[0.16em] text-slate-500">
-        {{ $t('stop.answerKey') }}
+        {{ $t("stop.answerKey") }}
       </p>
 
       <ul class="mt-3 space-y-3">
@@ -163,12 +178,15 @@ const sortedOptions = computed(() =>
                   : 'bg-rose-200/80 text-rose-900'
               "
             >
-              {{ option.isCorrect ? $t('stop.correct') : $t('stop.incorrect') }}
+              {{ option.isCorrect ? $t("stop.correct") : $t("stop.incorrect") }}
             </span>
           </div>
 
-          <p v-if="option.explanationText?.[lang]" class="mt-2 text-sm leading-6">
-            <span class="font-semibold">{{ $t('stop.explanation') }}:</span>
+          <p
+            v-if="option.explanationText?.[lang]"
+            class="mt-2 text-sm leading-6"
+          >
+            <span class="font-semibold">{{ $t("stop.explanation") }}:</span>
             {{ option.explanationText?.[lang] }}
           </p>
         </li>
diff --git a/src/stops/components/tasks/fotografen/ImageAssessmentCard.vue b/src/stops/components/tasks/fotografen/ImageAssessmentCard.vue
index dc2d897b..0ef52577 100644
--- a/src/stops/components/tasks/fotografen/ImageAssessmentCard.vue
+++ b/src/stops/components/tasks/fotografen/ImageAssessmentCard.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import type { TaskItemResponse, TaskOptionResponse } from "@/stops/api/stops.api";
+import type {
+  TaskItemResponse,
+  TaskOptionResponse,
+} from "@/stops/api/stops.api";
 import ImageQuestionCard from "@/stops/components/tasks/fotografen/ImageQuestionCard.vue";
 import type { RadioOption } from "@/stops/components/tasks/fotografen/RadioButtonGroup.vue";
 
@@ -78,7 +81,9 @@ function explanationText(option: TaskOptionResponse): string | null {
   return option.explanationText?.[lang.value] ?? null;
 }
 
-function selectedOption(item: TaskItemResponse | null): TaskOptionResponse | null {
+function selectedOption(
+  item: TaskItemResponse | null,
+): TaskOptionResponse | null {
   if (!item) return null;
   const optionId = selectedOptionId(item);
   return item.options.find((option) => option.id === optionId) ?? null;
@@ -111,7 +116,7 @@ function select(itemId: number, optionId: number): void {
       v-else
       class="rounded-xl border border-dashed border-gray-300 p-6 text-center text-sm text-gray-400"
     >
-      {{ $t('stop.unsupportedTaskType', { type: 'IMAGE_ASSESSMENT' }) }}
+      {{ $t("stop.unsupportedTaskType", { type: "IMAGE_ASSESSMENT" }) }}
     </div>
 
     <div
@@ -119,7 +124,7 @@ function select(itemId: number, optionId: number): void {
       class="rounded-2xl border border-amber-200 bg-amber-50 p-4"
     >
       <p class="text-xs font-black uppercase tracking-[0.16em] text-amber-700">
-        {{ $t('stop.yourAnswer') }}
+        {{ $t("stop.yourAnswer") }}
       </p>
 
       <div class="mt-3 space-y-4">
@@ -133,9 +138,13 @@ function select(itemId: number, optionId: number): void {
           </p>
 
           <template v-if="selectedOption(item)">
-            <div class="rounded-2xl border border-amber-200 bg-amber-50 px-3 py-3">
-              <p class="text-xs font-black uppercase tracking-[0.14em] text-amber-700">
-                {{ $t('stop.selected') }}
+            <div
+              class="rounded-2xl border border-amber-200 bg-amber-50 px-3 py-3"
+            >
+              <p
+                class="text-xs font-black uppercase tracking-[0.14em] text-amber-700"
+              >
+                {{ $t("stop.selected") }}
               </p>
               <p class="mt-2 text-sm font-semibold text-slate-900">
                 {{ optionText(selectedOption(item)!) }}
@@ -146,8 +155,10 @@ function select(itemId: number, optionId: number): void {
               v-if="explanationText(selectedOption(item)!)"
               class="mt-3 rounded-2xl border border-slate-200 bg-slate-50 px-3 py-3"
             >
-              <p class="text-xs font-black uppercase tracking-[0.14em] text-slate-500">
-                {{ $t('stop.explanation') }}
+              <p
+                class="text-xs font-black uppercase tracking-[0.14em] text-slate-500"
+              >
+                {{ $t("stop.explanation") }}
               </p>
               <p class="mt-2 text-sm leading-6 text-slate-700">
                 {{ explanationText(selectedOption(item)!) }}
@@ -163,7 +174,7 @@ function select(itemId: number, optionId: number): void {
       class="rounded-2xl border border-slate-200 bg-slate-50 p-4"
     >
       <p class="text-xs font-black uppercase tracking-[0.16em] text-slate-500">
-        {{ $t('stop.answerKey') }}
+        {{ $t("stop.answerKey") }}
       </p>
 
       <div class="mt-3 space-y-4">
@@ -199,12 +210,14 @@ function select(itemId: number, optionId: number): void {
                       : 'bg-rose-200/80 text-rose-900'
                   "
                 >
-                  {{ option.isCorrect ? $t('stop.correct') : $t('stop.incorrect') }}
+                  {{
+                    option.isCorrect ? $t("stop.correct") : $t("stop.incorrect")
+                  }}
                 </span>
               </div>
 
               <p v-if="explanationText(option)" class="mt-2 text-sm leading-6">
-                <span class="font-semibold">{{ $t('stop.explanation') }}:</span>
+                <span class="font-semibold">{{ $t("stop.explanation") }}:</span>
                 {{ explanationText(option) }}
               </p>
             </li>
diff --git a/src/stops/components/tasks/fotografen/ImageQuestionCard.vue b/src/stops/components/tasks/fotografen/ImageQuestionCard.vue
index 594c588b..5d33df52 100644
--- a/src/stops/components/tasks/fotografen/ImageQuestionCard.vue
+++ b/src/stops/components/tasks/fotografen/ImageQuestionCard.vue
@@ -20,14 +20,20 @@ const emit = defineEmits<{
 }>();
 
 const selectedImageOption = computed({
-  get: () => (props.selectedImageOptionId == null ? "" : String(props.selectedImageOptionId)),
+  get: () =>
+    props.selectedImageOptionId == null
+      ? ""
+      : String(props.selectedImageOptionId),
   set: (value: string) => {
     if (value) emit("select", props.imageItemId, Number(value));
   },
 });
 
 const selectedReasonOption = computed({
-  get: () => (props.selectedReasonOptionId == null ? "" : String(props.selectedReasonOptionId)),
+  get: () =>
+    props.selectedReasonOptionId == null
+      ? ""
+      : String(props.selectedReasonOptionId),
   set: (value: string) => {
     if (value) emit("select", props.reasonItemId, Number(value));
   },
diff --git a/src/stops/model/__tests__/stop.store.spec.ts b/src/stops/model/__tests__/stop.store.spec.ts
index b456206b..e4541128 100644
--- a/src/stops/model/__tests__/stop.store.spec.ts
+++ b/src/stops/model/__tests__/stop.store.spec.ts
@@ -1,45 +1,51 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
 
-import { useStopStore } from '@/stops/model/stop.store'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { useMapStore } from '@/map/model/map.store'
-import type { MapStopOverview } from '@/map/model/map.types'
+import { useStopStore } from "@/stops/model/stop.store";
+import { useAuthStore } from "@/auth/model/auth.store";
+import { useMapStore } from "@/map/model/map.store";
+import type { MapStopOverview } from "@/map/model/map.types";
 
 function jsonResponse(body: unknown, init: ResponseInit = {}) {
   return new Response(JSON.stringify(body), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' },
+    headers: { "Content-Type": "application/json" },
     ...init,
-  })
+  });
 }
 
-const CLASSROOM_ID = 2
-const PUPIL_USER_ID = 99
-const STOP_ID = 1
+const CLASSROOM_ID = 2;
+const PUPIL_USER_ID = 99;
+const STOP_ID = 1;
 
 const taskSummary = {
   id: 10,
   classroomId: CLASSROOM_ID,
   stopId: STOP_ID,
-  title: { nb: 'Hvilken kilde er troverdig?', en: 'Which source is trustworthy?' },
+  title: {
+    nb: "Hvilken kilde er troverdig?",
+    en: "Which source is trustworthy?",
+  },
   difficultyLevel: 1,
-  taskType: 'NEWS_COMPARISON',
+  taskType: "NEWS_COMPARISON",
   published: true,
   itemCount: 1,
   updatedAt: null,
-}
+};
 
 const fullTask = {
   id: 10,
   classroomId: CLASSROOM_ID,
   stopId: STOP_ID,
   createdByTeacherId: 5,
-  title: { nb: 'Hvilken kilde er troverdig?', en: 'Which source is trustworthy?' },
+  title: {
+    nb: "Hvilken kilde er troverdig?",
+    en: "Which source is trustworthy?",
+  },
   introText: null,
   difficultyLevel: 1,
-  taskType: 'NEWS_COMPARISON',
-  passingRule: 'ALL_CORRECT',
+  taskType: "NEWS_COMPARISON",
+  passingRule: "ALL_CORRECT",
   passingScore: 1,
   maxScore: 1,
   published: true,
@@ -47,7 +53,10 @@ const fullTask = {
     {
       id: 1,
       itemOrder: 1,
-      promptText: { nb: 'Hvilken artikkel er troverdig?', en: 'Which article is trustworthy?' },
+      promptText: {
+        nb: "Hvilken artikkel er troverdig?",
+        en: "Which article is trustworthy?",
+      },
       mediaUrl: null,
       metadataJson:
         '{"articles":[{"optionOrder":1,"domain":"forskning.no","headline":{"nb":"Artikkel A","en":"Article A"},"body":{"nb":"Brødtekst A","en":"Body A"},"mediaUrl":null},{"optionOrder":2,"domain":"klikk.no","headline":{"nb":"Artikkel B","en":"Article B"},"body":{"nb":"Brødtekst B","en":"Body B"},"mediaUrl":null}]}',
@@ -55,232 +64,243 @@ const fullTask = {
         {
           id: 11,
           optionOrder: 1,
-          optionText: { nb: 'Artikkel A', en: 'Article A' },
+          optionText: { nb: "Artikkel A", en: "Article A" },
           isCorrect: null,
           explanationText: null,
         },
         {
           id: 12,
           optionOrder: 2,
-          optionText: { nb: 'Artikkel B', en: 'Article B' },
+          optionText: { nb: "Artikkel B", en: "Article B" },
           isCorrect: null,
           explanationText: null,
         },
       ],
     },
   ],
-}
+};
 
 const mapStopOverview: MapStopOverview = {
   stopId: STOP_ID,
-  slug: 'nyhetskvartalet',
-  title: 'Nyhetskvartalet',
-  category: 'media',
+  slug: "nyhetskvartalet",
+  title: "Nyhetskvartalet",
+  category: "media",
   displayOrder: 1,
   isFinalBoss: false,
-  status: 'NOT_STARTED',
+  status: "NOT_STARTED",
   stars: 0,
   medalAwarded: false,
-}
+};
 
 function seedAuthStore() {
-  const authStore = useAuthStore()
-  authStore.accessToken = 'access-token'
+  const authStore = useAuthStore();
+  authStore.accessToken = "access-token";
   authStore.user = {
     subject: String(PUPIL_USER_ID),
-    portalType: 'PUPIL',
+    portalType: "PUPIL",
     email: null,
-    username: 'pupil-one',
-    authorities: ['ROLE_PUPIL'],
+    username: "pupil-one",
+    authorities: ["ROLE_PUPIL"],
     pupilProfile: {
-      displayName: 'Pupil One',
+      displayName: "Pupil One",
       totalXp: 0,
       currentLevel: 1,
       currentClassroomId: CLASSROOM_ID,
       hasCompletedOnboarding: true,
     },
     teacherProfile: null,
-  }
+  };
 }
 
 function seedMapStore() {
-  const mapStore = useMapStore()
-  mapStore.stops = [mapStopOverview]
-  mapStore.status = 'loaded'
+  const mapStore = useMapStore();
+  mapStore.stops = [mapStopOverview];
+  mapStore.status = "loaded";
 }
 
-describe('useStopStore', () => {
+describe("useStopStore", () => {
   beforeEach(() => {
-    setActivePinia(createPinia())
-    vi.restoreAllMocks()
-  })
+    setActivePinia(createPinia());
+    vi.restoreAllMocks();
+  });
 
-  it('starts idle with no tasks and no answers', () => {
-    const stopStore = useStopStore()
+  it("starts idle with no tasks and no answers", () => {
+    const stopStore = useStopStore();
 
-    expect(stopStore.status).toBe('idle')
-    expect(stopStore.tasks).toEqual([])
-    expect(stopStore.answers.size).toBe(0)
-    expect(stopStore.errorMessage).toBeNull()
-  })
+    expect(stopStore.status).toBe("idle");
+    expect(stopStore.tasks).toEqual([]);
+    expect(stopStore.answers.size).toBe(0);
+    expect(stopStore.errorMessage).toBeNull();
+  });
 
-  it('fetches summaries then full details for each published task', async () => {
-    seedAuthStore()
-    seedMapStore()
+  it("fetches summaries then full details for each published task", async () => {
+    seedAuthStore();
+    seedMapStore();
 
     const fetchMock = vi
       .fn()
       .mockResolvedValueOnce(jsonResponse([taskSummary]))
-      .mockResolvedValueOnce(jsonResponse(fullTask))
-    vi.stubGlobal('fetch', fetchMock)
+      .mockResolvedValueOnce(jsonResponse(fullTask));
+    vi.stubGlobal("fetch", fetchMock);
 
-    const stopStore = useStopStore()
-    await stopStore.loadTasksForStop('nyhetskvartalet')
+    const stopStore = useStopStore();
+    await stopStore.loadTasksForStop("nyhetskvartalet");
 
-    expect(stopStore.status).toBe('loaded')
-    expect(stopStore.tasks).toHaveLength(1)
-    expect(stopStore.tasks[0]?.id).toBe(10)
-    expect(stopStore.tasks[0]?.items).toHaveLength(1)
-  })
+    expect(stopStore.status).toBe("loaded");
+    expect(stopStore.tasks).toHaveLength(1);
+    expect(stopStore.tasks[0]?.id).toBe(10);
+    expect(stopStore.tasks[0]?.items).toHaveLength(1);
+  });
 
-  it('fetches map overview first when it has not been loaded yet', async () => {
-    seedAuthStore()
+  it("fetches map overview first when it has not been loaded yet", async () => {
+    seedAuthStore();
 
     const fetchMock = vi
       .fn()
       .mockResolvedValueOnce(jsonResponse([mapStopOverview]))
       .mockResolvedValueOnce(jsonResponse([taskSummary]))
-      .mockResolvedValueOnce(jsonResponse(fullTask))
-    vi.stubGlobal('fetch', fetchMock)
+      .mockResolvedValueOnce(jsonResponse(fullTask));
+    vi.stubGlobal("fetch", fetchMock);
 
-    const stopStore = useStopStore()
-    await stopStore.loadTasksForStop('nyhetskvartalet')
+    const stopStore = useStopStore();
+    await stopStore.loadTasksForStop("nyhetskvartalet");
 
-    expect(stopStore.status).toBe('loaded')
-    expect(stopStore.tasks).toHaveLength(1)
-    expect(fetchMock).toHaveBeenCalledTimes(3)
-  })
+    expect(stopStore.status).toBe("loaded");
+    expect(stopStore.tasks).toHaveLength(1);
+    expect(fetchMock).toHaveBeenCalledTimes(3);
+  });
 
-  it('omits unpublished tasks from the loaded list', async () => {
-    seedAuthStore()
-    seedMapStore()
+  it("omits unpublished tasks from the loaded list", async () => {
+    seedAuthStore();
+    seedMapStore();
 
-    const unpublishedSummary = { ...taskSummary, id: 99, published: false }
-    vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce(jsonResponse([unpublishedSummary])))
+    const unpublishedSummary = { ...taskSummary, id: 99, published: false };
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValueOnce(jsonResponse([unpublishedSummary])),
+    );
 
-    const stopStore = useStopStore()
-    await stopStore.loadTasksForStop('nyhetskvartalet')
+    const stopStore = useStopStore();
+    await stopStore.loadTasksForStop("nyhetskvartalet");
 
-    expect(stopStore.tasks).toHaveLength(0)
-    expect(vi.mocked(fetch)).toHaveBeenCalledOnce()
-  })
+    expect(stopStore.tasks).toHaveLength(0);
+    expect(vi.mocked(fetch)).toHaveBeenCalledOnce();
+  });
 
-  it('sets status to error when not authenticated', async () => {
-    const stopStore = useStopStore()
-    await stopStore.loadTasksForStop('nyhetskvartalet')
+  it("sets status to error when not authenticated", async () => {
+    const stopStore = useStopStore();
+    await stopStore.loadTasksForStop("nyhetskvartalet");
 
-    expect(stopStore.status).toBe('error')
-    expect(stopStore.errorMessage).toBe('Not authenticated.')
-  })
+    expect(stopStore.status).toBe("error");
+    expect(stopStore.errorMessage).toBe("Not authenticated.");
+  });
 
-  it('sets status to error when the slug is not found after fetching map overview', async () => {
-    seedAuthStore()
-    vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce(jsonResponse([])))
+  it("sets status to error when the slug is not found after fetching map overview", async () => {
+    seedAuthStore();
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValueOnce(jsonResponse([])));
 
-    const stopStore = useStopStore()
-    await stopStore.loadTasksForStop('nyhetskvartalet')
+    const stopStore = useStopStore();
+    await stopStore.loadTasksForStop("nyhetskvartalet");
 
-    expect(stopStore.status).toBe('error')
-    expect(stopStore.errorMessage).toContain('nyhetskvartalet')
-  })
+    expect(stopStore.status).toBe("error");
+    expect(stopStore.errorMessage).toContain("nyhetskvartalet");
+  });
 
-  it('sets status to error when the API call fails', async () => {
-    seedAuthStore()
-    seedMapStore()
+  it("sets status to error when the API call fails", async () => {
+    seedAuthStore();
+    seedMapStore();
     vi.stubGlobal(
-      'fetch',
-      vi.fn().mockResolvedValueOnce(
-        jsonResponse({ detail: 'Forbidden' }, { status: 403 }),
-      ),
-    )
+      "fetch",
+      vi
+        .fn()
+        .mockResolvedValueOnce(
+          jsonResponse({ detail: "Forbidden" }, { status: 403 }),
+        ),
+    );
 
-    const stopStore = useStopStore()
-    await stopStore.loadTasksForStop('nyhetskvartalet')
+    const stopStore = useStopStore();
+    await stopStore.loadTasksForStop("nyhetskvartalet");
 
-    expect(stopStore.status).toBe('error')
-    expect(stopStore.errorMessage).toBe('Forbidden')
-  })
+    expect(stopStore.status).toBe("error");
+    expect(stopStore.errorMessage).toBe("Forbidden");
+  });
 
-  it('clears previous tasks when a new load starts', async () => {
-    seedAuthStore()
-    seedMapStore()
+  it("clears previous tasks when a new load starts", async () => {
+    seedAuthStore();
+    seedMapStore();
 
     vi.stubGlobal(
-      'fetch',
-      vi.fn()
+      "fetch",
+      vi
+        .fn()
         .mockResolvedValueOnce(jsonResponse([taskSummary]))
         .mockResolvedValueOnce(jsonResponse(fullTask)),
-    )
+    );
 
-    const stopStore = useStopStore()
-    await stopStore.loadTasksForStop('nyhetskvartalet')
-    expect(stopStore.tasks).toHaveLength(1)
+    const stopStore = useStopStore();
+    await stopStore.loadTasksForStop("nyhetskvartalet");
+    expect(stopStore.tasks).toHaveLength(1);
 
     vi.stubGlobal(
-      'fetch',
-      vi.fn().mockResolvedValueOnce(jsonResponse({ detail: 'Forbidden' }, { status: 403 })),
-    )
-    await stopStore.loadTasksForStop('nyhetskvartalet')
-
-    expect(stopStore.tasks).toHaveLength(0)
-  })
-
-  it('records the selected option for a task item', () => {
-    const stopStore = useStopStore()
-    stopStore.setAnswer(10, 1, 12)
-
-    expect(stopStore.answers.get(10)?.get(1)).toBe(12)
-  })
-
-  it('replaces a previous answer for the same task item', () => {
-    const stopStore = useStopStore()
-    stopStore.setAnswer(10, 1, 11)
-    stopStore.setAnswer(10, 1, 12)
-
-    expect(stopStore.answers.get(10)?.get(1)).toBe(12)
-    expect(stopStore.answers.size).toBe(1)
-  })
-
-  it('tracks answers for multiple tasks independently', () => {
-    const stopStore = useStopStore()
-    stopStore.setAnswer(10, 1, 11)
-    stopStore.setAnswer(11, 2, 24)
-
-    expect(stopStore.answers.get(10)?.get(1)).toBe(11)
-    expect(stopStore.answers.get(11)?.get(2)).toBe(24)
-    expect(stopStore.answers.size).toBe(2)
-  })
-
-  it('clears tasks, answers, and error state on reset', async () => {
-    seedAuthStore()
-    seedMapStore()
+      "fetch",
+      vi
+        .fn()
+        .mockResolvedValueOnce(
+          jsonResponse({ detail: "Forbidden" }, { status: 403 }),
+        ),
+    );
+    await stopStore.loadTasksForStop("nyhetskvartalet");
+
+    expect(stopStore.tasks).toHaveLength(0);
+  });
+
+  it("records the selected option for a task item", () => {
+    const stopStore = useStopStore();
+    stopStore.setAnswer(10, 1, 12);
+
+    expect(stopStore.answers.get(10)?.get(1)).toBe(12);
+  });
+
+  it("replaces a previous answer for the same task item", () => {
+    const stopStore = useStopStore();
+    stopStore.setAnswer(10, 1, 11);
+    stopStore.setAnswer(10, 1, 12);
+
+    expect(stopStore.answers.get(10)?.get(1)).toBe(12);
+    expect(stopStore.answers.size).toBe(1);
+  });
+
+  it("tracks answers for multiple tasks independently", () => {
+    const stopStore = useStopStore();
+    stopStore.setAnswer(10, 1, 11);
+    stopStore.setAnswer(11, 2, 24);
+
+    expect(stopStore.answers.get(10)?.get(1)).toBe(11);
+    expect(stopStore.answers.get(11)?.get(2)).toBe(24);
+    expect(stopStore.answers.size).toBe(2);
+  });
+
+  it("clears tasks, answers, and error state on reset", async () => {
+    seedAuthStore();
+    seedMapStore();
 
     vi.stubGlobal(
-      'fetch',
-      vi.fn()
+      "fetch",
+      vi
+        .fn()
         .mockResolvedValueOnce(jsonResponse([taskSummary]))
         .mockResolvedValueOnce(jsonResponse(fullTask)),
-    )
+    );
 
-    const stopStore = useStopStore()
-    await stopStore.loadTasksForStop('nyhetskvartalet')
-    stopStore.setAnswer(1, 1, 11)
+    const stopStore = useStopStore();
+    await stopStore.loadTasksForStop("nyhetskvartalet");
+    stopStore.setAnswer(1, 1, 11);
 
-    stopStore.reset()
+    stopStore.reset();
 
-    expect(stopStore.tasks).toEqual([])
-    expect(stopStore.answers.size).toBe(0)
-    expect(stopStore.status).toBe('idle')
-    expect(stopStore.errorMessage).toBeNull()
-  })
-})
+    expect(stopStore.tasks).toEqual([]);
+    expect(stopStore.answers.size).toBe(0);
+    expect(stopStore.status).toBe("idle");
+    expect(stopStore.errorMessage).toBeNull();
+  });
+});
diff --git a/src/stops/model/stop.store.ts b/src/stops/model/stop.store.ts
index 7db63487..fe367667 100644
--- a/src/stops/model/stop.store.ts
+++ b/src/stops/model/stop.store.ts
@@ -1,96 +1,104 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { useMapStore } from '@/map/model/map.store'
-import { requestSubmitStopAnswers, requestTask, requestTasksForStop } from '@/stops/api/stops.api'
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { useAuthStore } from "@/auth/model/auth.store";
+import { useMapStore } from "@/map/model/map.store";
+import {
+  requestSubmitStopAnswers,
+  requestTask,
+  requestTasksForStop,
+} from "@/stops/api/stops.api";
 import type {
   StopSubmissionResponse,
   TaskResponse,
   TaskSubmissionResultResponse,
-} from '@/stops/api/stops.api'
+} from "@/stops/api/stops.api";
 
-export type StopLoadStatus = 'idle' | 'loading' | 'loaded' | 'error'
-export type StopSubmitStatus = 'idle' | 'submitting' | 'submitted' | 'error'
+export type StopLoadStatus = "idle" | "loading" | "loaded" | "error";
+export type StopSubmitStatus = "idle" | "submitting" | "submitted" | "error";
 
-export const useStopStore = defineStore('stop', () => {
-  const authStore = useAuthStore()
-  const mapStore = useMapStore()
+export const useStopStore = defineStore("stop", () => {
+  const authStore = useAuthStore();
+  const mapStore = useMapStore();
 
-  const tasks = ref<TaskResponse[]>([])
-  const status = ref<StopLoadStatus>('idle')
-  const errorMessage = ref<string | null>(null)
-  const submitStatus = ref<StopSubmitStatus>('idle')
-  const submitErrorMessage = ref<string | null>(null)
+  const tasks = ref<TaskResponse[]>([]);
+  const status = ref<StopLoadStatus>("idle");
+  const errorMessage = ref<string | null>(null);
+  const submitStatus = ref<StopSubmitStatus>("idle");
+  const submitErrorMessage = ref<string | null>(null);
 
-  const submissionResult = ref<StopSubmissionResponse | null>(null)
+  const submissionResult = ref<StopSubmissionResponse | null>(null);
 
-  const taskResults = ref<Map<number, TaskSubmissionResultResponse>>(new Map())
+  const taskResults = ref<Map<number, TaskSubmissionResultResponse>>(new Map());
 
   // answers: taskId -> (itemId -> selected optionId)
-  const answers = ref<Map<number, Map<number, number>>>(new Map())
+  const answers = ref<Map<number, Map<number, number>>>(new Map());
 
   async function requireSession() {
-    const classroomId = authStore.user?.pupilProfile?.currentClassroomId ?? null
-    const header = authStore.authorizationHeader
-    if (!header) throw new Error('Not authenticated.')
-    if (authStore.portalType !== 'PUPIL') {
-      throw new Error('Stop access is only available for pupil sessions.')
+    const classroomId =
+      authStore.user?.pupilProfile?.currentClassroomId ?? null;
+    const header = authStore.authorizationHeader;
+    if (!header) throw new Error("Not authenticated.");
+    if (authStore.portalType !== "PUPIL") {
+      throw new Error("Stop access is only available for pupil sessions.");
     }
-    if (classroomId == null) throw new Error('No active classroom found.')
+    if (classroomId == null) throw new Error("No active classroom found.");
 
-    return { authorizationHeader: header, classroomId }
+    return { authorizationHeader: header, classroomId };
   }
 
   async function loadTasksForStop(slug: string): Promise<void> {
-    status.value = 'loading'
-    errorMessage.value = null
-    tasks.value = []
-    submissionResult.value = null
-    taskResults.value = new Map()
-    submitStatus.value = 'idle'
-    submitErrorMessage.value = null
+    status.value = "loading";
+    errorMessage.value = null;
+    tasks.value = [];
+    submissionResult.value = null;
+    taskResults.value = new Map();
+    submitStatus.value = "idle";
+    submitErrorMessage.value = null;
 
     try {
-      const session = await requireSession()
+      const session = await requireSession();
 
-      if (mapStore.status !== 'loaded') {
-        await mapStore.fetchMapOverview()
+      if (mapStore.status !== "loaded") {
+        await mapStore.fetchMapOverview();
       }
 
-      const stop = mapStore.stops.find((s) => s.slug === slug)
-      if (!stop) throw new Error(`Stop with slug "${slug}" not found.`)
+      const stop = mapStore.stops.find((s) => s.slug === slug);
+      if (!stop) throw new Error(`Stop with slug "${slug}" not found.`);
 
       const summaries = await requestTasksForStop(
         session.classroomId,
         stop.stopId,
         session.authorizationHeader,
-      )
+      );
 
-      const published = summaries.filter((s) => s.published)
+      const published = summaries.filter((s) => s.published);
 
       // Fetch full task details in parallel
       tasks.value = await Promise.all(
-        published.map((s) => requestTask(session.classroomId, s.id, session.authorizationHeader)),
-      )
+        published.map((s) =>
+          requestTask(session.classroomId, s.id, session.authorizationHeader),
+        ),
+      );
 
-      status.value = 'loaded'
+      status.value = "loaded";
     } catch (error) {
-      errorMessage.value = error instanceof Error ? error.message : 'Failed to load tasks.'
-      status.value = 'error'
+      errorMessage.value =
+        error instanceof Error ? error.message : "Failed to load tasks.";
+      status.value = "error";
     }
   }
 
   function setAnswer(taskId: number, itemId: number, optionId: number): void {
-    const nextAnswers = new Map(answers.value)
-    const taskAnswers = new Map(nextAnswers.get(taskId) ?? [])
-    taskAnswers.set(itemId, optionId)
-    nextAnswers.set(taskId, taskAnswers)
-    answers.value = nextAnswers
-    clearTaskResult(taskId)
+    const nextAnswers = new Map(answers.value);
+    const taskAnswers = new Map(nextAnswers.get(taskId) ?? []);
+    taskAnswers.set(itemId, optionId);
+    nextAnswers.set(taskId, taskAnswers);
+    answers.value = nextAnswers;
+    clearTaskResult(taskId);
   }
 
   function getTaskResult(taskId: number): TaskSubmissionResultResponse | null {
-    return taskResults.value.get(taskId) ?? null
+    return taskResults.value.get(taskId) ?? null;
   }
 
   /**
@@ -98,19 +106,22 @@ export const useStopStore = defineStore('stop', () => {
    * Called when the pupil presses the per-task retry button.
    */
   function clearTaskResult(taskId: number): void {
-    if (!taskResults.value.has(taskId)) return
+    if (!taskResults.value.has(taskId)) return;
 
-    const next = new Map(taskResults.value)
-    next.delete(taskId)
-    taskResults.value = next
+    const next = new Map(taskResults.value);
+    next.delete(taskId);
+    taskResults.value = next;
 
     // Keep submissionResult in sync so the modal's failed-task list stays accurate
     if (submissionResult.value) {
-      const remaining = submissionResult.value.taskResults.filter((r) => r.taskId !== taskId)
-      submissionResult.value = remaining.length > 0
-        ? { ...submissionResult.value, taskResults: remaining }
-        : null
-      if (!submissionResult.value) submitStatus.value = 'idle'
+      const remaining = submissionResult.value.taskResults.filter(
+        (r) => r.taskId !== taskId,
+      );
+      submissionResult.value =
+        remaining.length > 0
+          ? { ...submissionResult.value, taskResults: remaining }
+          : null;
+      if (!submissionResult.value) submitStatus.value = "idle";
     }
   }
 
@@ -120,65 +131,69 @@ export const useStopStore = defineStore('stop', () => {
    * while they navigate back to retry.
    */
   function dismissSubmissionResult(): void {
-    submissionResult.value = null
+    submissionResult.value = null;
   }
 
   async function submitStop(stopId: number): Promise<StopSubmissionResponse> {
-    const session = await requireSession()
+    const session = await requireSession();
 
-    submitStatus.value = 'submitting'
-    submitErrorMessage.value = null
-    taskResults.value = new Map()
+    submitStatus.value = "submitting";
+    submitErrorMessage.value = null;
+    taskResults.value = new Map();
 
     try {
       const taskAnswers = tasks.value.map((task) => {
-        const taskAnswerSelections = answers.value.get(task.id)
-        const answerableItems = task.items.filter((item) => item.options.length > 0)
+        const taskAnswerSelections = answers.value.get(task.id);
+        const answerableItems = task.items.filter(
+          (item) => item.options.length > 0,
+        );
         return {
           taskId: task.id,
           itemAnswers: answerableItems.map((item) => {
-            const selectedOptionId = taskAnswerSelections?.get(item.id)
+            const selectedOptionId = taskAnswerSelections?.get(item.id);
             if (selectedOptionId == null) {
-              throw new Error('Answer every task before submitting the stop.')
+              throw new Error("Answer every task before submitting the stop.");
             }
-            return { itemId: item.id, selectedOptionId }
+            return { itemId: item.id, selectedOptionId };
           }),
-        }
-      })
+        };
+      });
 
       const result = await requestSubmitStopAnswers(
         session.classroomId,
         { stopId, taskAnswers },
         session.authorizationHeader,
-      )
+      );
 
       // Populate the flat taskResults map for hint rendering
-      taskResults.value = new Map(result.taskResults.map((r) => [r.taskId, r]))
+      taskResults.value = new Map(result.taskResults.map((r) => [r.taskId, r]));
 
       // Only set submissionResult (modal trigger) on failure; success navigates away
       if (!result.passed) {
-        submissionResult.value = result
+        submissionResult.value = result;
       }
 
-      submitStatus.value = 'submitted'
-      return result
+      submitStatus.value = "submitted";
+      return result;
     } catch (error) {
       submitErrorMessage.value =
-        error instanceof Error ? error.message : 'Failed to submit stop answers.'
-      submitStatus.value = 'error'
-      throw error
+        error instanceof Error
+          ? error.message
+          : "Failed to submit stop answers.";
+      submitStatus.value = "error";
+      throw error;
     }
   }
 
   function reset(): void {
-    tasks.value = []
-    status.value = 'idle'
-    errorMessage.value = null
-    submitStatus.value = 'idle'
-    submitErrorMessage.value = null
-    submissionResult.value = null
-    taskResults.value = new Map()
-    answers.value = new Map()
+    tasks.value = [];
+    status.value = "idle";
+    errorMessage.value = null;
+    submitStatus.value = "idle";
+    submitErrorMessage.value = null;
+    submissionResult.value = null;
+    taskResults.value = new Map();
+    answers.value = new Map();
   }
 
   return {
@@ -197,5 +212,5 @@ export const useStopStore = defineStore('stop', () => {
     dismissSubmissionResult,
     submitStop,
     reset,
-  }
-})
\ No newline at end of file
+  };
+});
diff --git a/src/stops/pages/StopPage.vue b/src/stops/pages/StopPage.vue
index 5269c772..1ddf8320 100644
--- a/src/stops/pages/StopPage.vue
+++ b/src/stops/pages/StopPage.vue
@@ -1,80 +1,92 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useStopStore } from '@/stops/model/stop.store'
-import { useMapStore } from '@/map/model/map.store'
-import { useAuthStore } from '@/auth/model/auth.store'
-import StopTaskView from '@/stops/components/StopTaskView.vue'
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { useStopStore } from "@/stops/model/stop.store";
+import { useMapStore } from "@/map/model/map.store";
+import { useAuthStore } from "@/auth/model/auth.store";
+import StopTaskView from "@/stops/components/StopTaskView.vue";
 
-const route = useRoute()
-const router = useRouter()
-const { t } = useI18n()
-const stopStore = useStopStore()
-const mapStore = useMapStore()
-const authStore = useAuthStore()
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const stopStore = useStopStore();
+const mapStore = useMapStore();
+const authStore = useAuthStore();
 
-const slug = computed(() => route.params.slug as string)
-const stopOverview = computed(() => mapStore.stops.find((stop) => stop.slug === slug.value) ?? null)
-const answers = computed(() => stopStore.answers)
-const taskResults = computed(() => stopStore.taskResults)
+const slug = computed(() => route.params.slug as string);
+const stopOverview = computed(
+  () => mapStore.stops.find((stop) => stop.slug === slug.value) ?? null,
+);
+const answers = computed(() => stopStore.answers);
+const taskResults = computed(() => stopStore.taskResults);
 
-const allAnswered = computed(() =>
+const allAnswered = computed(
+  () =>
     stopStore.tasks.length > 0 &&
     stopStore.tasks.every((task) => {
-      const answerableItems = task.items.filter((item) => item.options.length > 0)
+      const answerableItems = task.items.filter(
+        (item) => item.options.length > 0,
+      );
       const hotspotItems = task.items.filter((item) => {
-        if (item.options.length > 0) return false
-        if (!item.metadataJson) return false
+        if (item.options.length > 0) return false;
+        if (!item.metadataJson) return false;
         try {
-          return (JSON.parse(item.metadataJson) as { isHotspot?: boolean }).isHotspot
+          return (JSON.parse(item.metadataJson) as { isHotspot?: boolean })
+            .isHotspot;
         } catch {
-          return false
+          return false;
         }
-      })
-      const requiredItems = [...answerableItems, ...hotspotItems]
-      if (requiredItems.length === 0) return false
-      return requiredItems.every((item) => stopStore.answers.get(task.id)?.has(item.id) ?? false)
+      });
+      const requiredItems = [...answerableItems, ...hotspotItems];
+      if (requiredItems.length === 0) return false;
+      return requiredItems.every(
+        (item) => stopStore.answers.get(task.id)?.has(item.id) ?? false,
+      );
     }),
-)
+);
 
-const isSubmitting = computed(() => stopStore.submitStatus === 'submitting')
+const isSubmitting = computed(() => stopStore.submitStatus === "submitting");
 
 /**
  * Index of the first failed task. Set after a failed submission so the stepper
  * can jump there when the user dismisses the failure modal.
  * Null means "no pending jump".
  */
-const retryTaskIndex = ref<number | null>(null)
+const retryTaskIndex = ref<number | null>(null);
 
 function handleSelect(taskId: number, itemId: number, optionId: number): void {
-  stopStore.setAnswer(taskId, itemId, optionId)
+  stopStore.setAnswer(taskId, itemId, optionId);
 }
 
 function handleRetry(taskId: number): void {
-  stopStore.clearTaskResult(taskId)
+  stopStore.clearTaskResult(taskId);
 }
 
 async function handleFinish(): Promise<void> {
-  if (!stopOverview.value) return
+  if (!stopOverview.value) return;
 
-  const result = await stopStore.submitStop(stopOverview.value.stopId)
+  const result = await stopStore.submitStop(stopOverview.value.stopId);
   await Promise.allSettled([
     mapStore.fetchMapOverview(),
     authStore.fetchCurrentUserProfile(),
-  ])
+  ]);
 
   if (result.passed) {
-    await router.push({ name: 'pupil-stop-success', params: { slug: slug.value } })
-    return
+    await router.push({
+      name: "pupil-stop-success",
+      params: { slug: slug.value },
+    });
+    return;
   }
 
   // Find the index of the first failed task so we can jump there after dismiss
-  const firstFailedTaskId = result.taskResults.find((r) => !r.passed)?.taskId ?? null
+  const firstFailedTaskId =
+    result.taskResults.find((r) => !r.passed)?.taskId ?? null;
   retryTaskIndex.value =
-      firstFailedTaskId != null
-          ? stopStore.tasks.findIndex((task) => task.id === firstFailedTaskId)
-          : 0
+    firstFailedTaskId != null
+      ? stopStore.tasks.findIndex((task) => task.id === firstFailedTaskId)
+      : 0;
 }
 
 /**
@@ -82,42 +94,50 @@ async function handleFinish(): Promise<void> {
  * the per-task hint banners remain visible while the pupil retries.
  */
 function handleDismissFailure(): void {
-  const jumpTo = retryTaskIndex.value
-  stopStore.dismissSubmissionResult()
-  retryTaskIndex.value = null
+  const jumpTo = retryTaskIndex.value;
+  stopStore.dismissSubmissionResult();
+  retryTaskIndex.value = null;
   // Re-set on next tick so the watcher fires even if the index hasn't changed
   setTimeout(() => {
-    retryTaskIndex.value = jumpTo
-    setTimeout(() => { retryTaskIndex.value = null }, 50)
-  }, 0)
+    retryTaskIndex.value = jumpTo;
+    setTimeout(() => {
+      retryTaskIndex.value = null;
+    }, 50);
+  }, 0);
 }
 
 onMounted(() => {
-  void stopStore.loadTasksForStop(slug.value)
-})
+  void stopStore.loadTasksForStop(slug.value);
+});
 
 onUnmounted(() => {
-  stopStore.reset()
-})
+  stopStore.reset();
+});
 </script>
 
 <template>
   <StopTaskView
-      :answers="answers"
-      :can-finish="allAnswered && !isSubmitting"
-      :error-message="stopStore.errorMessage"
-      :finish-button-label="isSubmitting ? t('stop.submitting') : allAnswered ? t('stop.finish') : t('stop.answerAllFirst')"
-      :retry-task-index="retryTaskIndex"
-      :show-answers="false"
-      :status="stopStore.status"
-      :stop-overview="stopOverview"
-      :submission-result="stopStore.submissionResult"
-      :submit-error-message="stopStore.submitErrorMessage"
-      :task-results="taskResults"
-      :tasks="stopStore.tasks"
-      @dismiss-failure="handleDismissFailure"
-      @finish="handleFinish"
-      @retry="handleRetry"
-      @select="handleSelect"
+    :answers="answers"
+    :can-finish="allAnswered && !isSubmitting"
+    :error-message="stopStore.errorMessage"
+    :finish-button-label="
+      isSubmitting
+        ? t('stop.submitting')
+        : allAnswered
+          ? t('stop.finish')
+          : t('stop.answerAllFirst')
+    "
+    :retry-task-index="retryTaskIndex"
+    :show-answers="false"
+    :status="stopStore.status"
+    :stop-overview="stopOverview"
+    :submission-result="stopStore.submissionResult"
+    :submit-error-message="stopStore.submitErrorMessage"
+    :task-results="taskResults"
+    :tasks="stopStore.tasks"
+    @dismiss-failure="handleDismissFailure"
+    @finish="handleFinish"
+    @retry="handleRetry"
+    @select="handleSelect"
   />
-</template>
\ No newline at end of file
+</template>
diff --git a/src/teacher-mystery/api/__tests__/teacher-mystery.api.spec.ts b/src/teacher-mystery/api/__tests__/teacher-mystery.api.spec.ts
index 51486359..c8216829 100644
--- a/src/teacher-mystery/api/__tests__/teacher-mystery.api.spec.ts
+++ b/src/teacher-mystery/api/__tests__/teacher-mystery.api.spec.ts
@@ -1,252 +1,369 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import {
-requestAllSubmissions,
-requestApproveSubmission,
-requestRejectSubmission,
-requestFeatureSubmission,
-requestUnfeatureSubmission,
-requestFeaturedMysteries,
-} from '@/teacher-mystery/api/teacher-mystery.api'
+  requestAllSubmissions,
+  requestApproveSubmission,
+  requestRejectSubmission,
+  requestFeatureSubmission,
+  requestUnfeatureSubmission,
+  requestFeaturedMysteries,
+} from "@/teacher-mystery/api/teacher-mystery.api";
 
 function jsonResponse(body: unknown, init: ResponseInit = {}) {
   return new Response(JSON.stringify(body), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' },
+    headers: { "Content-Type": "application/json" },
     ...init,
-  })
+  });
 }
 
-const AUTH_HEADER = 'Bearer teacher-token'
-const CLASSROOM_ID = 7
-const SUBMISSION_ID = 1
-const WEEKLY_MYSTERY_ID = 3
+const AUTH_HEADER = "Bearer teacher-token";
+const CLASSROOM_ID = 7;
+const SUBMISSION_ID = 1;
+const WEEKLY_MYSTERY_ID = 3;
 
 const submission = {
   id: SUBMISSION_ID,
   classroomId: CLASSROOM_ID,
   pupilUserId: 20,
-  description: 'I found a fake news article',
+  description: "I found a fake news article",
   attachmentUrl: null,
-  submittedAt: '2025-05-05T10:00:00Z',
-  reviewStatus: 'PENDING',
+  submittedAt: "2025-05-05T10:00:00Z",
+  reviewStatus: "PENDING",
   reviewedByTeacherId: null,
   reviewedAt: null,
   teacherComment: null,
-}
+};
 
 const approvedSubmission = {
   ...submission,
-  reviewStatus: 'APPROVED',
+  reviewStatus: "APPROVED",
   reviewedByTeacherId: 10,
-  reviewedAt: '2025-05-06T09:00:00Z',
-  teacherComment: 'Great find!',
-}
+  reviewedAt: "2025-05-06T09:00:00Z",
+  teacherComment: "Great find!",
+};
 
 const weeklyMystery = {
   id: WEEKLY_MYSTERY_ID,
   classroomId: CLASSROOM_ID,
-  weekStart: '2025-05-05',
+  weekStart: "2025-05-05",
   featuredByTeacherId: 10,
-  featuredAt: '2025-05-06T10:00:00Z',
+  featuredAt: "2025-05-06T10:00:00Z",
   submission: approvedSubmission,
-}
+};
 
-describe('teacher-mystery.api', () => {
+describe("teacher-mystery.api", () => {
   beforeEach(() => {
-    vi.restoreAllMocks()
-  })
+    vi.restoreAllMocks();
+  });
 
-  describe('requestAllSubmissions', () => {
-    it('calls the correct endpoint and returns all submissions', async () => {
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse([submission]))
-      vi.stubGlobal('fetch', fetchMock)
+  describe("requestAllSubmissions", () => {
+    it("calls the correct endpoint and returns all submissions", async () => {
+      const fetchMock = vi
+        .fn()
+        .mockResolvedValueOnce(jsonResponse([submission]));
+      vi.stubGlobal("fetch", fetchMock);
 
-      const result = await requestAllSubmissions(CLASSROOM_ID, AUTH_HEADER)
+      const result = await requestAllSubmissions(CLASSROOM_ID, AUTH_HEADER);
 
-      expect(result).toEqual([submission])
-      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit]
-      expect(url).toBe(`/api/v1/teacher/classrooms/${CLASSROOM_ID}/mystery/submissions`)
-      expect(new Headers(options.headers).get('Authorization')).toBe(AUTH_HEADER)
-      expect(options.credentials).toBe('include')
-    })
-
-    it('throws when the server responds with an error', async () => {
+      expect(result).toEqual([submission]);
+      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+      expect(url).toBe(
+        `/api/v1/teacher/classrooms/${CLASSROOM_ID}/mystery/submissions`,
+      );
+      expect(new Headers(options.headers).get("Authorization")).toBe(
+        AUTH_HEADER,
+      );
+      expect(options.credentials).toBe("include");
+    });
+
+    it("throws when the server responds with an error", async () => {
       vi.stubGlobal(
-        'fetch',
-        vi.fn().mockResolvedValueOnce(jsonResponse({ detail: 'Forbidden' }, { status: 403 })),
-)
-
-await expect(requestAllSubmissions(CLASSROOM_ID, AUTH_HEADER)).rejects.toThrow('Forbidden')
-    })
-  })
-
-  describe('requestApproveSubmission', () => {
-    it('sends a PATCH to the approve endpoint with the comment and returns the updated submission', async () => {
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse(approvedSubmission))
-      vi.stubGlobal('fetch', fetchMock)
-
-      const result = await requestApproveSubmission(CLASSROOM_ID, SUBMISSION_ID, 'Great find!', AUTH_HEADER)
+        "fetch",
+        vi
+          .fn()
+          .mockResolvedValueOnce(
+            jsonResponse({ detail: "Forbidden" }, { status: 403 }),
+          ),
+      );
 
-      expect(result).toEqual(approvedSubmission)
-      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit]
+      await expect(
+        requestAllSubmissions(CLASSROOM_ID, AUTH_HEADER),
+      ).rejects.toThrow("Forbidden");
+    });
+  });
+
+  describe("requestApproveSubmission", () => {
+    it("sends a PATCH to the approve endpoint with the comment and returns the updated submission", async () => {
+      const fetchMock = vi
+        .fn()
+        .mockResolvedValueOnce(jsonResponse(approvedSubmission));
+      vi.stubGlobal("fetch", fetchMock);
+
+      const result = await requestApproveSubmission(
+        CLASSROOM_ID,
+        SUBMISSION_ID,
+        "Great find!",
+        AUTH_HEADER,
+      );
+
+      expect(result).toEqual(approvedSubmission);
+      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit];
       expect(url).toBe(
         `/api/v1/teacher/classrooms/${CLASSROOM_ID}/mystery/submissions/${SUBMISSION_ID}/approve`,
-)
-expect(options.method).toBe('PATCH')
-      expect(JSON.parse(options.body as string)).toEqual({ comment: 'Great find!' })
-      expect(new Headers(options.headers).get('Content-Type')).toBe('application/json')
-    })
-
-    it('sends null comment when no feedback is provided', async () => {
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse(approvedSubmission))
-      vi.stubGlobal('fetch', fetchMock)
-
-      await requestApproveSubmission(CLASSROOM_ID, SUBMISSION_ID, null, AUTH_HEADER)
-
-      const [, options] = fetchMock.mock.calls[0] as [string, RequestInit]
-      expect(JSON.parse(options.body as string)).toEqual({ comment: null })
-    })
-
-    it('throws when the submission is not found', async () => {
+      );
+      expect(options.method).toBe("PATCH");
+      expect(JSON.parse(options.body as string)).toEqual({
+        comment: "Great find!",
+      });
+      expect(new Headers(options.headers).get("Content-Type")).toBe(
+        "application/json",
+      );
+    });
+
+    it("sends null comment when no feedback is provided", async () => {
+      const fetchMock = vi
+        .fn()
+        .mockResolvedValueOnce(jsonResponse(approvedSubmission));
+      vi.stubGlobal("fetch", fetchMock);
+
+      await requestApproveSubmission(
+        CLASSROOM_ID,
+        SUBMISSION_ID,
+        null,
+        AUTH_HEADER,
+      );
+
+      const [, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+      expect(JSON.parse(options.body as string)).toEqual({ comment: null });
+    });
+
+    it("throws when the submission is not found", async () => {
       vi.stubGlobal(
-        'fetch',
-        vi.fn().mockResolvedValueOnce(jsonResponse({ detail: 'Submission not found' }, { status: 404 })),
-)
-
-await expect(
-        requestApproveSubmission(CLASSROOM_ID, SUBMISSION_ID, null, AUTH_HEADER),
-      ).rejects.toThrow('Submission not found')
-    })
+        "fetch",
+        vi
+          .fn()
+          .mockResolvedValueOnce(
+            jsonResponse({ detail: "Submission not found" }, { status: 404 }),
+          ),
+      );
 
-    it('throws when the submission is already reviewed', async () => {
-      vi.stubGlobal(
-        'fetch',
-        vi.fn().mockResolvedValueOnce(
-          jsonResponse({ detail: 'Cannot approve a submission that is already APPROVED' }, { status: 500 }),
+      await expect(
+        requestApproveSubmission(
+          CLASSROOM_ID,
+          SUBMISSION_ID,
+          null,
+          AUTH_HEADER,
         ),
-)
-
-await expect(
-        requestApproveSubmission(CLASSROOM_ID, SUBMISSION_ID, null, AUTH_HEADER),
-      ).rejects.toThrow()
-    })
-  })
-
-  describe('requestRejectSubmission', () => {
-    it('sends a PATCH to the reject endpoint and returns the updated submission', async () => {
-      const rejected = { ...submission, reviewStatus: 'REJECTED', teacherComment: 'This is just an ad.' }
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse(rejected))
-      vi.stubGlobal('fetch', fetchMock)
+      ).rejects.toThrow("Submission not found");
+    });
 
-      const result = await requestRejectSubmission(CLASSROOM_ID, SUBMISSION_ID, 'This is just an ad.', AUTH_HEADER)
+    it("throws when the submission is already reviewed", async () => {
+      vi.stubGlobal(
+        "fetch",
+        vi
+          .fn()
+          .mockResolvedValueOnce(
+            jsonResponse(
+              {
+                detail: "Cannot approve a submission that is already APPROVED",
+              },
+              { status: 500 },
+            ),
+          ),
+      );
 
-      expect(result.reviewStatus).toBe('REJECTED')
-      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit]
+      await expect(
+        requestApproveSubmission(
+          CLASSROOM_ID,
+          SUBMISSION_ID,
+          null,
+          AUTH_HEADER,
+        ),
+      ).rejects.toThrow();
+    });
+  });
+
+  describe("requestRejectSubmission", () => {
+    it("sends a PATCH to the reject endpoint and returns the updated submission", async () => {
+      const rejected = {
+        ...submission,
+        reviewStatus: "REJECTED",
+        teacherComment: "This is just an ad.",
+      };
+      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse(rejected));
+      vi.stubGlobal("fetch", fetchMock);
+
+      const result = await requestRejectSubmission(
+        CLASSROOM_ID,
+        SUBMISSION_ID,
+        "This is just an ad.",
+        AUTH_HEADER,
+      );
+
+      expect(result.reviewStatus).toBe("REJECTED");
+      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit];
       expect(url).toBe(
         `/api/v1/teacher/classrooms/${CLASSROOM_ID}/mystery/submissions/${SUBMISSION_ID}/reject`,
-)
-expect(options.method).toBe('PATCH')
-      expect(JSON.parse(options.body as string)).toEqual({ comment: 'This is just an ad.' })
-    })
+      );
+      expect(options.method).toBe("PATCH");
+      expect(JSON.parse(options.body as string)).toEqual({
+        comment: "This is just an ad.",
+      });
+    });
 
-    it('throws when the submission is not found', async () => {
+    it("throws when the submission is not found", async () => {
       vi.stubGlobal(
-        'fetch',
-        vi.fn().mockResolvedValueOnce(jsonResponse({ detail: 'Submission not found' }, { status: 404 })),
-)
+        "fetch",
+        vi
+          .fn()
+          .mockResolvedValueOnce(
+            jsonResponse({ detail: "Submission not found" }, { status: 404 }),
+          ),
+      );
 
-await expect(
+      await expect(
         requestRejectSubmission(CLASSROOM_ID, SUBMISSION_ID, null, AUTH_HEADER),
-      ).rejects.toThrow('Submission not found')
-    })
-  })
-
-  describe('requestFeatureSubmission', () => {
-    it('sends a POST with submissionId and weekStart and returns the created weekly mystery', async () => {
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse(weeklyMystery))
-      vi.stubGlobal('fetch', fetchMock)
-
-      const result = await requestFeatureSubmission(CLASSROOM_ID, SUBMISSION_ID, '2025-05-05', AUTH_HEADER)
-
-      expect(result).toEqual(weeklyMystery)
-      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit]
-      expect(url).toBe(`/api/v1/teacher/classrooms/${CLASSROOM_ID}/mystery/weekly`)
-      expect(options.method).toBe('POST')
+      ).rejects.toThrow("Submission not found");
+    });
+  });
+
+  describe("requestFeatureSubmission", () => {
+    it("sends a POST with submissionId and weekStart and returns the created weekly mystery", async () => {
+      const fetchMock = vi
+        .fn()
+        .mockResolvedValueOnce(jsonResponse(weeklyMystery));
+      vi.stubGlobal("fetch", fetchMock);
+
+      const result = await requestFeatureSubmission(
+        CLASSROOM_ID,
+        SUBMISSION_ID,
+        "2025-05-05",
+        AUTH_HEADER,
+      );
+
+      expect(result).toEqual(weeklyMystery);
+      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+      expect(url).toBe(
+        `/api/v1/teacher/classrooms/${CLASSROOM_ID}/mystery/weekly`,
+      );
+      expect(options.method).toBe("POST");
       expect(JSON.parse(options.body as string)).toEqual({
         submissionId: SUBMISSION_ID,
-        weekStart: '2025-05-05',
-      })
-      expect(new Headers(options.headers).get('Content-Type')).toBe('application/json')
-      expect(new Headers(options.headers).get('Authorization')).toBe(AUTH_HEADER)
-    })
-
-    it('throws when the submission is not yet approved', async () => {
+        weekStart: "2025-05-05",
+      });
+      expect(new Headers(options.headers).get("Content-Type")).toBe(
+        "application/json",
+      );
+      expect(new Headers(options.headers).get("Authorization")).toBe(
+        AUTH_HEADER,
+      );
+    });
+
+    it("throws when the submission is not yet approved", async () => {
       vi.stubGlobal(
-        'fetch',
-        vi.fn().mockResolvedValueOnce(
-          jsonResponse(
-            { detail: 'Only approved submissions can be featured' },
-            { status: 422 },
+        "fetch",
+        vi
+          .fn()
+          .mockResolvedValueOnce(
+            jsonResponse(
+              { detail: "Only approved submissions can be featured" },
+              { status: 422 },
+            ),
           ),
-        ),
-)
-
-await expect(
-        requestFeatureSubmission(CLASSROOM_ID, SUBMISSION_ID, '2025-05-05', AUTH_HEADER),
-      ).rejects.toThrow('Only approved submissions can be featured')
-    })
-  })
-
-  describe('requestUnfeatureSubmission', () => {
-    it('sends a DELETE to the correct endpoint and resolves without a body', async () => {
-      const fetchMock = vi.fn().mockResolvedValueOnce(new Response(null, { status: 204 }))
-      vi.stubGlobal('fetch', fetchMock)
+      );
 
       await expect(
-        requestUnfeatureSubmission(CLASSROOM_ID, WEEKLY_MYSTERY_ID, AUTH_HEADER),
-      ).resolves.toBeUndefined()
+        requestFeatureSubmission(
+          CLASSROOM_ID,
+          SUBMISSION_ID,
+          "2025-05-05",
+          AUTH_HEADER,
+        ),
+      ).rejects.toThrow("Only approved submissions can be featured");
+    });
+  });
 
-      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit]
-      expect(url).toBe(`/api/v1/teacher/classrooms/${CLASSROOM_ID}/mystery/weekly/${WEEKLY_MYSTERY_ID}`)
-      expect(options.method).toBe('DELETE')
-      expect(new Headers(options.headers).get('Authorization')).toBe(AUTH_HEADER)
-    })
+  describe("requestUnfeatureSubmission", () => {
+    it("sends a DELETE to the correct endpoint and resolves without a body", async () => {
+      const fetchMock = vi
+        .fn()
+        .mockResolvedValueOnce(new Response(null, { status: 204 }));
+      vi.stubGlobal("fetch", fetchMock);
 
-    it('throws when the entry is not found', async () => {
-      vi.stubGlobal(
-        'fetch',
-        vi.fn().mockResolvedValueOnce(
-          jsonResponse({ detail: 'Weekly mystery entry not found' }, { status: 404 }),
+      await expect(
+        requestUnfeatureSubmission(
+          CLASSROOM_ID,
+          WEEKLY_MYSTERY_ID,
+          AUTH_HEADER,
         ),
-)
+      ).resolves.toBeUndefined();
 
-await expect(
-        requestUnfeatureSubmission(CLASSROOM_ID, WEEKLY_MYSTERY_ID, AUTH_HEADER),
-      ).rejects.toThrow('Weekly mystery entry not found')
-    })
-  })
+      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+      expect(url).toBe(
+        `/api/v1/teacher/classrooms/${CLASSROOM_ID}/mystery/weekly/${WEEKLY_MYSTERY_ID}`,
+      );
+      expect(options.method).toBe("DELETE");
+      expect(new Headers(options.headers).get("Authorization")).toBe(
+        AUTH_HEADER,
+      );
+    });
+
+    it("throws when the entry is not found", async () => {
+      vi.stubGlobal(
+        "fetch",
+        vi
+          .fn()
+          .mockResolvedValueOnce(
+            jsonResponse(
+              { detail: "Weekly mystery entry not found" },
+              { status: 404 },
+            ),
+          ),
+      );
 
-  describe('requestFeaturedMysteries', () => {
-    it('calls the correct endpoint and returns all featured mysteries', async () => {
-      const fetchMock = vi.fn().mockResolvedValueOnce(jsonResponse([weeklyMystery]))
-      vi.stubGlobal('fetch', fetchMock)
+      await expect(
+        requestUnfeatureSubmission(
+          CLASSROOM_ID,
+          WEEKLY_MYSTERY_ID,
+          AUTH_HEADER,
+        ),
+      ).rejects.toThrow("Weekly mystery entry not found");
+    });
+  });
 
-      const result = await requestFeaturedMysteries(CLASSROOM_ID, AUTH_HEADER)
+  describe("requestFeaturedMysteries", () => {
+    it("calls the correct endpoint and returns all featured mysteries", async () => {
+      const fetchMock = vi
+        .fn()
+        .mockResolvedValueOnce(jsonResponse([weeklyMystery]));
+      vi.stubGlobal("fetch", fetchMock);
 
-      expect(result).toEqual([weeklyMystery])
-      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit]
-      expect(url).toBe(`/api/v1/teacher/classrooms/${CLASSROOM_ID}/mystery/weekly`)
-      expect(new Headers(options.headers).get('Authorization')).toBe(AUTH_HEADER)
-    })
+      const result = await requestFeaturedMysteries(CLASSROOM_ID, AUTH_HEADER);
 
-    it('throws when the server responds with an error', async () => {
+      expect(result).toEqual([weeklyMystery]);
+      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+      expect(url).toBe(
+        `/api/v1/teacher/classrooms/${CLASSROOM_ID}/mystery/weekly`,
+      );
+      expect(new Headers(options.headers).get("Authorization")).toBe(
+        AUTH_HEADER,
+      );
+    });
+
+    it("throws when the server responds with an error", async () => {
       vi.stubGlobal(
-        'fetch',
-        vi.fn().mockResolvedValueOnce(jsonResponse({ detail: 'Unauthorized' }, { status: 401 })),
-      )
-
-await expect(requestFeaturedMysteries(CLASSROOM_ID, AUTH_HEADER)).rejects.toThrow('Unauthorized')
-    })
-  })
-})
\ No newline at end of file
+        "fetch",
+        vi
+          .fn()
+          .mockResolvedValueOnce(
+            jsonResponse({ detail: "Unauthorized" }, { status: 401 }),
+          ),
+      );
+
+      await expect(
+        requestFeaturedMysteries(CLASSROOM_ID, AUTH_HEADER),
+      ).rejects.toThrow("Unauthorized");
+    });
+  });
+});
diff --git a/src/teacher-mystery/api/teacher-mystery.api.ts b/src/teacher-mystery/api/teacher-mystery.api.ts
index 3d378300..e6993ccd 100644
--- a/src/teacher-mystery/api/teacher-mystery.api.ts
+++ b/src/teacher-mystery/api/teacher-mystery.api.ts
@@ -1,47 +1,53 @@
 import type {
-    MysterySubmissionResponse,
-WeeklyMysteryResponse,
-} from '@/mystery/model/mystery.types'
+  MysterySubmissionResponse,
+  WeeklyMysteryResponse,
+} from "@/mystery/model/mystery.types";
 
-const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
+const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? "").replace(
+  /\/$/,
+  "",
+);
 
 function teacherMysteryBase(classroomId: number) {
-  return `${API_BASE_URL}/api/v1/teacher/classrooms/${classroomId}/mystery`
+  return `${API_BASE_URL}/api/v1/teacher/classrooms/${classroomId}/mystery`;
 }
 
 async function getResponseErrorMessage(response: Response): Promise<string> {
-  const fallback = `Mystery request failed with status ${response.status}.`
-  const contentType = response.headers.get('content-type') ?? ''
+  const fallback = `Mystery request failed with status ${response.status}.`;
+  const contentType = response.headers.get("content-type") ?? "";
 
-  if (contentType.includes('application/json')) {
-    const body = (await response.json().catch(() => null)) as
-      | { message?: string; detail?: string; error?: string }
-      | null
-    return body?.detail ?? body?.message ?? body?.error ?? fallback
+  if (contentType.includes("application/json")) {
+    const body = (await response.json().catch(() => null)) as {
+      message?: string;
+      detail?: string;
+      error?: string;
+    } | null;
+    return body?.detail ?? body?.message ?? body?.error ?? fallback;
   }
 
-  return (await response.text().catch(() => '')) || fallback
+  return (await response.text().catch(() => "")) || fallback;
 }
 
 async function fetchTeacherMysteryJson<T>(options: {
-  url: string
-  method?: string
-  body?: unknown
-  authorizationHeader: string
+  url: string;
+  method?: string;
+  body?: unknown;
+  authorizationHeader: string;
 }): Promise<T> {
-  const headers = new Headers({ Authorization: options.authorizationHeader })
-  if (options.body !== undefined) headers.set('Content-Type', 'application/json')
+  const headers = new Headers({ Authorization: options.authorizationHeader });
+  if (options.body !== undefined)
+    headers.set("Content-Type", "application/json");
 
   const response = await fetch(options.url, {
-    method: options.method ?? 'GET',
+    method: options.method ?? "GET",
     headers,
     body: options.body !== undefined ? JSON.stringify(options.body) : undefined,
-    credentials: 'include',
-  })
+    credentials: "include",
+  });
 
-  if (!response.ok) throw new Error(await getResponseErrorMessage(response))
-  if (response.status === 204) return undefined as T
-  return (await response.json()) as T
+  if (!response.ok) throw new Error(await getResponseErrorMessage(response));
+  if (response.status === 204) return undefined as T;
+  return (await response.json()) as T;
 }
 
 export function requestAllSubmissions(
@@ -51,7 +57,7 @@ export function requestAllSubmissions(
   return fetchTeacherMysteryJson({
     url: `${teacherMysteryBase(classroomId)}/submissions`,
     authorizationHeader,
-  })
+  });
 }
 
 export function requestApproveSubmission(
@@ -62,10 +68,10 @@ export function requestApproveSubmission(
 ): Promise<MysterySubmissionResponse> {
   return fetchTeacherMysteryJson({
     url: `${teacherMysteryBase(classroomId)}/submissions/${submissionId}/approve`,
-    method: 'PATCH',
+    method: "PATCH",
     authorizationHeader,
     body: { comment },
-  })
+  });
 }
 
 export function requestRejectSubmission(
@@ -76,10 +82,10 @@ export function requestRejectSubmission(
 ): Promise<MysterySubmissionResponse> {
   return fetchTeacherMysteryJson({
     url: `${teacherMysteryBase(classroomId)}/submissions/${submissionId}/reject`,
-    method: 'PATCH',
+    method: "PATCH",
     authorizationHeader,
     body: { comment },
-  })
+  });
 }
 
 export function requestFeatureSubmission(
@@ -90,10 +96,10 @@ export function requestFeatureSubmission(
 ): Promise<WeeklyMysteryResponse> {
   return fetchTeacherMysteryJson({
     url: `${teacherMysteryBase(classroomId)}/weekly`,
-    method: 'POST',
+    method: "POST",
     authorizationHeader,
     body: { submissionId, weekStart },
-  })
+  });
 }
 
 export function requestUnfeatureSubmission(
@@ -103,9 +109,9 @@ export function requestUnfeatureSubmission(
 ): Promise<void> {
   return fetchTeacherMysteryJson({
     url: `${teacherMysteryBase(classroomId)}/weekly/${weeklyMysteryId}`,
-    method: 'DELETE',
+    method: "DELETE",
     authorizationHeader,
-  })
+  });
 }
 
 export function requestFeaturedMysteries(
@@ -115,5 +121,5 @@ export function requestFeaturedMysteries(
   return fetchTeacherMysteryJson({
     url: `${teacherMysteryBase(classroomId)}/weekly`,
     authorizationHeader,
-  })
-}
\ No newline at end of file
+  });
+}
diff --git a/src/teacher-mystery/components/TeacherFeatureModal.vue b/src/teacher-mystery/components/TeacherFeatureModal.vue
index ee4d775c..3c0a9086 100644
--- a/src/teacher-mystery/components/TeacherFeatureModal.vue
+++ b/src/teacher-mystery/components/TeacherFeatureModal.vue
@@ -1,63 +1,68 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import type { MysterySubmissionResponse } from '@/mystery/model/mystery.types'
+import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import type { MysterySubmissionResponse } from "@/mystery/model/mystery.types";
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 const props = defineProps<{
-  open: boolean
-  submission: MysterySubmissionResponse | null
-  submitting: boolean
-  errorMessage: string | null
-}>()
+  open: boolean;
+  submission: MysterySubmissionResponse | null;
+  submitting: boolean;
+  errorMessage: string | null;
+}>();
 
 const emit = defineEmits<{
-  confirm: [weekStart: string]
-  cancel: []
-}>()
+  confirm: [weekStart: string];
+  cancel: [];
+}>();
 
-const weekInputValue = ref(toWeekInputValue(thisIsoWeekStart()))
+const weekInputValue = ref(toWeekInputValue(thisIsoWeekStart()));
 
-watch(() => props.open, (isOpen) => {
-  if (isOpen) weekInputValue.value = toWeekInputValue(thisIsoWeekStart())
-})
+watch(
+  () => props.open,
+  (isOpen) => {
+    if (isOpen) weekInputValue.value = toWeekInputValue(thisIsoWeekStart());
+  },
+);
 
 function thisIsoWeekStart(): string {
-  const now = new Date()
-  const day = now.getDay() || 7
-  const monday = new Date(now)
-  monday.setDate(now.getDate() - day + 1)
-  return monday.toISOString().slice(0, 10)
+  const now = new Date();
+  const day = now.getDay() || 7;
+  const monday = new Date(now);
+  monday.setDate(now.getDate() - day + 1);
+  return monday.toISOString().slice(0, 10);
 }
 
 function getIsoWeekNumber(date: Date): number {
-  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
-  d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7))
-  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
-  return Math.ceil(((d.getTime() - yearStart.getTime()) / 86_400_000 + 1) / 7)
+  const d = new Date(
+    Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()),
+  );
+  d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  return Math.ceil(((d.getTime() - yearStart.getTime()) / 86_400_000 + 1) / 7);
 }
 
 function toWeekInputValue(weekStart: string): string {
-  const date = new Date(weekStart)
-  const week = getIsoWeekNumber(date)
-  return `${date.getFullYear()}-W${String(week).padStart(2, '0')}`
+  const date = new Date(weekStart);
+  const week = getIsoWeekNumber(date);
+  return `${date.getFullYear()}-W${String(week).padStart(2, "0")}`;
 }
 
 function fromWeekInputValue(value: string): string {
-  const parts = value.split('-W')
-  const year = parseInt(parts[0] ?? '0')
-  const week = parseInt(parts[1] ?? '1')
-  const jan4 = new Date(Date.UTC(year, 0, 4))
-  const startOfWeek1 = new Date(jan4)
-  startOfWeek1.setUTCDate(jan4.getUTCDate() - ((jan4.getUTCDay() || 7) - 1))
-  const monday = new Date(startOfWeek1)
-  monday.setUTCDate(startOfWeek1.getUTCDate() + (week - 1) * 7)
-  return monday.toISOString().slice(0, 10)
+  const parts = value.split("-W");
+  const year = parseInt(parts[0] ?? "0");
+  const week = parseInt(parts[1] ?? "1");
+  const jan4 = new Date(Date.UTC(year, 0, 4));
+  const startOfWeek1 = new Date(jan4);
+  startOfWeek1.setUTCDate(jan4.getUTCDate() - ((jan4.getUTCDay() || 7) - 1));
+  const monday = new Date(startOfWeek1);
+  monday.setUTCDate(startOfWeek1.getUTCDate() + (week - 1) * 7);
+  return monday.toISOString().slice(0, 10);
 }
 
 function handleConfirm() {
-  emit('confirm', fromWeekInputValue(weekInputValue.value))
+  emit("confirm", fromWeekInputValue(weekInputValue.value));
 }
 </script>
 
@@ -69,11 +74,11 @@ function handleConfirm() {
   >
     <div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
       <h2 class="mb-4 text-lg font-semibold text-slate-900">
-        {{ t('teacherMystery.modal.featureTitle') }}
+        {{ t("teacherMystery.modal.featureTitle") }}
       </h2>
 
       <label class="mb-1 block text-sm font-semibold text-slate-700">
-        {{ t('teacherMystery.modal.weekLabel') }}
+        {{ t("teacherMystery.modal.weekLabel") }}
       </label>
       <input
         v-model="weekInputValue"
@@ -81,21 +86,23 @@ function handleConfirm() {
         class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-800 focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500"
       />
 
-      <p v-if="errorMessage" class="mt-2 text-sm text-red-600">{{ errorMessage }}</p>
+      <p v-if="errorMessage" class="mt-2 text-sm text-red-600">
+        {{ errorMessage }}
+      </p>
 
       <div class="mt-4 flex justify-end gap-2">
         <button
           class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-500 hover:bg-slate-50"
           @click="emit('cancel')"
         >
-          {{ t('teacherMystery.modal.cancel') }}
+          {{ t("teacherMystery.modal.cancel") }}
         </button>
         <button
           class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-bold text-white transition hover:bg-slate-700 disabled:opacity-50"
           :disabled="submitting"
           @click="handleConfirm"
         >
-          {{ t('teacherMystery.modal.featureConfirm') }}
+          {{ t("teacherMystery.modal.featureConfirm") }}
         </button>
       </div>
     </div>
diff --git a/src/teacher-mystery/components/TeacherFeaturedCard.vue b/src/teacher-mystery/components/TeacherFeaturedCard.vue
index d4ba12fc..d4d55032 100644
--- a/src/teacher-mystery/components/TeacherFeaturedCard.vue
+++ b/src/teacher-mystery/components/TeacherFeaturedCard.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import type { WeeklyMysteryResponse } from '@/mystery/model/mystery.types'
+import { useI18n } from "vue-i18n";
+import type { WeeklyMysteryResponse } from "@/mystery/model/mystery.types";
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 defineProps<{
-  mystery: WeeklyMysteryResponse
-}>()
+  mystery: WeeklyMysteryResponse;
+}>();
 
 const emit = defineEmits<{
-  unfeature: [mystery: WeeklyMysteryResponse]
-}>()
+  unfeature: [mystery: WeeklyMysteryResponse];
+}>();
 </script>
 
 <template>
@@ -35,7 +35,9 @@ const emit = defineEmits<{
 
     <div class="p-4">
       <p class="mb-1 text-xs font-bold uppercase tracking-wide text-amber-600">
-        {{ t('teacherMystery.pupilLabel') }} #{{ mystery.submission.pupilUserId }}
+        {{ t("teacherMystery.pupilLabel") }} #{{
+          mystery.submission.pupilUserId
+        }}
       </p>
       <p class="line-clamp-3 text-sm leading-relaxed text-slate-700">
         {{ mystery.submission.description }}
diff --git a/src/teacher-mystery/components/TeacherMysteryTabBar.vue b/src/teacher-mystery/components/TeacherMysteryTabBar.vue
index 886d6fd9..1576902d 100644
--- a/src/teacher-mystery/components/TeacherMysteryTabBar.vue
+++ b/src/teacher-mystery/components/TeacherMysteryTabBar.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
+import { useI18n } from "vue-i18n";
 
-export type TeacherMysteryTab = 'pending' | 'approved' | 'featured'
+export type TeacherMysteryTab = "pending" | "approved" | "featured";
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 defineProps<{
-  pendingCount: number
-}>()
+  pendingCount: number;
+}>();
 
-const activeTab = defineModel<TeacherMysteryTab>({ required: true })
+const activeTab = defineModel<TeacherMysteryTab>({ required: true });
 
-const tabs: TeacherMysteryTab[] = ['pending', 'approved', 'featured']
+const tabs: TeacherMysteryTab[] = ["pending", "approved", "featured"];
 </script>
 
 <template>
@@ -22,9 +22,11 @@ const tabs: TeacherMysteryTab[] = ['pending', 'approved', 'featured']
       role="tab"
       :aria-selected="activeTab === tab"
       class="-mb-0.5 border-b-2 px-5 py-2 text-sm font-semibold transition-colors"
-      :class="activeTab === tab
-        ? 'border-amber-600 text-amber-700'
-        : 'border-transparent text-slate-400 hover:text-slate-600'"
+      :class="
+        activeTab === tab
+          ? 'border-amber-600 text-amber-700'
+          : 'border-transparent text-slate-400 hover:text-slate-600'
+      "
       @click="activeTab = tab"
     >
       {{ t(`teacherMystery.tabs.${tab}`) }}
diff --git a/src/teacher-mystery/components/TeacherReviewModal.vue b/src/teacher-mystery/components/TeacherReviewModal.vue
index 05354182..63092eab 100644
--- a/src/teacher-mystery/components/TeacherReviewModal.vue
+++ b/src/teacher-mystery/components/TeacherReviewModal.vue
@@ -1,31 +1,34 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import type { MysterySubmissionResponse } from '@/mystery/model/mystery.types'
-import type { ModalMode } from '@/teacher-mystery/model/teacher-mystery.types'
+import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import type { MysterySubmissionResponse } from "@/mystery/model/mystery.types";
+import type { ModalMode } from "@/teacher-mystery/model/teacher-mystery.types";
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 const props = defineProps<{
-  submission: MysterySubmissionResponse | null
-  mode: ModalMode
-  submitting: boolean
-  errorMessage: string | null
-}>()
+  submission: MysterySubmissionResponse | null;
+  mode: ModalMode;
+  submitting: boolean;
+  errorMessage: string | null;
+}>();
 
 const emit = defineEmits<{
-  confirm: [comment: string | null]
-  cancel: []
-}>()
+  confirm: [comment: string | null];
+  cancel: [];
+}>();
 
-const comment = ref('')
+const comment = ref("");
 
-watch(() => props.submission, () => {
-  comment.value = ''
-})
+watch(
+  () => props.submission,
+  () => {
+    comment.value = "";
+  },
+);
 
 function handleConfirm() {
-  emit('confirm', comment.value.trim() || null)
+  emit("confirm", comment.value.trim() || null);
 }
 </script>
 
@@ -37,11 +40,15 @@ function handleConfirm() {
   >
     <div class="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl">
       <h2 class="mb-4 text-lg font-semibold text-slate-900">
-        {{ mode === 'approve' ? t('teacherMystery.modal.approveTitle') : t('teacherMystery.modal.rejectTitle') }}
+        {{
+          mode === "approve"
+            ? t("teacherMystery.modal.approveTitle")
+            : t("teacherMystery.modal.rejectTitle")
+        }}
       </h2>
 
       <label class="mb-1 block text-sm font-semibold text-slate-700">
-        {{ t('teacherMystery.modal.commentLabel') }}
+        {{ t("teacherMystery.modal.commentLabel") }}
       </label>
       <textarea
         v-model="comment"
@@ -50,22 +57,32 @@ function handleConfirm() {
         :placeholder="t('teacherMystery.modal.commentPlaceholder')"
       />
 
-      <p v-if="errorMessage" class="mt-2 text-sm text-red-600">{{ errorMessage }}</p>
+      <p v-if="errorMessage" class="mt-2 text-sm text-red-600">
+        {{ errorMessage }}
+      </p>
 
       <div class="mt-4 flex justify-end gap-2">
         <button
           class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-500 hover:bg-slate-50"
           @click="emit('cancel')"
         >
-          {{ t('teacherMystery.modal.cancel') }}
+          {{ t("teacherMystery.modal.cancel") }}
         </button>
         <button
           class="rounded-lg px-4 py-2 text-sm font-bold text-white transition disabled:opacity-50"
-          :class="mode === 'approve' ? 'bg-emerald-600 hover:bg-emerald-700' : 'bg-red-600 hover:bg-red-700'"
+          :class="
+            mode === 'approve'
+              ? 'bg-emerald-600 hover:bg-emerald-700'
+              : 'bg-red-600 hover:bg-red-700'
+          "
           :disabled="submitting"
           @click="handleConfirm"
         >
-          {{ mode === 'approve' ? t('teacherMystery.actions.approve') : t('teacherMystery.actions.reject') }}
+          {{
+            mode === "approve"
+              ? t("teacherMystery.actions.approve")
+              : t("teacherMystery.actions.reject")
+          }}
         </button>
       </div>
     </div>
diff --git a/src/teacher-mystery/components/TeacherSubmissionRow.vue b/src/teacher-mystery/components/TeacherSubmissionRow.vue
index e8043e9a..add065de 100644
--- a/src/teacher-mystery/components/TeacherSubmissionRow.vue
+++ b/src/teacher-mystery/components/TeacherSubmissionRow.vue
@@ -1,26 +1,28 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import type { MysterySubmissionResponse } from '@/mystery/model/mystery.types'
+import { useI18n } from "vue-i18n";
+import type { MysterySubmissionResponse } from "@/mystery/model/mystery.types";
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 defineProps<{
-  submission: MysterySubmissionResponse
-  formattedDate: string
-  isFeaturedThisWeek?: boolean
-}>()
+  submission: MysterySubmissionResponse;
+  formattedDate: string;
+  isFeaturedThisWeek?: boolean;
+}>();
 
 const emit = defineEmits<{
-  approve: [submission: MysterySubmissionResponse]
-  reject: [submission: MysterySubmissionResponse]
-  feature: [submission: MysterySubmissionResponse]
-}>()
+  approve: [submission: MysterySubmissionResponse];
+  reject: [submission: MysterySubmissionResponse];
+  feature: [submission: MysterySubmissionResponse];
+}>();
 </script>
 
 <template>
   <li class="flex items-start gap-4 py-4">
     <!-- Thumbnail -->
-    <div class="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-slate-100 text-2xl">
+    <div
+      class="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-slate-100 text-2xl"
+    >
       <img
         v-if="submission.attachmentUrl"
         :src="submission.attachmentUrl"
@@ -33,11 +35,16 @@ const emit = defineEmits<{
     <!-- Info -->
     <div class="min-w-0 flex-1">
       <p class="text-sm font-semibold text-amber-700">
-        {{ t('teacherMystery.pupilLabel') }} #{{ submission.pupilUserId }}
+        {{ t("teacherMystery.pupilLabel") }} #{{ submission.pupilUserId }}
+      </p>
+      <p class="line-clamp-2 text-sm text-slate-700">
+        {{ submission.description }}
       </p>
-      <p class="line-clamp-2 text-sm text-slate-700">{{ submission.description }}</p>
       <p class="mt-0.5 text-xs text-slate-400">{{ formattedDate }}</p>
-      <p v-if="submission.teacherComment" class="mt-0.5 text-xs italic text-slate-400">
+      <p
+        v-if="submission.teacherComment"
+        class="mt-0.5 text-xs italic text-slate-400"
+      >
         "{{ submission.teacherComment }}"
       </p>
     </div>
@@ -51,13 +58,13 @@ const emit = defineEmits<{
             class="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-bold text-white transition hover:bg-emerald-700"
             @click="emit('approve', submission)"
           >
-            {{ t('teacherMystery.actions.approve') }}
+            {{ t("teacherMystery.actions.approve") }}
           </button>
           <button
             class="rounded-lg border border-red-300 bg-white px-3 py-1.5 text-xs font-bold text-red-600 transition hover:bg-red-50"
             @click="emit('reject', submission)"
           >
-            {{ t('teacherMystery.actions.reject') }}
+            {{ t("teacherMystery.actions.reject") }}
           </button>
         </div>
       </template>
@@ -68,13 +75,13 @@ const emit = defineEmits<{
           v-if="isFeaturedThisWeek"
           class="rounded-full bg-blue-100 px-3 py-1 text-xs font-bold text-blue-700"
         >
-          {{ t('teacherMystery.approved.featuredThisWeek') }}
+          {{ t("teacherMystery.approved.featuredThisWeek") }}
         </span>
         <button
           class="rounded-lg bg-slate-800 px-3 py-1.5 text-xs font-bold text-white transition hover:bg-slate-700"
           @click="emit('feature', submission)"
         >
-          {{ t('teacherMystery.actions.feature') }}
+          {{ t("teacherMystery.actions.feature") }}
         </button>
       </template>
     </div>
diff --git a/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts b/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts
index 9d22467a..e1c082dc 100644
--- a/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts
+++ b/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts
@@ -1,304 +1,349 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
 
-import { useTeacherMysteryStore } from '@/teacher-mystery/model/teacher-mystery.store'
-import { useAuthStore } from '@/auth/model/auth.store'
+import { useTeacherMysteryStore } from "@/teacher-mystery/model/teacher-mystery.store";
+import { useAuthStore } from "@/auth/model/auth.store";
 
 function jsonResponse(body: unknown, init: ResponseInit = {}) {
   return new Response(JSON.stringify(body), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' },
+    headers: { "Content-Type": "application/json" },
     ...init,
-  })
+  });
 }
 
-const CLASSROOM_ID = 7
-const SUBMISSION_ID = 1
-const WEEKLY_MYSTERY_ID = 3
+const CLASSROOM_ID = 7;
+const SUBMISSION_ID = 1;
+const WEEKLY_MYSTERY_ID = 3;
 
 const pendingSubmission = {
   id: SUBMISSION_ID,
   classroomId: CLASSROOM_ID,
   pupilUserId: 20,
-  description: 'I found a fake news article',
+  description: "I found a fake news article",
   attachmentUrl: null,
-  submittedAt: '2025-05-05T10:00:00Z',
-  reviewStatus: 'PENDING' as const,
+  submittedAt: "2025-05-05T10:00:00Z",
+  reviewStatus: "PENDING" as const,
   reviewedByTeacherId: null,
   reviewedAt: null,
   teacherComment: null,
-}
+};
 
 const approvedSubmission = {
   ...pendingSubmission,
-  reviewStatus: 'APPROVED' as const,
+  reviewStatus: "APPROVED" as const,
   reviewedByTeacherId: 10,
-  reviewedAt: '2025-05-06T09:00:00Z',
-  teacherComment: 'Great find!',
-}
+  reviewedAt: "2025-05-06T09:00:00Z",
+  teacherComment: "Great find!",
+};
 
 const weeklyMystery = {
   id: WEEKLY_MYSTERY_ID,
   classroomId: CLASSROOM_ID,
-  weekStart: '2025-05-05',
+  weekStart: "2025-05-05",
   featuredByTeacherId: 10,
-  featuredAt: '2025-05-06T10:00:00Z',
+  featuredAt: "2025-05-06T10:00:00Z",
   submission: approvedSubmission,
-}
+};
 
 function seedTeacherAuthStore() {
-  const authStore = useAuthStore()
-  authStore.accessToken = 'teacher-token'
+  const authStore = useAuthStore();
+  authStore.accessToken = "teacher-token";
   authStore.user = {
-    subject: '10',
-    portalType: 'TEACHER',
-    email: 'teacher@example.com',
+    subject: "10",
+    portalType: "TEACHER",
+    email: "teacher@example.com",
     username: null,
-    authorities: ['ROLE_TEACHER'],
+    authorities: ["ROLE_TEACHER"],
     pupilProfile: null,
     teacherProfile: {
-      teacherName: 'Teacher One',
-      schoolName: 'Example School',
+      teacherName: "Teacher One",
+      schoolName: "Example School",
     },
-  }
+  };
 }
 
-describe('useTeacherMysteryStore', () => {
+describe("useTeacherMysteryStore", () => {
   beforeEach(() => {
-    setActivePinia(createPinia())
-    vi.restoreAllMocks()
-  })
+    setActivePinia(createPinia());
+    vi.restoreAllMocks();
+  });
 
-  it('populates submissions and featuredMysteries and sets status to ready on success', async () => {
-    seedTeacherAuthStore()
+  it("populates submissions and featuredMysteries and sets status to ready on success", async () => {
+    seedTeacherAuthStore();
     vi.stubGlobal(
-      'fetch',
+      "fetch",
       vi
         .fn()
         .mockResolvedValueOnce(jsonResponse([pendingSubmission]))
         .mockResolvedValueOnce(jsonResponse([weeklyMystery])),
-)
+    );
 
-const store = useTeacherMysteryStore()
-await store.fetchAll(CLASSROOM_ID)
+    const store = useTeacherMysteryStore();
+    await store.fetchAll(CLASSROOM_ID);
 
-    expect(store.status).toBe('ready')
-    expect(store.submissions).toEqual([pendingSubmission])
-    expect(store.featuredMysteries).toEqual([weeklyMystery])
-    expect(store.errorMessage).toBeNull()
-  })
+    expect(store.status).toBe("ready");
+    expect(store.submissions).toEqual([pendingSubmission]);
+    expect(store.featuredMysteries).toEqual([weeklyMystery]);
+    expect(store.errorMessage).toBeNull();
+  });
 
-  it('sets status to error and stores the message when fetchAll fails', async () => {
-    seedTeacherAuthStore()
+  it("sets status to error and stores the message when fetchAll fails", async () => {
+    seedTeacherAuthStore();
     vi.stubGlobal(
-      'fetch',
-      vi.fn()
-        .mockResolvedValueOnce(jsonResponse({ detail: 'Classroom not found' }, { status: 404 }))
+      "fetch",
+      vi
+        .fn()
+        .mockResolvedValueOnce(
+          jsonResponse({ detail: "Classroom not found" }, { status: 404 }),
+        )
         .mockResolvedValueOnce(jsonResponse([])),
-)
+    );
 
-const store = useTeacherMysteryStore()
-await expect(store.fetchAll(CLASSROOM_ID)).rejects.toThrow()
+    const store = useTeacherMysteryStore();
+    await expect(store.fetchAll(CLASSROOM_ID)).rejects.toThrow();
 
-    expect(store.status).toBe('error')
-    expect(store.errorMessage).toBe('Classroom not found')
-  })
+    expect(store.status).toBe("error");
+    expect(store.errorMessage).toBe("Classroom not found");
+  });
 
-  it('throws when the user is not authenticated', async () => {
-    const store = useTeacherMysteryStore()
-    await expect(store.fetchAll(CLASSROOM_ID)).rejects.toThrow('Not authenticated.')
-  })
+  it("throws when the user is not authenticated", async () => {
+    const store = useTeacherMysteryStore();
+    await expect(store.fetchAll(CLASSROOM_ID)).rejects.toThrow(
+      "Not authenticated.",
+    );
+  });
 
-  it('throws when the session is a pupil session', async () => {
-    const authStore = useAuthStore()
-    authStore.accessToken = 'access-token'
+  it("throws when the session is a pupil session", async () => {
+    const authStore = useAuthStore();
+    authStore.accessToken = "access-token";
     authStore.user = {
-      subject: '20',
-      portalType: 'PUPIL',
+      subject: "20",
+      portalType: "PUPIL",
       email: null,
-      username: 'ada',
-      authorities: ['ROLE_PUPIL'],
+      username: "ada",
+      authorities: ["ROLE_PUPIL"],
       pupilProfile: {
-        displayName: 'Ada',
+        displayName: "Ada",
         totalXp: 0,
         currentLevel: 1,
         currentClassroomId: CLASSROOM_ID,
         hasCompletedOnboarding: true,
       },
       teacherProfile: null,
-    }
+    };
 
-    const store = useTeacherMysteryStore()
-    await expect(store.fetchAll(CLASSROOM_ID)).rejects.toThrow('Only teachers can manage mysteries.')
-  })
+    const store = useTeacherMysteryStore();
+    await expect(store.fetchAll(CLASSROOM_ID)).rejects.toThrow(
+      "Only teachers can manage mysteries.",
+    );
+  });
 
-  it('sends the Authorization header derived from the auth store', async () => {
-    seedTeacherAuthStore()
+  it("sends the Authorization header derived from the auth store", async () => {
+    seedTeacherAuthStore();
     const fetchMock = vi
       .fn()
       .mockResolvedValueOnce(jsonResponse([]))
-      .mockResolvedValueOnce(jsonResponse([]))
-    vi.stubGlobal('fetch', fetchMock)
-
-    const store = useTeacherMysteryStore()
-    await store.fetchAll(CLASSROOM_ID)
-
-    const [, options] = fetchMock.mock.calls[0] as [string, RequestInit]
-    expect(new Headers(options.headers).get('Authorization')).toBe('Bearer teacher-token')
-  })
-
-
-  it('approveSubmission replaces the submission in local state with the updated version', async () => {
-    seedTeacherAuthStore()
-    vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce(jsonResponse(approvedSubmission)))
-
-    const store = useTeacherMysteryStore()
-    store.submissions = [pendingSubmission]
-
-    await store.approveSubmission(CLASSROOM_ID, SUBMISSION_ID, 'Great find!')
-
-    expect(store.submissions[0]).toEqual(approvedSubmission)
-    expect(store.submissions[0]?.reviewStatus).toBe('APPROVED')
-    expect(store.submissions[0]?.teacherComment).toBe('Great find!')
-  })
-
-  it('approveSubmission leaves other submissions untouched', async () => {
-    seedTeacherAuthStore()
-    const otherSubmission = { ...pendingSubmission, id: 99 }
-    vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce(jsonResponse(approvedSubmission)))
+      .mockResolvedValueOnce(jsonResponse([]));
+    vi.stubGlobal("fetch", fetchMock);
 
-    const store = useTeacherMysteryStore()
-    store.submissions = [pendingSubmission, otherSubmission]
+    const store = useTeacherMysteryStore();
+    await store.fetchAll(CLASSROOM_ID);
 
-    await store.approveSubmission(CLASSROOM_ID, SUBMISSION_ID, null)
+    const [, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(new Headers(options.headers).get("Authorization")).toBe(
+      "Bearer teacher-token",
+    );
+  });
 
-    expect(store.submissions).toHaveLength(2)
-    expect(store.submissions[1]?.id).toBe(99)
-    expect(store.submissions[1]?.reviewStatus).toBe('PENDING')
-  })
-
-  it('approveSubmission throws and does not update state when the API returns an error', async () => {
-    seedTeacherAuthStore()
+  it("approveSubmission replaces the submission in local state with the updated version", async () => {
+    seedTeacherAuthStore();
     vi.stubGlobal(
-      'fetch',
-      vi.fn().mockResolvedValueOnce(jsonResponse({ detail: 'Submission not found' }, { status: 404 })),
-)
+      "fetch",
+      vi.fn().mockResolvedValueOnce(jsonResponse(approvedSubmission)),
+    );
 
-const store = useTeacherMysteryStore()
-store.submissions = [pendingSubmission]
+    const store = useTeacherMysteryStore();
+    store.submissions = [pendingSubmission];
 
-await expect(store.approveSubmission(CLASSROOM_ID, SUBMISSION_ID, null)).rejects.toThrow(
-      'Submission not found',
-)
+    await store.approveSubmission(CLASSROOM_ID, SUBMISSION_ID, "Great find!");
 
-// State must remain unchanged
-expect(store.submissions[0]?.reviewStatus).toBe('PENDING')
-  })
+    expect(store.submissions[0]).toEqual(approvedSubmission);
+    expect(store.submissions[0]?.reviewStatus).toBe("APPROVED");
+    expect(store.submissions[0]?.teacherComment).toBe("Great find!");
+  });
 
-  it('rejectSubmission replaces the submission in local state with the rejected version', async () => {
-    seedTeacherAuthStore()
-    const rejected = { ...pendingSubmission, reviewStatus: 'REJECTED' as const, teacherComment: 'This is just an ad.' }
-    vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce(jsonResponse(rejected)))
+  it("approveSubmission leaves other submissions untouched", async () => {
+    seedTeacherAuthStore();
+    const otherSubmission = { ...pendingSubmission, id: 99 };
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValueOnce(jsonResponse(approvedSubmission)),
+    );
 
-    const store = useTeacherMysteryStore()
-    store.submissions = [pendingSubmission]
+    const store = useTeacherMysteryStore();
+    store.submissions = [pendingSubmission, otherSubmission];
 
-    await store.rejectSubmission(CLASSROOM_ID, SUBMISSION_ID, 'This is just an ad.')
+    await store.approveSubmission(CLASSROOM_ID, SUBMISSION_ID, null);
 
-    expect(store.submissions[0]?.reviewStatus).toBe('REJECTED')
-    expect(store.submissions[0]?.teacherComment).toBe('This is just an ad.')
-  })
+    expect(store.submissions).toHaveLength(2);
+    expect(store.submissions[1]?.id).toBe(99);
+    expect(store.submissions[1]?.reviewStatus).toBe("PENDING");
+  });
 
-  it('rejectSubmission throws when the session is not a teacher session', async () => {
-    const authStore = useAuthStore()
-    authStore.accessToken = 'access-token'
+  it("approveSubmission throws and does not update state when the API returns an error", async () => {
+    seedTeacherAuthStore();
+    vi.stubGlobal(
+      "fetch",
+      vi
+        .fn()
+        .mockResolvedValueOnce(
+          jsonResponse({ detail: "Submission not found" }, { status: 404 }),
+        ),
+    );
+
+    const store = useTeacherMysteryStore();
+    store.submissions = [pendingSubmission];
+
+    await expect(
+      store.approveSubmission(CLASSROOM_ID, SUBMISSION_ID, null),
+    ).rejects.toThrow("Submission not found");
+
+    // State must remain unchanged
+    expect(store.submissions[0]?.reviewStatus).toBe("PENDING");
+  });
+
+  it("rejectSubmission replaces the submission in local state with the rejected version", async () => {
+    seedTeacherAuthStore();
+    const rejected = {
+      ...pendingSubmission,
+      reviewStatus: "REJECTED" as const,
+      teacherComment: "This is just an ad.",
+    };
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValueOnce(jsonResponse(rejected)),
+    );
+
+    const store = useTeacherMysteryStore();
+    store.submissions = [pendingSubmission];
+
+    await store.rejectSubmission(
+      CLASSROOM_ID,
+      SUBMISSION_ID,
+      "This is just an ad.",
+    );
+
+    expect(store.submissions[0]?.reviewStatus).toBe("REJECTED");
+    expect(store.submissions[0]?.teacherComment).toBe("This is just an ad.");
+  });
+
+  it("rejectSubmission throws when the session is not a teacher session", async () => {
+    const authStore = useAuthStore();
+    authStore.accessToken = "access-token";
     authStore.user = {
-      subject: '20',
-      portalType: 'PUPIL',
+      subject: "20",
+      portalType: "PUPIL",
       email: null,
-      username: 'ada',
-      authorities: ['ROLE_PUPIL'],
+      username: "ada",
+      authorities: ["ROLE_PUPIL"],
       pupilProfile: {
-        displayName: 'Ada',
+        displayName: "Ada",
         totalXp: 0,
         currentLevel: 1,
         currentClassroomId: CLASSROOM_ID,
         hasCompletedOnboarding: true,
       },
       teacherProfile: null,
-    }
+    };
 
-    const store = useTeacherMysteryStore()
-    await expect(store.rejectSubmission(CLASSROOM_ID, SUBMISSION_ID, null)).rejects.toThrow(
-      'Only teachers can manage mysteries.',
-)
-})
+    const store = useTeacherMysteryStore();
+    await expect(
+      store.rejectSubmission(CLASSROOM_ID, SUBMISSION_ID, null),
+    ).rejects.toThrow("Only teachers can manage mysteries.");
+  });
 
-it('featureSubmission prepends the new weekly mystery to featuredMysteries', async () => {
-    seedTeacherAuthStore()
-    const olderMystery = { ...weeklyMystery, id: 1, weekStart: '2025-04-28' }
-    vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce(jsonResponse(weeklyMystery)))
+  it("featureSubmission prepends the new weekly mystery to featuredMysteries", async () => {
+    seedTeacherAuthStore();
+    const olderMystery = { ...weeklyMystery, id: 1, weekStart: "2025-04-28" };
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValueOnce(jsonResponse(weeklyMystery)),
+    );
 
-    const store = useTeacherMysteryStore()
-    store.featuredMysteries = [olderMystery]
+    const store = useTeacherMysteryStore();
+    store.featuredMysteries = [olderMystery];
 
-    await store.featureSubmission(CLASSROOM_ID, SUBMISSION_ID, '2025-05-05')
+    await store.featureSubmission(CLASSROOM_ID, SUBMISSION_ID, "2025-05-05");
 
-    expect(store.featuredMysteries).toHaveLength(2)
-    expect(store.featuredMysteries[0]).toEqual(weeklyMystery)
-    expect(store.featuredMysteries[1]).toEqual(olderMystery)
-  })
+    expect(store.featuredMysteries).toHaveLength(2);
+    expect(store.featuredMysteries[0]).toEqual(weeklyMystery);
+    expect(store.featuredMysteries[1]).toEqual(olderMystery);
+  });
 
-  it('featureSubmission throws when the submission is not approved', async () => {
-    seedTeacherAuthStore()
+  it("featureSubmission throws when the submission is not approved", async () => {
+    seedTeacherAuthStore();
     vi.stubGlobal(
-      'fetch',
-      vi.fn().mockResolvedValueOnce(
-        jsonResponse({ detail: 'Only approved submissions can be featured' }, { status: 422 }),
-      ),
-)
+      "fetch",
+      vi
+        .fn()
+        .mockResolvedValueOnce(
+          jsonResponse(
+            { detail: "Only approved submissions can be featured" },
+            { status: 422 },
+          ),
+        ),
+    );
 
-const store = useTeacherMysteryStore()
-store.featuredMysteries = []
+    const store = useTeacherMysteryStore();
+    store.featuredMysteries = [];
 
-await expect(
-      store.featureSubmission(CLASSROOM_ID, SUBMISSION_ID, '2025-05-05'),
-    ).rejects.toThrow('Only approved submissions can be featured')
+    await expect(
+      store.featureSubmission(CLASSROOM_ID, SUBMISSION_ID, "2025-05-05"),
+    ).rejects.toThrow("Only approved submissions can be featured");
 
     // State must not be mutated on failure
-    expect(store.featuredMysteries).toHaveLength(0)
-  })
+    expect(store.featuredMysteries).toHaveLength(0);
+  });
 
-  it('unfeatureSubmission removes the entry from featuredMysteries by id', async () => {
-    seedTeacherAuthStore()
-    vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce(new Response(null, { status: 204 })))
+  it("unfeatureSubmission removes the entry from featuredMysteries by id", async () => {
+    seedTeacherAuthStore();
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValueOnce(new Response(null, { status: 204 })),
+    );
 
-    const otherMystery = { ...weeklyMystery, id: 99 }
-    const store = useTeacherMysteryStore()
-    store.featuredMysteries = [weeklyMystery, otherMystery]
+    const otherMystery = { ...weeklyMystery, id: 99 };
+    const store = useTeacherMysteryStore();
+    store.featuredMysteries = [weeklyMystery, otherMystery];
 
-    await store.unfeatureSubmission(CLASSROOM_ID, WEEKLY_MYSTERY_ID)
+    await store.unfeatureSubmission(CLASSROOM_ID, WEEKLY_MYSTERY_ID);
 
-    expect(store.featuredMysteries).toHaveLength(1)
-    expect(store.featuredMysteries[0]?.id).toBe(99)
-  })
+    expect(store.featuredMysteries).toHaveLength(1);
+    expect(store.featuredMysteries[0]?.id).toBe(99);
+  });
 
-  it('unfeatureSubmission throws and keeps state intact when the entry is not found', async () => {
-    seedTeacherAuthStore()
+  it("unfeatureSubmission throws and keeps state intact when the entry is not found", async () => {
+    seedTeacherAuthStore();
     vi.stubGlobal(
-      'fetch',
-      vi.fn().mockResolvedValueOnce(
-        jsonResponse({ detail: 'Weekly mystery entry not found' }, { status: 404 }),
-      ),
-)
-
-const store = useTeacherMysteryStore()
-store.featuredMysteries = [weeklyMystery]
-
-await expect(
+      "fetch",
+      vi
+        .fn()
+        .mockResolvedValueOnce(
+          jsonResponse(
+            { detail: "Weekly mystery entry not found" },
+            { status: 404 },
+          ),
+        ),
+    );
+
+    const store = useTeacherMysteryStore();
+    store.featuredMysteries = [weeklyMystery];
+
+    await expect(
       store.unfeatureSubmission(CLASSROOM_ID, WEEKLY_MYSTERY_ID),
-    ).rejects.toThrow('Weekly mystery entry not found')
+    ).rejects.toThrow("Weekly mystery entry not found");
 
-    expect(store.featuredMysteries).toHaveLength(1)
-  })
-})
+    expect(store.featuredMysteries).toHaveLength(1);
+  });
+});
diff --git a/src/teacher-mystery/model/teacher-mystery.store.ts b/src/teacher-mystery/model/teacher-mystery.store.ts
index 06ac576f..74dcc701 100644
--- a/src/teacher-mystery/model/teacher-mystery.store.ts
+++ b/src/teacher-mystery/model/teacher-mystery.store.ts
@@ -1,34 +1,41 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { useAuthStore } from '@/auth/model/auth.store'
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { useAuthStore } from "@/auth/model/auth.store";
 import {
-requestAllSubmissions,
-requestApproveSubmission,
-requestRejectSubmission,
-requestFeatureSubmission,
-requestUnfeatureSubmission,
-requestFeaturedMysteries,
-} from '@/teacher-mystery/api/teacher-mystery.api'
-import type { MysterySubmissionResponse, WeeklyMysteryResponse } from '@/mystery/model/mystery.types'
-import type { TeacherMysteryStatus } from '@/teacher-mystery/model/teacher-mystery.types'
+  requestAllSubmissions,
+  requestApproveSubmission,
+  requestRejectSubmission,
+  requestFeatureSubmission,
+  requestUnfeatureSubmission,
+  requestFeaturedMysteries,
+} from "@/teacher-mystery/api/teacher-mystery.api";
+import type {
+  MysterySubmissionResponse,
+  WeeklyMysteryResponse,
+} from "@/mystery/model/mystery.types";
+import type { TeacherMysteryStatus } from "@/teacher-mystery/model/teacher-mystery.types";
 
-export const useTeacherMysteryStore = defineStore('teacher-mystery', () => {
-const authStore = useAuthStore()
+export const useTeacherMysteryStore = defineStore("teacher-mystery", () => {
+  const authStore = useAuthStore();
 
-const submissions = ref<MysterySubmissionResponse[]>([])
-const featuredMysteries = ref<WeeklyMysteryResponse[]>([])
-const status = ref<TeacherMysteryStatus>('idle')
-const errorMessage = ref<string | null>(null)
+  const submissions = ref<MysterySubmissionResponse[]>([]);
+  const featuredMysteries = ref<WeeklyMysteryResponse[]>([]);
+  const status = ref<TeacherMysteryStatus>("idle");
+  const errorMessage = ref<string | null>(null);
 
-// -------------------------------------------------------------------------
-// Session helper
-// -------------------------------------------------------------------------
+  // -------------------------------------------------------------------------
+  // Session helper
+  // -------------------------------------------------------------------------
 
-function requireTeacherSession(classroomId: number): { authorizationHeader: string; classroomId: number } {
-    const header = authStore.authorizationHeader
-    if (!header) throw new Error('Not authenticated.')
-    if (authStore.portalType !== 'TEACHER') throw new Error('Only teachers can manage mysteries.')
-    return { authorizationHeader: header, classroomId }
+  function requireTeacherSession(classroomId: number): {
+    authorizationHeader: string;
+    classroomId: number;
+  } {
+    const header = authStore.authorizationHeader;
+    if (!header) throw new Error("Not authenticated.");
+    if (authStore.portalType !== "TEACHER")
+      throw new Error("Only teachers can manage mysteries.");
+    return { authorizationHeader: header, classroomId };
   }
 
   // -------------------------------------------------------------------------
@@ -36,23 +43,27 @@ function requireTeacherSession(classroomId: number): { authorizationHeader: stri
   // -------------------------------------------------------------------------
 
   async function fetchAll(classroomId: number): Promise<void> {
-    const session = requireTeacherSession(classroomId)
+    const session = requireTeacherSession(classroomId);
 
-    status.value = 'loading'
-    errorMessage.value = null
+    status.value = "loading";
+    errorMessage.value = null;
 
     try {
       const [subs, featured] = await Promise.all([
         requestAllSubmissions(session.classroomId, session.authorizationHeader),
-        requestFeaturedMysteries(session.classroomId, session.authorizationHeader),
-      ])
-      submissions.value = subs
-      featuredMysteries.value = featured
-      status.value = 'ready'
+        requestFeaturedMysteries(
+          session.classroomId,
+          session.authorizationHeader,
+        ),
+      ]);
+      submissions.value = subs;
+      featuredMysteries.value = featured;
+      status.value = "ready";
     } catch (error) {
-      errorMessage.value = error instanceof Error ? error.message : 'Failed to load mysteries.'
-      status.value = 'error'
-      throw error
+      errorMessage.value =
+        error instanceof Error ? error.message : "Failed to load mysteries.";
+      status.value = "error";
+      throw error;
     }
   }
 
@@ -64,14 +75,14 @@ function requireTeacherSession(classroomId: number): { authorizationHeader: stri
     submissionId: number,
     comment: string | null,
   ): Promise<void> {
-    const session = requireTeacherSession(classroomId)
+    const session = requireTeacherSession(classroomId);
     const updated = await requestApproveSubmission(
       session.classroomId,
       submissionId,
       comment,
       session.authorizationHeader,
-)
-replaceSubmission(updated)
+    );
+    replaceSubmission(updated);
   }
 
   /**
@@ -82,14 +93,14 @@ replaceSubmission(updated)
     submissionId: number,
     comment: string | null,
   ): Promise<void> {
-    const session = requireTeacherSession(classroomId)
+    const session = requireTeacherSession(classroomId);
     const updated = await requestRejectSubmission(
       session.classroomId,
       submissionId,
       comment,
       session.authorizationHeader,
-)
-replaceSubmission(updated)
+    );
+    replaceSubmission(updated);
   }
 
   /**
@@ -100,23 +111,32 @@ replaceSubmission(updated)
     submissionId: number,
     weekStart: string,
   ): Promise<void> {
-    const session = requireTeacherSession(classroomId)
+    const session = requireTeacherSession(classroomId);
     const created = await requestFeatureSubmission(
       session.classroomId,
       submissionId,
       weekStart,
       session.authorizationHeader,
-)
-featuredMysteries.value = [created, ...featuredMysteries.value]
-}
+    );
+    featuredMysteries.value = [created, ...featuredMysteries.value];
+  }
 
-/**
-* Removes a featured mystery entry and updates local state.
-*/
-async function unfeatureSubmission(classroomId: number, weeklyMysteryId: number): Promise<void> {
-    const session = requireTeacherSession(classroomId)
-    await requestUnfeatureSubmission(session.classroomId, weeklyMysteryId, session.authorizationHeader)
-    featuredMysteries.value = featuredMysteries.value.filter((m) => m.id !== weeklyMysteryId)
+  /**
+   * Removes a featured mystery entry and updates local state.
+   */
+  async function unfeatureSubmission(
+    classroomId: number,
+    weeklyMysteryId: number,
+  ): Promise<void> {
+    const session = requireTeacherSession(classroomId);
+    await requestUnfeatureSubmission(
+      session.classroomId,
+      weeklyMysteryId,
+      session.authorizationHeader,
+    );
+    featuredMysteries.value = featuredMysteries.value.filter(
+      (m) => m.id !== weeklyMysteryId,
+    );
   }
 
   // -------------------------------------------------------------------------
@@ -124,7 +144,9 @@ async function unfeatureSubmission(classroomId: number, weeklyMysteryId: number)
   // -------------------------------------------------------------------------
 
   function replaceSubmission(updated: MysterySubmissionResponse) {
-    submissions.value = submissions.value.map((s) => (s.id === updated.id ? updated : s))
+    submissions.value = submissions.value.map((s) =>
+      s.id === updated.id ? updated : s,
+    );
   }
 
   return {
@@ -137,5 +159,5 @@ async function unfeatureSubmission(classroomId: number, weeklyMysteryId: number)
     rejectSubmission,
     featureSubmission,
     unfeatureSubmission,
-  }
-})
\ No newline at end of file
+  };
+});
diff --git a/src/teacher-mystery/model/teacher-mystery.types.ts b/src/teacher-mystery/model/teacher-mystery.types.ts
index af7dd0c6..8608cedb 100644
--- a/src/teacher-mystery/model/teacher-mystery.types.ts
+++ b/src/teacher-mystery/model/teacher-mystery.types.ts
@@ -1,3 +1,3 @@
-export type TeacherMysteryStatus = 'idle' | 'loading' | 'ready' | 'error'
+export type TeacherMysteryStatus = "idle" | "loading" | "ready" | "error";
 
-export type ModalMode = 'approve' | 'reject' | null
\ No newline at end of file
+export type ModalMode = "approve" | "reject" | null;
diff --git a/src/teacher-mystery/pages/TeacherMystery.vue b/src/teacher-mystery/pages/TeacherMystery.vue
index 5fa681e7..7d259b3e 100644
--- a/src/teacher-mystery/pages/TeacherMystery.vue
+++ b/src/teacher-mystery/pages/TeacherMystery.vue
@@ -1,216 +1,264 @@
-
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute } from 'vue-router'
-import { useTeacherMysteryStore } from '@/teacher-mystery/model/teacher-mystery.store'
-import TeacherMysteryTabBar, { type TeacherMysteryTab } from '@/teacher-mystery/components/TeacherMysteryTabBar.vue'
-import TeacherSubmissionRow from '@/teacher-mystery/components/TeacherSubmissionRow.vue'
-import TeacherReviewModal from '@/teacher-mystery/components/TeacherReviewModal.vue'
-import TeacherFeatureModal from '@/teacher-mystery/components/TeacherFeatureModal.vue'
-import TeacherFeaturedCard from '@/teacher-mystery/components/TeacherFeaturedCard.vue'
-import MysteryWeekNavigator from '@/mystery/components/MysteryWeekNavigator.vue'
-import type { MysterySubmissionResponse, WeeklyMysteryResponse } from '@/mystery/model/mystery.types'
-import type { ModalMode } from '@/teacher-mystery/model/teacher-mystery.types'
-
-const { t } = useI18n()
-const route = useRoute()
-const store = useTeacherMysteryStore()
-
-const classroomId = computed(() => Number(route.params.classroomId))
-
-const activeTab = ref<TeacherMysteryTab>('pending')
-const weekIndex = ref(0)
+import { computed, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import { useTeacherMysteryStore } from "@/teacher-mystery/model/teacher-mystery.store";
+import TeacherMysteryTabBar, {
+  type TeacherMysteryTab,
+} from "@/teacher-mystery/components/TeacherMysteryTabBar.vue";
+import TeacherSubmissionRow from "@/teacher-mystery/components/TeacherSubmissionRow.vue";
+import TeacherReviewModal from "@/teacher-mystery/components/TeacherReviewModal.vue";
+import TeacherFeatureModal from "@/teacher-mystery/components/TeacherFeatureModal.vue";
+import TeacherFeaturedCard from "@/teacher-mystery/components/TeacherFeaturedCard.vue";
+import MysteryWeekNavigator from "@/mystery/components/MysteryWeekNavigator.vue";
+import type {
+  MysterySubmissionResponse,
+  WeeklyMysteryResponse,
+} from "@/mystery/model/mystery.types";
+import type { ModalMode } from "@/teacher-mystery/model/teacher-mystery.types";
+
+const { t } = useI18n();
+const route = useRoute();
+const store = useTeacherMysteryStore();
+
+const classroomId = computed(() => Number(route.params.classroomId));
+
+const activeTab = ref<TeacherMysteryTab>("pending");
+const weekIndex = ref(0);
 
 const pendingSubmissions = computed(() =>
-    store.submissions.filter((s) => s.reviewStatus === 'PENDING'),
-)
+  store.submissions.filter((s) => s.reviewStatus === "PENDING"),
+);
 
 const approvedSubmissions = computed(() =>
-    store.submissions.filter((s) => s.reviewStatus === 'APPROVED'),
-)
+  store.submissions.filter((s) => s.reviewStatus === "APPROVED"),
+);
 
 const uniqueWeeks = computed<string[]>(() => {
-  const seen = new Set<string>()
-  for (const m of store.featuredMysteries) seen.add(m.weekStart)
-  return [...seen].sort((a, b) => b.localeCompare(a))
-})
+  const seen = new Set<string>();
+  for (const m of store.featuredMysteries) seen.add(m.weekStart);
+  return [...seen].sort((a, b) => b.localeCompare(a));
+});
 
-const currentWeekStart = computed<string | null>(() => uniqueWeeks.value[weekIndex.value] ?? null)
+const currentWeekStart = computed<string | null>(
+  () => uniqueWeeks.value[weekIndex.value] ?? null,
+);
 
 const currentWeekMysteries = computed<WeeklyMysteryResponse[]>(() => {
-  if (!currentWeekStart.value) return []
-  return store.featuredMysteries.filter((m) => m.weekStart === currentWeekStart.value)
-})
+  if (!currentWeekStart.value) return [];
+  return store.featuredMysteries.filter(
+    (m) => m.weekStart === currentWeekStart.value,
+  );
+});
 
-const canGoPrev = computed(() => weekIndex.value < uniqueWeeks.value.length - 1)
-const canGoNext = computed(() => weekIndex.value > 0)
+const canGoPrev = computed(
+  () => weekIndex.value < uniqueWeeks.value.length - 1,
+);
+const canGoNext = computed(() => weekIndex.value > 0);
 
 const weekLabel = computed<string>(() => {
-  if (!currentWeekStart.value) return ''
-  const date = new Date(currentWeekStart.value)
-  const week = getIsoWeekNumber(date)
-  const formatted = date.toLocaleDateString('nb-NO', { day: 'numeric', month: 'long', year: 'numeric' })
-  return `${t('teacherMystery.weekLabel', { week })} — ${formatted}`
-})
+  if (!currentWeekStart.value) return "";
+  const date = new Date(currentWeekStart.value);
+  const week = getIsoWeekNumber(date);
+  const formatted = date.toLocaleDateString("nb-NO", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+  return `${t("teacherMystery.weekLabel", { week })} — ${formatted}`;
+});
 
 const featuredSubmissionIdsThisWeek = computed(() => {
-  const thisWeek = thisIsoWeekStart()
+  const thisWeek = thisIsoWeekStart();
   return new Set(
-      store.featuredMysteries
-          .filter((m) => m.weekStart === thisWeek)
-          .map((m) => m.submission.id),
-  )
-})
-
-const reviewModalMode = ref<ModalMode>(null)
-const reviewModalSubmission = ref<MysterySubmissionResponse | null>(null)
-const reviewModalError = ref<string | null>(null)
-const reviewModalSubmitting = ref(false)
-
-function openReviewModal(submission: MysterySubmissionResponse, mode: 'approve' | 'reject') {
-  reviewModalSubmission.value = submission
-  reviewModalMode.value = mode
-  reviewModalError.value = null
+    store.featuredMysteries
+      .filter((m) => m.weekStart === thisWeek)
+      .map((m) => m.submission.id),
+  );
+});
+
+const reviewModalMode = ref<ModalMode>(null);
+const reviewModalSubmission = ref<MysterySubmissionResponse | null>(null);
+const reviewModalError = ref<string | null>(null);
+const reviewModalSubmitting = ref(false);
+
+function openReviewModal(
+  submission: MysterySubmissionResponse,
+  mode: "approve" | "reject",
+) {
+  reviewModalSubmission.value = submission;
+  reviewModalMode.value = mode;
+  reviewModalError.value = null;
 }
 
 function closeReviewModal() {
-  reviewModalMode.value = null
-  reviewModalSubmission.value = null
-  reviewModalError.value = null
+  reviewModalMode.value = null;
+  reviewModalSubmission.value = null;
+  reviewModalError.value = null;
 }
 
 async function handleReviewConfirm(comment: string | null) {
-  if (!reviewModalSubmission.value || !reviewModalMode.value) return
-  reviewModalSubmitting.value = true
-  reviewModalError.value = null
+  if (!reviewModalSubmission.value || !reviewModalMode.value) return;
+  reviewModalSubmitting.value = true;
+  reviewModalError.value = null;
 
   try {
-    if (reviewModalMode.value === 'approve') {
-      await store.approveSubmission(classroomId.value, reviewModalSubmission.value.id, comment)
+    if (reviewModalMode.value === "approve") {
+      await store.approveSubmission(
+        classroomId.value,
+        reviewModalSubmission.value.id,
+        comment,
+      );
     } else {
-      await store.rejectSubmission(classroomId.value, reviewModalSubmission.value.id, comment)
+      await store.rejectSubmission(
+        classroomId.value,
+        reviewModalSubmission.value.id,
+        comment,
+      );
     }
-    closeReviewModal()
+    closeReviewModal();
   } catch (error) {
-    reviewModalError.value = error instanceof Error ? error.message : t('teacherMystery.errors.reviewFailed')
+    reviewModalError.value =
+      error instanceof Error
+        ? error.message
+        : t("teacherMystery.errors.reviewFailed");
   } finally {
-    reviewModalSubmitting.value = false
+    reviewModalSubmitting.value = false;
   }
 }
 
-const featureModalOpen = ref(false)
-const featureModalSubmission = ref<MysterySubmissionResponse | null>(null)
-const featureModalError = ref<string | null>(null)
-const featureModalSubmitting = ref(false)
+const featureModalOpen = ref(false);
+const featureModalSubmission = ref<MysterySubmissionResponse | null>(null);
+const featureModalError = ref<string | null>(null);
+const featureModalSubmitting = ref(false);
 
 function openFeatureModal(submission: MysterySubmissionResponse) {
-  featureModalSubmission.value = submission
-  featureModalError.value = null
-  featureModalOpen.value = true
+  featureModalSubmission.value = submission;
+  featureModalError.value = null;
+  featureModalOpen.value = true;
 }
 
 function closeFeatureModal() {
-  featureModalOpen.value = false
-  featureModalSubmission.value = null
-  featureModalError.value = null
+  featureModalOpen.value = false;
+  featureModalSubmission.value = null;
+  featureModalError.value = null;
 }
 
 async function handleFeatureConfirm(weekStart: string) {
-  if (!featureModalSubmission.value) return
-  featureModalSubmitting.value = true
-  featureModalError.value = null
+  if (!featureModalSubmission.value) return;
+  featureModalSubmitting.value = true;
+  featureModalError.value = null;
 
   try {
-    await store.featureSubmission(classroomId.value, featureModalSubmission.value.id, weekStart)
-    closeFeatureModal()
-    activeTab.value = 'featured'
-    weekIndex.value = 0
+    await store.featureSubmission(
+      classroomId.value,
+      featureModalSubmission.value.id,
+      weekStart,
+    );
+    closeFeatureModal();
+    activeTab.value = "featured";
+    weekIndex.value = 0;
   } catch (error) {
-    featureModalError.value = error instanceof Error ? error.message : t('teacherMystery.errors.featureFailed')
+    featureModalError.value =
+      error instanceof Error
+        ? error.message
+        : t("teacherMystery.errors.featureFailed");
   } finally {
-    featureModalSubmitting.value = false
+    featureModalSubmitting.value = false;
   }
 }
 
 async function handleUnfeature(mystery: WeeklyMysteryResponse) {
   try {
-    await store.unfeatureSubmission(classroomId.value, mystery.id)
+    await store.unfeatureSubmission(classroomId.value, mystery.id);
   } catch {
     // non-critical
   }
 }
 
 function getIsoWeekNumber(date: Date): number {
-  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
-  d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7))
-  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
-  return Math.ceil(((d.getTime() - yearStart.getTime()) / 86_400_000 + 1) / 7)
+  const d = new Date(
+    Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()),
+  );
+  d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  return Math.ceil(((d.getTime() - yearStart.getTime()) / 86_400_000 + 1) / 7);
 }
 
 function thisIsoWeekStart(): string {
-  const now = new Date()
-  const day = now.getDay() || 7
-  const monday = new Date(now)
-  monday.setDate(now.getDate() - day + 1)
-  return monday.toISOString().slice(0, 10)
+  const now = new Date();
+  const day = now.getDay() || 7;
+  const monday = new Date(now);
+  monday.setDate(now.getDate() - day + 1);
+  return monday.toISOString().slice(0, 10);
 }
 
 function formatDate(isoString: string | null): string {
-  if (!isoString) return ''
-  return new Date(isoString).toLocaleDateString('nb-NO', {
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric',
-  })
+  if (!isoString) return "";
+  return new Date(isoString).toLocaleDateString("nb-NO", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
 }
 
-onMounted(() => { void store.fetchAll(classroomId.value) })
+onMounted(() => {
+  void store.fetchAll(classroomId.value);
+});
 </script>
 
 <template>
   <div class="min-h-screen p-6">
     <div class="mx-auto max-w-4xl">
-
       <!-- Header -->
       <header class="mb-6 text-center">
         <h1 class="text-3xl font-semibold tracking-tight text-slate-900">
-          {{ t('teacherMystery.title') }}
+          {{ t("teacherMystery.title") }}
         </h1>
-        <p class="mt-1 text-sm text-slate-500">{{ t('teacherMystery.subtitle') }}</p>
+        <p class="mt-1 text-sm text-slate-500">
+          {{ t("teacherMystery.subtitle") }}
+        </p>
       </header>
 
       <TeacherMysteryTabBar
-          v-model="activeTab"
-          :pending-count="pendingSubmissions.length"
+        v-model="activeTab"
+        :pending-count="pendingSubmissions.length"
       />
 
       <!-- Loading -->
-      <div v-if="store.status === 'loading'" class="py-16 text-center text-sm text-slate-400">
-        {{ t('teacherMystery.loading') }}
+      <div
+        v-if="store.status === 'loading'"
+        class="py-16 text-center text-sm text-slate-400"
+      >
+        {{ t("teacherMystery.loading") }}
       </div>
 
       <!-- Error -->
-      <div v-else-if="store.status === 'error'" class="py-16 text-center text-sm text-red-600">
+      <div
+        v-else-if="store.status === 'error'"
+        class="py-16 text-center text-sm text-red-600"
+      >
         {{ store.errorMessage }}
       </div>
 
       <template v-else>
-
         <!-- Tab: pending -->
         <section v-if="activeTab === 'pending'" role="tabpanel">
           <div class="rounded-2xl bg-white p-6 shadow-md">
-            <p v-if="pendingSubmissions.length === 0" class="py-8 text-center text-sm text-slate-400">
-              {{ t('teacherMystery.pending.empty') }}
+            <p
+              v-if="pendingSubmissions.length === 0"
+              class="py-8 text-center text-sm text-slate-400"
+            >
+              {{ t("teacherMystery.pending.empty") }}
             </p>
             <ul v-else class="divide-y divide-slate-100">
               <TeacherSubmissionRow
-                  v-for="submission in pendingSubmissions"
-                  :key="submission.id"
-                  :submission="submission"
-                  :formatted-date="formatDate(submission.submittedAt)"
-                  @approve="openReviewModal($event, 'approve')"
-                  @reject="openReviewModal($event, 'reject')"
+                v-for="submission in pendingSubmissions"
+                :key="submission.id"
+                :submission="submission"
+                :formatted-date="formatDate(submission.submittedAt)"
+                @approve="openReviewModal($event, 'approve')"
+                @reject="openReviewModal($event, 'reject')"
               />
             </ul>
           </div>
@@ -219,17 +267,22 @@ onMounted(() => { void store.fetchAll(classroomId.value) })
         <!-- Tab: approved -->
         <section v-else-if="activeTab === 'approved'" role="tabpanel">
           <div class="rounded-2xl bg-white p-6 shadow-md">
-            <p v-if="approvedSubmissions.length === 0" class="py-8 text-center text-sm text-slate-400">
-              {{ t('teacherMystery.approved.empty') }}
+            <p
+              v-if="approvedSubmissions.length === 0"
+              class="py-8 text-center text-sm text-slate-400"
+            >
+              {{ t("teacherMystery.approved.empty") }}
             </p>
             <ul v-else class="divide-y divide-slate-100">
               <TeacherSubmissionRow
-                  v-for="submission in approvedSubmissions"
-                  :key="submission.id"
-                  :submission="submission"
-                  :formatted-date="formatDate(submission.reviewedAt)"
-                  :is-featured-this-week="featuredSubmissionIdsThisWeek.has(submission.id)"
-                  @feature="openFeatureModal($event)"
+                v-for="submission in approvedSubmissions"
+                :key="submission.id"
+                :submission="submission"
+                :formatted-date="formatDate(submission.reviewedAt)"
+                :is-featured-this-week="
+                  featuredSubmissionIdsThisWeek.has(submission.id)
+                "
+                @feature="openFeatureModal($event)"
               />
             </ul>
           </div>
@@ -237,58 +290,62 @@ onMounted(() => { void store.fetchAll(classroomId.value) })
 
         <!-- Tab: featured -->
         <section v-else-if="activeTab === 'featured'" role="tabpanel">
-          <div v-if="uniqueWeeks.length === 0" class="py-16 text-center text-sm text-slate-400">
-            {{ t('teacherMystery.featured.empty') }}
+          <div
+            v-if="uniqueWeeks.length === 0"
+            class="py-16 text-center text-sm text-slate-400"
+          >
+            {{ t("teacherMystery.featured.empty") }}
           </div>
 
           <template v-else>
             <MysteryWeekNavigator
-                :label="weekLabel"
-                :can-go-prev="canGoPrev"
-                :can-go-next="canGoNext"
-                @prev="weekIndex++"
-                @next="weekIndex--"
+              :label="weekLabel"
+              :can-go-prev="canGoPrev"
+              :can-go-next="canGoNext"
+              @prev="weekIndex++"
+              @next="weekIndex--"
             />
 
             <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
               <TeacherFeaturedCard
-                  v-for="mystery in currentWeekMysteries"
-                  :key="mystery.id"
-                  :mystery="mystery"
-                  @unfeature="handleUnfeature($event)"
+                v-for="mystery in currentWeekMysteries"
+                :key="mystery.id"
+                :mystery="mystery"
+                @unfeature="handleUnfeature($event)"
               />
 
               <!-- Add card -->
               <button
-                  class="flex min-h-[180px] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-slate-300 bg-white text-slate-400 transition hover:border-amber-400 hover:text-amber-600"
-                  @click="activeTab = 'approved'"
+                class="flex min-h-[180px] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-slate-300 bg-white text-slate-400 transition hover:border-amber-400 hover:text-amber-600"
+                @click="activeTab = 'approved'"
               >
                 <span class="text-3xl">+</span>
-                <span class="text-sm font-semibold">{{ t('teacherMystery.featured.add') }}</span>
+                <span class="text-sm font-semibold">{{
+                  t("teacherMystery.featured.add")
+                }}</span>
               </button>
             </div>
           </template>
         </section>
-
       </template>
     </div>
   </div>
 
   <TeacherReviewModal
-      :submission="reviewModalSubmission"
-      :mode="reviewModalMode"
-      :submitting="reviewModalSubmitting"
-      :error-message="reviewModalError"
-      @confirm="handleReviewConfirm"
-      @cancel="closeReviewModal"
+    :submission="reviewModalSubmission"
+    :mode="reviewModalMode"
+    :submitting="reviewModalSubmitting"
+    :error-message="reviewModalError"
+    @confirm="handleReviewConfirm"
+    @cancel="closeReviewModal"
   />
 
   <TeacherFeatureModal
-      :open="featureModalOpen"
-      :submission="featureModalSubmission"
-      :submitting="featureModalSubmitting"
-      :error-message="featureModalError"
-      @confirm="handleFeatureConfirm"
-      @cancel="closeFeatureModal"
+    :open="featureModalOpen"
+    :submission="featureModalSubmission"
+    :submitting="featureModalSubmitting"
+    :error-message="featureModalError"
+    @confirm="handleFeatureConfirm"
+    @cancel="closeFeatureModal"
   />
 </template>
diff --git a/src/teacher-mystery/routes.ts b/src/teacher-mystery/routes.ts
index 27009d43..e1994534 100644
--- a/src/teacher-mystery/routes.ts
+++ b/src/teacher-mystery/routes.ts
@@ -8,7 +8,7 @@ export const teacherMysteryRoutes: RouteRecordRaw[] = [
     name: "teacher-mystery",
     component: TeacherMystery,
     meta: {
-      backTarget: { name: 'teacher-home' },
+      backTarget: { name: "teacher-home" },
     },
   },
 ];
diff --git a/src/teacher-playtest/api/teacher-playtest.api.ts b/src/teacher-playtest/api/teacher-playtest.api.ts
index 55c3d5e7..811cf6e4 100644
--- a/src/teacher-playtest/api/teacher-playtest.api.ts
+++ b/src/teacher-playtest/api/teacher-playtest.api.ts
@@ -1,33 +1,39 @@
-import type { MapStopOverview } from '@/map/model/map.types'
-import { readJsonErrorMessage } from '@/shared/api/response-errors'
-import type { TaskResponse, TaskSummaryResponse } from '@/stops/api/stops.api'
+import type { MapStopOverview } from "@/map/model/map.types";
+import { readJsonErrorMessage } from "@/shared/api/response-errors";
+import type { TaskResponse, TaskSummaryResponse } from "@/stops/api/stops.api";
 
-const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
-const TEACHER_PLAYTEST_BASE = `${API_BASE_URL}/api/v1/teacher/classrooms`
+const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? "").replace(
+  /\/$/,
+  "",
+);
+const TEACHER_PLAYTEST_BASE = `${API_BASE_URL}/api/v1/teacher/classrooms`;
 
 async function getResponseErrorMessage(response: Response): Promise<string> {
-  const fallbackMessage = `Teacher playtest request failed with status ${response.status}.`
-  const errorMessage = await readJsonErrorMessage(response)
+  const fallbackMessage = `Teacher playtest request failed with status ${response.status}.`;
+  const errorMessage = await readJsonErrorMessage(response);
 
-  if (errorMessage) return errorMessage
+  if (errorMessage) return errorMessage;
 
-  const text = await response.text().catch(() => '')
-  return text || fallbackMessage
+  const text = await response.text().catch(() => "");
+  return text || fallbackMessage;
 }
 
-async function fetchPlaytestJson<T>(url: string, authorizationHeader: string): Promise<T> {
+async function fetchPlaytestJson<T>(
+  url: string,
+  authorizationHeader: string,
+): Promise<T> {
   const response = await fetch(url, {
     headers: {
       Authorization: authorizationHeader,
     },
-    credentials: 'include',
-  })
+    credentials: "include",
+  });
 
   if (!response.ok) {
-    throw new Error(await getResponseErrorMessage(response))
+    throw new Error(await getResponseErrorMessage(response));
   }
 
-  return (await response.json()) as T
+  return (await response.json()) as T;
 }
 
 export function requestTeacherPlaytestMapOverview(
@@ -37,7 +43,7 @@ export function requestTeacherPlaytestMapOverview(
   return fetchPlaytestJson<MapStopOverview[]>(
     `${TEACHER_PLAYTEST_BASE}/${classroomId}/playtest/map-stops`,
     authorizationHeader,
-  )
+  );
 }
 
 export function requestTeacherPlaytestMapStopBySlug(
@@ -48,7 +54,7 @@ export function requestTeacherPlaytestMapStopBySlug(
   return fetchPlaytestJson<MapStopOverview>(
     `${TEACHER_PLAYTEST_BASE}/${classroomId}/playtest/map-stops/${slug}`,
     authorizationHeader,
-  )
+  );
 }
 
 export function requestTeacherPlaytestTasksForStop(
@@ -59,7 +65,7 @@ export function requestTeacherPlaytestTasksForStop(
   return fetchPlaytestJson<TaskSummaryResponse[]>(
     `${TEACHER_PLAYTEST_BASE}/${classroomId}/playtest/tasks?stopId=${stopId}`,
     authorizationHeader,
-  )
+  );
 }
 
 export function requestTeacherPlaytestTask(
@@ -70,5 +76,5 @@ export function requestTeacherPlaytestTask(
   return fetchPlaytestJson<TaskResponse>(
     `${TEACHER_PLAYTEST_BASE}/${classroomId}/playtest/tasks/${taskId}`,
     authorizationHeader,
-  )
+  );
 }
diff --git a/src/teacher-playtest/model/teacherPlaytestMap.store.ts b/src/teacher-playtest/model/teacherPlaytestMap.store.ts
index ccf89146..03b53600 100644
--- a/src/teacher-playtest/model/teacherPlaytestMap.store.ts
+++ b/src/teacher-playtest/model/teacherPlaytestMap.store.ts
@@ -1,70 +1,86 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { useAuthStore } from '@/auth/model/auth.store'
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { useAuthStore } from "@/auth/model/auth.store";
 import {
   requestTeacherPlaytestMapOverview,
   requestTeacherPlaytestMapStopBySlug,
-} from '@/teacher-playtest/api/teacher-playtest.api'
-import type { MapStopOverview } from '@/map/model/map.types'
+} from "@/teacher-playtest/api/teacher-playtest.api";
+import type { MapStopOverview } from "@/map/model/map.types";
 
-export type TeacherPlaytestMapStatus = 'idle' | 'loading' | 'loaded' | 'error'
+export type TeacherPlaytestMapStatus = "idle" | "loading" | "loaded" | "error";
 
-export const useTeacherPlaytestMapStore = defineStore('teacherPlaytestMap', () => {
-  const authStore = useAuthStore()
+export const useTeacherPlaytestMapStore = defineStore(
+  "teacherPlaytestMap",
+  () => {
+    const authStore = useAuthStore();
 
-  const currentClassroomId = ref<number | null>(null)
-  const stops = ref<MapStopOverview[]>([])
-  const status = ref<TeacherPlaytestMapStatus>('idle')
-  const errorMessage = ref<string | null>(null)
+    const currentClassroomId = ref<number | null>(null);
+    const stops = ref<MapStopOverview[]>([]);
+    const status = ref<TeacherPlaytestMapStatus>("idle");
+    const errorMessage = ref<string | null>(null);
 
-  function reset() {
-    currentClassroomId.value = null
-    stops.value = []
-    status.value = 'idle'
-    errorMessage.value = null
-  }
-
-  function requireTeacherSession() {
-    const authorizationHeader = authStore.authorizationHeader
-    if (!authorizationHeader) {
-      throw new Error('Not authenticated.')
+    function reset() {
+      currentClassroomId.value = null;
+      stops.value = [];
+      status.value = "idle";
+      errorMessage.value = null;
     }
 
-    if (authStore.portalType !== 'TEACHER') {
-      throw new Error('Teacher playtest is only available for teachers.')
-    }
+    function requireTeacherSession() {
+      const authorizationHeader = authStore.authorizationHeader;
+      if (!authorizationHeader) {
+        throw new Error("Not authenticated.");
+      }
 
-    return authorizationHeader
-  }
+      if (authStore.portalType !== "TEACHER") {
+        throw new Error("Teacher playtest is only available for teachers.");
+      }
 
-  async function fetchMapOverview(classroomId: number): Promise<void> {
-    status.value = 'loading'
-    errorMessage.value = null
+      return authorizationHeader;
+    }
 
-    try {
-      const authorizationHeader = requireTeacherSession()
-      stops.value = await requestTeacherPlaytestMapOverview(classroomId, authorizationHeader)
-      currentClassroomId.value = classroomId
-      status.value = 'loaded'
-    } catch (error) {
-      errorMessage.value = error instanceof Error ? error.message : 'Failed to load playtest map.'
-      status.value = 'error'
-      throw error
+    async function fetchMapOverview(classroomId: number): Promise<void> {
+      status.value = "loading";
+      errorMessage.value = null;
+
+      try {
+        const authorizationHeader = requireTeacherSession();
+        stops.value = await requestTeacherPlaytestMapOverview(
+          classroomId,
+          authorizationHeader,
+        );
+        currentClassroomId.value = classroomId;
+        status.value = "loaded";
+      } catch (error) {
+        errorMessage.value =
+          error instanceof Error
+            ? error.message
+            : "Failed to load playtest map.";
+        status.value = "error";
+        throw error;
+      }
     }
-  }
 
-  async function fetchStopBySlug(classroomId: number, slug: string): Promise<MapStopOverview> {
-    const authorizationHeader = requireTeacherSession()
-    return requestTeacherPlaytestMapStopBySlug(classroomId, slug, authorizationHeader)
-  }
+    async function fetchStopBySlug(
+      classroomId: number,
+      slug: string,
+    ): Promise<MapStopOverview> {
+      const authorizationHeader = requireTeacherSession();
+      return requestTeacherPlaytestMapStopBySlug(
+        classroomId,
+        slug,
+        authorizationHeader,
+      );
+    }
 
-  return {
-    currentClassroomId,
-    errorMessage,
-    fetchMapOverview,
-    fetchStopBySlug,
-    reset,
-    status,
-    stops,
-  }
-})
+    return {
+      currentClassroomId,
+      errorMessage,
+      fetchMapOverview,
+      fetchStopBySlug,
+      reset,
+      status,
+      stops,
+    };
+  },
+);
diff --git a/src/teacher-playtest/model/teacherPlaytestStop.store.ts b/src/teacher-playtest/model/teacherPlaytestStop.store.ts
index 8de61818..05b81ee8 100644
--- a/src/teacher-playtest/model/teacherPlaytestStop.store.ts
+++ b/src/teacher-playtest/model/teacherPlaytestStop.store.ts
@@ -1,96 +1,111 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { useTeacherPlaytestMapStore } from '@/teacher-playtest/model/teacherPlaytestMap.store'
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { useAuthStore } from "@/auth/model/auth.store";
+import { useTeacherPlaytestMapStore } from "@/teacher-playtest/model/teacherPlaytestMap.store";
 import {
   requestTeacherPlaytestTask,
   requestTeacherPlaytestTasksForStop,
-} from '@/teacher-playtest/api/teacher-playtest.api'
-import type { TaskResponse } from '@/stops/api/stops.api'
-
-export type TeacherPlaytestStopStatus = 'idle' | 'loading' | 'loaded' | 'error'
-
-export const useTeacherPlaytestStopStore = defineStore('teacherPlaytestStop', () => {
-  const authStore = useAuthStore()
-  const mapStore = useTeacherPlaytestMapStore()
-
-  const tasks = ref<TaskResponse[]>([])
-  const status = ref<TeacherPlaytestStopStatus>('idle')
-  const errorMessage = ref<string | null>(null)
-  const answers = ref<Map<number, Map<number, number>>>(new Map())
-
-  function reset() {
-    tasks.value = []
-    status.value = 'idle'
-    errorMessage.value = null
-    answers.value = new Map()
-  }
-
-  function setAnswer(taskId: number, itemId: number, optionId: number): void {
-    const nextAnswers = new Map(answers.value)
-    const taskAnswers = new Map(nextAnswers.get(taskId) ?? [])
-    taskAnswers.set(itemId, optionId)
-    nextAnswers.set(taskId, taskAnswers)
-    answers.value = nextAnswers
-  }
-
-  function requireTeacherSession() {
-    const authorizationHeader = authStore.authorizationHeader
-    if (!authorizationHeader) {
-      throw new Error('Not authenticated.')
+} from "@/teacher-playtest/api/teacher-playtest.api";
+import type { TaskResponse } from "@/stops/api/stops.api";
+
+export type TeacherPlaytestStopStatus = "idle" | "loading" | "loaded" | "error";
+
+export const useTeacherPlaytestStopStore = defineStore(
+  "teacherPlaytestStop",
+  () => {
+    const authStore = useAuthStore();
+    const mapStore = useTeacherPlaytestMapStore();
+
+    const tasks = ref<TaskResponse[]>([]);
+    const status = ref<TeacherPlaytestStopStatus>("idle");
+    const errorMessage = ref<string | null>(null);
+    const answers = ref<Map<number, Map<number, number>>>(new Map());
+
+    function reset() {
+      tasks.value = [];
+      status.value = "idle";
+      errorMessage.value = null;
+      answers.value = new Map();
     }
 
-    if (authStore.portalType !== 'TEACHER') {
-      throw new Error('Teacher playtest is only available for teachers.')
+    function setAnswer(taskId: number, itemId: number, optionId: number): void {
+      const nextAnswers = new Map(answers.value);
+      const taskAnswers = new Map(nextAnswers.get(taskId) ?? []);
+      taskAnswers.set(itemId, optionId);
+      nextAnswers.set(taskId, taskAnswers);
+      answers.value = nextAnswers;
     }
 
-    return authorizationHeader
-  }
-
-  async function loadTasksForStop(classroomId: number, slug: string): Promise<void> {
-    status.value = 'loading'
-    errorMessage.value = null
-    tasks.value = []
-
-    try {
-      const authorizationHeader = requireTeacherSession()
-
-      if (mapStore.status !== 'loaded' || mapStore.currentClassroomId !== classroomId) {
-        await mapStore.fetchMapOverview(classroomId)
+    function requireTeacherSession() {
+      const authorizationHeader = authStore.authorizationHeader;
+      if (!authorizationHeader) {
+        throw new Error("Not authenticated.");
       }
 
-      const stop = mapStore.stops.find((entry) => entry.slug === slug)
-      if (!stop) {
-        throw new Error(`Stop with slug "${slug}" not found.`)
+      if (authStore.portalType !== "TEACHER") {
+        throw new Error("Teacher playtest is only available for teachers.");
       }
 
-      const summaries = await requestTeacherPlaytestTasksForStop(
-        classroomId,
-        stop.stopId,
-        authorizationHeader,
-      )
-
-      tasks.value = await Promise.all(
-        summaries.map((summary) =>
-          requestTeacherPlaytestTask(classroomId, summary.id, authorizationHeader),
-        ),
-      )
-
-      status.value = 'loaded'
-    } catch (error) {
-      errorMessage.value =
-        error instanceof Error ? error.message : 'Failed to load playtest tasks.'
-      status.value = 'error'
+      return authorizationHeader;
     }
-  }
-
-  return {
-    answers,
-    errorMessage,
-    loadTasksForStop,
-    reset,
-    setAnswer,
-    status,
-    tasks,
-  }
-})
+
+    async function loadTasksForStop(
+      classroomId: number,
+      slug: string,
+    ): Promise<void> {
+      status.value = "loading";
+      errorMessage.value = null;
+      tasks.value = [];
+
+      try {
+        const authorizationHeader = requireTeacherSession();
+
+        if (
+          mapStore.status !== "loaded" ||
+          mapStore.currentClassroomId !== classroomId
+        ) {
+          await mapStore.fetchMapOverview(classroomId);
+        }
+
+        const stop = mapStore.stops.find((entry) => entry.slug === slug);
+        if (!stop) {
+          throw new Error(`Stop with slug "${slug}" not found.`);
+        }
+
+        const summaries = await requestTeacherPlaytestTasksForStop(
+          classroomId,
+          stop.stopId,
+          authorizationHeader,
+        );
+
+        tasks.value = await Promise.all(
+          summaries.map((summary) =>
+            requestTeacherPlaytestTask(
+              classroomId,
+              summary.id,
+              authorizationHeader,
+            ),
+          ),
+        );
+
+        status.value = "loaded";
+      } catch (error) {
+        errorMessage.value =
+          error instanceof Error
+            ? error.message
+            : "Failed to load playtest tasks.";
+        status.value = "error";
+      }
+    }
+
+    return {
+      answers,
+      errorMessage,
+      loadTasksForStop,
+      reset,
+      setAnswer,
+      status,
+      tasks,
+    };
+  },
+);
diff --git a/src/teacher-playtest/pages/TeacherPlaytestMapPage.vue b/src/teacher-playtest/pages/TeacherPlaytestMapPage.vue
index 8127092e..b51cbbd5 100644
--- a/src/teacher-playtest/pages/TeacherPlaytestMapPage.vue
+++ b/src/teacher-playtest/pages/TeacherPlaytestMapPage.vue
@@ -1,48 +1,48 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import GameMapScene from '@/map/components/GameMapScene.vue'
-import { useTeacherPlaytestMapStore } from '@/teacher-playtest/model/teacherPlaytestMap.store'
+import { computed, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import GameMapScene from "@/map/components/GameMapScene.vue";
+import { useTeacherPlaytestMapStore } from "@/teacher-playtest/model/teacherPlaytestMap.store";
 
-const route = useRoute()
-const router = useRouter()
-const { t } = useI18n()
-const mapStore = useTeacherPlaytestMapStore()
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const mapStore = useTeacherPlaytestMapStore();
 
-const classroomId = computed(() => Number(route.params.classroomId))
-const homeRoute = computed(() =>
-  router.resolve({
-    name: 'classroom-details',
-    params: { classroomId: classroomId.value },
-  }).fullPath,
-)
+const classroomId = computed(() => Number(route.params.classroomId));
+const homeRoute = computed(
+  () =>
+    router.resolve({
+      name: "classroom-details",
+      params: { classroomId: classroomId.value },
+    }).fullPath,
+);
 
 function resolveStopRoute(slug: string): string {
   return router.resolve({
-    name: 'teacher-playtest-stop',
+    name: "teacher-playtest-stop",
     params: {
       classroomId: classroomId.value,
       slug,
     },
-  }).fullPath
+  }).fullPath;
 }
 
 watch(
   classroomId,
   async (value) => {
     if (!Number.isFinite(value)) {
-      mapStore.reset()
-      return
+      mapStore.reset();
+      return;
     }
 
     try {
-      await mapStore.fetchMapOverview(value)
-    } catch {
-    }
+      await mapStore.fetchMapOverview(value);
+    } catch {}
   },
   { immediate: true },
-)
+);
 </script>
 
 <template>
@@ -59,8 +59,10 @@ watch(
     v-else-if="mapStore.status !== 'loaded'"
     class="flex h-screen flex-col items-center justify-center gap-4 bg-gray-950 text-slate-200"
   >
-    <div class="h-10 w-10 animate-spin rounded-full border-2 border-slate-500 border-t-white" />
-    <p class="text-sm">{{ t('map.loading') }}</p>
+    <div
+      class="h-10 w-10 animate-spin rounded-full border-2 border-slate-500 border-t-white"
+    />
+    <p class="text-sm">{{ t("map.loading") }}</p>
   </div>
 
   <GameMapScene
diff --git a/src/teacher-playtest/pages/TeacherPlaytestStopPage.vue b/src/teacher-playtest/pages/TeacherPlaytestStopPage.vue
index 930e662a..f24fc743 100644
--- a/src/teacher-playtest/pages/TeacherPlaytestStopPage.vue
+++ b/src/teacher-playtest/pages/TeacherPlaytestStopPage.vue
@@ -1,49 +1,51 @@
 <script setup lang="ts">
-import { computed, onUnmounted, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useTeacherPlaytestMapStore } from '@/teacher-playtest/model/teacherPlaytestMap.store'
-import { useTeacherPlaytestStopStore } from '@/teacher-playtest/model/teacherPlaytestStop.store'
-import StopTaskView from '@/stops/components/StopTaskView.vue'
-
-const route = useRoute()
-const router = useRouter()
-const { t } = useI18n()
-const mapStore = useTeacherPlaytestMapStore()
-const stopStore = useTeacherPlaytestStopStore()
-
-const classroomId = computed(() => Number(route.params.classroomId))
-const slug = computed(() => String(route.params.slug ?? ''))
-const stopOverview = computed(() => mapStore.stops.find((stop) => stop.slug === slug.value) ?? null)
-const answers = computed(() => stopStore.answers)
+import { computed, onUnmounted, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { useTeacherPlaytestMapStore } from "@/teacher-playtest/model/teacherPlaytestMap.store";
+import { useTeacherPlaytestStopStore } from "@/teacher-playtest/model/teacherPlaytestStop.store";
+import StopTaskView from "@/stops/components/StopTaskView.vue";
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const mapStore = useTeacherPlaytestMapStore();
+const stopStore = useTeacherPlaytestStopStore();
+
+const classroomId = computed(() => Number(route.params.classroomId));
+const slug = computed(() => String(route.params.slug ?? ""));
+const stopOverview = computed(
+  () => mapStore.stops.find((stop) => stop.slug === slug.value) ?? null,
+);
+const answers = computed(() => stopStore.answers);
 
 function handleSelect(taskId: number, itemId: number, optionId: number): void {
-  stopStore.setAnswer(taskId, itemId, optionId)
+  stopStore.setAnswer(taskId, itemId, optionId);
 }
 
 function handleFinish(): void {
   void router.push({
-    name: 'teacher-playtest-map',
+    name: "teacher-playtest-map",
     params: { classroomId: classroomId.value },
-  })
+  });
 }
 
 watch(
   [classroomId, slug],
   async ([currentClassroomId, currentSlug]) => {
     if (!Number.isFinite(currentClassroomId) || currentSlug.length === 0) {
-      stopStore.reset()
-      return
+      stopStore.reset();
+      return;
     }
 
-    await stopStore.loadTasksForStop(currentClassroomId, currentSlug)
+    await stopStore.loadTasksForStop(currentClassroomId, currentSlug);
   },
   { immediate: true },
-)
+);
 
 onUnmounted(() => {
-  stopStore.reset()
-})
+  stopStore.reset();
+});
 </script>
 
 <template>
diff --git a/src/teacher-portal/pages/TeacherHomePage.vue b/src/teacher-portal/pages/TeacherHomePage.vue
index eb44d662..930847f0 100644
--- a/src/teacher-portal/pages/TeacherHomePage.vue
+++ b/src/teacher-portal/pages/TeacherHomePage.vue
@@ -1,47 +1,47 @@
 <script lang="ts" setup>
-import {useI18n} from 'vue-i18n';
-import DashboardCard from '@/pupil-portal/components/DashboardCard.vue';
-import LogoutButton from '@/shared/components/LogoutButton.vue';
-import NewClassroomButton from '@/shared/components/NewClassroomButton.vue';
-import NotificationButton from '@/shared/components/NotificationButton.vue';
-import SettingsButton from '@/shared/components/SettingsButton.vue';
+import { useI18n } from "vue-i18n";
+import DashboardCard from "@/pupil-portal/components/DashboardCard.vue";
+import LogoutButton from "@/shared/components/LogoutButton.vue";
+import NewClassroomButton from "@/shared/components/NewClassroomButton.vue";
+import NotificationButton from "@/shared/components/NotificationButton.vue";
+import SettingsButton from "@/shared/components/SettingsButton.vue";
 
-const {t} = useI18n();
+const { t } = useI18n();
 </script>
 
 <template>
-  <section
-      class="min-h-screen px-4 py-8 sm:px-6 lg:px-8"
-  >
+  <section class="min-h-screen px-4 py-8 sm:px-6 lg:px-8">
     <div class="mx-auto flex w-full max-w-5xl flex-col gap-8">
       <div class="w-full text-center">
         <h1 class="text-3xl font-semibold tracking-tight text-slate-900">
-          {{ t('teacherHome.title') }}
+          {{ t("teacherHome.title") }}
         </h1>
-        <p class="mx-auto mt-2 max-w-3xl text-center text-sm leading-relaxed text-slate-600">
-          {{ t('teacherHome.description') }}
+        <p
+          class="mx-auto mt-2 max-w-3xl text-center text-sm leading-relaxed text-slate-600"
+        >
+          {{ t("teacherHome.description") }}
         </p>
       </div>
 
       <div
-          class="rounded-2xl border border-slate-200 bg-white/90 p-5 shadow-sm sm:p-6"
+        class="rounded-2xl border border-slate-200 bg-white/90 p-5 shadow-sm sm:p-6"
       >
         <h2 class="text-lg font-semibold text-slate-900">Verktøy</h2>
         <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-          <NotificationButton/>
-          <SettingsButton/>
-          <NewClassroomButton/>
+          <NotificationButton />
+          <SettingsButton />
+          <NewClassroomButton />
         </div>
       </div>
 
       <DashboardCard
-          :title="t('teacherHome.cards.classroomTitle')"
-          :description="t('teacherHome.cards.classroomDescription')"
-          to="/teacher/classrooms"
+        :title="t('teacherHome.cards.classroomTitle')"
+        :description="t('teacherHome.cards.classroomDescription')"
+        to="/teacher/classrooms"
       />
 
       <div class="fixed right-5 bottom-5 z-10 sm:right-6 sm:bottom-6">
-        <LogoutButton/>
+        <LogoutButton />
       </div>
     </div>
   </section>
diff --git a/src/teacher-portal/pages/TeacherSettingsPage.vue b/src/teacher-portal/pages/TeacherSettingsPage.vue
index 079fe621..b9d676c3 100644
--- a/src/teacher-portal/pages/TeacherSettingsPage.vue
+++ b/src/teacher-portal/pages/TeacherSettingsPage.vue
@@ -148,15 +148,25 @@ async function submitPasswordChange() {
 
 <template>
   <section class="min-h-[calc(100vh-3rem)] bg-[#f3f3f3]">
-    <div class="relative min-h-[calc(100vh-3rem)] w-full bg-white px-6 py-8 sm:px-8 sm:py-12 sm:pb-[4.5rem] md:px-16">
+    <div
+      class="relative min-h-[calc(100vh-3rem)] w-full bg-white px-6 py-8 sm:px-8 sm:py-12 sm:pb-[4.5rem] md:px-16"
+    >
       <header class="mb-8 text-center sm:mb-10">
-        <h1 class="m-0 text-[clamp(2.25rem,4vw,3rem)] leading-[1.05] font-medium">{{ t("teacherSettings.title") }}</h1>
+        <h1
+          class="m-0 text-[clamp(2.25rem,4vw,3rem)] leading-[1.05] font-medium"
+        >
+          {{ t("teacherSettings.title") }}
+        </h1>
       </header>
 
       <section class="max-w-[33rem]">
-        <h2 class="mb-6 text-[1.85rem] font-normal">{{ t("teacherSettings.audioTitle") }}</h2>
+        <h2 class="mb-6 text-[1.85rem] font-normal">
+          {{ t("teacherSettings.audioTitle") }}
+        </h2>
 
-        <div class="grid grid-cols-[3rem_minmax(0,1fr)] items-center gap-5 max-[720px]:grid-cols-[1.6rem_minmax(0,1fr)] max-[720px]:gap-[0.85rem]">
+        <div
+          class="grid grid-cols-[3rem_minmax(0,1fr)] items-center gap-5 max-[720px]:grid-cols-[1.6rem_minmax(0,1fr)] max-[720px]:gap-[0.85rem]"
+        >
           <button
             :aria-label="t('teacherSettings.toggleMusicMute')"
             :class="[
@@ -179,9 +189,10 @@ async function submitPasswordChange() {
           </button>
 
           <label class="block">
-            <span class="mb-[0.45rem] inline-block text-[0.95rem] text-[#2d2d2d]">{{
-              t("teacherSettings.musicLabel")
-            }}</span>
+            <span
+              class="mb-[0.45rem] inline-block text-[0.95rem] text-[#2d2d2d]"
+              >{{ t("teacherSettings.musicLabel") }}</span
+            >
             <input
               v-model.number="musicVolume"
               :aria-label="t('teacherSettings.musicLabel')"
@@ -195,7 +206,9 @@ async function submitPasswordChange() {
           </label>
         </div>
 
-        <div class="mt-6 grid grid-cols-[3rem_minmax(0,1fr)] items-center gap-5 max-[720px]:grid-cols-[1.6rem_minmax(0,1fr)] max-[720px]:gap-[0.85rem]">
+        <div
+          class="mt-6 grid grid-cols-[3rem_minmax(0,1fr)] items-center gap-5 max-[720px]:grid-cols-[1.6rem_minmax(0,1fr)] max-[720px]:gap-[0.85rem]"
+        >
           <button
             :aria-label="t('teacherSettings.toggleSfxMute')"
             :class="[
@@ -218,9 +231,10 @@ async function submitPasswordChange() {
           </button>
 
           <label class="block">
-            <span class="mb-[0.45rem] inline-block text-[0.95rem] text-[#2d2d2d]">{{
-              t("teacherSettings.sfxLabel")
-            }}</span>
+            <span
+              class="mb-[0.45rem] inline-block text-[0.95rem] text-[#2d2d2d]"
+              >{{ t("teacherSettings.sfxLabel") }}</span
+            >
             <input
               v-model.number="sfxVolume"
               :aria-label="t('teacherSettings.sfxLabel')"
@@ -236,14 +250,21 @@ async function submitPasswordChange() {
       </section>
 
       <section class="mt-11 max-w-[33rem] max-[720px]:max-w-none">
-        <h2 class="mb-6 text-[1.85rem] font-normal">{{ t("teacherSettings.passwordTitle") }}</h2>
+        <h2 class="mb-6 text-[1.85rem] font-normal">
+          {{ t("teacherSettings.passwordTitle") }}
+        </h2>
         <p class="mb-4 text-[#2d2d2d]">
           {{ t("teacherSettings.changePasswordAction") }}
         </p>
 
-        <form class="mt-[1.1rem] grid gap-[0.9rem]" @submit.prevent="submitPasswordChange">
+        <form
+          class="mt-[1.1rem] grid gap-[0.9rem]"
+          @submit.prevent="submitPasswordChange"
+        >
           <label class="grid gap-[0.35rem]">
-            <span class="text-[0.95rem] text-[#2d2d2d]">{{ t("teacherSettings.currentPasswordLabel") }}</span>
+            <span class="text-[0.95rem] text-[#2d2d2d]">{{
+              t("teacherSettings.currentPasswordLabel")
+            }}</span>
             <input
               v-model="currentPassword"
               :placeholder="t('teacherSettings.currentPasswordPlaceholder')"
@@ -253,8 +274,12 @@ async function submitPasswordChange() {
             />
           </label>
 
-          <fieldset class="m-0 grid gap-[0.9rem] border border-[#d0d0d0] bg-[#fafafa] p-4">
-            <legend class="px-[0.35rem] text-[0.95rem] text-[#4a4a4a]">{{ t("teacherSettings.newPasswordGroupLabel") }}</legend>
+          <fieldset
+            class="m-0 grid gap-[0.9rem] border border-[#d0d0d0] bg-[#fafafa] p-4"
+          >
+            <legend class="px-[0.35rem] text-[0.95rem] text-[#4a4a4a]">
+              {{ t("teacherSettings.newPasswordGroupLabel") }}
+            </legend>
 
             <label class="grid gap-[0.35rem]">
               <input
@@ -267,7 +292,9 @@ async function submitPasswordChange() {
             </label>
 
             <label class="grid gap-[0.35rem]">
-              <span class="text-[0.95rem] text-[#2d2d2d]">{{ t("teacherSettings.confirmPasswordLabel") }}</span>
+              <span class="text-[0.95rem] text-[#2d2d2d]">{{
+                t("teacherSettings.confirmPasswordLabel")
+              }}</span>
               <input
                 v-model="confirmPassword"
                 :placeholder="t('teacherSettings.confirmPasswordPlaceholder')"
@@ -284,14 +311,22 @@ async function submitPasswordChange() {
           >
             {{ passwordValidationMessage }}
           </p>
-          <p v-else-if="passwordError" class="m-0 text-[0.95rem] text-[#9b1c1c]">
+          <p
+            v-else-if="passwordError"
+            class="m-0 text-[0.95rem] text-[#9b1c1c]"
+          >
             {{ passwordError }}
           </p>
-          <p v-else-if="passwordSuccess" class="m-0 text-[0.95rem] text-[#196c2e]">
+          <p
+            v-else-if="passwordSuccess"
+            class="m-0 text-[0.95rem] text-[#196c2e]"
+          >
             {{ passwordSuccess }}
           </p>
 
-          <div class="mt-[0.3rem] flex gap-3 max-[720px]:flex-col max-[720px]:items-stretch">
+          <div
+            class="mt-[0.3rem] flex gap-3 max-[720px]:flex-col max-[720px]:items-stretch"
+          >
             <button
               :disabled="isChangingPassword"
               class="cursor-pointer border border-[#7a7a7a] bg-[#efefef] px-4 py-[0.7rem] disabled:cursor-wait disabled:opacity-70"
diff --git a/src/teacher-portal/routes.ts b/src/teacher-portal/routes.ts
index 5e96c8c9..6bc31c1a 100644
--- a/src/teacher-portal/routes.ts
+++ b/src/teacher-portal/routes.ts
@@ -1,10 +1,10 @@
 import type { RouteRecordRaw } from "vue-router";
 
-import TeacherHomePage from '@/teacher-portal/pages/TeacherHomePage.vue'
-import {createClassroomRoutes} from "@/classrooms/routes.ts";
-import {notificationsRoutes} from "@/notifications/routes.ts";
-import {teacherMysteryRoutes} from "@/teacher-mystery/routes.ts";
-import TeacherSettingsPage from '@/teacher-portal/pages/TeacherSettingsPage.vue'
+import TeacherHomePage from "@/teacher-portal/pages/TeacherHomePage.vue";
+import { createClassroomRoutes } from "@/classrooms/routes.ts";
+import { notificationsRoutes } from "@/notifications/routes.ts";
+import { teacherMysteryRoutes } from "@/teacher-mystery/routes.ts";
+import TeacherSettingsPage from "@/teacher-portal/pages/TeacherSettingsPage.vue";
 import LeaderboardPage from "@/leaderboard/pages/LeaderboardPage.vue";
 
 export function createTeacherPortalChildRoutes(): RouteRecordRaw[] {
@@ -22,25 +22,25 @@ export function createTeacherPortalChildRoutes(): RouteRecordRaw[] {
       },
     },
     {
-      path: 'leaderboard',
-      name: 'teacher-leaderboard',
+      path: "leaderboard",
+      name: "teacher-leaderboard",
       component: LeaderboardPage,
       meta: {
-        backTarget: { name: 'teacher-home' },
+        backTarget: { name: "teacher-home" },
       },
       props: {
         showScore: true,
       },
     },
-      ...createClassroomRoutes("teacher", { includeModerationRoute: true }),
-      ...teacherMysteryRoutes,
-      ...notificationsRoutes,
+    ...createClassroomRoutes("teacher", { includeModerationRoute: true }),
+    ...teacherMysteryRoutes,
+    ...notificationsRoutes,
     {
       path: "settings",
       name: "teacher-settings",
       component: TeacherSettingsPage,
       meta: {
-        backTarget: { name: 'teacher-home' },
+        backTarget: { name: "teacher-home" },
       },
     },
   ];