diff --git a/src/App.vue b/src/App.vue
index d62033b41..857ff894a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -278,6 +278,7 @@ export default {
 		await store.dispatch("initialize");
 	},
 	async mounted() {
+		this.setTips();
 		const cookies = document.cookie.split(";");
 
 		for (let cookie of cookies) {
@@ -318,6 +319,7 @@ export default {
 			"initialize",
 			"reinitialize",
 			"setUser",
+			"setTips",
 		]),
 		setSize(size) {
 			this.small_screen = size.width < 576;
diff --git a/src/components/ContentSideRight.vue b/src/components/ContentSideRight.vue
index b2b91b3e9..0ce06a19c 100644
--- a/src/components/ContentSideRight.vue
+++ b/src/components/ContentSideRight.vue
@@ -1,135 +1,160 @@
 <template>
-  <div class="content-side">
-    <Tutorial v-if="show_tutorial" vertical />
+	<div class="content-side">
+		<Tutorial v-if="show_tutorial" vertical />
 
-    <hk-card v-if="$route.path.startsWith('/content/players')">
-      <div class="card-header" slot="header">
-        <span>
-          <i class="fas fa-sync-alt" aria-hidden="true" />
-          Character Sync
-        </span>
-      </div>
-      <div class="card-body text-center">
-        <p>
-          Sync your player's character sheets from other resources in 
-          <span class="whitespace-nowrap">Harmless Key</span><span v-if="tier.name === 'Free'" class="neutral-3"> *</span>.
-        </p>
-        
-        <button 
-          class="btn btn-block bg-green" 
-          @click="setSlide({
-            show: true,
-            type: 'slides/CharacterSync'
-          })">
-          <i class="fas fa-sync-alt" aria-hidden="true" /> Start Syncing
-        </button>
-        
-      </div>
-      <small v-if="tier.name === 'Free'" slot="footer" class="card-footer justify-content-start neutral-3">* <router-link to="/patreon" class="mx-1">Subscription</router-link> for Harmless Key required.</small>
-    </hk-card>
+		<hk-card v-if="$route.path.startsWith('/content/players')">
+			<div class="card-header" slot="header">
+				<span>
+					<i class="fas fa-sync-alt" aria-hidden="true" />
+					Character Sync
+				</span>
+			</div>
+			<div class="card-body text-center">
+				<p>
+					Sync your player's character sheets from other resources in
+					<span class="whitespace-nowrap">Harmless Key</span
+					><span v-if="tier.name === 'Free'" class="neutral-3"> *</span>.
+				</p>
 
-    <hk-card v-if="$route.path === '/content'" class="bg-neutral-9 overflow-hidden">
-      <hk-video />
-    </hk-card>
+				<button
+					class="btn btn-block bg-green"
+					@click="
+						setSlide({
+							show: true,
+							type: 'slides/CharacterSync',
+						})
+					"
+				>
+					<i class="fas fa-sync-alt" aria-hidden="true" /> Start Syncing
+				</button>
+			</div>
+			<small
+				v-if="tier.name === 'Free'"
+				slot="footer"
+				class="card-footer justify-content-start neutral-3"
+				>* <router-link to="/patreon" class="mx-1">Subscription</router-link> for Harmless Key
+				required.</small
+			>
+		</hk-card>
 
-    <!-- COMPENDIUM -->
-    <hk-card v-if="$route.path.split('/')[1] !== 'content'">
-      <div slot="header" class="card-header">
-        <h2><i aria-hidden="true" class="fas fa-swords mr-1" /> D&D Combat tracker</h2>
-      </div>
-      <div class="card-body overflow-x-hidden">
-        <hk-video />
-        <p class="neutral-2 mt-3 text-center">Try the most advanced initiative tracker on the internet.</p>
-        <router-link class="btn btn-block btn-sm bg-green" to="/demo">Demo encounter</router-link>
-      </div>
-    </hk-card>
+		<hk-card v-if="$route.path === '/content'" class="bg-neutral-9 overflow-hidden">
+			<hk-video />
+		</hk-card>
 
-    <!-- CAMPAIGNS -->
-    <hk-card v-if="$route.path === '/content/campaigns'">
-      <div slot="header" class="card-header">
-        <span>Share your adventures</span>
-        <a class="btn btn-sm bg-neutral-5" @click="setSlide({show: true, type: 'PlayerLink'})">
-          <i aria-hidden="true" class="fas fa-qrcode" />
-        </a>
-      </div>
-      <div class="card-body">
-       <PlayerLink :qr="false" :title="false" :info="false" />
-      </div>
-    </hk-card>
+		<!-- COMPENDIUM -->
+		<hk-card v-if="$route.path.split('/')[1] !== 'content'">
+			<div slot="header" class="card-header">
+				<h2><i aria-hidden="true" class="fas fa-swords mr-1" /> D&D Combat tracker</h2>
+			</div>
+			<div class="card-body overflow-x-hidden">
+				<hk-video />
+				<p class="neutral-2 mt-3 text-center">
+					Try the most advanced initiative tracker on the internet.
+				</p>
+				<router-link class="btn btn-block btn-sm bg-green" to="/demo">Demo encounter</router-link>
+			</div>
+		</hk-card>
 
-    <!-- HOMEBREW CREATION -->
-    <hk-card v-if="false">
-      <div 
-        slot="image"
-        class="card-image" 
-        :style="{ backgroundImage: `url(${require('src/assets/_img/homebrew-creation.webp')})`}"
-      >
-        <div class="image-title">Homebrew creation</div>
-      </div>
-      <div class="card-body">
-        <p class="text-center">Need a free adventure template, or help forming the basic idea of your adventure?</p>
-        <a class="btn btn-block btn-sm" href="http://homebrewcreation.com" rel="noopener" target="_blank">Start creating</a>
-      </div>
-    </hk-card>
+		<!-- CAMPAIGNS -->
+		<hk-card v-if="$route.path === '/content/campaigns'">
+			<div slot="header" class="card-header">
+				<a :href="`https://harmlesskey.com/user/${userId}`" target="_blank" class="neutral-1">
+					Share initiative
+					<i class="fas fa-external-link blue-light" aria-hidden="true" />
+				</a>
+				<a class="btn btn-sm bg-neutral-5" @click="setSlide({ show: true, type: 'PlayerLink' })">
+					<i aria-hidden="true" class="fas fa-qrcode" />
+				</a>
+			</div>
+			<div class="card-body">
+				<PlayerLink :qr="false" :title="false" :info="false" />
+			</div>
+		</hk-card>
 
-    <!-- SOCIAL -->
-    <hk-card small header="Join our community">
-      <div class="card-body">
-        <a class="btn btn-block bg-neutral-8 mb-3" href="https://discord.gg/fhmKBM7" target="_blank" rel="noopener">
-          <i aria-hidden="true" class="fab fa-discord discord-purple mr-2" /> Discord
-        </a>
-        <p class="neutral-2 text-center">
-          Join others on our Discord and be amongst the first to know about new updates.
-        </p>
-        <hr>
-        <div class="social d-flex justify-content-between">
-          <a 
-            v-for="{name, icon, url} in social_media" 
-            class="btn bg-neutral-8"
-            :class="{ 'btn-sm': width < 240 }"
-            :key="name"
-            :href="url" 
-            target="_blank" rel="noopener"
-          >
-            <i aria-hidden="true" :class="icon" />
-          </a>
-        </div>
-      </div>
-    </hk-card>
+		<!-- HOMEBREW CREATION -->
+		<hk-card v-if="false">
+			<div
+				slot="image"
+				class="card-image"
+				:style="{ backgroundImage: `url(${require('src/assets/_img/homebrew-creation.webp')})` }"
+			>
+				<div class="image-title">Homebrew creation</div>
+			</div>
+			<div class="card-body">
+				<p class="text-center">
+					Need a free adventure template, or help forming the basic idea of your adventure?
+				</p>
+				<a
+					class="btn btn-block btn-sm"
+					href="http://homebrewcreation.com"
+					rel="noopener"
+					target="_blank"
+					>Start creating</a
+				>
+			</div>
+		</hk-card>
 
-    <!-- SUBSCRIPTION -->
-    <hk-card v-if="user && tier && $route.path.split('/')[1] === 'content'" small>
-      <div slot="header" class="card-header">
-        Subscription
-        <hk-popover 
-          v-if="pending_payment"
-          header="Pending"
-          content="Your Patreon payment is pending, this might take a few minutes." 
-        >
-          Pending <i class="fas fa-sync ml-1 blue spin" aria-hidden="true" />
-        </hk-popover>
-        <strong v-else>{{ tier.name }}</strong>
-      </div>
-      <q-linear-progress 
-        v-if="tier.name !== 'Deity'"
-        :value="slots_used.used_slots / slots_used.available_slots"
-        color="neutral-4"
-        track-color="neutral-11"
-      />
-      <div>
-        <Tier />
-      </div>
-      <div slot="footer" v-if="tier.name !== 'Deity'">
-        <router-link 
-          to="/patreon" 
-          class="btn btn-block btn-square bg-patreon-red"
-        >
-          Upgrade
-        </router-link>
-      </div>
-    </hk-card>
-    <q-resize-observer @resize="setWidth"/>
-  </div>
+		<!-- SOCIAL -->
+		<hk-card small header="Join our community">
+			<div class="card-body">
+				<a
+					class="btn btn-block bg-neutral-8 mb-3"
+					href="https://discord.gg/fhmKBM7"
+					target="_blank"
+					rel="noopener"
+				>
+					<i aria-hidden="true" class="fab fa-discord discord-purple mr-2" /> Discord
+				</a>
+				<p class="neutral-2 text-center">
+					Join others on our Discord and be amongst the first to know about new updates.
+				</p>
+				<hr />
+				<div class="social d-flex justify-content-between">
+					<a
+						v-for="{ name, icon, url } in social_media"
+						class="btn bg-neutral-8"
+						:class="{ 'btn-sm': width < 240 }"
+						:key="name"
+						:href="url"
+						target="_blank"
+						rel="noopener"
+					>
+						<i aria-hidden="true" :class="icon" />
+					</a>
+				</div>
+			</div>
+		</hk-card>
+
+		<!-- SUBSCRIPTION -->
+		<hk-card v-if="user && tier && $route.path.split('/')[1] === 'content'" small>
+			<div slot="header" class="card-header">
+				Subscription
+				<hk-popover
+					v-if="pending_payment"
+					header="Pending"
+					content="Your Patreon payment is pending, this might take a few minutes."
+				>
+					Pending <i class="fas fa-sync ml-1 blue spin" aria-hidden="true" />
+				</hk-popover>
+				<strong v-else>{{ tier.name }}</strong>
+			</div>
+			<q-linear-progress
+				v-if="tier.name !== 'Deity'"
+				:value="slots_used.used_slots / slots_used.available_slots"
+				color="neutral-4"
+				track-color="neutral-11"
+			/>
+			<div>
+				<Tier />
+			</div>
+			<div slot="footer" v-if="tier.name !== 'Deity'">
+				<router-link to="/patreon" class="btn btn-block btn-square bg-patreon-red">
+					Upgrade
+				</router-link>
+			</div>
+		</hk-card>
+		<q-resize-observer @resize="setWidth" />
+	</div>
 </template>
 
 <script>
@@ -137,94 +162,99 @@ import { mapActions, mapGetters } from "vuex";
 import { extensionInstalled } from "src/utils/generalFunctions";
 
 export default {
-  name: "ContentSideRight",
-  props: {
-    page: String
-  },
-  components: {
-    PlayerLink: () => import("src/components/PlayerLink"),
-    HkVideo: () => import("src/components/hk-components/hk-video"),
-    Tier: () => import("src/components/userContent/Tier"),
-    Tutorial: () => import("src/components/userContent/Tutorial.vue"),
-  },
-  data() {
-    return {
-      width: 0,
-      hasExtension: false,
-      social_media: [
-					{
-						name: "Patreon",
-						icon: "fab fa-patreon patreon-red",
-						url: "https://www.patreon.com/harmlesskey"
-					},
-					{
-						name: "Instagram",
-						icon: "fab fa-instagram",
-						url: "https://www.instagram.com/harmlesskey"
-					},
-					{
-						name: "Twitter",
-						icon: "fab fa-twitter",
-						url: "https://twitter.com/KeyHarmless"
-					},
-					{
-						name: "Facebook",
-						icon: "fab fa-facebook-f",
-						url: "https://www.facebook.com/harmlesskey"
-					},
-					{
-						name: "Reddit",
-						icon: "fab fa-reddit-alien",
-						url: "https://www.reddit.com/r/HarmlessKey"
-					}
-				]
-    }
-  },
-  computed: {
-    ...mapGetters(["user", "tier", "slots_used", "userInfo", "content_count"]),
-    filtered_content() {
-      return this.content.filter(item => item.value !== this.page);
-    },
-    pending_payment() {
-      return this.userInfo && this.userInfo.patron && this.userInfo.patron.last_charge_status === "Pending";
-    },
-    show_tutorial() {
-      return this.$route.path.split('/')[1] === 'content' && 
-        this.$route.path !== "/content/campaigns" &&
-        this.content_count.campaigns &&
-        (!this.content_count.players || !this.content_count.encounters);
-    }
-  },
-  methods: {
-    ...mapActions([
-      "setSlide"
-    ]),
-    setWidth(size) {
-      this.width = size.width;
-    }
-  },
-  async mounted() {
-    if(this.$route.path.startsWith("/content/players")) {
-      this.hasExtension = await extensionInstalled();
-    }
-  }
-}
+	name: "ContentSideRight",
+	props: {
+		page: String,
+	},
+	components: {
+		PlayerLink: () => import("src/components/PlayerLink"),
+		HkVideo: () => import("src/components/hk-components/hk-video"),
+		Tier: () => import("src/components/userContent/Tier"),
+		Tutorial: () => import("src/components/userContent/Tutorial.vue"),
+	},
+	data() {
+		return {
+			width: 0,
+			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
+			hasExtension: false,
+			social_media: [
+				{
+					name: "Patreon",
+					icon: "fab fa-patreon patreon-red",
+					url: "https://www.patreon.com/harmlesskey",
+				},
+				{
+					name: "Instagram",
+					icon: "fab fa-instagram",
+					url: "https://www.instagram.com/harmlesskey",
+				},
+				{
+					name: "Twitter",
+					icon: "fab fa-twitter",
+					url: "https://twitter.com/KeyHarmless",
+				},
+				{
+					name: "Facebook",
+					icon: "fab fa-facebook-f",
+					url: "https://www.facebook.com/harmlesskey",
+				},
+				{
+					name: "Reddit",
+					icon: "fab fa-reddit-alien",
+					url: "https://www.reddit.com/r/HarmlessKey",
+				},
+			],
+		};
+	},
+	computed: {
+		...mapGetters(["user", "tier", "slots_used", "userInfo", "content_count"]),
+		filtered_content() {
+			return this.content.filter((item) => item.value !== this.page);
+		},
+		pending_payment() {
+			return (
+				this.userInfo &&
+				this.userInfo.patron &&
+				this.userInfo.patron.last_charge_status === "Pending"
+			);
+		},
+		show_tutorial() {
+			return (
+				this.$route.path.split("/")[1] === "content" &&
+				this.$route.path !== "/content/campaigns" &&
+				this.content_count.campaigns &&
+				(!this.content_count.players || !this.content_count.encounters)
+			);
+		},
+	},
+	methods: {
+		...mapActions(["setSlide"]),
+		setWidth(size) {
+			this.width = size.width;
+		},
+	},
+	async mounted() {
+		if (this.$route.path.startsWith("/content/players")) {
+			this.hasExtension = await extensionInstalled();
+		}
+	},
+};
 </script>
 
 <style lang="scss" scoped>
-  .hk-card {
-    .card-image {
-      min-height: 100px;
-      display: flex;
-      align-items: center;
+.hk-card {
+	.card-image {
+		min-height: 100px;
+		display: flex;
+		align-items: center;
 
-      .image-title {
-        font-size: 30px;
-        line-height: 35px;
-        opacity: 1;
-        font-weight: bold;
-        text-shadow: 2px 2px 5px $black;
-      }
-    }
-  }
-</style>
\ No newline at end of file
+		.image-title {
+			font-size: 30px;
+			line-height: 35px;
+			opacity: 1;
+			font-weight: bold;
+			text-shadow: 2px 2px 5px $black;
+		}
+	}
+}
+</style>
diff --git a/src/components/PlayerLink.vue b/src/components/PlayerLink.vue
index 51e93e902..e714845f4 100644
--- a/src/components/PlayerLink.vue
+++ b/src/components/PlayerLink.vue
@@ -2,28 +2,33 @@
 	<div>
 		<div class="share" :class="{ small: is_small }">
 			<div class="qr-wrapper" v-if="qr">
-				<vue-qr 
-					class="qr" 
-					:text="url" 
-					qid="playerLink" 
-					:size="120" 
+				<vue-qr
+					class="qr"
+					:text="url"
+					qid="playerLink"
+					:size="120"
 					:margin="5"
 					:logoSrc="require('src/assets/_img/logo/logo-icon-no-shield-cyan.svg')"
 					:logoScale="0.25"
 				/>
 			</div>
 			<div>
-				<h2 v-if="title" class="mb-2">Share live initiative list</h2>
-				<p class="neutral-2">
-					Let your players follow a live initiative list. 
-				</p>
+				<h2 v-if="title" class="mb-2">
+					<a :href="url" target="_blank" class="neutral-1">
+						Share live initiative list
+						<i class="fas fa-external-link blue ml-1" aria-hidden="true" />
+					</a>
+				</h2>
+				<p class="neutral-2">Let your players follow a live initiative list.</p>
 				<q-input
