diff --git a/src/components/QuestMissive.vue b/src/components/QuestMissive.vue
index 6424067..c8154c2 100644
--- a/src/components/QuestMissive.vue
+++ b/src/components/QuestMissive.vue
@@ -39,10 +39,11 @@
 </template>
 
 <script lang="ts">
-import type { Quest } from "@/classes/Quest";
+import {Quest} from "@/classes/Quest";
 import AdventurerComponent from "@/components/AdventurerMiniComponent.vue";
-import type { Adventurer } from "@/classes/Adventurer";
+import type {Adventurer} from "@/classes/Adventurer";
 import {defineComponent, type PropType} from "vue";
+import {QuestRank} from "@/classes/QuestRank";
 
 export default defineComponent({
   name: "QuestMissive",
@@ -51,7 +52,7 @@ export default defineComponent({
     missive: {
       type: Object as PropType<Quest>,
       default() {
-        return {} as Quest;
+        return new Quest("0", QuestRank.F, "", "", 1, 0, 0) as Quest;
       },
     },
     adventurers: {
@@ -61,7 +62,7 @@ export default defineComponent({
       },
     },
   },
-  data() {
+  data: () => {
     return {
       progressPercentage: "0%",
     }
diff --git a/src/views/QuestView.vue b/src/views/QuestView.vue
index b899a6b..bc16c3a 100644
--- a/src/views/QuestView.vue
+++ b/src/views/QuestView.vue
@@ -3,14 +3,11 @@
     <h1>Rank S Quests</h1>
     <section class="missives">
       <QuestMissive
-          v-for="missive in quests.S"
-          :key="missive.id"
+          v-for="(missive, key, index) in quests.S"
+          :key="key"
           :adventurers="adventurers"
           :missive="missive"
-          @click="() => {
-            if (missive.progressPoints < missive.maxProgress) return;
-            $emit('finalizeQuest', missive)
-          }"
+          @click="finalizeQuest(missive)"
       />
     </section>
   </div>
@@ -18,14 +15,11 @@
     <h1>Rank A Quests</h1>
     <section class="missives">
       <QuestMissive
-          v-for="missive in quests.A"
-          :key="missive.id"
+          v-for="(missive, key, index) in quests.A"
+          :key="key"
           :adventurers="adventurers"
           :missive="missive"
-          @click="() => {
-            if (missive.progressPoints < missive.maxProgress) return;
-            $emit('finalizeQuest', missive)
-          }"
+          @click="finalizeQuest(missive)"
       />
     </section>
   </div>
@@ -33,14 +27,11 @@
     <h1>Rank B Quests</h1>
     <section class="missives">
       <QuestMissive
-          v-for="missive in quests.B"
-          :key="missive.id"
+          v-for="(missive, key, index) in quests.B"
+          :key="key"
           :adventurers="adventurers"
           :missive="missive"
-          @click="() => {
-            if (missive.progressPoints < missive.maxProgress) return;
-            $emit('finalizeQuest', missive)
-          }"
+          @click="finalizeQuest(missive)"
       />
     </section>
   </div>
@@ -48,14 +39,11 @@
     <h1>Rank C Quests</h1>
     <section class="missives">
       <QuestMissive
-          v-for="missive in quests.C"
-          :key="missive.id"
+          v-for="(missive, key, index) in quests.C"
+          :key="key"
           :adventurers="adventurers"
           :missive="missive"
-          @click="() => {
-            if (missive.progressPoints < missive.maxProgress) return;
-            $emit('finalizeQuest', missive)
-          }"
+          @click="finalizeQuest(missive)"
       />
     </section>
   </div>
@@ -63,14 +51,11 @@
     <h1>Rank D Quests</h1>
     <section class="missives">
       <QuestMissive
-          v-for="missive in quests.D"
-          :key="missive.id"
+          v-for="(missive, key, index) in quests.D"
+          :key="key"
           :adventurers="adventurers"
           :missive="missive"
-          @click="() => {
-            if (missive.progressPoints < missive.maxProgress) return;
-            $emit('finalizeQuest', missive)
-          }"
+          @click="finalizeQuest(missive)"
       />
     </section>
   </div>
@@ -78,14 +63,11 @@
     <h1>Rank E Quests</h1>
     <section class="missives">
       <QuestMissive
-          v-for="missive in quests.E"
-          :key="missive.id"
+          v-for="(missive, key, index) in quests.E"
+          :key="key"
           :adventurers="adventurers"
           :missive="missive"
-          @click="() => {
-            if (missive.progressPoints < missive.maxProgress) return;
-            $emit('finalizeQuest', missive)
-          }"
+          @click="finalizeQuest(missive)"
       />
     </section>
   </div>
@@ -93,14 +75,11 @@
     <h1>Rank F Quests</h1>
     <section class="missives">
       <QuestMissive
-          v-for="missive in quests.F"
-          :key="missive.id"
+          v-for="(missive, key, index) in quests.F"
+          :key="key"
           :adventurers="adventurers"
           :missive="missive"
-          @click="() => {
-            if (missive.progressPoints < missive.maxProgress) return;
-            $emit('finalizeQuest', missive)
-          }"
+          @click="finalizeQuest(missive)"
       />
     </section>
   </div>
@@ -145,6 +124,12 @@ export default defineComponent({
     },
   },
   emits: [ 'finalizeQuest', 'wipeSave', 'recruitActionTaken'],
+  methods: {
+    finalizeQuest(quest: Quest) {
+      if (quest.progressPoints < quest.maxProgress) return;
+      this.$emit('finalizeQuest', quest)
+    },
+  }
 })
 </script>