diff --git a/public/img/background/paper/small_tile_paper.png b/public/img/background/paper/small_tile_paper.png
new file mode 100644
index 0000000..f1d5776
Binary files /dev/null and b/public/img/background/paper/small_tile_paper.png differ
diff --git a/public/img/background/wood/cut_wood_background.png b/public/img/background/wood/cut_wood_background.png
new file mode 100644
index 0000000..a3e4b85
Binary files /dev/null and b/public/img/background/wood/cut_wood_background.png differ
diff --git a/public/img/borders/metal_corner.png b/public/img/borders/metal_corner.png
new file mode 100644
index 0000000..cba6bb0
Binary files /dev/null and b/public/img/borders/metal_corner.png differ
diff --git a/public/img/borders/metal_strip.png b/public/img/borders/metal_strip.png
new file mode 100644
index 0000000..f8e1ecd
Binary files /dev/null and b/public/img/borders/metal_strip.png differ
diff --git a/public/img/quests/overlays/compass_rose.png b/public/img/quests/overlays/compass_rose.png
new file mode 100644
index 0000000..f0cc485
Binary files /dev/null and b/public/img/quests/overlays/compass_rose.png differ
diff --git a/public/img/quests/overlays/flower.png b/public/img/quests/overlays/flower.png
new file mode 100644
index 0000000..5840633
Binary files /dev/null and b/public/img/quests/overlays/flower.png differ
diff --git a/public/img/quests/overlays/outdoor_scene.png b/public/img/quests/overlays/outdoor_scene.png
new file mode 100644
index 0000000..c920fe9
Binary files /dev/null and b/public/img/quests/overlays/outdoor_scene.png differ
diff --git a/public/img/quests/overlays/potion.png b/public/img/quests/overlays/potion.png
new file mode 100644
index 0000000..1bbb530
Binary files /dev/null and b/public/img/quests/overlays/potion.png differ
diff --git a/src/assets/main.css b/src/assets/main.css
deleted file mode 100644
index a5ef358..0000000
--- a/src/assets/main.css
+++ /dev/null
@@ -1,20 +0,0 @@
-
-:root {
-
-}
-
-body {
-    margin: 0;
-    padding: 0 0 10rem;
-    min-height: calc(100vh - 10rem);
-    font-family: 'EB Garamond', serif;
-    overflow-y: scroll;
-    user-select: none;
-    background-size: 30%;
-    background: rgba(87, 50, 20, 0.75) url("/img/background/panels/plaster.png") repeat;
-    background-blend-mode: darken;
-}
-
-#app {
-    width: 100%;
-}
\ No newline at end of file
diff --git a/src/assets/main.scss b/src/assets/main.scss
new file mode 100644
index 0000000..be85da0
--- /dev/null
+++ b/src/assets/main.scss
@@ -0,0 +1,64 @@
+
+:root {
+
+}
+
+body {
+  margin: 0;
+  padding: 0 0 10rem;
+  min-height: calc(100vh - 10rem);
+  font-family: 'EB Garamond', serif;
+  overflow-y: scroll;
+  user-select: none;
+  background-size: 25rem;
+  background-color: rgba(87, 50, 20, 0.45);
+  background-image: url("/img/background/wood/cut_wood_background.png");
+  background-blend-mode: darken;
+  background-repeat: repeat;
+}
+
+#app {
+  width: 100%;
+}
+
+.panel {
+  &.pinned-paper {
+    background-image: url("/img/quests/backgrounds/paper.png");
+    position: relative;
+    filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
+
+    .nail {
+      position: absolute;
+      width: 2rem;
+      height: 2rem;
+      filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.5));
+
+      &.small {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      &.top-left {
+        top: 1rem;
+        left: 1rem;
+      }
+
+      &.top-right {
+        top: 1rem;
+        right: 1rem;
+      }
+    }
+  }
+
+  &.note-paper {
+    background-image: url("/img/background/paper/small_tile_paper.png");
+    position: relative;
+    filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
+    border-image: url("/img/borders/metal_corner.png") 30 round;
+  }
+}
\ No newline at end of file
diff --git a/src/components/AdventurerList.vue b/src/components/AdventurerList.vue
index 48b4fa8..67c308a 100644
--- a/src/components/AdventurerList.vue
+++ b/src/components/AdventurerList.vue
@@ -18,14 +18,15 @@ export default defineComponent({
   name: "AdventurerList",
   components: {AdventurerMiniComponent},
   data: () => ({
-    currentAdventurer: null as Adventurer|null
+    currentAdventurer: null as Adventurer | null
   }),
   props: {
     adventurers: {
-      type: Object as PropType<{[key: string]: Adventurer}>,
+      type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
-        return {} as {[key: string]: Adventurer};
+        return {} as { [key: string]: Adventurer };
       },
+      required: true,
     },
   },
 
@@ -39,12 +40,13 @@ export default defineComponent({
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
+
   .slot {
     padding: 0;
     width: 5rem;
     height: 5rem;
     border: 2px solid #000;
-    background-color: rgba(0,0,0, 0.2);
+    background-color: rgba(0, 0, 0, 0.2);
     cursor: pointer;
     border-radius: 0.2rem;
   }
diff --git a/src/components/AdventurerMiniComponent.vue b/src/components/AdventurerMiniComponent.vue
index 234b9ac..758911b 100644
--- a/src/components/AdventurerMiniComponent.vue
+++ b/src/components/AdventurerMiniComponent.vue
@@ -65,12 +65,10 @@ export default defineComponent({
       default() {
         return {} as {[key: string]: Adventurer};
       },
+      required: true,
     },
   },
   methods: {
-    print(a:string) {
-      console.log(a);
-    },
     closeSelect() {
       this.selection = false;
     }
diff --git a/src/components/AdventurerTile.vue b/src/components/AdventurerTile.vue
index baf33c3..2413876 100644
--- a/src/components/AdventurerTile.vue
+++ b/src/components/AdventurerTile.vue
@@ -4,7 +4,8 @@
       :title="adventurer.name + (adventurer.busy ? ' (busy)' : '')"
   >
     <img :src="adventurer.portrait" :alt="adventurer.name" draggable="false">
-    <div class="level" :title="adventurer.isMaxLevel() ? 'Max level' : ''">{{adventurer.level}}<span v-if="adventurer.isMaxLevel()">⇪</span></div>
+    <div class="level" :title="adventurer.isMaxLevel() ? 'Max level' : ''">{{ adventurer.level }}<span
+        v-if="adventurer.isMaxLevel()">⇪</span></div>
     <div class="exp"></div>
   </article>
 </template>
@@ -12,7 +13,7 @@
 <script lang="ts">
 
 import type {Adventurer} from "@/classes/Adventurer";
-import {defineComponent, type PropType } from "vue";
+import {defineComponent, type PropType} from "vue";
 
 export default defineComponent({
   name: "AdventurerTile",
@@ -22,6 +23,7 @@ export default defineComponent({
       default() {
         return {} as Adventurer;
       },
+      required: true,
     }
   },
   data: () => ({
@@ -49,19 +51,21 @@ export default defineComponent({
   overflow: clip;
   font-size: 5rem;
   line-height: 1;
-  color: rgba(0,0,0, 0.75);
+  color: rgba(0, 0, 0, 0.75);
   position: relative;
+
   .level {
     position: absolute;
     top: 0;
     left: 0;
     font-size: 1rem;
     min-width: 1rem;
-    background-color: rgba(0,0,0, 0.75);
+    background-color: rgba(0, 0, 0, 0.75);
     border-bottom-right-radius: 0.2rem;
     padding: 0.1rem;
     color: #fff;
   }
+
   .exp {
     position: absolute;
     bottom: 0;
@@ -71,6 +75,7 @@ export default defineComponent({
     background-color: rgba(203, 33, 213, 0.75);
     transition: width 1s linear;
   }
+
   img {
     width: 100%;
     height: 100%;
diff --git a/src/components/ChangelogComponent.vue b/src/components/ChangelogComponent.vue
index 25649c7..d00733c 100644
--- a/src/components/ChangelogComponent.vue
+++ b/src/components/ChangelogComponent.vue
@@ -1,7 +1,14 @@
 <template>
-  <div class="changelog">
+  <div class="changelog panel pinned-paper">
+    <div class="nail top-left">
+      <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+    </div>
+    <div class="nail top-right">
+      <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+    </div>
     <h1>Changelog</h1>
     <div class="changelog-entry" v-for="release in releases">
+      <hr>
       <h2>Version {{ release.name }}</h2>
       <pre>{{ release.body }}</pre>
     </div>
@@ -47,29 +54,42 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .changelog {
-  padding: 3rem;
+  padding-block: 3rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 1rem;
   max-width: 45rem;
+  width: 100%;
+
   h1 {
     font-size: 3rem;
     line-height: 1;
     margin: 0;
     text-align: center;
   }
+
   .changelog-entry {
     width: 100%;
+
     h2 {
       margin: 0;
+      padding-inline: 1rem;
     }
+
+    hr {
+      border: 0;
+      width: calc(100% - 2rem);
+      border-bottom: 1px solid black;
+    }
+
     pre {
       line-height: 1.2;
       margin: 0;
       white-space: pre-wrap;
       font-family: 'EB Garamond', serif;
+      padding-inline: 1rem;
     }
   }
 }
diff --git a/src/components/QuestMissive.vue b/src/components/QuestMissive.vue
index 4d3b9bf..553f74e 100644
--- a/src/components/QuestMissive.vue
+++ b/src/components/QuestMissive.vue
@@ -40,8 +40,8 @@
     </div>
     <h3>Rewards</h3>
     <div class="rewards">
-      <span>Gold: <b>{{missive.goldReward}}</b></span>
-      <span>Exp: <b>{{missive.expReward}}</b></span>
+      <span>Gold: <b>{{ missive.goldReward }}</b></span>
+      <span>Exp: <b>{{ missive.expReward }}</b></span>
     </div>
   </article>
 </template>
@@ -57,16 +57,18 @@ export default defineComponent({
   components: {AdventurerComponent},
   props: {
     missive: {
-      type: Object as PropType<Quest|any>,
+      type: Object as PropType<Quest | any>,
       default() {
         return {} as Quest;
       },
+      required: true,
     },
     adventurers: {
-      type: Object as PropType<{[key: string]: Adventurer}>,
+      type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
-        return {} as {[key: string]: Adventurer};
+        return {} as { [key: string]: Adventurer };
       },
+      required: true,
     },
   },
   data: () => {
@@ -126,6 +128,7 @@ export default defineComponent({
     height: 100%;
     z-index: -5;
     overflow: hidden;
+
     img {
       width: 100%;
       height: 100%;
@@ -137,6 +140,7 @@ export default defineComponent({
     font-size: 1.5rem;
     line-height: 1;
   }
+
   h3 {
     font-size: 1.15rem;
     margin: 0;
@@ -148,6 +152,7 @@ export default defineComponent({
     margin: 0.5rem auto;
     position: relative;
     height: 1.25rem;
+
     .progress {
       position: absolute;
       top: 0;
@@ -158,6 +163,7 @@ export default defineComponent({
       background-color: rgba(0, 128, 0, 0.65);
       transition: width 250ms linear;
     }
+
     .percentage {
       position: absolute;
       top: 0;
@@ -221,6 +227,7 @@ export default defineComponent({
     background-size: contain;
     opacity: 1;
     z-index: -4;
+
     img {
       width: 100%;
       height: 100%;
@@ -241,6 +248,7 @@ export default defineComponent({
     display: flex;
     justify-content: center;
     align-items: center;
+
     img {
       width: 45%;
       height: 35%;
diff --git a/src/components/UpgradesList.vue b/src/components/UpgradesList.vue
index 84d3695..709da7e 100644
--- a/src/components/UpgradesList.vue
+++ b/src/components/UpgradesList.vue
@@ -1,21 +1,21 @@
 <template>
-<section class="upgrades">
-<h2>Upgrades</h2>
-  <div class="upgrade">
-    <span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
-    <button
-        v-if="guild.adventurerCapacity.nextLevelCost"
-        :disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
-        @click="upgradeAdventurerCapacity()"
-    >
-      Upgrade ({{guild.adventurerCapacity.nextLevelCost.toFixed(0)}} gold)
-    </button>
-  </div>
-</section>
+  <section class="upgrades">
+    <h2>Upgrades</h2>
+    <div class="upgrade">
+      <span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
+      <button
+          v-if="guild.adventurerCapacity.nextLevelCost"
+          :disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
+          @click="upgradeAdventurerCapacity()"
+      >
+        Upgrade ({{ guild.adventurerCapacity.nextLevelCost.toFixed(0) }} gold)
+      </button>
+    </div>
+  </section>
 </template>
 
 <script lang="ts">
-import { Guild } from "@/classes/Guild";
+import {Guild} from "@/classes/Guild";
 import {defineComponent, type PropType} from "vue";
 
 export default defineComponent({
@@ -25,7 +25,8 @@ export default defineComponent({
       type: Object as PropType<Guild>,
       default() {
         return new Guild(1, 0) as Guild;
-      }
+      },
+      required: true,
     }
   },
   methods: {
@@ -47,11 +48,13 @@ export default defineComponent({
   justify-content: center;
   align-items: center;
   gap: 1rem;
+
   h2 {
     font-size: 1.75rem;
     margin: 2rem 0 0;
     padding: 0;
   }
+
   .upgrade {
     text-align: center;
     font-size: 1.25rem;
diff --git a/src/main.ts b/src/main.ts
index eedade8..839a930 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 
-import './assets/main.css'
+import './assets/main.scss'
 
 const app = createApp(App)
 
diff --git a/src/views/AdventurerView.vue b/src/views/AdventurerView.vue
index 9794ca6..384d176 100644
--- a/src/views/AdventurerView.vue
+++ b/src/views/AdventurerView.vue
@@ -1,11 +1,11 @@
 <template>
-<div class="adventurer-section">
-  <section class="recruit">
-    <h1>Applying adventurers</h1>
-    <div class="adventurers">
-      <div v-if="currentlyForHire">
-        <adventurer-tile class="hire-tile" :adventurer="currentlyForHire"/>
-        <div class="decision">
+  <div class="adventurer-section">
+    <section class="recruit panel pinned-paper">
+      <h1>Applying adventurers</h1>
+      <div class="adventurers">
+        <div v-if="currentlyForHire">
+          <adventurer-tile class="hire-tile" :adventurer="currentlyForHire"/>
+          <div class="decision">
           <span
               title="Hire"
               @click="hireAdventurer(currentlyForHire)"
@@ -13,31 +13,32 @@
           >
             ✔
           </span>
-          <span
-              :title="Object.keys(adventurers).length > 0 ? 'Dismiss' : ''"
-              :class="{disabled: Object.keys(adventurers).length <= 0}"
-              @click="dismissAdventurer()"
-          >
+            <span
+                :title="Object.keys(adventurers).length > 0 ? 'Dismiss' : ''"
+                :class="{disabled: Object.keys(adventurers).length <= 0}"
+                @click="dismissAdventurer()"
+            >
             ✗
           </span>
+          </div>
+        </div>
+        <div v-else>
+          <span>Noone applied as of now. Check back later!</span>
+        </div>
+
+      </div>
+    </section>
+    <section class="collection panel pinned-paper">
+      <h1>Recruited adventurers ({{ Object.keys(adventurers).length }} /
+        {{ guild.adventurerCapacity.getAdventurerCapacity() }})</h1>
+      <div class="adventurers">
+        <div class="adventurer-tile" v-for="adventurer in adventurers" :key="adventurer.id">
+          <AdventurerTile class="entry" :adventurer="adventurer"/>
+          <b>{{ adventurer.name }}</b>
         </div>
       </div>
-      <div v-else>
-        <span>Noone applied as of now. Check back later!</span>
-      </div>
-
-    </div>
-  </section>
-  <section class="collection">
-    <h1>Recruited adventurers ({{ Object.keys(adventurers).length }} / {{ guild.adventurerCapacity.getAdventurerCapacity() }})</h1>
-    <div class="adventurers">
-      <div class="adventurer-tile" v-for="adventurer in adventurers" :key="adventurer.id">
-        <AdventurerTile class="entry" :adventurer="adventurer" />
-        <b>{{ adventurer.name }}</b>
-      </div>
-    </div>
-  </section>
-</div>
+    </section>
+  </div>
 </template>
 
 <script lang="ts">
@@ -45,7 +46,7 @@ import type {PropType} from "vue";
 import {defineComponent} from "vue";
 import AdventurerTile from "@/components/AdventurerTile.vue";
 import type {Adventurer} from "@/classes/Adventurer";
-import { loadAdventurersForHire } from "@/GameData";
+import {loadAdventurersForHire} from "@/GameData";
 import type {Guild} from "@/classes/Guild";
 
 export default defineComponent({
@@ -53,7 +54,7 @@ export default defineComponent({
   components: {AdventurerTile},
   data: () => {
     return {
-      currentlyForHire: null as Adventurer|null,
+      currentlyForHire: null as Adventurer | null,
       adventurersForHire: [] as Array<Adventurer>,
     }
   },
@@ -63,12 +64,14 @@ export default defineComponent({
       default() {
         return {} as Guild
       },
+      required: true,
     },
     adventurers: {
       type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
         return {} as { [key: string]: Adventurer };
       },
+      required: true,
     },
     lastRecruitTime: {
       type: Number as PropType<number>,
@@ -78,7 +81,7 @@ export default defineComponent({
     },
   },
   methods: {
-    getRandomAdventurer(): Adventurer|null {
+    getRandomAdventurer(): Adventurer | null {
       if (this.adventurersForHire.length <= 0) return null;
       const randomId = this.adventurersForHire.length * Math.random() << 0;
       return this.adventurersForHire[randomId];
@@ -99,7 +102,7 @@ export default defineComponent({
       window.localStorage.setItem("currentlyForHire", adventurer.id);
 
     },
-    hireAdventurer(adventurer: Adventurer|any): void {
+    hireAdventurer(adventurer: Adventurer | any): void {
       if (Object.keys(this.adventurers).length >= this.guild.adventurerCapacity.getAdventurerCapacity()) return;
       this.adventurers[adventurer.id] = adventurer;
       this.currentlyForHire = null;
@@ -148,22 +151,28 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .adventurer-section {
+  padding-block: 1rem;
   display: flex;
-  flex-direction: column;
   justify-content: center;
-  align-items: center;
+  align-content: center;
+  flex-direction: column;
+  gap: 1rem;
   width: 100%;
+
   section {
-    max-width: 1280px;
-    width: 100%;
     text-align: center;
-    padding-block: 1rem;
+    padding: 1rem;
+    width: calc(100% - 2rem);
+    max-width: 45rem;
+    margin: 0 auto;
   }
+
   h1 {
     font-size: 2rem;
     font-weight: bold;
     margin: 0;
   }
+
   .adventurers {
     display: flex;
     flex-direction: row;
@@ -171,6 +180,7 @@ export default defineComponent({
     align-items: center;
     flex-wrap: wrap;
     gap: 1rem;
+
     .adventurer-tile {
       display: flex;
       justify-content: center;
@@ -178,10 +188,12 @@ export default defineComponent({
       flex-direction: column;
       gap: 0.25rem;
       font-size: 1.1rem;
+
       .entry {
         height: 7rem;
         width: 7rem;
       }
+
       b {
         line-height: 1;
         text-align: center;
@@ -192,6 +204,7 @@ export default defineComponent({
       }
     }
   }
+
   .decision {
     display: flex;
     flex-direction: row;
@@ -199,17 +212,21 @@ export default defineComponent({
     align-items: center;
     font-size: 2rem;
     gap: 1rem;
+
     span {
       cursor: pointer;
+
       &:hover {
         color: #fff;
       }
+
       &.disabled {
-        color: rgba(0,0,0, 0.5);
+        color: rgba(0, 0, 0, 0.5);
         cursor: default;
       }
     }
   }
+
   .hire-tile {
     width: 8rem;
     height: 8rem;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 18127d2..aea130b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,26 +1,35 @@
 <template>
   <main>
-    <section class="title">
+    <section class="title panel note-paper">
       <h1>Guild Master</h1>
       <h3>Adventurer's guild management game</h3>
-      <small>v{{version}}</small>
+      <small>v{{ version }}</small>
     </section>
-    <section class="coffer">
-      <p>Coffer: {{guild.gold}} gold</p>
-    </section>
-    <section class="upgrade">
-      <p>Guild level: {{ guild.level }}</p>
-      <button :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true" @click="guild.upgrade()">
-        <span>Upgrade guild level</span><br>
-        <span>({{ guild.displayUpgradeCost }})</span>
-      </button>
-    </section>
-    <section class="upgrade">
-      <UpgradesList :guild="guild" />
-    </section>
-    <section class="upgrade">
-      <span class="wipe-save" @click="$emit('wipeSave')">Wipe your save data</span>
+    <section class="upgrades panel pinned-paper">
+      <div class="nail top-left">
+        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+      </div>
+      <div class="nail top-right">
+        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+      </div>
+      <section class="coffer">
+        <p>Coffer: {{ guild.gold }} gold</p>
+      </section>
+      <section class="upgrade">
+        <p>Guild level: {{ guild.level }}</p>
+        <button :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true" @click="guild.upgrade()">
+          <span>Upgrade guild level</span><br>
+          <span>({{ guild.displayUpgradeCost }})</span>
+        </button>
+      </section>
+      <section class="upgrade">
+        <UpgradesList :guild="guild"/>
+      </section>
+      <section class="upgrade">
+        <span class="wipe-save" @click="$emit('wipeSave')">Wipe your save data</span>
+      </section>
     </section>
+
   </main>
 </template>
 
@@ -44,46 +53,69 @@ export default defineComponent({
     guild: {
       type: Object as PropType<Guild>,
       default: () => new Guild(1, 0) as Guild,
+      required: true,
     },
   }
 });
 </script>
 
 <style lang="scss">
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-block: 1rem;
+  gap: 1rem;
+
+  .upgrades {
+    max-width: 45rem;
+    width: 100%;
+  }
+}
+
 .title {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 2.5rem;
+  padding-block: 2.5rem;
   text-align: center;
-
+  width: 100%;
+  max-width: 45rem;
   gap: 0.5rem;
+
   h1 {
     font-size: 4rem;
     line-height: 0.75;
-
+    white-space: pre-wrap;
     margin: 0;
   }
+
   h3 {
     margin: 0;
     line-height: 0.9;
   }
+
   small {
     font-size: 0.9rem;
     font-weight: bold;
     line-height: 0.25;
   }
 }
+
 .coffer {
   text-align: center;
+
   p {
     font-size: 1.5rem;
     font-weight: bold;
   }
 }
+
 .upgrade {
   text-align: center;
+
   .wipe-save {
     display: inline-flex;
     font-weight: bold;
@@ -91,6 +123,7 @@ export default defineComponent({
     color: #d52121;
     cursor: pointer;
   }
+
   p {
     margin: 0;
     font-size: 1.5rem;
diff --git a/src/views/QuestView.vue b/src/views/QuestView.vue
index 55fe014..7d5a01d 100644
--- a/src/views/QuestView.vue
+++ b/src/views/QuestView.vue
@@ -103,18 +103,21 @@ export default defineComponent({
       default() {
         return new Guild(1, 0);
       },
+      required: true,
     },
     adventurers: {
       type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
         return {} as { [key: string]: Adventurer };
       },
+      required: true,
     },
     quests: {
       type: Object as PropType<{ [key: string]: Quest }>,
       default() {
         return {} as { [key: string]: Quest };
       },
+      required: true,
     },
     lastRecruitTime: {
       type: Number as PropType<number>,
@@ -123,10 +126,10 @@ export default defineComponent({
       }
     },
   },
-  emits: [ 'finalizeQuest', 'wipeSave', 'recruitActionTaken'],
+  emits: ['finalizeQuest', 'wipeSave', 'recruitActionTaken'],
   methods: {
     // This is a workaround for vue not reporting Quest as Quest in v-for
-    finalizeQuest(quest: any|Quest): void {
+    finalizeQuest(quest: any | Quest): void {
       if (quest.progressPoints < quest.maxProgress) return;
       this.$emit('finalizeQuest', quest)
     },
diff --git a/src/views/TechnicalView.vue b/src/views/TechnicalView.vue
index 780d4ce..d1f8053 100644
--- a/src/views/TechnicalView.vue
+++ b/src/views/TechnicalView.vue
@@ -1,15 +1,27 @@
 <template>
-<section class="technical-view">
-  <h1>Socials</h1>
-  <div class="socials">
-    <a class="link" href="https://discord.gg/j8KK5dGBps"><img class="icon" src="/img/icons/discord.svg" alt="Discord" />Discord</a>
-    <a class="link" href="https://github.com/YouHaveTrouble/GuildMaster"><img class="icon" src="/img/icons/github.svg" alt="GitHub" />GitHub</a>
+  <section class="technical-view">
+    <div class="socials panel pinned-paper">
+      <div class="nail top-left small">
+        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+      </div>
+      <div class="nail top-right small">
+        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+      </div>
+      <h1>Socials</h1>
+      <div class="links">
+        <a class="link" href="https://discord.gg/j8KK5dGBps">
+          <img class="icon" src="/img/icons/discord.svg" alt="Discord"/>
+          Discord
+        </a>
+        <a class="link" href="https://github.com/YouHaveTrouble/GuildMaster">
+          <img class="icon" src="/img/icons/github.svg" alt="GitHub"/>
+          GitHub
+        </a>
+      </div>
+    </div>
+    <ChangelogComponent/>
 
-  </div>
-
-  <ChangelogComponent/>
-
-</section>
+  </section>
 </template>
 
 <script lang="ts">
@@ -31,30 +43,44 @@ export default defineComponent({
   align-items: center;
   gap: 1rem;
   padding-block: 1rem;
+
   h1 {
     font-size: 3rem;
     line-height: 1;
     margin: 0;
   }
+
   .socials {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 1rem;
+    padding: 1rem;
+
+    .links {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      gap: 1rem;
+
+      .link {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 0.05rem;
+        text-decoration: underline;
+        font-size: 1.5rem;
+        color: #000;
+        font-weight: bold;
+      }
+    }
   }
-  .link {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 0.05rem;
-    text-decoration: underline;
-    font-size: 1.5rem;
-    color: #000;
-    font-weight: bold;
-  }
+
+
   .icon {
     width: 2rem;
     height: 2rem;