-					:dark="$store.getters.theme === 'dark'" filled square
+					:dark="$store.getters.theme === 'dark'"
+					filled
+					square
 					:value="url"
 					autocomplete="off"
 					type="text"
 				>
-					<hk-share 
+					<hk-share
 						title="Harmless Key"
 						text="Follow my campaigns on Harmless Key!"
 						:url="url"
@@ -33,109 +38,112 @@
 			</div>
 		</div>
 		<div class="mt-4 neutral-2" v-if="info">
-			Make sure your campaign is set to <span class="green">Public</span>, or your followers won't be able to see it.
-			Then click the <span class="live neutral-1">GO LIVE</span> icon in your campaign to share the initiative of the encounter that is active. You can stay live for your entire session, whenever you're not running an encounter, followers won't see what you're doing.
+			Make sure your campaign is set to <span class="green">Public</span>, or your followers won't
+			be able to see it. Then click the <span class="live neutral-1">GO LIVE</span> icon in your
+			campaign to share the initiative of the encounter that is active. You can stay live for your
+			entire session, whenever you're not running an encounter, followers won't see what you're
+			doing.
 		</div>
 		<q-resize-observer @resize="setSize" />
 	</div>
 </template>
 
 <script>
-	import VueQr from 'vue-qr';
-	
-	export default {
-		name: 'PlayerLink',
-		components: {
-			VueQr,
+import VueQr from "vue-qr";
+
+export default {
+	name: "PlayerLink",
+	components: {
+		VueQr,
+	},
+	props: {
+		qr: {
+			type: Boolean,
+			default: true,
 		},
-		props: {
-			qr: {
-				type: Boolean,
-				default: true
-			},
-			title: {
-				type: Boolean,
-				default: true
-			},
-			info: {
-				type: Boolean,
-				default: true
-			}
+		title: {
+			type: Boolean,
+			default: true,
 		},
-		data() {
-			return {
-				is_small: false,
-				showInfo: false,
-				url: "",
-			}
+		info: {
+			type: Boolean,
+			default: true,
 		},
-		computed: {
-			share_available() {
-				return process.browser && navigator.share !== undefined;
-			}
+	},
+	data() {
+		return {
+			is_small: false,
+			showInfo: false,
+			url: "",
+		};
+	},
+	computed: {
+		share_available() {
+			return process.browser && navigator.share !== undefined;
 		},
-		methods: {
-			setSize(size) {
-				let width = size.width;
-				let small = 450;
+	},
+	methods: {
+		setSize(size) {
+			let width = size.width;
+			let small = 450;
 
-				this.is_small = (width <= small) ? true : false;
+			this.is_small = width <= small ? true : false;
 
-				//sets new width on resize
-				this.width = width;
-			},		
+			//sets new width on resize
+			this.width = width;
 		},
-		beforeMount() {
-			this.url = window.origin + '/user/' + this.$store.getters.user.uid;
-		}
-	}
+	},
+	beforeMount() {
+		this.url = window.origin + "/user/" + this.$store.getters.user.uid;
+	},
+};
 </script>
 
 <style lang="scss" scoped>
-	.share {
-		.copy {
-			word-break: break-all;
-		}
+.share {
+	.copy {
+		word-break: break-all;
+	}
 
-		&.small {
-			.qr-wrapper {
-				display: flex;
-				justify-content: center;
-				border: solid 1px $neutral-4;
-				width: 100%;
-				padding: 20px 0;
-				background-color: $neutral-9;
-				border-radius: $border-radius;
-				margin-bottom: 20px;
+	&.small {
+		.qr-wrapper {
+			display: flex;
+			justify-content: center;
+			border: solid 1px $neutral-4;
+			width: 100%;
+			padding: 20px 0;
+			background-color: $neutral-9;
+			border-radius: $border-radius;
+			margin-bottom: 20px;
 
-				.qr {
-					background-color: $neutral-1;
-					padding: 3px;
-					border-radius: $border-radius;
-				}
+			.qr {
+				background-color: $neutral-1;
+				padding: 3px;
+				border-radius: $border-radius;
 			}
 		}
 	}
-	.home {
-		.share {
-			display: grid;
-			grid-template-columns: auto 110px;
-			grid-template-areas: "text qr";
+}
+.home {
+	.share {
+		display: grid;
+		grid-template-columns: auto 110px;
+		grid-template-areas: "text qr";
 
-			.qr {
-				grid-area: qr;
-				border: none;
-			}
-			p {
-				margin-bottom: 10px;
-			}
-			h2 {
-				font-size: 25px;
-				font-family: $text-written;
-			}
-			small {
-				line-height: initial;
-			}
+		.qr {
+			grid-area: qr;
+			border: none;
+		}
+		p {
+			margin-bottom: 10px;
+		}
+		h2 {
+			font-size: 25px;
+			font-family: $text-written;
+		}
+		small {
+			line-height: initial;
 		}
 	}
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/src/components/combat/Targets.vue b/src/components/combat/Targets.vue
index e8ff0266a..86b60b493 100644
--- a/src/components/combat/Targets.vue
+++ b/src/components/combat/Targets.vue
@@ -1,54 +1,66 @@
 <template>
 	<div id="targets" class="bg-neutral-6-transparent">
-		<h2 
-			class="componentHeader d-flex justify-content-between" 
-			:class="{ shadow : setShadow > 0 }">
+		<h2 class="componentHeader d-flex justify-content-between" :class="{ shadow: setShadow > 0 }">
 			<span>
-				<i aria-hidden="true" class="fas fa-helmet-battle"></i> Targets ({{ _targets.length }})
+				<i aria-hidden="true" class="fas fa-helmet-battle" /> Targets ({{ _targets.length }})
 			</span>
-			<a @click="setSlide({show: true, type: 'slides/encounter/AddNpc'})"
-				v-shortkey="['a']" @shortkey="setSlide({show: true, type: 'slides/encounter/AddNpc'})"
-				class="btn btn-sm bg-neutral-5">
-				<i aria-hidden="true" class="fas fa-plus green"></i>
+			<button
+				@click="test ? null : setSlide({ show: true, type: 'slides/encounter/AddNpc' })"
+				v-shortkey="['a']"
+				@shortkey="test ? null : setSlide({ show: true, type: 'slides/encounter/AddNpc' })"
+				class="btn btn-sm bg-neutral-5"
+				:class="{ disabled: test }"
+			>
+				<i aria-hidden="true" class="fas fa-plus green" />
 				<span class="ml-1">
 					Add
 					<span v-if="!showKeybinds" class="d-none d-sm-inline">[a]</span>
 				</span>
-			</a>
+				<q-tooltip v-if="test" anchor="top middle" self="center middle"
+					>Unavailable in test mode</q-tooltip
+				>
+			</button>
 		</h2>
-		<q-scroll-area :dark="$store.getters.theme === 'dark'" :thumb-style="{ width: '5px'}" v-on:scroll="shadow()" ref="scroll">
-			<div v-shortkey="{
-				downSingle: ['arrowdown'], 
-				downMultiple: ['shift', 'arrowdown'],
-				upSingle: ['arrowup'], 
-				upMultiple: ['shift', 'arrowup']
-				}" 
+		<q-scroll-area
+			:dark="$store.getters.theme === 'dark'"
+			:thumb-style="{ width: '5px' }"
+			v-on:scroll="shadow()"
+			ref="scroll"
+		>
+			<div
+				v-shortkey="{
+					downSingle: ['arrowdown'],
+					downMultiple: ['shift', 'arrowdown'],
+					upSingle: ['arrowup'],
+					upMultiple: ['shift', 'arrowup'],
+				}"
 				@shortkey="cycle_target"
 			>
-				<template v-for="{group, targets} in groups">
+				<template v-for="{ group, targets } in groups">
 					<h2 :key="`header-${group}`" v-if="group !== 'active' && targets.length > 0">
-						<i aria-hidden="true" v-if="group === 'down'" class="fas fa-skull-crossbones red" /> {{ group.capitalize() }} ({{ targets.length }})
+						<i aria-hidden="true" v-if="group === 'down'" class="fas fa-skull-crossbones red" />
+						{{ group.capitalize() }} ({{ targets.length }})
 					</h2>
 					<transition-group
 						:key="group"
-						tag="ul" 
+						tag="ul"
 						class="targets"
 						:class="`${group}_targets`"
-						name="group" 
-						enter-active-class="animated animate__fadeInUp" 
+						name="group"
+						enter-active-class="animated animate__fadeInUp"
 						leave-active-class="animated animate__fadeOutDown"
 					>
-						<li 
+						<li
 							v-for="(entity, i) in targets"
-							class="d-flex justify-content-between" 
-							:key="entity.key" 
-							:class="{ 
-								'targeted': targeted.includes(entity.key), 
-								'top': _active[0].key === entity.key && encounter.turn !== 0
+							class="d-flex justify-content-between"
+							:key="entity.key"
+							:class="{
+								targeted: targeted.includes(entity.key),
+								top: _active[0].key === entity.key && encounter.turn !== 0,
 							}"
 						>
-							<span 
-								class="topinfo d-flex justify-content-between" 
+							<span
+								class="topinfo d-flex justify-content-between"
 								v-if="group === 'active' && _active[0].key == entity.key && encounter.turn != 0"
 							>
 								Top of the round
@@ -68,45 +80,56 @@
 								</div>
 							</span>
 
-							<div class="target" 
-								v-touch-hold.mouse="event => selectTarget(event, 'multi', entity.key)"
+							<div
+								class="target"
+								v-touch-hold.mouse="(event) => selectTarget(event, 'multi', entity.key)"
 								@click="selectTarget($event, 'single', entity.key)"
-								v-shortkey="[i]" @shortkey="set_targeted({ type: 'single', key: entity.key })">
+								v-shortkey="[i]"
+								@shortkey="set_targeted({ type: 'single', key: entity.key })"
+							>
 								<TargetItem :item="entity.key" :i="i" :initiative="true" :showReminders="true" />
 							</div>
 
 							<div v-if="!entity.active" class="d-flex">
-								<a class="btn btn-sm btn-clear mx-1" 
+								<a
+									class="btn btn-sm btn-clear mx-1"
 									v-if="entity.addNextRound"
-									v-on:click.stop="add_next_round({key: entity.key, action: 'tag', value: false})">
-									<i aria-hidden="true" class="fas fa-check green"></i>
+									v-on:click.stop="add_next_round({ key: entity.key, action: 'tag', value: false })"
+								>
+									<i aria-hidden="true" class="fas fa-check green" />
 									<q-tooltip anchor="top middle" self="center middle">
 										Will be added next round
 									</q-tooltip>
 								</a>
-								<a class="btn btn-sm btn-clear mx-1" 
+								<a
+									class="btn btn-sm btn-clear mx-1"
 									v-if="!entity.addNextRound"
-									v-on:click.stop="add_next_round({key: entity.key, action: 'tag', value: true})">
-									<i aria-hidden="true" class="fas fa-check neutral-2"></i>
+									v-on:click.stop="add_next_round({ key: entity.key, action: 'tag', value: true })"
+								>
+									<i aria-hidden="true" class="fas fa-check neutral-2" />
 									<q-tooltip anchor="top middle" self="center middle">
 										Click to add next round
 									</q-tooltip>
 								</a>
-								<a class="btn btn-sm bg-neutral-5" 
-									@click="add_next_round({key: entity.key, action: 'set'})">
-									<i aria-hidden="true" class="fas fa-arrow-up"></i>
-									<q-tooltip anchor="top middle" self="center middle">
-										Add now
-									</q-tooltip>
+								<a
+									class="btn btn-sm bg-neutral-5"
+									@click="add_next_round({ key: entity.key, action: 'set' })"
+								>
+									<i aria-hidden="true" class="fas fa-arrow-up" />
+									<q-tooltip anchor="top middle" self="center middle"> Add now </q-tooltip>
 								</a>
 							</div>
 							<a class="options">
-								<i aria-hidden="true" class="fal fa-ellipsis-v"></i>
-								<q-popup-proxy :dark="$store.getters.theme === 'dark'" anchor="bottom right" self="top right" :breakpoint="576">
+								<i aria-hidden="true" class="fal fa-ellipsis-v" />
+								<q-popup-proxy
+									:dark="$store.getters.theme === 'dark'"
+									anchor="bottom right"
+									self="top right"
+									:breakpoint="576"
+								>
 									<target-menu :entity="entity" />
 								</q-popup-proxy>
 							</a>
-
 						</li>
 					</transition-group>
 				</template>
@@ -116,155 +139,173 @@
 </template>
 
 <script>
-	import _ from 'lodash';
-	import { mapGetters, mapActions } from 'vuex';
-	import TargetItem from 'src/components/combat/TargetItem.vue';
-	import TargetMenu from 'src/components/combat/TargetMenu.vue';
+import _ from "lodash";
+import { mapGetters, mapActions } from "vuex";
+import TargetItem from "src/components/combat/TargetItem.vue";
+import TargetMenu from "src/components/combat/TargetMenu.vue";
 
-	export default {
-		name: 'Targets',
-		components: {TargetItem, TargetMenu},
-		props: ['_active','_idle'],
-		data() {
-			return {
-				userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
-				currentTarget: {},
-				setShadow: 0
+export default {
+	name: "Targets",
+	components: { TargetItem, TargetMenu },
+	props: ["_active", "_idle"],
+	data() {
+		return {
+			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
+			currentTarget: {},
+			setShadow: 0,
+		};
+	},
+	computed: {
+		...mapGetters([
+			"campaignId",
+			"encounterId",
+			"encounter",
+			"entities",
+			"targeted",
+			"userSettings",
+			"test",
+		]),
+		groups() {
+			return [
+				{
+					group: "active",
+					targets: this._targets,
+				},
+				{
+					group: "idle",
+					targets: this._idle,
+				},
+				{
+					group: "down",
+					targets: this._down,
+				},
+			];
+		},
+		_targets: function () {
+			let t = this.encounter.turn;
+			let turns = Object.keys(this._active);
+			let order = turns.slice(t).concat(turns.slice(0, t));
+			return Array.from(order, (i) => this._active[i]);
+		},
+		_down: function () {
+			return _.chain(this.entities)
+				.filter(function (entity, key) {
+					entity.key = key;
+					return !!entity.down;
+				})
+				.orderBy(function (entity) {
+					return parseInt(entity.initiative);
+				}, "desc")
+				.value();
+		},
+		//Count NPC's that are down but still in active list
+		_activeDown: function () {
+			return _.chain(this._targets)
+				.filter(function (entity) {
+					return entity.curHp == 0 && entity.entityType == "npc";
+				})
+				.sortBy("name", "desc")
+				.value();
+		},
+		_addedNextRound: function () {
+			return _.chain(this._idle)
+				.filter(function (entity) {
+					return !!entity.addNextRound;
+				})
+				.sortBy("name", "desc")
+				.value();
+		},
+		showKeybinds() {
+			return this.userSettings && this.userSettings.general
+				? this.userSettings.general.keyBinds
+				: undefined;
+		},
+	},
+	methods: {
+		...mapActions([
+			"setSlide",
+			"set_hidden",
+			"set_targeted",
+			"set_stable",
+			"remove_entity",
+			"add_next_round",
+		]),
+		setHidden(key, hidden) {
+			if (key) {
+				this.set_hidden({
+					key: key,
+					hidden: hidden,
+				});
+			} else {
+				this.$snotify.error("Select a target", "Hide entity", {});
 			}
 		},
-		computed: {
-			...mapGetters([
-				'campaignId',
-				'encounterId',
-				'encounter',
-				'entities',
-				'targeted',
-				'userSettings'
-			]),
-			groups() {
-				return [
-					{ 
-						group: "active",
-						targets: this._targets
-					},
-					{
-						group: "idle",
-						targets: this._idle
-					},
-					{
-						group: "down",
-						targets: this._down
-					}
-				]
-			},
-			_targets: function() {
-				let t = this.encounter.turn
-				let turns = Object.keys(this._active)
-				let order = turns.slice(t).concat(turns.slice(0,t))
-				return Array.from(order, i => this._active[i])
-			},
-			_down: function() {
-				return _.chain(this.entities)
-					.filter(function(entity, key) {
-						entity.key = key
-						return !!entity.down;
-					})
-					.orderBy(function(entity){
-						return parseInt(entity.initiative)
-					} , 'desc')
-					.value()
-			},
-			//Count NPC's that are down but still in active list
-			_activeDown: function() {
-				return _.chain(this._targets)
-					.filter(function(entity) {
-						return entity.curHp == 0 && entity.entityType == 'npc';
-					})
-					.sortBy('name' , 'desc')
-					.value()
-			},
-			_addedNextRound: function() {
-				return _.chain(this._idle)
-					.filter(function(entity) {
-						return !!entity.addNextRound;
-					})
-					.sortBy('name' , 'desc')
-					.value()
-			},
-			showKeybinds() {
-				return (this.userSettings && this.userSettings.general) ? this.userSettings.general.keyBinds : undefined;
-			},
+		shadow() {
+			this.setShadow = this.$refs.scroll.scrollPosition;
 		},
-		methods: {
-			...mapActions([
-				'setSlide',
-				'set_hidden',
-				'set_targeted',
-				'set_stable',
-				'remove_entity',
-				'add_next_round',
-			]),
-			setHidden(key, hidden) {
-				if(key) {
-					this.set_hidden({
-						key: key,
-						hidden: hidden
-					})
-				} else {
-					this.$snotify.error('Select a target', 'Hide entity', {
-					});
-				}
-			},
-			shadow() {
-				this.setShadow = this.$refs.scroll.scrollPosition;
-			},
-			remove(key, name) {
-				this.$snotify.error('Are you sure you want to remove "' + name + '" from this encounter?', 'Delete character', {
+		remove(key, name) {
+			this.$snotify.error(
+				'Are you sure you want to remove "' + name + '" from this encounter?',
+				"Delete character",
+				{
 					buttons: [
-						{ text: 'Yes', action: (toast) => { this.remove_entity(key); this.$snotify.remove(toast.id); }, bold: false},
-						{ text: 'No', action: (toast) => { this.$snotify.remove(toast.id); }, bold: true},
-					]
-				});
-			},
-			selectTarget(e, type, key) {
-				type = (e.shiftKey) ? "multi" : type;
-				//Select the target
-				this.set_targeted({
-					type,
-					key
-				});
-			},
-			cycle_target(event) {
-				const lastSelected = this.targeted[this.targeted.length - 1];
-				const type = (event.srcKey === 'upSingle' || event.srcKey === 'downSingle') ? "single" : "multi"; //Multitarget or not
-				//Create array with keys of all targets
-				const targetsArray = this._targets.map((item) => {
-					return item.key;
-				});
-				const current = targetsArray.indexOf(lastSelected); //Set the target from where we're gonna select the next
-
-				let index;
-				//Select the next target, either up or down based on the key that's pressed
-				if((event.srcKey === 'downSingle' || event.srcKey === 'downMultiple')) {
-					index = ((current + 1) < this._targets.length) ? current + 1 : 0;
-				} else {
-					index = ((current - 1) < 0) ? targetsArray.length - 1 : current - 1;
+						{
+							text: "Yes",
+							action: (toast) => {
+								this.remove_entity(key);
+								this.$snotify.remove(toast.id);
+							},
+							bold: false,
+						},
+						{
+							text: "No",
+							action: (toast) => {
+								this.$snotify.remove(toast.id);
+							},
+							bold: true,
+						},
+					],
 				}
-				const target = targetsArray[index];
+			);
+		},
+		selectTarget(e, type, key) {
+			type = e.shiftKey ? "multi" : type;
+			//Select the target
+			this.set_targeted({
+				type,
+				key,
+			});
+		},
+		cycle_target(event) {
+			const lastSelected = this.targeted[this.targeted.length - 1];
+			const type =
+				event.srcKey === "upSingle" || event.srcKey === "downSingle" ? "single" : "multi"; //Multitarget or not
+			//Create array with keys of all targets
+			const targetsArray = this._targets.map((item) => {
+				return item.key;
+			});
+			const current = targetsArray.indexOf(lastSelected); //Set the target from where we're gonna select the next
 
-				//Select the target
-				this.set_targeted({
-					type,
-					key: target
-				});
-				
+			let index;
+			//Select the next target, either up or down based on the key that's pressed
+			if (event.srcKey === "downSingle" || event.srcKey === "downMultiple") {
+				index = current + 1 < this._targets.length ? current + 1 : 0;
+			} else {
+				index = current - 1 < 0 ? targetsArray.length - 1 : current - 1;
 			}
+			const target = targetsArray[index];
+
+			//Select the target
+			this.set_targeted({
+				type,
+				key: target,
+			});
 		},
-	}
+	},
+};
 </script>
 
 <style lang="scss" scoped>
-
 #targets {
 	grid-area: targets;
 	overflow: hidden;
@@ -285,7 +326,7 @@
 			line-height: 31px;
 
 			&.shadow {
-				box-shadow: 0 0 10px rgba(0,0,0, 0.9); 
+				box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
 			}
 		}
 	}
@@ -314,7 +355,7 @@
 	}
 }
 .q-scrollarea {
-	padding:0 0 30px 0;
+	padding: 0 0 30px 0;
 	height: calc(100% - 55px);
 }
 ul.targets {
@@ -357,13 +398,15 @@ ul.targets {
 	}
 }
 .targets-move {
-  transition: transform .6s;
+	transition: transform 0.6s;
 }
-.fadeInUp, .fadeInDown {
-	animation-delay: .6s;
+.fadeInUp,
+.fadeInDown {
+	animation-delay: 0.6s;
 }
 @media only screen and (max-width: 576px) {
-	#targets, .q-scrollarea {
+	#targets,
+	.q-scrollarea {
 		overflow: visible !important;
 		padding-bottom: 0;
 
@@ -374,4 +417,4 @@ ul.targets {
 		}
 	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index 2ed37aec1..2f5a83394 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -12,50 +12,91 @@
 						</q-item>
 						<q-separator />
 						<q-item
-							v-if="!demo" clickable v-close-popup
-							@click="setSlide({
-								show: true,
-								type: 'slides/Broadcast',
-								data: {
-									campaign_id: $route.params.campid,
-									encounter_id: $route.params.encid
-								}
-							})"
+							v-if="!demo && !test"
+							clickable
+							v-close-popup
+							@click="
+								setSlide({
+									show: true,
+									type: 'slides/Broadcast',
+									data: {
+										campaign_id: $route.params.campid,
+										encounter_id: $route.params.encid,
+									},
+								})
+							"
 						>
 							<q-item-section avatar>
-								<i aria-hidden="true" class="far fa-dot-circle" :class="{ red: broadcast.live === $route.params.campid }" />
+								<i
+									aria-hidden="true"
+									class="far fa-dot-circle"
+									:class="{ red: broadcast.live === $route.params.campid }"
+								/>
 							</q-item-section>
 							<q-item-section>
 								{{ broadcast.live !== $route.params.campid ? "Go live" : "Stop broadcast" }}
 							</q-item-section>
 						</q-item>
-						<q-item v-if="encounter.audio" clickable v-close-popup @click="open_audio_link(encounter.audio)">
-							<q-item-section avatar><q-icon :class="audio_icons[audio_link_type].icon" :style="`color:${audio_icons[audio_link_type].color};`"></q-icon></q-item-section>
+						<q-item
+							v-if="encounter.audio"
+							clickable
+							v-close-popup
+							@click="open_audio_link(encounter.audio)"
+						>
+							<q-item-section avatar
+								><q-icon
+									:class="audio_icons[audio_link_type].icon"
+									:style="`color:${audio_icons[audio_link_type].color};`"
+								></q-icon
+							></q-item-section>
 							<q-item-section>Audio Link</q-item-section>
 						</q-item>
-						<q-item v-if="!demo" clickable v-close-popup @click="setSlide({show: true, type: 'settings/Encounter'})">
+						<q-item
+							v-if="!demo"
+							clickable
+							v-close-popup
+							@click="setSlide({ show: true, type: 'settings/Encounter' })"
+						>
 							<q-item-section avatar><i aria-hidden="true" class="fas fa-cogs" /></q-item-section>
 							<q-item-section>Settings</q-item-section>
 						</q-item>
-						<q-item v-if="!demo" clickable v-close-popup @click="setSlide({show: true, type: 'settings/TrackEncounter'})">
-							<q-item-section avatar><i aria-hidden="true" class="fas fa-desktop" /></q-item-section>
+						<q-item
+							v-if="!demo && !test"
+							clickable
+							v-close-popup
+							@click="setSlide({ show: true, type: 'settings/TrackEncounter' })"
+						>
+							<q-item-section avatar
+								><i aria-hidden="true" class="fas fa-desktop"
+							/></q-item-section>
 							<q-item-section>Public initiative settings</q-item-section>
 						</q-item>
-						<q-item clickable v-close-popup v-if="demo"  @click="$router.replace('/tools/encounter-builder/build-encounter')">
-							<q-item-section avatar><i aria-hidden="true" class="fas fa-hammer-war" /></q-item-section>
+						<q-item
+							clickable
+							v-close-popup
+							v-if="demo"
+							@click="$router.replace('/tools/encounter-builder/build-encounter')"
+						>
+							<q-item-section avatar
+								><i aria-hidden="true" class="fas fa-hammer-war"
+							/></q-item-section>
 							<q-item-section>Build encounter</q-item-section>
 						</q-item>
 						<q-item clickable v-close-popup v-if="demo" @click="reset_demo()">
-							<q-item-section avatar><i aria-hidden="true" class="far fa-sync-alt" /></q-item-section>
+							<q-item-section avatar
+								><i aria-hidden="true" class="far fa-sync-alt"
+							/></q-item-section>
 							<q-item-section>Reset encounter</q-item-section>
 						</q-item>
-						<q-item clickable v-close-popup @click="confirmFinish()">
+						<q-item v-if="!test" clickable v-close-popup @click="confirmFinish()">
 							<q-item-section avatar><i aria-hidden="true" class="fas fa-check" /></q-item-section>
 							<q-item-section>Finish encounter</q-item-section>
 						</q-item>
 						<q-separator />
-						<q-item clickable v-close-popup @click="$router.replace(demo ? `/` : `/content/campaigns/${$route.params.campid}`)">
-							<q-item-section avatar><i aria-hidden="true" class="fas fa-chevron-left" /></q-item-section>
+						<q-item clickable v-close-popup @click="$router.replace(leaveRoute)">
+							<q-item-section avatar
+								><i aria-hidden="true" class="fas fa-chevron-left"
+							/></q-item-section>
 							<q-item-section>Leave encounter</q-item-section>
 						</q-item>
 					</q-list>
@@ -70,12 +111,11 @@
 			<a
 				class="handler neutral-2"
 				@click="prevTurn()"
-				v-shortkey="['shift', 'arrowleft']" @shortkey="prevTurn()"
+				v-shortkey="['shift', 'arrowleft']"
+				@shortkey="prevTurn()"
 			>
 				<i aria-hidden="true" class="fas fa-step-backward" />
-				<q-tooltip anchor="top middle" self="center middle">
-					Previous turn
-				</q-tooltip>
+				<q-tooltip anchor="top middle" self="center middle"> Previous turn </q-tooltip>
 			</a>
 
 			<template v-if="encounter.round">
@@ -86,24 +126,23 @@
 				<div>
 					<div class="header">Turn</div>
 					<div class="number">
-						{{ encounter.turn + 1 }}<span class="neutral-3"><span class="neutral-4">/</span>{{ active_len }}</span>
+						{{ encounter.turn + 1
+						}}<span class="neutral-3"><span class="neutral-4">/</span>{{ active_len }}</span>
 					</div>
 				</div>
 			</template>
 
-			<a class="handler neutral-2"
+			<a
+				class="handler neutral-2"
 				@click="nextTurn()"
-				v-shortkey="['shift', 'arrowright']" @shortkey="nextTurn()">
+				v-shortkey="['shift', 'arrowright']"
+				@shortkey="nextTurn()"
+			>
 				<i aria-hidden="true" class="fas fa-step-forward" />
-				<q-tooltip anchor="top middle" self="center middle">
-					Next turn
-				</q-tooltip>
+				<q-tooltip anchor="top middle" self="center middle"> Next turn </q-tooltip>
 			</a>
 		</div>
-		<div v-else>
-			Set Initiative
-		</div>
-
+		<div v-else>Set Initiative</div>
 
 		<div class="d-flex justify-content-end center">
 			<span v-if="encounter.round > 0" class="timer">
@@ -113,26 +152,41 @@
 
 			<!-- BROADCASTING -->
 			<span
-				v-if="!demo"
-				@click="setSlide({
-					show: true,
-					type: 'slides/Broadcast',
-					data: {
-						campaign_id: $route.params.campid,
-						encounter_id: $route.params.encid
-					}
-				})"
+				v-if="!demo && !test"
+				@click="
+					setSlide({
+						show: true,
+						type: 'slides/Broadcast',
+						data: {
+							campaign_id: $route.params.campid,
+							encounter_id: $route.params.encid,
+						},
+					})
+				"
 				class="live"
-				:class="{'active': broadcast.live === $route.params.campid }"
+				:class="{ active: broadcast.live === $route.params.campid }"
 			>
-					{{ broadcast.live === $route.params.campid ? "" : "go" }} live
+				{{ broadcast.live === $route.params.campid ? "" : "go" }} live
 			</span>
+			<button
+				v-if="test"
+				class="btn btn-sm bg-orange"
+				@click="
+					setSlide({
+						show: true,
+						type: 'slides/encounter/TestMode',
+					})
+				"
+			>
+				<i class="fas fa-flask mr-1" aria-hidden="true" />
+				Test mode
+			</button>
 
 			<template v-if="encounter.round > 0">
 				<div
 					v-if="requests && Object.keys(requests).length"
 					class="requests d-none d-md-block"
-					@click="setSlide({show: true, type: 'combat/side/Requests'})"
+					@click="setSlide({ show: true, type: 'combat/side/Requests' })"
 				>
 					<i aria-hidden="true" class="fas fa-bell" />
 					<div class="notifications bg-red white animated zoomIn">
@@ -141,10 +195,13 @@
 				</div>
 
 				<div
-					class="info" @click="setSlide({
-						show: true,
-						type: 'combat/side/Side'
-					})"
+					class="info"
+					@click="
+						setSlide({
+							show: true,
+							type: 'combat/side/Side',
+						})
+					"
 				>
 					<i aria-hidden="true" class="fas fa-bars" />
 				</div>
@@ -152,7 +209,7 @@
 
 			<template v-else>
 				<span class="d-none d-md-block">
-					<router-link v-if="!demo" :to="'/content/campaigns/' + $route.params.campid" class="btn bg-neutral-8 ml-2">
+					<router-link v-if="!demo" :to="leaveRoute" class="btn bg-neutral-8 ml-2">
 						<i aria-hidden="true" class="fas fa-arrow-left" />
 						Leave
 					</router-link>
@@ -169,84 +226,101 @@
 </template>
 
 <script>
-	import { mapActions, mapGetters } from "vuex";
-	import { remindersMixin } from "src/mixins/reminders";
-	import { audio } from "src/mixins/audio";
+import { mapActions, mapGetters } from "vuex";
+import { remindersMixin } from "src/mixins/reminders";
+import { audio } from "src/mixins/audio";
 
-	export default {
-		name: "Turns",
-		mixins: [remindersMixin, audio],
-		props: ["active_len", "current", "next", "settings"],
-		data () {
-			return {
-				demo: this.$route.name === "Demo",
-				userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined
-			}
+export default {
+	name: "Turns",
+	mixins: [remindersMixin, audio],
+	props: ["active_len", "current", "next", "settings"],
+	data() {
+		return {
+			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
+		};
+	},
+	computed: {
+		...mapGetters(["encounter", "broadcast", "requests", "test", "demo"]),
+		timer() {
+			return this.settings ? this.settings.timer : 0;
 		},
-		computed: {
-			...mapGetters([
-				"encounter",
-				"broadcast",
-				"requests"
-			]),
-			timer() {
-				return (this.settings) ? this.settings.timer : 0;
+		leaveRoute() {
+			if (this.demo) {
+				return "/";
 			}
+			if (this.test) {
+				return `/content/campaigns/${this.$route.params.campid}/${this.$route.params.encid}`;
+			}
+			return `/content/campaigns/${this.$route.params.campid}`;
+		},
+	},
+	methods: {
+		...mapActions([
+			"set_turn",
+			"update_round",
+			"set_targeted",
+			"setSlide",
+			"set_finished",
+			"reset_demo",
+		]),
+		startEncounter() {
+			this.set_turn({ turn: 0, round: 1 });
+			this.checkReminders(this.next, "startTurn");
 		},
-		methods: {
-			...mapActions([
-				"set_turn",
-				"update_round",
-				"set_targeted",
-				"setSlide",
-				"set_finished",
-				"reset_demo"
-			]),
-			startEncounter() {
-				this.set_turn({turn: 0, round: 1});
-				this.checkReminders(this.next, "startTurn");
-			},
-			nextTurn() {
-				let turn = this.encounter.turn + 1
-				let round = this.encounter.round
+		nextTurn() {
+			let turn = this.encounter.turn + 1;
+			let round = this.encounter.round;
 
-				if (turn >= this.active_len) {
-					turn = 0
-					round++
-					this.update_round()
-				}
-				this.set_turn({turn, round})
-				this.set_targeted({ type: "untarget", key: "all" });
-				this.checkReminders(this.current, "endTurn");
-			},
-			prevTurn() {
-				let turn = this.encounter.turn - 1
-				let round = this.encounter.round
-				if (turn < 0) {
-					turn = this.active_len - 1
-					round--
-				}
-				if (round === 0) {
-					turn = 0
-				}
-				this.set_turn({turn, round});
-				this.set_targeted({ type: "untarget", key: "all" });
-			},
-			confirmFinish() {
-				this.$snotify.error("Are you sure you want to finish the encounter?", "Finish Encounter", {
-					position: "centerCenter",
-					timeout: 0,
-					buttons: [
-						{ text: "Finish", action: (toast) => { this.finish(); this.$snotify.remove(toast.id); }, bold: false},
-						{ text: "Cancel", action: (toast) => { this.$snotify.remove(toast.id); }, bold: true},
-					]
-				});
-			},
-			finish() {
-				this.set_finished();
+			if (turn >= this.active_len) {
+				turn = 0;
+				round++;
+				this.update_round();
 			}
-		}
-	}
+			this.set_turn({ turn, round });
+			this.set_targeted({ type: "untarget", key: "all" });
+			this.checkReminders(this.current, "endTurn");
+		},
+		prevTurn() {
+			let turn = this.encounter.turn - 1;
+			let round = this.encounter.round;
+			if (turn < 0) {
+				turn = this.active_len - 1;
+				round--;
+			}
+			if (round === 0) {
+				turn = 0;
+			}
+			this.set_turn({ turn, round });
+			this.set_targeted({ type: "untarget", key: "all" });
+		},
+		confirmFinish() {
+			this.$snotify.error("Are you sure you want to finish the encounter?", "Finish Encounter", {
+				position: "centerCenter",
+				timeout: 0,
+				buttons: [
+					{
+						text: "Finish",
+						action: (toast) => {
+							this.finish();
+							this.$snotify.remove(toast.id);
+						},
+						bold: false,
+					},
+					{
+						text: "Cancel",
+						action: (toast) => {
+							this.$snotify.remove(toast.id);
+						},
+						bold: true,
+					},
+				],
+			});
+		},
+		finish() {
+			this.set_finished();
+		},
+	},
+};
 </script>
 
 <style lang="scss" scoped>
@@ -267,6 +341,13 @@
 	.live {
 		cursor: pointer;
 	}
+	.test {
+		font-size: 15px;
+		padding: 0 5px;
+		line-height: 28px;
+		background-color: $orange;
+		border-radius: $border-radius;
+	}
 	.edit {
 		font-size: 28px;
 
@@ -283,7 +364,6 @@
 		padding: 0 20px;
 		line-height: 40px;
 
-
 		&:hover {
 			color: $blue !important;
 		}
@@ -299,7 +379,8 @@
 			line-height: 30px;
 		}
 	}
-	.requests, .info {
+	.requests,
+	.info {
 		padding-top: 3px;
 		width: 26px;
 		margin: 0 15px;
@@ -340,7 +421,7 @@
 
 @media only screen and (max-width: 1000px) {
 	#turns {
-		.live { 
+		.live {
 			display: none;
 		}
 		.info {
@@ -386,5 +467,4 @@
 		}
 	}
 }
-
 </style>
diff --git a/src/components/combat/actions/Actions.vue b/src/components/combat/actions/Actions.vue
index b2db8a5d4..53b0df00b 100644
--- a/src/components/combat/actions/Actions.vue
+++ b/src/components/combat/actions/Actions.vue
@@ -25,12 +25,12 @@
 							>
 								<i
 									aria-hidden="true"
-									v-if="
-										['monster', 'player', 'companion', 'environment'].includes(
-											entitiesList[doneBy].img
-										)
-									"
-									:class="`hki-${entitiesList[doneBy].img}`"
+									v-if="!entitiesList[doneBy].img"
+									:class="`hki-${
+										entitiesList[doneBy].entityType === 'npc'
+											? 'monster'
+											: entitiesList[doneBy].entityType
+									}`"
 								/>
 							</span>
 						</q-item-section>
@@ -59,8 +59,10 @@
 							>
 								<i
 									aria-hidden="true"
-									v-if="['monster', 'player', 'companion', 'environment'].includes(scope.opt.img)"
-									:class="`hki-${scope.opt.img}`"
+									v-if="!scope.opt.img"
+									:class="`hki-${
+										scope.opt.entityType === 'npc' ? 'monster' : scope.opt.entityType
+									}`"
 								/>
 							</span>
 						</q-item-section>
@@ -187,7 +189,7 @@ export default {
 			active.unshift({
 				key: "environment",
 				name: "Environment",
-				img: "environment",
+				entityType: "environment",
 			});
 			return active;
 		},
@@ -196,7 +198,6 @@ export default {
 			list.environment = {
 				key: "environment",
 				name: "Environment",
-				img: "environment",
 				entityType: "environment",
 			};
 			return list;
diff --git a/src/components/combat/actions/Roll.vue b/src/components/combat/actions/Roll.vue
index adffebd20..84aec0020 100644
--- a/src/components/combat/actions/Roll.vue
+++ b/src/components/combat/actions/Roll.vue
@@ -152,6 +152,7 @@
 
 
 
+
 														}}) </template
 													><template v-else>{{ roll.fixed_val }})</template>
 													{{ roll_index+1 &lt; action.action_list[0].rolls.length ? "+" : "" }}
@@ -320,7 +321,6 @@ export default {
 	data() {
 		return {
 			damage_type_icons: damage_type_icons,
-			demo: this.$route.name === "Demo",
 			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
 			campaignId: this.$route.params.campid,
 			encounterId: this.$route.params.encid,
diff --git a/src/components/combat/actions/custom/CustomRoll.vue b/src/components/combat/actions/custom/CustomRoll.vue
index 369e16c0d..86c52b2eb 100644
--- a/src/components/combat/actions/custom/CustomRoll.vue
+++ b/src/components/combat/actions/custom/CustomRoll.vue
@@ -116,7 +116,6 @@ export default {
 	data() {
 		return {
 			damage_types: damage_types,
-			demo: this.$route.name === "Demo",
 			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
 			campaignId: this.$route.params.campid,
 			encounterId: this.$route.params.encid,
diff --git a/src/components/combat/side/Dmg.vue b/src/components/combat/side/Dmg.vue
index b6fc6de6b..63ef88a48 100644
--- a/src/components/combat/side/Dmg.vue
+++ b/src/components/combat/side/Dmg.vue
@@ -6,20 +6,24 @@
 				<h3>{{ type.name.capitalize() }}</h3>
 				<ul>
 					<li v-for="(entity, index) in _meters[type.name]" :key="index" class="health">
-						<div 
-							class="img" 
+						<div
+							class="img"
 							:style="{
 								'background-image': 'url(' + entity.img + ')',
 								'border-color': entity.color_label ? entity.color_label : ``,
-								'color': entity.color_label ? entity.color_label : ``
+								color: entity.color_label ? entity.color_label : ``,
 							}"
 						>
-							<i aria-hidden="true" v-if="['monster', 'player', 'companion'].includes(entity.img)" :class="`hki-${entity.img}`" />
+							<i
+								aria-hidden="true"
+								v-if="!entity.img"
+								:class="`hki-${entity.entityType === 'npc' ? 'monster' : entity.entityType}`"
+							/>
 						</div>
-						<q-linear-progress 
-							size="30px" 
-							:color="type.name === 'damage' ? 'negative' : 'positive'" 
-							:value="percentage(entity[type.name], type.name)/100"
+						<q-linear-progress
+							size="30px"
+							:color="type.name === 'damage' ? 'negative' : 'positive'"
+							:value="percentage(entity[type.name], type.name) / 100"
 						>
 							<div class="info">
 								<span class="name">
@@ -30,10 +34,10 @@
 								</span>
 								<b class="numbers">
 									<template v-if="entity[type.name] < 10000">{{ entity[type.name] }}</template>
-									<template v-else>{{ entity[type.name] | numeral('0.0a') }}</template>
+									<template v-else>{{ entity[type.name] | numeral("0.0a") }}</template>
 									<template v-if="entity[type.over]">
 										(<template v-if="entity[type.over] < 10000">{{ entity[type.over] }} </template>
-										<template v-else>{{ entity[type.over] | numeral('0.0a') }} </template> 
+										<template v-else>{{ entity[type.over] | numeral("0.0a") }} </template>
 										<small>over</small>)
 									</template>
 								</b>
@@ -47,61 +51,57 @@
 </template>
 
 <script>
-	import _ from 'lodash'
-	import { mapGetters } from 'vuex'
+import _ from "lodash";
+import { mapGetters } from "vuex";
 
-	export default {
-		name: 'Dmg',
+export default {
+	name: "Dmg",
 
-		data() {
-			return {
-				types: {
-					'damage': { name: 'damage', over: 'overkill' },
-					'healing': { name: 'healing', over: 'overhealing'},
-				}
-			}
-		},
-		computed: {
-			...mapGetters([
-				'entities',
-			]),
-			_meters: function() {
-				return {
-					'damage': _.chain(this.entities)
-						.filter(function(entity, key) {
-							entity.key = key
-							return entity.damage > 0;
-						})
-						.orderBy(function(entity){
-							return parseInt(entity.damage)
-						} , 'desc')
-						.value(),
-					'healing': _.chain(this.entities)
-						.filter(function(entity, key) {
-							entity.key = key
-							return entity.healing > 0;
-						})
-						.orderBy(function(entity){
-							return parseInt(entity.healing)
-						} , 'desc')
-						.value()
-				}
+	data() {
+		return {
+			types: {
+				damage: { name: "damage", over: "overkill" },
+				healing: { name: "healing", over: "overhealing" },
 			},
+		};
+	},
+	computed: {
+		...mapGetters(["entities"]),
+		_meters: function () {
+			return {
+				damage: _.chain(this.entities)
+					.filter(function (entity, key) {
+						entity.key = key;
+						return entity.damage > 0;
+					})
+					.orderBy(function (entity) {
+						return parseInt(entity.damage);
+					}, "desc")
+					.value(),
+				healing: _.chain(this.entities)
+					.filter(function (entity, key) {
+						entity.key = key;
+						return entity.healing > 0;
+					})
+					.orderBy(function (entity) {
+						return parseInt(entity.healing);
+					}, "desc")
+					.value(),
+			};
 		},
-		methods: {
-			percentage(input, type) {
+	},
+	methods: {
+		percentage(input, type) {
+			var total = 0;
 
-				var total = 0;
-
-				for(var key in this._meters[type]) {
-					var amount = this._meters[type][key][type]
-					total = total + amount;
-				}
-				var percentage = Math.floor(input / total * 100)
-				return percentage;
-			},
+			for (var key in this._meters[type]) {
+				var amount = this._meters[type][key][type];
+				total = total + amount;
+			}
+			return Math.floor((input / total) * 100);
 		},
-	}
+	},
+};
 </script>
 
 <style lang="scss" scoped>
@@ -121,8 +121,7 @@ ul {
 		grid-template-columns: 30px 1fr;
 		grid-template-rows: auto;
 		grid-gap: 0;
-		grid-template-areas: 
-		"img hp-bar";
+		grid-template-areas: "img hp-bar";
 
 		margin-bottom: 1px;
 
@@ -133,7 +132,7 @@ ul {
 			background-repeat: no-repeat;
 			background-size: cover;
 			grid-area: img;
-			width: 30px; 
+			width: 30px;
 			height: 30px;
 			border: solid 1px transparent;
 			font-size: 22px;
@@ -142,7 +141,7 @@ ul {
 				vertical-align: 1px;
 			}
 		}
-		.q-linear-progress { 
+		.q-linear-progress {
 			height: 30px;
 			line-height: 30px;
 			background-color: $neutral-7;
@@ -157,10 +156,10 @@ ul {
 				grid-template-columns: auto max-content;
 				grid-template-rows: auto;
 				grid-gap: 0;
-				grid-template-areas: 
-				"name numbers";
+				grid-template-areas: "name numbers";
 
-				span.name, .numbers {
+				span.name,
+				.numbers {
 					color: $neutral-1;
 				}
 				.numbers {
@@ -170,7 +169,7 @@ ul {
 				span.name {
 					font-weight: bold !important;
 					padding-left: 5px;
-					white-space: nowrap; 
+					white-space: nowrap;
 					overflow: hidden;
 					text-overflow: ellipsis;
 				}
diff --git a/src/components/slides/Transform.vue b/src/components/slides/Transform.vue
index 95fcbf425..43f333f08 100644
--- a/src/components/slides/Transform.vue
+++ b/src/components/slides/Transform.vue
@@ -1,17 +1,27 @@
 <template>
 	<div class="pb-5">
-		<h2>Transform <span class="blue">{{ entity.name }}</span></h2>
-		<a v-if="entity.transformed" @click="remove()" class="btn btn-block bg-red">Remove transformation</a>
+		<h2>
+			Transform <span class="blue">{{ entity.name }}</span>
+		</h2>
+		<a v-if="entity.transformed" @click="remove()" class="btn btn-block bg-red"
+			>Remove transformation</a
+		>
 		<ValidationObserver v-else v-slot="{ handleSubmit }">
 			<q-form @submit="handleSubmit(edit)">
 				<div class="row q-col-gutter-md">
 					<div class="col">
-						<ValidationProvider rules="between:1,99|required" name="AC" v-slot="{ errors, invalid, validated }">
-							<q-input 
-								:dark="$store.getters.theme === 'dark'" square filled
+						<ValidationProvider
+							rules="between:1,99|required"
+							name="AC"
+							v-slot="{ errors, invalid, validated }"
+						>
+							<q-input
+								:dark="$store.getters.theme === 'dark'"
+								square
+								filled
 								label="Armor class"
 								autocomplete="off"
-								type="number" 
+								type="number"
 								class="mb-2"
 								v-model="transAc"
 								min="1"
@@ -21,14 +31,20 @@
 							/>
 						</ValidationProvider>
 					</div>
-					
+
 					<div class="col">
-						<ValidationProvider rules="between:1,9999|required" name="HP" v-slot="{ errors, invalid, validated }">
-							<q-input 
-								:dark="$store.getters.theme === 'dark'" square filled
+						<ValidationProvider
+							rules="between:1,9999|required"
+							name="HP"
+							v-slot="{ errors, invalid, validated }"
+						>
+							<q-input
+								:dark="$store.getters.theme === 'dark'"
+								square
+								filled
 								label="Hit points"
 								autocomplete="off"
-								type="number" 
+								type="number"
 								min="1"
 								max="9999"
 								v-model="transHp"
@@ -37,13 +53,13 @@
 							/>
 						</ValidationProvider>
 					</div>
-
 				</div>
 				<q-btn no-caps label="Transform" class="full-width mb-3" color="primary" type="submit" />
 
 				<small>
-					Transform the entity into another creature. You can use this for a druid's Wild Shape, or for the Polymorph spell. 
-					Damage and healing is handled as the Player's Handbook describes it should work for Wild Shape (phb 67).
+					Transform the entity into another creature. You can use this for a druid's Wild Shape, or
+					for the Polymorph spell. Damage and healing is handled as the Player's Handbook describes
+					it should work for Wild Shape (phb 67).
 				</small>
 			</q-form>
 		</ValidationObserver>
@@ -51,48 +67,43 @@
 </template>
 
 <script>
-	import { mapActions } from 'vuex'
+import { mapActions } from "vuex";
 
-	export default {
-		name: 'Transform',
-		props: [
-			'data',
-		],
-		data() {
-			return {
-				entity: this.data,
-				userId: this.$store.getters.user.uid,
-				campaignId: this.$route.params.campid,
-				encounterId: this.$route.params.encid,
-				transAc: '',
-				transHp: ''
-			}
-		},
-		methods: {
-			...mapActions([
-				'setSlide',
-				'transform_entity',
-			]),
-			edit() {
-					let transform = {
-						ac: parseInt(this.transAc),
-						maxHp: parseInt(this.transHp),
-						curHp: parseInt(this.transHp)
-					}
+export default {
+	name: "Transform",
+	props: ["data"],
+	data() {
+		return {
+			entity: this.data,
+			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
+			campaignId: this.$route.params.campid,
+			encounterId: this.$route.params.encid,
+			transAc: "",
+			transHp: "",
+		};
+	},
+	methods: {
+		...mapActions(["setSlide", "transform_entity"]),
+		edit() {
+			let transform = {
+				ac: parseInt(this.transAc),
+				maxHp: parseInt(this.transHp),
+				curHp: parseInt(this.transHp),
+			};
 
-					this.transform_entity({
-						key: this.entity.key,
-						entity: transform
-					})
-					this.setSlide(false);
-			},
-			remove() {
-				this.transform_entity({
-					key: this.entity.key,
-					remove: true
-				})
-				this.entity.transformed = false
-			},
-		}
-	};
+			this.transform_entity({
+				key: this.entity.key,
+				entity: transform,
+			});
+			this.setSlide(false);
+		},
+		remove() {
+			this.transform_entity({
+				key: this.entity.key,
+				remove: true,
+			});
+			this.entity.transformed = false;
+		},
+	},
+};
 </script>
diff --git a/src/components/slides/encounter/TestMode.vue b/src/components/slides/encounter/TestMode.vue
new file mode 100644
index 000000000..6d582db82
--- /dev/null
+++ b/src/components/slides/encounter/TestMode.vue
@@ -0,0 +1,27 @@
+<template>
+	<div>
+		<h2>Test Mode</h2>
+		<p>
+			In test mode you can freely perform any action in your encounter, without making changes to
+			the actual encounter.
+		</p>
+		<p>
+			The test encounter is basically a temporary copy of your encounter. It has a separate log and
+			damage meters. Anything you apply to an entity (damage, healing, bonuses, conditions,
+			reminders) is only applied in the copy.
+		</p>
+		<p>Test mode is an ideal way to test if your encounter is maybe too easy or too difficult.</p>
+		<router-link
+			:to="`/content/campaigns/${this.$route.params.campid}/${this.$route.params.encid}`"
+			class="btn btn-block btn-square bg-orange"
+		>
+			Leave Test Mode
+		</router-link>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "TestMode",
+};
+</script>
diff --git a/src/mixins/HpManipulations.js b/src/mixins/HpManipulations.js
index 67d5ed8c4..5d881a293 100644
--- a/src/mixins/HpManipulations.js
+++ b/src/mixins/HpManipulations.js
@@ -6,7 +6,6 @@ export const setHP = {
 	mixins: [remindersMixin],
 	data() {
 		return {
-			demo: this.$route.name === "Demo",
 			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
 			campaignId: this.$route.params.campid,
 		};
@@ -20,7 +19,7 @@ export const setHP = {
 		};
 	},
 	computed: {
-		...mapGetters(["encounter"]),
+		...mapGetters(["encounter", "demo", "test"]),
 	},
 	methods: {
 		...mapActions(["set_save", "set_stable", "set_hp", "set_dead", "set_log", "set_meters"]),
@@ -171,43 +170,41 @@ export const setHP = {
 				over = config.undo !== true ? -config.undo : 0;
 			}
 
-			if (!this.demo) {
-				if (!config.undo) {
-					await this.set_meters({ key: current.key, type: "damage", amount }); //Damage done
-					await this.set_meters({ key: current.key, type: "overkill", amount: over }); //Over damage done
-					await this.set_meters({ key: target.key, type: "damageTaken", amount }); //Damage taken
-					await this.set_meters({ key: target.key, type: "overkillTaken", amount: over }); //Over damage taken
-
-					// Campaign wide damage meters (no need to go through store)
-					// Damage done by players
-					if (["player", "companion"].includes(current.entityType)) {
-						await this.damageMeters(current.key, "damage", amount, current.entityType); //Damage done
-						await this.damageMeters(current.key, "overkill", over, current.entityType); //Over damage done
-					}
+			if (!config.undo) {
+				await this.set_meters({ key: current.key, type: "damage", amount }); //Damage done
+				await this.set_meters({ key: current.key, type: "overkill", amount: over }); //Over damage done
+				await this.set_meters({ key: target.key, type: "damageTaken", amount }); //Damage taken
+				await this.set_meters({ key: target.key, type: "overkillTaken", amount: over }); //Over damage taken
+
+				// Campaign wide damage meters (no need to go through store)
+				// Damage done by players
+				if (["player", "companion"].includes(current.entityType)) {
+					await this.damageMeters(current.key, "damage", amount, current.entityType); //Damage done
+					await this.damageMeters(current.key, "overkill", over, current.entityType); //Over damage done
+				}
 
-					// Damage taken by players
-					if (["player", "companion"].includes(target.entityType)) {
-						await this.damageMeters(target.key, "damageTaken", amount, target.entityType); //damage taken
-						await this.damageMeters(target.key, "overkillTaken", over, target.entityType); //Over damage taken
-					}
+				// Damage taken by players
+				if (["player", "companion"].includes(target.entityType)) {
+					await this.damageMeters(target.key, "damageTaken", amount, target.entityType); //damage taken
+					await this.damageMeters(target.key, "overkillTaken", over, target.entityType); //Over damage taken
 				}
-				//To undo, run same function with opposite types
-				else {
-					await this.set_meters({ key: current.key, type: "healing", amount }); //Undo damage done
-					await this.set_meters({ key: current.key, type: "overhealing", amount: over }); //Undo Over damage done
-					await this.set_meters({ key: target.key, type: "healingTaken", amount }); //Undo damage taken
-					await this.set_meters({ key: target.key, type: "overhealingTaken", amount: over }); //Undo Over damage taken
-
-					// Campaign wide damage meters (no need to go through store)
-					// Undo damage done by players
-					if (["player", "companion"].includes(current.entityType)) {
-						await this.damageMeters(current.key, "healing", amount, current.entityType); //Undo Damage done
-						await this.damageMeters(current.key, "overhealing", over, current.entityType); //Undo Over damage done
-					}
-					if (["player", "companion"].includes(target.entityType)) {
-						await this.damageMeters(target.key, "healingTaken", amount, target.entityType); //Undo damage taken
-						await this.damageMeters(target.key, "overhealingTaken", over, target.entityType); //Undo Over damage taken
-					}
+			}
+			//To undo, run same function with opposite types
+			else {
+				await this.set_meters({ key: current.key, type: "healing", amount }); //Undo damage done
+				await this.set_meters({ key: current.key, type: "overhealing", amount: over }); //Undo Over damage done
+				await this.set_meters({ key: target.key, type: "healingTaken", amount }); //Undo damage taken
+				await this.set_meters({ key: target.key, type: "overhealingTaken", amount: over }); //Undo Over damage taken
+
+				// Campaign wide damage meters (no need to go through store)
+				// Undo damage done by players
+				if (["player", "companion"].includes(current.entityType)) {
+					await this.damageMeters(current.key, "healing", amount, current.entityType); //Undo Damage done
+					await this.damageMeters(current.key, "overhealing", over, current.entityType); //Undo Over damage done
+				}
+				if (["player", "companion"].includes(target.entityType)) {
+					await this.damageMeters(target.key, "healingTaken", amount, target.entityType); //Undo damage taken
+					await this.damageMeters(target.key, "overhealingTaken", over, target.entityType); //Undo Over damage taken
 				}
 			}
 		},
@@ -278,46 +275,45 @@ export const setHP = {
 			}
 
 			// Update the healing meters
-			if (!this.demo) {
-				if (!config.undo) {
-					// Meters for the encounter
-					await this.set_meters({ key: current.key, type: "healing", amount }); //Healing done
-					await this.set_meters({ key: current.key, type: "overhealing", amount: over }); //Over healing done
-					await this.set_meters({ key: target.key, type: "healingTaken", amount }); //Healing taken
-					await this.set_meters({ key: target.key, type: "overhealingTaken", amount: over }); //Over healing taken
-
-					// Campaign wide healing meters (no need to go through store)
-					// Healing done by players
-					if (["player", "companion"].includes(current.entityType)) {
-						await this.damageMeters(current.key, "healing", amount, current.entityType); //Healing done
-						await this.damageMeters(current.key, "overhealing", over, current.entityType); //Over healing done
-					}
 
-					// Healing taken by players
-					if (["player", "companion"].includes(target.entityType)) {
-						await this.damageMeters(target.key, "healingTaken", amount, target.entityType); //Healing taken
-						await this.damageMeters(target.key, "overhealingTaken", over, target.entityType); //Over healing taken
-					}
+			if (!config.undo) {
+				// Meters for the encounter
+				await this.set_meters({ key: current.key, type: "healing", amount }); //Healing done
+				await this.set_meters({ key: current.key, type: "overhealing", amount: over }); //Over healing done
+				await this.set_meters({ key: target.key, type: "healingTaken", amount }); //Healing taken
+				await this.set_meters({ key: target.key, type: "overhealingTaken", amount: over }); //Over healing taken
+
+				// Campaign wide healing meters (no need to go through store)
+				// Healing done by players
+				if (["player", "companion"].includes(current.entityType)) {
+					await this.damageMeters(current.key, "healing", amount, current.entityType); //Healing done
+					await this.damageMeters(current.key, "overhealing", over, current.entityType); //Over healing done
 				}
-				// To undo, run same function with opposite types
-				else {
-					await this.set_meters({ key: current.key, type: "damage", amount }); //Undo Healing done
-					await this.set_meters({ key: current.key, type: "overkill", amount: over }); //Undo Over Healing done
-					await this.set_meters({ key: target.key, type: "damageTaken", amount }); //Undo Healing taken
-					await this.set_meters({ key: target.key, type: "overkillTaken", amount: over }); //Undo Over Healing taken
-
-					// Campaign wide healing meters (no need to go through store)
-					// Undo healing done by players
-					if (["player", "companion"].includes(current.entityType)) {
-						await this.damageMeters(current.key, "damage", amount, current.entityType); //Undo Healing done
-						await this.damageMeters(current.key, "overkill", over, current.entityType); //Undo Over healing done
-					}
 
-					// Undo healing taken by players
-					if (["player", "companion"].includes(target.entityType)) {
-						await this.damageMeters(target.key, "damageTaken", amount, target.entityType); //Undo Healing taken
-						await this.damageMeters(target.key, "overkillTaken", over, target.entityType); //Undo overhealing taken
-					}
+				// Healing taken by players
+				if (["player", "companion"].includes(target.entityType)) {
+					await this.damageMeters(target.key, "healingTaken", amount, target.entityType); //Healing taken
+					await this.damageMeters(target.key, "overhealingTaken", over, target.entityType); //Over healing taken
+				}
+			}
+			// To undo, run same function with opposite types
+			else {
+				await this.set_meters({ key: current.key, type: "damage", amount }); //Undo Healing done
+				await this.set_meters({ key: current.key, type: "overkill", amount: over }); //Undo Over Healing done
+				await this.set_meters({ key: target.key, type: "damageTaken", amount }); //Undo Healing taken
+				await this.set_meters({ key: target.key, type: "overkillTaken", amount: over }); //Undo Over Healing taken
+
+				// Campaign wide healing meters (no need to go through store)
+				// Undo healing done by players
+				if (["player", "companion"].includes(current.entityType)) {
+					await this.damageMeters(current.key, "damage", amount, current.entityType); //Undo Healing done
+					await this.damageMeters(current.key, "overkill", over, current.entityType); //Undo Over healing done
+				}
+
+				// Undo healing taken by players
+				if (["player", "companion"].includes(target.entityType)) {
+					await this.damageMeters(target.key, "damageTaken", amount, target.entityType); //Undo Healing taken
+					await this.damageMeters(target.key, "overkillTaken", over, target.entityType); //Undo overhealing taken
 				}
 			}
 		},
@@ -356,13 +352,15 @@ export const setHP = {
 			});
 		},
 		async damageMeters(key, type, amount, entityType) {
-			await this.update_damage_meters({
-				campaignId: this.campaignId,
-				entityType,
-				id: key,
-				property: type,
-				value: amount,
-			});
+			if (!this.demo && !this.test) {
+				await this.update_damage_meters({
+					campaignId: this.campaignId,
+					entityType,
+					id: key,
+					property: type,
+					value: amount,
+				});
+			}
 		},
 	},
 };
diff --git a/src/router/routes.js b/src/router/routes.js
index ffc6d4c9b..578e36e69 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1345,6 +1345,17 @@ const routes = [
 			description: "Run your encounter in Harmless Key, a Combat Tracker for D&D 5e.",
 		},
 	},
+	{
+		path: "/test-encounter/:campid/:encid",
+		name: "TestEncounter",
+		component: RunEncounter,
+		meta: {
+			title: "Test encounter",
+			requiresAuth: true,
+			sidebar: false,
+			description: "Test your encounter in Harmless Key, a Combat Tracker for D&D 5e.",
+		},
+	},
 	{
 		path: "/user/:userid",
 		name: "Follow user",
diff --git a/src/store/modules/general.js b/src/store/modules/general.js
index e9bd04d63..472d651d0 100644
--- a/src/store/modules/general.js
+++ b/src/store/modules/general.js
@@ -45,8 +45,6 @@ export default {
 		async initialize({ state, dispatch, commit, rootGetters }) {
 			if (state.initialized) return;
 
-			dispatch("setTips");
-
 			// In main.js before the Vue instance is rendered
 			// it's checked if there is a firebase authorization present.
 			// Therefore we can check here with 'auth' if there is a user.
diff --git a/src/store/modules/runEncounter.js b/src/store/modules/runEncounter.js
index 75ecfee69..ac4f9f313 100644
--- a/src/store/modules/runEncounter.js
+++ b/src/store/modules/runEncounter.js
@@ -1,5 +1,5 @@
 import { abilities, skills } from "src/utils/generalConstants";
-import { uuid } from "src/utils/generalFunctions";
+import { uuid, calc_mod } from "src/utils/generalFunctions";
 import { monsterMixin } from "src/mixins/monster";
 import { db } from "src/firebase";
 import Vue from "vue";
@@ -114,6 +114,7 @@ const demoEncounter = {
 
 const getDefaultState = () => ({
 	demo: false,
+	test: false,
 	uid: undefined,
 	entities: {},
 	targeted: [],
@@ -131,6 +132,12 @@ const getDefaultState = () => ({
 const run_encounter_state = getDefaultState();
 
 const run_encounter_getters = {
+	test(state) {
+		return state.test;
+	},
+	demo(state) {
+		return state.demo;
+	},
 	entities(state) {
 		return state.entities;
 	},
@@ -175,7 +182,7 @@ const run_encounter_getters = {
 	},
 	log(state) {
 		//If there is a storage log, set it in the store
-		if (localStorage.getItem(state.encounterId)) {
+		if (localStorage.getItem(state.encounterId) && !state.test) {
 			state.log = JSON.parse(localStorage.getItem(state.encounterId));
 		}
 		return state.log;
@@ -196,12 +203,13 @@ const run_encounter_actions = {
 	 * @param {string} eid Encounter id
 	 * @param {boolean} demo Wether this is the demo encounter
 	 */
-	async init_Encounter({ commit, rootGetters, dispatch }, { cid, eid, demo }) {
+	async init_Encounter({ commit, rootGetters, dispatch }, { cid, eid, demo, test }) {
 		// Create the path to the encounter in firebase
 		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		const path = `${uid}/${cid}/${eid}`;
 
 		commit("SET_DEMO", demo);
+		commit("SET_TEST", test);
 		commit("SET_UID", uid);
 		commit("SET_CAMPAIGN_ID", cid);
 		commit("SET_ENCOUNTER_ID", eid);
@@ -217,6 +225,13 @@ const run_encounter_actions = {
 					campaignId: cid,
 					id: eid,
 				});
+
+				// For tests, set round to 0
+				if (test) {
+					encounter.round = 0;
+					encounter.turn = 1;
+				}
+
 				commit("SET_ENCOUNTER", encounter);
 
 				// Setup the requests connection
@@ -262,7 +277,7 @@ const run_encounter_actions = {
 		let entity = {
 			name: db_entity.name,
 			id: db_entity.id,
-			initiative: db_entity.initiative,
+			initiative: state.test ? 0 : db_entity.initiative,
 			entityType: db_entity.entityType,
 			maxHp: db_entity.maxHp,
 			ac: parseInt(db_entity.ac),
@@ -282,7 +297,7 @@ const run_encounter_actions = {
 		entity.color_label = db_entity.color_label ? db_entity.color_label : null;
 		entity.limited_uses = db_entity.limited_uses ? db_entity.limited_uses : {};
 
-		if (db_entity.meters) {
+		if (!state.test && db_entity.meters) {
 			entity.damage = db_entity.meters.damage ? db_entity.meters.damage : 0;
 			entity.healing = db_entity.meters.healing ? db_entity.meters.healing : 0;
 			entity.overkill = db_entity.meters.overkill ? db_entity.meters.overkill : 0;
@@ -311,9 +326,9 @@ const run_encounter_actions = {
 				//get the curHp,tempHP, AC Bonus & Dead/Stable + Death Saves from the campaign
 				if (campaignPlayer) {
 					entity.curHp = campaignPlayer.curHp;
-					entity.tempHp = campaignPlayer.tempHp;
-					entity.ac_bonus = campaignPlayer.ac_bonus;
-					entity.maxHpMod = campaignPlayer.maxHpMod;
+					entity.tempHp = state.test ? 0 : campaignPlayer.tempHp;
+					entity.ac_bonus = state.test ? 0 : campaignPlayer.ac_bonus;
+					entity.maxHpMod = state.test ? 0 : campaignPlayer.maxHpMod;
 					entity.saves = campaignPlayer.saves ? campaignPlayer.saves : {};
 					entity.stable = campaignPlayer.stable ? campaignPlayer.stable : false;
 					entity.dead = campaignPlayer.dead ? campaignPlayer.dead : false;
@@ -331,7 +346,7 @@ const run_encounter_actions = {
 				}
 
 				//get other values from the player
-				let db_player = !state.demo
+				const db_player = !state.demo
 					? await dispatch("players/get_player", { uid, id: key })
 					: db_entity;
 
@@ -344,7 +359,7 @@ const run_encounter_actions = {
 				entity.maxHp = entity.maxHpMod
 					? parseInt(db_player.maxHp + entity.maxHpMod)
 					: parseInt(db_player.maxHp);
-
+				entity.curHp = state.test ? entity.maxHp : entity.curHp;
 				entity.saving_throws = [];
 				// Ability scores
 				for (const ability of abilities) {
@@ -356,6 +371,11 @@ const run_encounter_actions = {
 					}
 				}
 
+				// In test mode auto roll initiative
+				if (state.test) {
+					entity.initiative = Math.ceil(Math.random() * 20) + (entity.initiative_bons || 0);
+				}
+
 				// Defenses
 				for (const defense of [
 					"damage_vulnerabilities",
@@ -425,7 +445,6 @@ const run_encounter_actions = {
 					}
 
 					// Values from encounter
-					entity.curHp = parseInt(db_entity.curHp);
 					entity.tempHp = db_entity.tempHp;
 					entity.maxHpMod = db_entity.maxHpMod;
 					entity.ac_bonus = db_entity.ac_bonus;
@@ -433,6 +452,7 @@ const run_encounter_actions = {
 					entity.maxHp = entity.maxHpMod
 						? parseInt(db_entity.maxHp + entity.maxHpMod)
 						: parseInt(db_entity.maxHp);
+					entity.curHp = state.test ? parseInt(entity.maxHp) : parseInt(db_entity.curHp);
 					entity.settings = db_entity.settings;
 
 					if (db_entity.transformed) {
@@ -476,6 +496,10 @@ const run_encounter_actions = {
 						entity[ability] = data_npc[ability];
 					}
 
+					if (state.test) {
+						entity.initiative = Math.ceil(Math.random() * 20) + calc_mod(entity.dexterity);
+					}
+
 					// Old NPC format values
 					if (data_npc.old) {
 						entity.speed = data_npc.speed;
@@ -555,6 +579,7 @@ const run_encounter_actions = {
 					campaignId: state.campaignId,
 					encounterId: state.encounterId,
 					npc,
+					test: state.test,
 				},
 				{ root: true }
 			);
@@ -579,6 +604,7 @@ const run_encounter_actions = {
 					encounterId: state.encounterId,
 					playerId: id,
 					player: entity,
+					test: state.test,
 				},
 				{ root: true }
 			);
@@ -588,6 +614,24 @@ const run_encounter_actions = {
 		}
 	},
 
+	/**
+	 * Adds a player or companion during an encounter
+	 *
+	 * @param {id} id
+	 * @param {object} entity player or companion object
+	 */
+	add_entity_demo({ dispatch, rootGetters }, entity) {
+		//generate semi random id
+		const key = uuid();
+		if (rootGetters["encounters/demo_encounter"]) {
+			dispatch("encounters/add_demo_entity", { key, entity });
+		} else {
+			Vue.set(demoEncounter.entities, key, entity);
+		}
+
+		dispatch("add_entity", key);
+	},
+
 	/**
 	 * Update turn and round
 	 *
@@ -595,7 +639,7 @@ const run_encounter_actions = {
 	 * @param {integer} round
 	 */
 	async set_turn({ state, commit, dispatch }, { turn, round }) {
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			for (const property of ["turn", "round"]) {
 				const value = property === "turn" ? turn : round;
 				await dispatch(
@@ -711,7 +755,7 @@ const run_encounter_actions = {
 			if (curHp > valueIncMod) {
 				curHp = valueIncMod;
 
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					if (entityType === "npc") {
 						const update_path = entity.transformed ? "set_transformed_prop" : "set_entity_prop";
 						await dispatch(
@@ -798,7 +842,7 @@ const run_encounter_actions = {
 				const newValue = hpType === "maxHp" ? maxHp : curHp;
 
 				// Save new curHp in firebase
-				if (hpType === "curHp" && !state.demo) {
+				if (hpType === "curHp" && !state.demo && !state.test) {
 					if (entityType === "npc") {
 						const update_path = entity.transformed ? "set_transformed_prop" : "set_entity_prop";
 						await dispatch(
@@ -836,7 +880,7 @@ const run_encounter_actions = {
 		}
 
 		// UPDATE FIREBASE
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			// Transformed
 			if (
 				["transformedMaxHp", "transformedCurHp", "transformedAc", "transformedMaxHpMod"].includes(
@@ -985,7 +1029,7 @@ const run_encounter_actions = {
 			}
 
 			//Save the new values in Firebase and the store
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"encounters/set_entity_meters",
 					{
@@ -1009,7 +1053,7 @@ const run_encounter_actions = {
 	 * @param {boolean} active active or not
 	 */
 	async set_active({ state, commit, dispatch }, { key, active }) {
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/set_entity_prop",
 				{
@@ -1032,7 +1076,7 @@ const run_encounter_actions = {
 	 * @param {boolean} hidden hidden or not
 	 */
 	async set_hidden({ state, commit, dispatch }, { key, hidden }) {
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/set_entity_prop",
 				{
@@ -1099,7 +1143,7 @@ const run_encounter_actions = {
 	async set_initiative({ commit, state, dispatch }, { key, initiative }) {
 		initiative = !initiative ? 0 : Number(initiative);
 
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/set_entity_prop",
 				{
@@ -1125,7 +1169,7 @@ const run_encounter_actions = {
 
 			// Set NPCs with 0 hp as down
 			if (e.curHp <= 0 && e.entityType === "npc") {
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					await dispatch(
 						"encounters/set_entity_prop",
 						{
@@ -1142,7 +1186,7 @@ const run_encounter_actions = {
 			}
 			// If an entity has more than 0 hp, but is marked as down, remove the down mark
 			if (e.curHp > 0 && e.down) {
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					await dispatch(
 						"encounters/set_entity_prop",
 						{
@@ -1159,7 +1203,7 @@ const run_encounter_actions = {
 			}
 			// Check if the entity is not yet active, but needs to be added in the new round
 			if (e.addNextRound) {
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					await dispatch(
 						"encounters/set_entity_prop",
 						{
@@ -1181,7 +1225,7 @@ const run_encounter_actions = {
 		if (action === "tag") {
 			commit("SET_ENTITY_PROPERTY", { key, prop: "addNextRound", value });
 		} else if (action === "set") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"encounters/set_entity_prop",
 					{
@@ -1227,7 +1271,7 @@ const run_encounter_actions = {
 			//if the damage was higher than the amount of tempHp, remove the tempHp
 			//Save the rest amount to put into transformed or curHp later
 			newHp = newHp <= 0 ? null : newHp;
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				//NPC tempHp is stored under encounter
 				if (type === "npcs") {
 					await dispatch(
@@ -1263,7 +1307,7 @@ const run_encounter_actions = {
 		else if (pool === "transformed") {
 			// Update the store
 			if (newHp <= 0) {
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					if (type === "npcs") {
 						await dispatch(
 							"encounters/set_entity_prop",
@@ -1299,7 +1343,7 @@ const run_encounter_actions = {
 				commit("DELETE_ENTITY_PROPERTY", { key, prop: "transformedCurHp" });
 				commit("DELETE_ENTITY_PROPERTY", { key, prop: "transformedAc" });
 			} else {
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					if (type === "npcs") {
 						await dispatch(
 							"encounters/set_transformed_prop",
@@ -1334,7 +1378,7 @@ const run_encounter_actions = {
 		//when target has no tempHp or is not transformed, set curHP
 		//Also put rest damage here
 		else {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				//NPC curHp is stored under encounter
 				if (type === "npcs") {
 					await dispatch(
@@ -1378,7 +1422,7 @@ const run_encounter_actions = {
 	 */
 	async set_condition({ state, commit, dispatch }, { action, key, condition, level }) {
 		const value = action === "remove" ? null : condition === "exhaustion" ? level : true;
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/set_entity_condition",
 				{
@@ -1408,7 +1452,7 @@ const run_encounter_actions = {
 	async set_save({ state, commit, rootGetters, dispatch }, { key, check, index }) {
 		let type = state.entities[key].entityType + "s";
 		if (check == "reset") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				for (const property of ["stable", "saves"]) {
 					await dispatch(
 						"campaigns/update_campaign_entity",
@@ -1427,7 +1471,7 @@ const run_encounter_actions = {
 			commit("SET_ENTITY_PROPERTY", { key, prop: "saves", value: {} });
 			commit("SET_ENTITY_PROPERTY", { key, prop: "stable", value: false });
 		} else if (check === "unset") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"campaigns/set_death_save",
 					{
@@ -1443,7 +1487,7 @@ const run_encounter_actions = {
 			commit("DELETE_SAVE", { key, index });
 		} else {
 			const i = parseInt(index + 1);
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"campaigns/set_death_save",
 					{
@@ -1469,7 +1513,7 @@ const run_encounter_actions = {
 	async set_stable({ state, commit, rootGetters, dispatch }, { key, action }) {
 		let type = state.entities[key].entityType + "s";
 		if (action === "set") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"campaigns/stabilize_entity",
 					{
@@ -1485,7 +1529,7 @@ const run_encounter_actions = {
 			commit("DELETE_ENTITY_PROPERTY", { key, prop: "dead" });
 			commit("SET_ENTITY_PROPERTY", { key, prop: "stable", value: true });
 		} else if (action === "unset") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"campaigns/update_campaign_entity",
 					{
@@ -1511,7 +1555,7 @@ const run_encounter_actions = {
 	 * @param {any} value
 	 */
 	async set_entity_setting({ state, rootGetters, commit, dispatch }, { entityId, key, value }) {
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/set_entity_setting",
 				{
@@ -1534,7 +1578,7 @@ const run_encounter_actions = {
 	 * @param {string} entityId Entity key
 	 */
 	async clear_entity_settings({ state, rootGetters, commit, dispatch }, entityId) {
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/clear_entity_settings",
 				{
@@ -1558,7 +1602,7 @@ const run_encounter_actions = {
 	 */
 	async transform_entity({ state, rootGetters, commit, dispatch }, { key, entity, remove }) {
 		if (remove) {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				if (state.entities[key].entityType === "npc") {
 					await dispatch(
 						"encounters/set_entity_prop",
@@ -1604,7 +1648,7 @@ const run_encounter_actions = {
 			commit("DELETE_ENTITY_PROPERTY", { key, prop: "transformedCurHp" });
 			commit("DELETE_ENTITY_PROPERTY", { key, prop: "transformedAc" });
 		} else {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				if (state.entities[key].entityType === "npc") {
 					await dispatch(
 						"encounters/set_entity_prop",
@@ -1652,17 +1696,7 @@ const run_encounter_actions = {
 			commit("SET_ENTITY_PROPERTY", { key, prop: "transformedAc", value: entity.ac });
 		}
 	},
-	add_entity_demo({ dispatch, rootGetters }, entity) {
-		//generate semi random id
-		const key = uuid();
-		if (rootGetters["encounters/demo_encounter"]) {
-			dispatch("encounters/add_demo_entity", { key, entity });
-		} else {
-			Vue.set(demoEncounter.entities, key, entity);
-		}
 
-		dispatch("add_entity", key);
-	},
 	async remove_entity({ commit, state, dispatch }, key) {
 		// First untarget if targeted
 		const targeted = state.targeted.filter((target) => {
@@ -1671,7 +1705,7 @@ const run_encounter_actions = {
 		commit("SET_TARGETED", targeted);
 
 		// Then remove from encounter
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/delete_entity",
 				{
@@ -1696,7 +1730,7 @@ const run_encounter_actions = {
 		let type = state.entities[key].entityType + "s";
 		if (action === "revive") {
 			commit("SET_ENTITY_PROPERTY", { key, prop: "curHp", value: 1 });
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"campaigns/revive_entity",
 					{
@@ -1725,7 +1759,7 @@ const run_encounter_actions = {
 			);
 		} else {
 			//SET DEAD
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"campaigns/kill_entity",
 					{
@@ -1741,7 +1775,7 @@ const run_encounter_actions = {
 		}
 	},
 	async set_finished({ state, dispatch, commit }) {
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/finish_encounter",
 				{
@@ -1767,7 +1801,7 @@ const run_encounter_actions = {
 		// Add a new reminder
 		if (action === "add") {
 			if (type === "premade") {
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					await dispatch(
 						"encounters/set_reminder",
 						{
@@ -1783,7 +1817,7 @@ const run_encounter_actions = {
 				commit("SET_REMINDER", { entityKey: entity, key, reminder });
 			}
 			if (type === "custom") {
-				if (!state.demo) {
+				if (!state.demo && !state.test) {
 					key = await dispatch(
 						"encounters/add_reminder",
 						{
@@ -1804,7 +1838,7 @@ const run_encounter_actions = {
 
 		// Remove a reminder
 		else if (action === "remove") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"encounters/set_reminder",
 					{
@@ -1822,7 +1856,7 @@ const run_encounter_actions = {
 
 		// Update an existing reminder
 		else if (action === "update") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"encounters/set_reminder",
 					{
@@ -1840,7 +1874,7 @@ const run_encounter_actions = {
 
 		// Update only the rounds property
 		else if (action === "update-timer") {
-			if (!state.demo) {
+			if (!state.demo && !state.test) {
 				await dispatch(
 					"encounters/update_reminder",
 					{
@@ -1864,7 +1898,7 @@ const run_encounter_actions = {
 	 * @param {string} id Request ID
 	 */
 	async delete_request({ state, rootGetters, commit, dispatch }, id) {
-		if (!state.demo) {
+		if (!state.demo && !state.test) {
 			await dispatch(
 				"encounters/delete_request",
 				{
@@ -1950,10 +1984,13 @@ const run_encounter_actions = {
 };
 
 const run_encounter_mutations = {
-	//INITATIALIZE ENCOUNTER
+	//INITIALIZE ENCOUNTER
 	TRACK(state, value) {
 		Vue.set(state, "track", value);
 	},
+	SET_TEST(state, value) {
+		Vue.set(state, "test", value);
+	},
 	SET_DEMO(state, value) {
 		Vue.set(state, "demo", value);
 	},
@@ -2059,20 +2096,20 @@ const run_encounter_mutations = {
 		Vue.set(state, "show_monster_card", value);
 	},
 	SET_LOG(state, { action, value }) {
-		if (localStorage.getItem(state.encounterId) && Object.keys(state.log) == 0) {
+		if (!state.test && localStorage.getItem(state.encounterId) && Object.keys(state.log) == 0) {
 			state.log = JSON.parse(localStorage.getItem(state.encounterId));
 		}
 		if (action === "set") {
 			state.log.unshift(value);
 
 			const parsed = JSON.stringify(state.log);
-			if (!state.demo) localStorage.setItem(state.encounterId, parsed);
+			if (!state.demo && !state.test) localStorage.setItem(state.encounterId, parsed);
 		}
 		if (action == "unset") {
 			Vue.delete(state.log, value);
 
 			const parsed = JSON.stringify(state.log);
-			if (!state.demo) localStorage.setItem(state.encounterId, parsed);
+			if (!state.demo && !state.test) localStorage.setItem(state.encounterId, parsed);
 		}
 	},
 };
diff --git a/src/store/modules/tips.js b/src/store/modules/tips.js
index 8bb20ecbc..3f4224edf 100644
--- a/src/store/modules/tips.js
+++ b/src/store/modules/tips.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue from "vue";
 
 const tip_state = () => ({
 	tips: {},
@@ -6,12 +6,12 @@ const tip_state = () => ({
 
 const tip_getters = {
 	get_tip: (state, rootGetters) => (key) => {
-		if(rootGetters.user) {
+		if (rootGetters.user) {
 			return state.tips[rootGetters.user.uid] && key in state.tips[rootGetters.user.uid];
 		} else {
 			return key in state.tips;
 		}
-	}
+	},
 };
 
 const tip_actions = {
@@ -19,9 +19,9 @@ const tip_actions = {
 	 * Checks local storage for saved tips and sets them in the store
 	 */
 	setTips({ commit }) {
-		if(process.browser) {
+		if (process.browser) {
 			const storage = JSON.parse(localStorage.getItem("tips"));
-			const tips = (storage) ? storage : {};
+			const tips = storage ? storage : {};
 			commit("SET_TIPS", tips);
 		}
 	},
@@ -29,15 +29,15 @@ const tip_actions = {
 	/**
 	 * Adds the key of a tip to store and local storage
 	 * added tips are hidden from the user
-	 * 
-	 * Hidden tips are saved for every user that logs in through the same browser 
+	 *
+	 * Hidden tips are saved for every user that logs in through the same browser
 	 * and even for non logged in users
 	 */
 	set_tip({ commit, rootGetters, state }, key) {
 		let tips = state.tips;
 
-		if(rootGetters.user) {
-			if(!tips[rootGetters.user.uid]) {
+		if (rootGetters.user) {
+			if (!tips[rootGetters.user.uid]) {
 				tips[rootGetters.user.uid] = {};
 			}
 			tips[rootGetters.user.uid][key] = true;
@@ -46,16 +46,18 @@ const tip_actions = {
 		}
 		localStorage.setItem("tips", JSON.stringify(tips));
 		commit("SET_TIPS", tips);
-	}
+	},
 };
 
 const tip_mutations = {
-	SET_TIPS(state, payload) { Vue.set(state, "tips", payload); },
+	SET_TIPS(state, payload) {
+		Vue.set(state, "tips", payload);
+	},
 };
 
 export default {
-  state: tip_state,
-  getters: tip_getters,
-  actions: tip_actions,
-  mutations: tip_mutations
-}
\ No newline at end of file
+	state: tip_state,
+	getters: tip_getters,
+	actions: tip_actions,
+	mutations: tip_mutations,
+};
diff --git a/src/store/modules/userContent/items.js b/src/store/modules/userContent/items.js
index 48b40b468..a12fc7d5a 100644
--- a/src/store/modules/userContent/items.js
+++ b/src/store/modules/userContent/items.js
@@ -1,22 +1,19 @@
-import Vue from 'vue';
-import { itemServices } from "src/services/items"; 
+import Vue from "vue";
+import { itemServices } from "src/services/items";
 import _ from "lodash";
 
 // Converts a full item to a search_item
 const convert_item = (item) => {
-	const properties = [
-		"name",
-		"image"
-	];
+	const properties = ["name", "image"];
 	const returnItem = {};
-	
-	for(const prop of properties) {
-		if(item.hasOwnProperty(prop)) {
-			returnItem[prop] = (prop === "name") ? item[prop].toLowerCase() : item[prop];
+
+	for (const prop of properties) {
+		if (item.hasOwnProperty(prop)) {
+			returnItem[prop] = prop === "name" ? item[prop].toLowerCase() : item[prop];
 		}
 	}
 	return returnItem;
-}
+};
 
 const item_state = () => ({
 	item_services: null,
@@ -27,21 +24,27 @@ const item_state = () => ({
 
 const item_getters = {
 	items: (state) => {
-    // Convert object to sorted array
-    return _.chain(state.items)
-    .filter((item, key) => {
-      item.key = key;
-      return item;
-    }).orderBy("name", "asc").value();
-  },
-	item_services: (state) => { return state.item_services },
-	item_count: (state) => { return state.item_count },
+		// Convert object to sorted array
+		return _.chain(state.items)
+			.filter((item, key) => {
+				item.key = key;
+				return item;
+			})
+			.orderBy("name", "asc")
+			.value();
+	},
+	item_services: (state) => {
+		return state.item_services;
+	},
+	item_count: (state) => {
+		return state.item_count;
+	},
 };
 
 const item_actions = {
 	async get_item_services({ getters, commit }) {
 		if (getters.item_services === null || !Object.keys(getters.item_services).length) {
-			commit("SET_ITEM_SERVICES", new itemServices);
+			commit("SET_ITEM_SERVICES", new itemServices());
 		}
 		return getters.item_services;
 	},
@@ -51,16 +54,16 @@ const item_actions = {
 	 * Stores those items in items store
 	 * Returns an Array of items, ordered by name.
 	 */
-	async get_items({ state, rootGetters, dispatch, commit }) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-		let items = (state.items) ? state.items : undefined;
+	async get_items({ state, getters, rootGetters, dispatch, commit }) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		let items = state.items ? state.items : undefined;
 
-		if(!items && uid) {
+		if ((!items || getters.item_count > Object.keys(items).length) && uid) {
 			const services = await dispatch("get_item_services");
 			try {
 				items = await services.getItems(uid);
 				commit("SET_ITEMS", items || {});
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -72,30 +75,30 @@ const item_actions = {
 	 * Stores the count it in item_count
 	 */
 	async fetch_item_count({ rootGetters, commit, dispatch }) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-		if(uid) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
 			const services = await dispatch("get_item_services");
 			try {
-				let count = await services.getItemCount(uid) || 0;
+				let count = (await services.getItemCount(uid)) || 0;
 				commit("SET_ITEM_COUNT", count);
 				return;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
 	},
 
 	async get_item({ state, commit, dispatch }, { uid, id }) {
-		let item = (state.cached_items[uid]) ? state.cached_items[uid][id] : undefined;
+		let item = state.cached_items[uid] ? state.cached_items[uid][id] : undefined;
 
 		// The item is not in the store and needs to be fetched from the database
-		if(!item) {
+		if (!item) {
 			const services = await dispatch("get_item_services");
 			try {
 				const item = await services.getItem(uid, id);
 				commit("SET_CACHED_ITEM", { uid, id, item });
 				return item;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -105,32 +108,32 @@ const item_actions = {
 	/**
 	 * Adds a newly created ITEM for a user
 	 * A user can only add ITEM's for themselves so we use the uid from the store
-	 * 
-	 * @param {object} item 
+	 *
+	 * @param {object} item
 	 * @returns {string} the id of the newly added item
 	 */
 	async add_item({ rootGetters, commit, dispatch }, item) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		const available_slots = rootGetters.tier.benefits.items;
 
-		if(uid) {
+		if (uid) {
 			const services = await dispatch("get_item_services");
 			const used_slots = await services.getItemCount(uid);
 
-			if(used_slots >= available_slots) {
+			if (used_slots >= available_slots) {
 				throw "Not enough slots";
 			}
 			try {
-					const search_item = convert_item(item);
-					const id = await services.addItem(uid, item, search_item);
-					commit("SET_ITEM", { id, search_item });
-					commit("SET_CACHED_ITEM", { uid, id, item });
-					
-					const new_count = await services.updateItemCount(uid, 1);
-					commit("SET_ITEM_COUNT", new_count);
-					dispatch("checkEncumbrance", "", { root: true });
-					return id;
-			} catch(error) {
+				const search_item = convert_item(item);
+				const id = await services.addItem(uid, item, search_item);
+				commit("SET_ITEM", { id, search_item });
+				commit("SET_CACHED_ITEM", { uid, id, item });
+
+				const new_count = await services.updateItemCount(uid, 1);
+				commit("SET_ITEM_COUNT", new_count);
+				dispatch("checkEncumbrance", "", { root: true });
+				return id;
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -140,13 +143,13 @@ const item_actions = {
 	 * Updates and existing item
 	 * It is possible to edit the item of another user (for companions)
 	 * therefore we send the uid from where the function is called
-	 * 
+	 *
 	 * @param {string} uid
-	 * @param {string} id 
-	 * @param {object} item 
+	 * @param {string} id
+	 * @param {object} item
 	 */
 	async edit_item({ commit, dispatch }, { uid, id, item }) {
-		if(uid) {
+		if (uid) {
 			const services = await dispatch("get_item_services");
 			try {
 				const search_item = convert_item(item);
@@ -154,7 +157,7 @@ const item_actions = {
 				commit("SET_ITEM", { id, search_item });
 				commit("SET_CACHED_ITEM", { uid, id, item });
 				return;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -163,12 +166,12 @@ const item_actions = {
 	/**
 	 * Deletes an existing item
 	 * A user can only delete their own item's so use uid from the store
-	 * 
-	 * @param {string} id 
+	 *
+	 * @param {string} id
 	 */
 	async delete_item({ rootGetters, commit, dispatch }, id) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-		if(uid) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
 			const services = await dispatch("get_item_services");
 			try {
 				await services.deleteItem(uid, id);
@@ -179,56 +182,62 @@ const item_actions = {
 				commit("SET_ITEM_COUNT", new_count);
 				dispatch("checkEncumbrance", "", { root: true });
 				return;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
 	},
 
 	clear_item_store({ commit, rootGetters }) {
-    const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-    if(uid) {
-      commit("CLEAR_STORE");
-    }
-  }
-}
-
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
+			commit("CLEAR_STORE");
+		}
+	},
+};
 
 const item_mutations = {
-	SET_ITEM_SERVICES(state, payload) { Vue.set(state, "item_services", payload); },
-  SET_ITEM_COUNT(state, value) { Vue.set(state, "item_count", value); },
-  SET_ITEMS(state, value) { Vue.set(state, "items", value); },
-  SET_CACHED_ITEM(state, { uid, id, item }) { 
-    if(state.cached_items[uid]) {
-      Vue.set(state.cached_items[uid], id, item);
-    } else {
-      Vue.set(state.cached_items, uid, { [id]: item });
-    }
-  },
-  SET_ITEM(state, { id, search_item }) {
-    if(state.items) {
-      Vue.set(state.items, id, search_item);
-    } else {
-      Vue.set(state, "items", { [id]: search_item });
-    }
-  },
-  REMOVE_ITEM(state, id) { 
-    Vue.delete(state.items, id); },
-  REMOVE_CACHED_ITEM(state, { uid, id }) {
-    if(state.cached_items[uid]) {
-      Vue.delete(state.cached_items[uid], id);
-    }
-  },
+	SET_ITEM_SERVICES(state, payload) {
+		Vue.set(state, "item_services", payload);
+	},
+	SET_ITEM_COUNT(state, value) {
+		Vue.set(state, "item_count", value);
+	},
+	SET_ITEMS(state, value) {
+		Vue.set(state, "items", value);
+	},
+	SET_CACHED_ITEM(state, { uid, id, item }) {
+		if (state.cached_items[uid]) {
+			Vue.set(state.cached_items[uid], id, item);
+		} else {
+			Vue.set(state.cached_items, uid, { [id]: item });
+		}
+	},
+	SET_ITEM(state, { id, search_item }) {
+		if (state.items) {
+			Vue.set(state.items, id, search_item);
+		} else {
+			Vue.set(state, "items", { [id]: search_item });
+		}
+	},
+	REMOVE_ITEM(state, id) {
+		Vue.delete(state.items, id);
+	},
+	REMOVE_CACHED_ITEM(state, { uid, id }) {
+		if (state.cached_items[uid]) {
+			Vue.delete(state.cached_items[uid], id);
+		}
+	},
 	CLEAR_STORE(state) {
-    Vue.set(state, "items", undefined);
-    Vue.set(state, "item_count", 0);
-  }
-}
+		Vue.set(state, "items", undefined);
+		Vue.set(state, "item_count", 0);
+	},
+};
 
 export default {
 	namespaced: true,
 	state: item_state,
 	getters: item_getters,
-	actions: item_actions, 
+	actions: item_actions,
 	mutations: item_mutations,
-}
\ No newline at end of file
+};
diff --git a/src/store/modules/userContent/npcs.js b/src/store/modules/userContent/npcs.js
index 0a61fb131..c55b23ccf 100644
--- a/src/store/modules/userContent/npcs.js
+++ b/src/store/modules/userContent/npcs.js
@@ -53,11 +53,11 @@ const npc_actions = {
 	 * Fetches all the search_npcs for a user
 	 * and stores them in npcs
 	 */
-	async get_npcs({ state, rootGetters, dispatch, commit }) {
+	async get_npcs({ state, getters, rootGetters, dispatch, commit }) {
 		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		let npcs = state.npcs ? state.npcs : undefined;
 
-		if (!npcs && uid) {
+		if ((!npcs || getters.npc_count > Object.keys(npcs).length) && uid) {
 			const services = await dispatch("get_npc_services");
 			try {
 				npcs = await services.getNpcs(uid);
diff --git a/src/store/modules/userContent/players.js b/src/store/modules/userContent/players.js
index 8200c4d70..8361afbe5 100644
--- a/src/store/modules/userContent/players.js
+++ b/src/store/modules/userContent/players.js
@@ -123,11 +123,11 @@ const player_actions = {
 	 * Fetches all the search_players for a user
 	 * and stores them in players
 	 */
-	async get_players({ state, rootGetters, dispatch, commit }) {
+	async get_players({ state, getters, rootGetters, dispatch, commit }) {
 		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		let players = state.players ? state.players : undefined;
 
-		if (!players && uid) {
+		if ((!players || getters.player_count > Object.keys(players).length) && uid) {
 			const services = await dispatch("get_player_services");
 			try {
 				players = await services.getPlayers(uid);
diff --git a/src/store/modules/userContent/reminders.js b/src/store/modules/userContent/reminders.js
index 8075c9d14..321fd3ce3 100644
--- a/src/store/modules/userContent/reminders.js
+++ b/src/store/modules/userContent/reminders.js
@@ -1,46 +1,50 @@
-import Vue from 'vue';
-import { reminderServices } from "src/services/reminders"; 
+import Vue from "vue";
+import { reminderServices } from "src/services/reminders";
 import _ from "lodash";
 
 // Converts a full reminder to a search_reminder
 const convert_reminder = (reminder) => {
-	const properties = [
-		"title",
-	];
+	const properties = ["title"];
 	const returnReminder = {};
-	
-	for(const prop of properties) {
-		if(reminder.hasOwnProperty(prop)) {
+
+	for (const prop of properties) {
+		if (reminder.hasOwnProperty(prop)) {
 			returnReminder[prop] = reminder[prop];
 		}
 	}
 	return returnReminder;
-}
+};
 
 const reminder_state = () => ({
 	reminder_services: null,
 	cached_reminders: {},
 	reminder_count: 0,
-	reminders: undefined
+	reminders: undefined,
 });
 
 const reminder_getters = {
 	reminders: (state) => {
-    // Convert object to sorted array
-    return _.chain(state.reminders)
-    .filter((reminder, key) => {
-      reminder.key = key;
-      return reminder;
-    }).orderBy("name", "asc").value();
-  },
-	reminder_count: (state) => { return state.reminder_count },
-	reminder_services: (state) => { return state.reminder_services },
+		// Convert object to sorted array
+		return _.chain(state.reminders)
+			.filter((reminder, key) => {
+				reminder.key = key;
+				return reminder;
+			})
+			.orderBy("name", "asc")
+			.value();
+	},
+	reminder_count: (state) => {
+		return state.reminder_count;
+	},
+	reminder_services: (state) => {
+		return state.reminder_services;
+	},
 };
 
 const reminder_actions = {
 	async get_reminder_services({ getters, commit }) {
 		if (getters.reminder_services === null || !Object.keys(getters.reminder_services).length) {
-			commit("SET_REMINDER_SERVICES", new reminderServices);
+			commit("SET_REMINDER_SERVICES", new reminderServices());
 		}
 		return getters.reminder_services;
 	},
@@ -50,16 +54,16 @@ const reminder_actions = {
 	 * Stores those reminders in reminders store
 	 * Returns an Array of reminders, ordered by name.
 	 */
-	async get_reminders({ state, rootGetters, dispatch, commit }) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-		let reminders = (state.reminders) ? state.reminders : undefined;
+	async get_reminders({ state, getters, rootGetters, dispatch, commit }) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		let reminders = state.reminders ? state.reminders : undefined;
 
-		if(!reminders && uid) {
+		if ((!reminders || getters.reminder_count > Object.keys(reminders).length) && uid) {
 			const services = await dispatch("get_reminder_services");
 			try {
 				reminders = await services.getReminders(uid);
 				commit("SET_REMINDERS", reminders || {});
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -71,30 +75,30 @@ const reminder_actions = {
 	 * Stores the count it in reminder_count
 	 */
 	async fetch_reminder_count({ rootGetters, commit, dispatch }) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-		if(uid) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
 			const services = await dispatch("get_reminder_services");
 			try {
-				let count = await services.getReminderCount(uid) || 0;
+				let count = (await services.getReminderCount(uid)) || 0;
 				commit("SET_REMINDER_COUNT", count);
 				return;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
 	},
 
 	async get_reminder({ state, commit, dispatch }, { uid, id }) {
-		let reminder = (state.cached_reminders[uid]) ? state.cached_reminders[uid][id] : undefined;
+		let reminder = state.cached_reminders[uid] ? state.cached_reminders[uid][id] : undefined;
 
 		// The reminder is not in the store and needs to be fetched from the database
-		if(!reminder) {
+		if (!reminder) {
 			const services = await dispatch("get_reminder_services");
 			try {
 				const reminder = await services.getReminder(uid, id);
 				commit("SET_CACHED_REMINDER", { uid, id, reminder });
 				return reminder;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -102,41 +106,41 @@ const reminder_actions = {
 	},
 
 	/**
-   * Gets all FULL Reminders from a USER
-   */
+	 * Gets all FULL Reminders from a USER
+	 */
 	async get_full_reminders({ state, rootGetters, commit, dispatch }) {
-    const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-		let reminders = (state.cached_reminders[uid]) ? state.cached_reminders[uid] : {};
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		let reminders = state.cached_reminders[uid] ? state.cached_reminders[uid] : {};
 
-    if (Object.keys(reminders).length < state.reminder_count) {
-      const services = await dispatch("get_reminder_services");
+		if (Object.keys(reminders).length < state.reminder_count) {
+			const services = await dispatch("get_reminder_services");
 
-      try {
-        reminders = await services.getFullReminders(uid);
-        commit("SET_CACHED_REMINDERS", { uid, reminders })
-      } catch(error) {
+			try {
+				reminders = await services.getFullReminders(uid);
+				commit("SET_CACHED_REMINDERS", { uid, reminders });
+			} catch (error) {
 				throw error;
-      }
-    }
+			}
+		}
 		return reminders;
-  },
+	},
 
 	/**
 	 * Adds a newly created REMINDER for a user
 	 * A user can only add REMINDER's for themselves so we use the uid from the store
-	 * 
-	 * @param {object} reminder 
+	 *
+	 * @param {object} reminder
 	 * @returns {string} the id of the newly added reminder
 	 */
 	async add_reminder({ rootGetters, commit, dispatch }, reminder) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		const available_slots = rootGetters.tier.benefits.reminders;
 
-		if(uid) {
+		if (uid) {
 			const services = await dispatch("get_reminder_services");
 			const used_slots = await services.getReminderCount(uid);
 
-			if(used_slots >= available_slots) {
+			if (used_slots >= available_slots) {
 				throw "Not enough slots";
 			}
 			try {
@@ -149,7 +153,7 @@ const reminder_actions = {
 				commit("SET_REMINDER_COUNT", new_count);
 				dispatch("checkEncumbrance", "", { root: true });
 				return id;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -159,13 +163,13 @@ const reminder_actions = {
 	 * Updates and existing reminder
 	 * It is possible to edit the reminder of another user (for companions)
 	 * therefore we send the uid from where the function is called
-	 * 
+	 *
 	 * @param {string} uid
-	 * @param {string} id 
-	 * @param {object} reminder 
+	 * @param {string} id
+	 * @param {object} reminder
 	 */
 	async edit_reminder({ commit, dispatch }, { uid, id, reminder }) {
-		if(uid) {
+		if (uid) {
 			const services = await dispatch("get_reminder_services");
 			try {
 				const search_reminder = convert_reminder(reminder);
@@ -173,7 +177,7 @@ const reminder_actions = {
 				commit("SET_REMINDER", { id, search_reminder });
 				commit("SET_CACHED_REMINDER", { uid, id, reminder });
 				return;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
@@ -182,12 +186,12 @@ const reminder_actions = {
 	/**
 	 * Deletes an existing reminder
 	 * A user can only delete their own reminder's so use uid from the store
-	 * 
-	 * @param {string} id 
+	 *
+	 * @param {string} id
 	 */
 	async delete_reminder({ rootGetters, commit, dispatch }, id) {
-		const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-		if(uid) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
 			const services = await dispatch("get_reminder_services");
 			try {
 				await services.deleteReminder(uid, id);
@@ -196,63 +200,67 @@ const reminder_actions = {
 
 				const new_count = await services.updateReminderCount(uid, -1);
 				commit("SET_REMINDER_COUNT", new_count);
-				dispatch("checkEncumbrance", "", { root: true });	
+				dispatch("checkEncumbrance", "", { root: true });
 				return;
-			} catch(error) {
+			} catch (error) {
 				throw error;
 			}
 		}
 	},
 
 	clear_reminder_store({ commit, rootGetters }) {
-    const uid = (rootGetters.user) ? rootGetters.user.uid : undefined;
-    if(uid) {
-      commit("CLEAR_STORE");
-    }
-  }
-}
-
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
+			commit("CLEAR_STORE");
+		}
+	},
+};
 
 const reminder_mutations = {
-	SET_REMINDER_SERVICES(state, payload) { Vue.set(state, "reminder_services", payload); },
-  SET_REMINDER_COUNT(state, value) { Vue.set(state, "reminder_count", value); },
-  SET_REMINDERS(state, value) { Vue.set(state, "reminders", value); },
+	SET_REMINDER_SERVICES(state, payload) {
+		Vue.set(state, "reminder_services", payload);
+	},
+	SET_REMINDER_COUNT(state, value) {
+		Vue.set(state, "reminder_count", value);
+	},
+	SET_REMINDERS(state, value) {
+		Vue.set(state, "reminders", value);
+	},
 	SET_CACHED_REMINDERS(state, { uid, reminders }) {
-    Vue.set(state.cached_reminders, uid, reminders);
-  },
-  SET_CACHED_REMINDER(state, { uid, id, reminder }) { 
-    if(state.cached_reminders[uid]) {
-      Vue.set(state.cached_reminders[uid], id, reminder);
-    } else {
-      Vue.set(state.cached_reminders, uid, { [id]: reminder });
-    }
-  },
-  SET_REMINDER(state, { id, search_reminder }) {
-    if(state.reminders) {
-      Vue.set(state.reminders, id, search_reminder);
-    } else {
-      Vue.set(state, "reminders", { [id]: search_reminder });
-    }
-  },
-  REMOVE_REMINDER(state, id) { 
-    Vue.delete(state.reminders, id); },
-  REMOVE_CACHED_REMINDER(state, { uid, id }) {
-    if(state.cached_reminders[uid]) {
-      Vue.delete(state.cached_reminders[uid], id);
-    }
-  },
+		Vue.set(state.cached_reminders, uid, reminders);
+	},
+	SET_CACHED_REMINDER(state, { uid, id, reminder }) {
+		if (state.cached_reminders[uid]) {
+			Vue.set(state.cached_reminders[uid], id, reminder);
+		} else {
+			Vue.set(state.cached_reminders, uid, { [id]: reminder });
+		}
+	},
+	SET_REMINDER(state, { id, search_reminder }) {
+		if (state.reminders) {
+			Vue.set(state.reminders, id, search_reminder);
+		} else {
+			Vue.set(state, "reminders", { [id]: search_reminder });
+		}
+	},
+	REMOVE_REMINDER(state, id) {
+		Vue.delete(state.reminders, id);
+	},
+	REMOVE_CACHED_REMINDER(state, { uid, id }) {
+		if (state.cached_reminders[uid]) {
+			Vue.delete(state.cached_reminders[uid], id);
+		}
+	},
 	CLEAR_STORE(state) {
-    Vue.set(state, "reminders", undefined);
-    Vue.set(state, "reminder_count", 0);
-  }
-}
-
-
+		Vue.set(state, "reminders", undefined);
+		Vue.set(state, "reminder_count", 0);
+	},
+};
 
 export default {
 	namespaced: true,
 	state: reminder_state,
 	getters: reminder_getters,
-	actions: reminder_actions, 
-	mutations: reminder_mutations
-}
\ No newline at end of file
+	actions: reminder_actions,
+	mutations: reminder_mutations,
+};
diff --git a/src/store/modules/userContent/spells.js b/src/store/modules/userContent/spells.js
index 0a43be4b3..7edd6f32f 100644
--- a/src/store/modules/userContent/spells.js
+++ b/src/store/modules/userContent/spells.js
@@ -54,11 +54,11 @@ const spell_actions = {
 	 * Stores those spells in spells store
 	 * Returns an Array of spells, ordered by name.
 	 */
-	async get_spells({ state, rootGetters, dispatch, commit }) {
+	async get_spells({ state, getters, rootGetters, dispatch, commit }) {
 		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		let spells = state.spells ? state.spells : undefined;
 
-		if (!spells && uid) {
+		if ((!spells || getters.spell_count > Object.keys(spells).length) && uid) {
 			const services = await dispatch("get_spell_services");
 			try {
 				spells = await services.getSpells(uid);
diff --git a/src/views/RunEncounter.vue b/src/views/RunEncounter.vue
index 12381098f..f3acc32d2 100644
--- a/src/views/RunEncounter.vue
+++ b/src/views/RunEncounter.vue
@@ -146,6 +146,7 @@ export default {
 		return {
 			userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
 			demo: this.$route.name === "Demo",
+			test: this.$route.name === "TestEncounter",
 			campaignId: this.$route.params.campid,
 			encounterId: this.$route.params.encid,
 			target: undefined,
@@ -157,7 +158,7 @@ export default {
 		};
 	},
 	beforeMount() {
-		if (this.$route.name !== "Demo" && this.broadcast.live === this.campaignId) {
+		if (!this.demo && !this.test && this.broadcast.live === this.campaignId) {
 			this.setLiveEncounter(this.encounterId);
 		}
 	},
@@ -176,6 +177,7 @@ export default {
 			cid: this.campaignId,
 			eid: this.encounterId,
 			demo: this.demo,
+			test: this.test,
 		});
 		this.loading = false;
 	},
diff --git a/src/views/UserContent/Encounters/Edit/index.vue b/src/views/UserContent/Encounters/Edit/index.vue
index 59fc6ae2f..3e200d389 100644
--- a/src/views/UserContent/Encounters/Edit/index.vue
+++ b/src/views/UserContent/Encounters/Edit/index.vue
@@ -1,10 +1,7 @@
 <template>
 	<hk-card v-if="overencumbered && !demo" header="You're over encumbered">
 		<div class="card-body">
-			<p>
-				You can't edit an encounter when you are over encumbered, 
-				please resolve this first.
-			</p>
+			<p>You can't edit an encounter when you are over encumbered, please resolve this first.</p>
 
 			<router-link to="/content/manage" class="btn btn-lg btn-block bg-neutral-9">
 				Manage content
@@ -13,39 +10,35 @@
 	</hk-card>
 	<div v-else>
 		<SignedIn v-if="user && demo" />
-		<div v-if="demo" class="d-flex justify-between items-center mb-3">
+		<div class="d-flex justify-between items-center mb-3">
 			<h1 class="written mb-0">
-				Encounter builder for D&D
+				{{ demo ? "Encounter builder for D&D" : encounter.name }}
 			</h1>
 			<button class="btn" :disabled="!validEncounter" @click="runEncounter">
-				Run encounter
-				<i class="fas fa-sword ml-2 rotate" aria-hidden="true" />
+				{{ demo ? "Run" : "Test" }} encounter
+				<i class="fas ml-2" :class="demo ? 'fa-sword rotate' : 'fa-flask'" aria-hidden="true" />
 			</button>
 		</div>
 		<div class="wrapper">
 			<hk-card>
 				<template v-if="!loading">
 					<div class="tabs">
-						<q-tabs
-							v-model="tab"
-							dark
-							inline-label
-							align="justify"
-							:breakpoint="0"
-							no-caps
-						>
+						<q-tabs v-model="tab" dark inline-label align="justify" :breakpoint="0" no-caps>
 							<q-route-tab
-								exact replace
+								exact
+								replace
 								label="Back"
 								icon="fas fa-arrow-left"
 								class="pl-0"
 								name="back"
-								:to="demo ? `/tools/encounter-builder` : `/content/campaigns/${$route.params.campid}`"
+								:to="
+									demo ? `/tools/encounter-builder` : `/content/campaigns/${$route.params.campid}`
+								"
 							/>
-							<q-tab 
-								v-for="({name, icon, label}, index) in tabs"
-								:key="`tab-${index}`" 
-								:name="name" 
+							<q-tab
+								v-for="({ name, icon, label }, index) in tabs"
+								:key="`tab-${index}`"
+								:name="name"
 								:icon="icon"
 								:label="label"
 							/>
@@ -53,9 +46,9 @@
 					</div>
 					<q-tab-panels v-model="tab" class="bg-transparent">
 						<q-tab-panel name="entities">
-							<Entities 
-								:encounter="encounter" 
-								:campaign="campaign" 
+							<Entities
+								:encounter="encounter"
+								:campaign="campaign"
 								:campaign_players="campaign_players"
 								:add-players="addPlayersTriggered"
 							/>
@@ -75,10 +68,10 @@
 			</hk-card>
 
 			<!-- ENCOUNTER OVERVIEW -->
-			<Overview 
-				v-if="!loading" 
-				:encounter="encounter" 
-				:campaign="campaign" 
+			<Overview
+				v-if="!loading"
+				:encounter="encounter"
+				:campaign="campaign"
 				:campaign_players="campaign_players"
 				@add-players="trigger"
 			/>
@@ -90,154 +83,159 @@
 </template>
 
 <script>
-	import Loot from "./Loot.vue";
-	import Xp from "./Xp.vue";
-	import Entities from "./Entities.vue";
-	import Overview from "./Overview.vue";
-	import General from "./General.vue";
-	import { mapGetters, mapActions } from "vuex";
-	import SignedIn from "src/components/userContent/SignedIn.vue";
+import Loot from "./Loot.vue";
+import Xp from "./Xp.vue";
+import Entities from "./Entities.vue";
+import Overview from "./Overview.vue";
+import General from "./General.vue";
+import { mapGetters, mapActions } from "vuex";
+import SignedIn from "src/components/userContent/SignedIn.vue";
 
-	export default {
-		name: "EditEncounter",
-		components: {
-			Loot,
-			Xp,
-			Entities,
-			Overview,
-			General,
-			SignedIn,
-		},
-		data() {
-			return {
-				demo: this.$route.name === "ToolsBuildEncounter",
-				user: this.$store.getters ? this.$store.getters.user : undefined,
-				campaignId: this.$route.params.campid,
-				encounterId: this.$route.params.encid,
-				campaign: {},
-				encounter: {},
-				campaign_players: {},
-				addPlayersTriggered: false,
-				loading: true,
-				tab: "entities"
-			} 
+export default {
+	name: "EditEncounter",
+	components: {
+		Loot,
+		Xp,
+		Entities,
+		Overview,
+		General,
+		SignedIn,
+	},
+	data() {
+		return {
+			demo: this.$route.name === "ToolsBuildEncounter",
+			user: this.$store.getters ? this.$store.getters.user : undefined,
+			campaignId: this.$route.params.campid,
+			encounterId: this.$route.params.encid,
+			campaign: {},
+			encounter: {},
+			campaign_players: {},
+			addPlayersTriggered: false,
+			loading: true,
+			tab: "entities",
+		};
+	},
+	computed: {
+		...mapGetters(["overencumbered"]),
+		...mapGetters("encounters", ["demo_encounter"]),
+		tabs() {
+			let tabs = {
+				entities: { name: "entities", label: "Entities", icon: "fas fa-helmet-battle" },
+				general: { name: "general", label: "General", icon: "fas fa-sliders-h" },
+			};
+			if (!this.demo) {
+				tabs.loot = { name: "loot", label: "Loot", icon: "fas fa-treasure-chest" };
+			}
+			if (this.campaign.advancement === "experience") {
+				tabs.xp = { name: "xp", label: "XP", icon: "fas fa-sparkles" };
+			}
+			return tabs;
 		},
-		computed: {
-			...mapGetters([
-				"overencumbered"
-			]),
-			...mapGetters("encounters", ["demo_encounter"]),
-			tabs() {
-				let tabs = {
-					entities: { name: "entities", label: "Entities", icon: "fas fa-helmet-battle" },
-					general: { name: "general", label: "General", icon: "fas fa-sliders-h" }
-				}
-				if(!this.demo) {
-					tabs.loot = { name: "loot", label: "Loot", icon: "fas fa-treasure-chest" };
-				}
-				if(this.campaign.advancement === "experience") {
-					tabs.xp = { name: "xp", label: "XP", icon: "fas fa-sparkles" };
-				}
-				return tabs;
-			},
-			validEncounter() {
-				// A valid encounter has at least 1 player and 1 npc
-				if(!this.encounter.entities) {
-					return false;
-				}
-				return Object.values(this.encounter.entities).filter(entity => entity.entityType === "player").length 
-					&& Object.values(this.encounter.entities).filter(entity => entity.entityType === "npc").length
+		validEncounter() {
+			// A valid encounter has at least 1 player and 1 npc
+			if (!this.encounter.entities) {
+				return false;
 			}
+			return (
+				Object.values(this.encounter.entities).filter((entity) => entity.entityType === "player")
+					.length &&
+				Object.values(this.encounter.entities).filter((entity) => entity.entityType === "npc")
+					.length
+			);
 		},
-		async	mounted() {
-			if(!this.demo) {
-				this.campaign = await this.get_campaign({
-					uid: this.user.uid,
-					id: this.campaignId
-				})
+	},
+	async mounted() {
+		if (!this.demo) {
+			this.campaign = await this.get_campaign({
+				uid: this.user.uid,
+				id: this.campaignId,
+			});
+
+			this.encounter = await this.get_encounter({
+				uid: this.user.uid,
+				campaignId: this.campaignId,
+				id: this.encounterId,
+			});
 
-				this.encounter = await this.get_encounter({
+			for (const playerId in this.campaign.players) {
+				this.campaign_players[playerId] = await this.get_player({
 					uid: this.user.uid,
-					campaignId: this.campaignId, 
-					id: this.encounterId
+					id: playerId,
 				});
-
-				for (const playerId in this.campaign.players) {
-					this.campaign_players[playerId] = await this.get_player({ uid: this.user.uid, id: playerId })
-				}
-			} else {
-				this.encounter = this.demo_encounter || {};
 			}
+		} else {
+			this.encounter = this.demo_encounter || {};
+		}
 
-			this.loading = false;
+		this.loading = false;
+	},
+	methods: {
+		...mapActions("campaigns", ["get_campaign"]),
+		...mapActions("encounters", ["get_encounter", "set_demo_encounter"]),
+		...mapActions("players", ["get_player"]),
+		// Triggered from Overview component, to execute addAllPlayers() in Entities component
+		trigger() {
+			this.addPlayersTriggered = true;
 		},
-		methods: {
-			...mapActions("campaigns", ["get_campaign"]),
-			...mapActions("encounters", ["get_encounter", "set_demo_encounter"]),
-			...mapActions("players", ["get_player"]),
-			// Triggered from Overview component, to execute addAllPlayers() in Entities component
-			trigger() {
-				this.addPlayersTriggered = true;
-			},
-			async runEncounter() {
-				if(this.validEncounter) {
+		async runEncounter() {
+			if (this.validEncounter) {
+				if (this.demo) {
 					await this.set_demo_encounter(this.encounter);
-					this.$router.replace("/demo");
 				}
+				this.$router.replace(
+					this.demo ? "/demo" : `/test-encounter/${this.campaignId}/${this.encounterId}`
+				);
 			}
-		}
-	}
+		},
+	},
+};
 </script>
 
 <style lang="scss" scoped>
+.wrapper {
+	grid-gap: 10px;
+	display: grid;
+	grid-template-columns: 2fr 1fr;
+	grid-template-rows: 1fr;
+	grid-template-areas: "actions overview";
 
-	.wrapper {
-		grid-gap: 10px;
-		display: grid;
-		grid-template-columns: 2fr 1fr;
-		grid-template-rows: 1fr;
-		grid-template-areas: 
-		"actions overview";
-
-		.tabs {
-			background-color: $neutral-8;
-			border-bottom: 1px solid $neutral-6;
-		}
-		.encounter_actions {
-			grid-area: actions;
-			overflow-y: hidden;
+	.tabs {
+		background-color: $neutral-8;
+		border-bottom: 1px solid $neutral-6;
+	}
+	.encounter_actions {
+		grid-area: actions;
+		overflow-y: hidden;
 
-			.q-scrollarea {
-				background: $neutral-6 !important;
-				height: calc(100% - 30px) !important;
-			}
+		.q-scrollarea {
+			background: $neutral-6 !important;
+			height: calc(100% - 30px) !important;
 		}
 	}
-	ul.nav {
-		a.nav-link {
-			&.active {
-				background: $neutral-6 !important;
-			}
+}
+ul.nav {
+	a.nav-link {
+		&.active {
+			background: $neutral-6 !important;
 		}
 	}
-	h1 {
-		font-size: 20px;
-	}
-	.faded {
-		opacity: .3;
-	}
-	.rotate {
-		transform: rotate(45deg);
-		vertical-align: -1px;
-	}
+}
+h1 {
+	font-size: 20px;
+}
+.faded {
+	opacity: 0.3;
+}
+.rotate {
+	transform: rotate(45deg);
+	vertical-align: -1px;
+}
 
-	@media only screen and (max-width: 850px) {
-		.wrapper {
-			grid-template-columns: 1fr;
-			grid-template-areas: 
-			"actions";
-			overflow: visible !important;
-		}
+@media only screen and (max-width: 850px) {
+	.wrapper {
+		grid-template-columns: 1fr;
+		grid-template-areas: "actions";
+		overflow: visible !important;
 	}
-
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/src/views/UserContent/Npcs/Npcs.vue b/src/views/UserContent/Npcs/Npcs.vue
index 81a955d0f..393155407 100644
--- a/src/views/UserContent/Npcs/Npcs.vue
+++ b/src/views/UserContent/Npcs/Npcs.vue
@@ -3,14 +3,14 @@
 		<hk-card>
 			<ContentHeader type="npcs">
 				<button slot="actions-left" class="btn btn-sm bg-neutral-5" @click="exportAll()">
-					Export NPCs
+					Export
 				</button>
 				<button
 					slot="actions-right"
 					class="btn btn-sm bg-neutral-5 mx-2"
 					@click="import_dialog = true"
 				>
-					Import NPCs
+					Import
 				</button>
 			</ContentHeader>