diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index bfeeb964..ab235980 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -225,7 +225,8 @@
 					</router-link>
 				</span>
 				<button
-					class="btn ml-2" @click="startEncounter()"
+					class="btn ml-2"
+					@click="startEncounter()"
 					v-shortkey="['shift', 'arrowright']"
 					@shortkey="startEncounter()"
 				>
@@ -261,7 +262,7 @@ export default {
 		},
 		leaveRoute() {
 			if (this.demo) {
-				return "/";
+				return "/demo";
 			}
 			if (this.test) {
 				return `/content/campaigns/${this.$route.params.campid}/${this.$route.params.encid}`;
diff --git a/src/components/encounters/Entities.vue b/src/components/encounters/Entities.vue
index 8a606db7..d1448e2d 100644
--- a/src/components/encounters/Entities.vue
+++ b/src/components/encounters/Entities.vue
@@ -112,25 +112,28 @@
 									</q-tooltip>
 								</template>
 							</span>
-							<div v-else-if="col.name === 'actions'" class="text-right d-flex justify-content-between">
+							<div
+								v-else-if="col.name === 'actions'"
+								class="text-right d-flex justify-content-between"
+							>
 								<div class="monster-actions">
 									<q-input
-									:dark="$store.getters.theme === 'dark'"
-									filled
-									square
-									dense
-									class="multi_nr ml-2"
-									autocomplete="off"
-									type="number"
-									min="1"
-									max="99"
-									name="name"
-									placeholder="1"
-									v-model="to_add[props.key]"
+										:dark="$store.getters.theme === 'dark'"
+										filled
+										square
+										dense
+										class="multi_nr ml-2"
+										autocomplete="off"
+										type="number"
+										min="1"
+										max="99"
+										name="name"
+										placeholder="1"
+										v-model="to_add[props.key]"
 									/>
 									<a
-									class="btn btn-sm bg-neutral-5 mx-1"
-									@click="multi_add($event, props.key, 'npc', props.row.name, true)"
+										class="btn btn-sm bg-neutral-5 mx-1"
+										@click="multi_add($event, props.key, 'npc', props.row.name, true)"
 									>
 										<i aria-hidden="true" class="fas fa-plus"></i>
 										<q-tooltip anchor="top middle" self="center middle">
@@ -142,7 +145,9 @@
 										@click="multi_add($event, props.key, 'npc', props.row.name, true, true)"
 									>
 										<i aria-hidden="true" class="fas fa-dice-d20"></i>
-										<q-tooltip anchor="top middle" self="center middle"> Add with rolled HP </q-tooltip>
+										<q-tooltip anchor="top middle" self="center middle">
+											Add with rolled HP
+										</q-tooltip>
 									</a>
 								</div>
 							</div>
@@ -183,7 +188,13 @@
 				<q-btn slot="after" no-caps color="primary" @click="filter_dialog = true">
 					Filter
 					<i class="fas fa-filter ml-2" aria-hidden="true" />
-					<q-badge v-if="Object.keys(filter).length" floating rounded color="red" :label="Object.keys(filter).length" />
+					<q-badge
+						v-if="Object.keys(filter).length"
+						floating
+						rounded
+						color="red"
+						:label="Object.keys(filter).length"
+					/>
 				</q-btn>
 			</q-input>
 			<q-table
@@ -231,7 +242,8 @@
 							</a>
 						</q-td>
 						<q-td
-							v-for="col in props.cols" :key="col.name"
+							v-for="col in props.cols"
+							:key="col.name"
 							:props="props"
 							:auto-width="col.name !== 'name'"
 						>
@@ -432,7 +444,7 @@ export default {
 	},
 	data() {
 		return {
-			demo: this.$route.name === "ToolsBuildEncounter",
+			demo: this.$route.name === "ToolsBuildEncounter" || this.$route.name === "DemoBuildEncounter",
 			campaignId: this.$route.params.campid,
 			encounterId: this.$route.params.encid,
 			user: this.$store.getters ? this.$store.getters.user : undefined,
@@ -538,7 +550,7 @@ export default {
 	watch: {
 		// Prop is changed in parent to trigger addAllPlayers function from Overview.vue
 		addPlayers() {
-			this.addAllPlayers();
+			this.demo ? (this.player_dialog = true) : this.addAllPlayers();
 		},
 	},
 	computed: {
@@ -570,11 +582,11 @@ export default {
 		visibleColumns() {
 			switch (true) {
 				case this.width > 600:
-					return  ["challenge_rating", "name", "type", "environment", "actions"];
+					return ["challenge_rating", "name", "type", "environment", "actions"];
 				case this.width > 450:
-					return  ["challenge_rating", "name", "type", "actions"];
+					return ["challenge_rating", "name", "type", "actions"];
 				case this.width > 400:
-					return   ["challenge_rating", "name", "actions"];
+					return ["challenge_rating", "name", "actions"];
 				default:
 					return ["name", "actions"];
 			}
@@ -610,7 +622,7 @@ export default {
 			this.pagination.page = 1;
 			this.query = {
 				search: this.searchMonster,
-				...this.filter
+				...this.filter,
 			};
 			this.fetchMonsters();
 		},
@@ -619,10 +631,10 @@ export default {
 			this.filterMonsters();
 		},
 		clearFilter() {
-				this.filter_dialog = false;
-				this.$set(this, "filter", {});
-				this.filterMonsters();
-			},
+			this.filter_dialog = false;
+			this.$set(this, "filter", {});
+			this.filterMonsters();
+		},
 		request(req) {
 			this.pagination = req.pagination;
 			this.fetchMonsters();
diff --git a/src/components/encounters/General.vue b/src/components/encounters/General.vue
index 609730e9..54e9da57 100644
--- a/src/components/encounters/General.vue
+++ b/src/components/encounters/General.vue
@@ -3,7 +3,7 @@
 		<ValidationObserver v-slot="{ handleSubmit, valid }">
 			<q-form @submit="handleSubmit(edit)" greedy>
 				<h3 class="d-flex justify-between">
-					General settings
+					Atmosphere
 					<div v-if="!demo">
 						<q-btn color="primary" type="submit" no-caps>Save</q-btn>
 						<q-icon v-if="!valid" name="error" color="red" size="md" class="ml-2">
@@ -14,156 +14,178 @@
 					</div>
 				</h3>
 
-				<p v-if="demo">
-					These setting are mostly to add some atmosphere to the live initiative list that you can
-					share with your players. When you have an account you can share a live initiative list of
-					your active encounter with your players and while building the encounter, you can add a
-					<strong>background</strong> and <strong>weather effects</strong> that will show on this
-					shared list.
-				</p>
-				<ValidationProvider rules="required" name="Name" v-slot="{ errors, invalid, validated }">
-					<q-input
-						:dark="$store.getters.theme === 'dark'"
-						filled
-						square
-						label="Name"
-						autocomplete="off"
-						class="mb-3"
-						v-model="editableEncounter.name"
-						:error="invalid && validated"
-						:error-message="errors[0]"
-					/>
-				</ValidationProvider>
-
-				<ValidationProvider rules="audio" name="Audio" v-slot="{ errors, invalid, validated }">
-					<div class="audio">
-						<div v-if="encounter.audio && !invalid" class="img pointer">
-							<a :href="encounter.audio" target="_blank" rel="noopener">
-								<q-icon
-									:class="audio_icons[audio_link_type].icon"
-									:style="`color:${audio_icons[audio_link_type].color};`"
-								></q-icon>
-							</a>
-						</div>
-						<div class="img" v-else>
-							<q-icon name="fas fa-music-alt" />
-						</div>
-						<div>
-							<q-input
-								:dark="$store.getters.theme === 'dark'"
-								filled
-								square
-								label="Audio"
-								autocomplete="off"
-								v-model="editableEncounter.audio"
-								placeholder="Audio URL"
-								:error="invalid && validated"
-								:error-message="errors[0]"
-							/>
-						</div>
-					</div>
-				</ValidationProvider>
+				<template v-if="demo">
+					<p>
+						If you create an account, you can add atmosphere to your encounters, to let players
+						immerse even.
+					</p>
+					<q-list class="mb-3">
+						<q-item class="bg-neutral-8">
+							<q-item-section avatar>
+								<hk-icon icon="fas fa-image" />
+							</q-item-section>
+							<q-item-section>Background</q-item-section>
+						</q-item>
+						<q-item class="bg-neutral-8">
+							<q-item-section avatar>
+								<hk-icon icon="fas fa-music" />
+							</q-item-section>
+							<q-item-section>Audio</q-item-section>
+						</q-item>
+						<q-item class="bg-neutral-8">
+							<q-item-section avatar>
+								<hk-icon icon="fas fa-cloud-showers" />
+							</q-item-section>
+							<q-item-section>Weather effects</q-item-section>
+						</q-item>
+					</q-list>
+					<router-link to="/sign-up" class="btn">Create an account</router-link>
+				</template>
 
-				<hk-background-select
-					v-if="demo || (tier && tier.price !== 'Free')"
-					v-model="editableEncounter.hk_background"
-					label="Background"
-					:disable="!!editableEncounter.background"
-					@input="setBackground($event)"
-					class="mb-3"
-				/>
+				<template v-else>
+					<ValidationProvider rules="required" name="Name" v-slot="{ errors, invalid, validated }">
+						<q-input
+							:dark="$store.getters.theme === 'dark'"
+							filled
+							square
+							label="Name of your encounter"
+							autocomplete="off"
+							class="mb-3"
+							v-model="editableEncounter.name"
+							:error="invalid && validated"
+							:error-message="errors[0]"
+						/>
+					</ValidationProvider>
 
-				<ValidationProvider rules="url" name="Audio" v-slot="{ errors, invalid, validated }">
-					<div class="background mb-3">
-						<div
-							v-if="encounter.background && !invalid"
-							class="img pointer"
-							:style="{ backgroundImage: 'url(\'' + encounter.background + '\')' }"
-							@click="image = true"
-						></div>
-						<div class="img" v-else>
-							<q-icon name="fas fa-image" />
+					<ValidationProvider rules="audio" name="Audio" v-slot="{ errors, invalid, validated }">
+						<div class="audio">
+							<div v-if="encounter.audio && !invalid" class="img pointer">
+								<a :href="encounter.audio" target="_blank" rel="noopener">
+									<q-icon
+										:class="audio_icons[audio_link_type].icon"
+										:style="`color:${audio_icons[audio_link_type].color};`"
+									></q-icon>
+								</a>
+							</div>
+							<div class="img" v-else>
+								<q-icon name="fas fa-music-alt" />
+							</div>
+							<div>
+								<q-input
+									:dark="$store.getters.theme === 'dark'"
+									filled
+									square
+									label="Audio"
+									autocomplete="off"
+									v-model="editableEncounter.audio"
+									placeholder="Audio URL"
+									:error="invalid && validated"
+									:error-message="errors[0]"
+								/>
+							</div>
 						</div>
-						<div>
-							<q-input
-								:dark="$store.getters.theme === 'dark'"
-								filled
-								square
-								label="Background"
-								autocomplete="off"
-								v-model="editableEncounter.background"
-								class="mb-2"
-								placeholder="Background URL"
-								:error="invalid && validated"
-								:error-message="errors[0]"
-								@input="editableEncounter.hk_background = null"
-							>
-								<hk-popover
-									slot="append"
-									header="Custom background"
-									v-if="demo || (tier && tier.price !== 'Free')"
+					</ValidationProvider>
+
+					<hk-background-select
+						v-if="demo || (tier && tier.price !== 'Free')"
+						v-model="editableEncounter.hk_background"
+						label="Background"
+						:disable="!!editableEncounter.background"
+						@input="setBackground($event)"
+						class="mb-3"
+					/>
+					<ValidationProvider rules="url" name="Audio" v-slot="{ errors, invalid, validated }">
+						<div class="background mb-3">
+							<div
+								v-if="encounter.background && !invalid"
+								class="img pointer"
+								:style="{ backgroundImage: 'url(\'' + encounter.background + '\')' }"
+								@click="image = true"
+							></div>
+							<div class="img" v-else>
+								<q-icon name="fas fa-image" />
+							</div>
+							<div>
+								<q-input
+									:dark="$store.getters.theme === 'dark'"
+									filled
+									square
+									label="Background"
+									autocomplete="off"
+									v-model="editableEncounter.background"
+									class="mb-2"
+									placeholder="Background URL"
+									:error="invalid && validated"
+									:error-message="errors[0]"
+									@input="editableEncounter.hk_background = null"
 								>
-									<i class="fas fa-info-circle" aria-hidden="true" />
-									<template #content>
-										Setting a custom background will overwrite your selected background.
-									</template>
-								</hk-popover>
-							</q-input>
+									<hk-popover
+										slot="append"
+										header="Custom background"
+										v-if="demo || (tier && tier.price !== 'Free')"
+									>
+										<i class="fas fa-info-circle" aria-hidden="true" />
+										<template #content>
+											Setting a custom background will overwrite your selected background.
+										</template>
+									</hk-popover>
+								</q-input>
+							</div>
 						</div>
-					</div>
-				</ValidationProvider>
+					</ValidationProvider>
 
-				<template v-if="demo || (tier && tier.price !== 'Free')">
-					<h3>
-						Background effects
-						<q-icon name="fas fa-eye" class="blue ml-1 pointer" @click="image = true">
-							<q-tooltip anchor="top middle" self="center middle"> Background preview </q-tooltip>
-						</q-icon>
-					</h3>
-					<EditWeather v-model="weather" />
-				</template>
+					<template v-if="tier && tier.price !== 'Free'">
+						<h3>
+							Background effects
+							<q-icon name="fas fa-eye" class="blue ml-1 pointer" @click="image = true">
+								<q-tooltip anchor="top middle" self="center middle"> Background preview </q-tooltip>
+							</q-icon>
+						</h3>
+						<EditWeather v-model="weather" />
+					</template>
 
-				<div v-if="!demo" class="d-flex justify-start items-center mb-3">
-					<q-btn color="primary" type="submit" no-caps>Save</q-btn>
-					<q-icon v-if="!valid" name="error" color="red" size="md" class="ml-2">
-						<q-tooltip anchor="top middle" self="center middle">
-							There are validation errors
-						</q-tooltip>
-					</q-icon>
-				</div>
-
-				<hk-card v-if="!demo && (!tier || tier.price === 'Free')">
-					<div slot="header" class="card-header">
-						<span>
-							<i class="fas fa-cloud-showers" aria-hidden="true" />
-							<i class="fas fa-cloud-snow mx-2" aria-hidden="true" />
-							<i class="fas fa-fog" aria-hidden="true" />
-						</span>
-						<strong>Backgrounds & Effects</strong>
-						<span>
-							<i class="fas fa-bolt" aria-hidden="true" />
-							<i class="fas fa-tornado mx-2" aria-hidden="true" />
-							<i class="fas fa-waveform-path" aria-hidden="true" />
-						</span>
-					</div>
-					<div class="p-3 text-center">
-						<p>With a subscription you have access to our backgrounds and background effects.</p>
-						<p>
-							<template v-for="(effect, i) in effects">
-								<strong :key="`effect-${effect}`">{{ effect.toUpperCase() }}</strong>
-								<span class="neutral-2 mx-1" :key="`pipe-${effect}`" v-if="i < effects.length - 1"
-									>|</span
-								>
-							</template>
-						</p>
-						<router-link class="btn btn-sm bg-neutral-5 full-width" to="/weather-demo">
-							Checkout all effects
-						</router-link>
-						<router-link class="btn btn-sm full-width mt-2 bg-patreon-red" to="/patreon">
-							Get a subscription
-						</router-link>
+					<div v-if="!demo" class="d-flex justify-start items-center mb-3">
+						<q-btn color="primary" type="submit" no-caps>Save</q-btn>
+						<q-icon v-if="!valid" name="error" color="red" size="md" class="ml-2">
+							<q-tooltip anchor="top middle" self="center middle">
+								There are validation errors
+							</q-tooltip>
+						</q-icon>
 					</div>
-				</hk-card>
+
+					<hk-card v-if="!demo && (!tier || tier.price === 'Free')">
+						<div slot="header" class="card-header">
+							<span>
+								<i class="fas fa-cloud-showers" aria-hidden="true" />
+								<i class="fas fa-cloud-snow mx-2" aria-hidden="true" />
+								<i class="fas fa-fog" aria-hidden="true" />
+							</span>
+							<strong>Backgrounds & Effects</strong>
+							<span>
+								<i class="fas fa-bolt" aria-hidden="true" />
+								<i class="fas fa-tornado mx-2" aria-hidden="true" />
+								<i class="fas fa-waveform-path" aria-hidden="true" />
+							</span>
+						</div>
+						<div class="p-3 text-center">
+							<p>With a subscription you have access to our backgrounds and background effects.</p>
+							<p>
+								<template v-for="(effect, i) in effects">
+									<strong :key="`effect-${effect}`">{{ effect.toUpperCase() }}</strong>
+									<span class="neutral-2 mx-1" :key="`pipe-${effect}`" v-if="i < effects.length - 1"
+										>|</span
+									>
+								</template>
+							</p>
+							<router-link class="btn btn-sm bg-neutral-5 full-width" to="/weather-demo">
+								Checkout all effects
+							</router-link>
+							<router-link class="btn btn-sm full-width mt-2 bg-patreon-red" to="/patreon">
+								Get a subscription
+							</router-link>
+						</div>
+					</hk-card>
+				</template>
 			</q-form>
 		</ValidationObserver>
 
@@ -219,7 +241,7 @@ export default {
 	mixins: [audio],
 	data() {
 		return {
-			demo: this.$route.name === "ToolsBuildEncounter",
+			demo: this.$route.name === "ToolsBuildEncounter" || this.$route.name === "DemoBuildEncounter",
 			campaignId: this.$route.params.campid,
 			encounterId: this.$route.params.encid,
 			user: this.$store.getters.user,
@@ -330,4 +352,7 @@ export default {
 .edit-weather {
 	min-width: 240px;
 }
+.q-item {
+	margin-bottom: 1px;
+}
 </style>
diff --git a/src/components/encounters/Overview.vue b/src/components/encounters/Overview.vue
index 64688709..581dd808 100644
--- a/src/components/encounters/Overview.vue
+++ b/src/components/encounters/Overview.vue
@@ -252,8 +252,8 @@
 						<template v-else>
 							<h3>Add entities</h3>
 							<p>Add players and monsters to create your encounter.</p>
-							<button v-if="!demo" class="btn btn-block" @click="$emit('add-players')">
-								Add all players
+							<button class="btn btn-block" @click="$emit('add-players')">
+								Add{{ !demo ? " all " : " " }}players
 							</button>
 						</template>
 					</div>
@@ -321,7 +321,7 @@ export default {
 	mixins: [difficulty],
 	data() {
 		return {
-			demo: this.$route.name === "ToolsBuildEncounter",
+			demo: this.$route.name === "ToolsBuildEncounter" || this.$route.name === "DemoBuildEncounter",
 			campaignId: this.$route.params.campid,
 			encounterId: this.$route.params.encid,
 			user: this.$store.getters ? this.$store.getters.user : undefined,
@@ -457,9 +457,9 @@ export default {
 						continue;
 					}
 					if (entity.entityType == "player" && !this.demo) {
-						entities[entity.id] = await this.get_player({ uid: this.user.uid, id: key });
+						entities[entity.id] = await this.get_player({ uid: this.user?.uid, id: key });
 					} else if (entity.npc === "custom" && !this.demo) {
-						entities[entity.id] = await this.get_npc({ uid: this.user.uid, id: entity.id });
+						entities[entity.id] = await this.get_npc({ uid: this.user?.uid, id: entity.id });
 					} else if (entity.npc === "api" || entity.npc === "srd") {
 						entities[entity.id] = await this.fetch_monster(entity.id);
 					}
diff --git a/src/components/encounters/index.vue b/src/components/encounters/index.vue
index 2530c5a0..0e089f68 100644
--- a/src/components/encounters/index.vue
+++ b/src/components/encounters/index.vue
@@ -93,7 +93,7 @@ export default {
 	},
 	data() {
 		return {
-			demo: this.$route.name === "ToolsBuildEncounter",
+			demo: this.$route.name === "ToolsBuildEncounter" || this.$route.name === "DemoBuildEncounter",
 			user: this.$store.getters ? this.$store.getters.user : undefined,
 			campaignId: this.$route.params.campid,
 			encounterId: this.$route.params.encid,
@@ -111,7 +111,7 @@ export default {
 		tabs() {
 			let tabs = {
 				entities: { name: "entities", label: "Entities", icon: "fas fa-helmet-battle" },
-				general: { name: "general", label: "General", icon: "fas fa-sliders-h" },
+				general: { name: "general", label: "Atmosphere", icon: "fas fa-image" },
 			};
 			if (!this.demo) {
 				tabs.loot = { name: "loot", label: "Loot", icon: "fas fa-treasure-chest" };
@@ -137,19 +137,19 @@ export default {
 	async mounted() {
 		if (!this.demo) {
 			this.campaign = await this.get_campaign({
-				uid: this.user.uid,
+				uid: this.user?.uid,
 				id: this.campaignId,
 			});
 
 			this.encounter = await this.get_encounter({
-				uid: this.user.uid,
+				uid: this.user?.uid,
 				campaignId: this.campaignId,
 				id: this.encounterId,
 			});
 
 			for (const playerId in this.campaign.players) {
 				this.campaign_players[playerId] = await this.get_player({
-					uid: this.user.uid,
+					uid: this.user?.uid,
 					id: playerId,
 				});
 			}
@@ -173,7 +173,9 @@ export default {
 					await this.set_demo_encounter(this.encounter);
 				}
 				this.$router.replace(
-					this.demo ? "/demo" : `/test-encounter/${this.campaignId}/${this.encounterId}`
+					this.demo
+						? "/demo/run-encounter"
+						: `/test-encounter/${this.campaignId}/${this.encounterId}`
 				);
 			}
 		},
diff --git a/src/layouts/demo.vue b/src/layouts/demo.vue
new file mode 100644
index 00000000..a0adea44
--- /dev/null
+++ b/src/layouts/demo.vue
@@ -0,0 +1,14 @@
+<template>
+	<div>
+		<router-view />
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DemoLayout",
+	data() {
+		return {};
+	},
+};
+</script>
diff --git a/src/router/routes.js b/src/router/routes.js
index 2bb78e22..d29a3477 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -14,6 +14,7 @@ const Username = () => import("src/views/profile/SetUsername.vue");
 const DeleteAccount = () => import("src/views/profile/DeleteAccount.vue");
 const Offline = () => import("src/views/Pages/Offline.vue");
 const RunEncounter = () => import("src/views/RunEncounter.vue");
+const EncounterBuilder = () => import("src/views/userContent/Encounters/EditEncounter");
 const User = () => import("src/views/User.vue");
 
 // This is where you add all your site routes
@@ -585,7 +586,7 @@ const routes = [
 			{
 				path: ":encid",
 				name: "EditEncounter",
-				component: () => import("src/views/UserContent/Encounters/EditEncounter"),
+				component: EncounterBuilder,
 				meta: {
 					title: "Edit encounter",
 					description: "Edit your Shieldmaiden encounter.",
@@ -1184,16 +1185,33 @@ const routes = [
 	// DEMO ENCOUNTER
 	{
 		path: "/demo",
-		name: "Demo",
-		component: RunEncounter,
-		meta: {
-			sidebar: false,
-			offline: true,
-			title: "D&D Initative Tracker - Demo",
-			description:
-				"Try running an encounter with Shieldmaiden, an advanced Initiative Tracker for Dungeons & Dragons (D&D) 5th Edition (5e).",
-		},
+		component: () => import("src/layouts/demo"),
+		children: [
+			{
+				path: "",
+				name: "DemoBuildEncounter",
+				component: EncounterBuilder,
+				meta: {
+					sidebar: false,
+					title: "Encounter Builder D&D Demo",
+					description:
+						"Build an encounter with Shieldmaiden, an advanced Combat Tracker for Dungeons & Dragons (D&D) 5th Edition (5e).",
+				},
+			},
+			{
+				path: "run-encounter",
+				name: "Demo",
+				component: RunEncounter,
+				meta: {
+					sidebar: false,
+					title: "D&D Initiative Tracker Demo",
+					description:
+						"Run encounter with Shieldmaiden, an advanced Initiative Tracker for Dungeons & Dragons (D&D) 5th Edition (5e).",
+				},
+			},
+		],
 	},
+
 	{
 		path: "/weather-demo",
 		name: "Weather demo",
diff --git a/src/views/RunEncounter.vue b/src/views/RunEncounter.vue
index c605755f..7ea51050 100644
--- a/src/views/RunEncounter.vue
+++ b/src/views/RunEncounter.vue
@@ -108,25 +108,14 @@
 		</div>
 		<DemoOverlay v-if="demo" />
 		<q-dialog v-model="demo_dialog" persistent>
-			<hk-card v-if="!user || continue_demo" header="Choose encounter">
-				<div class="card-body text-center">
-					<p>Would you like to use our demo encounter or build your own custom encounter?</p>
-					<button class="btn btn-block mb-2" @click="demo_dialog = false">
-						Use demo encounter
-					</button>
-					<router-link to="/tools/encounter-builder/build-encounter" class="btn btn-sm btn-clear btn-block">
-						Build custom encounter
-					</router-link>
-				</div>
-			</hk-card>
-			<hk-card v-else header="Create custom content">
+			<hk-card header="Create custom content">
 				<div class="card-body text-center">
 					<h2>This is our demo encounter.</h2>
 					<p>When signed in you can create Campaigns and run your custom Encounters from there.</p>
 					<router-link to="/content/campaigns" class="btn bg-green btn-block mb-2">
 						Go to campaigns
 					</router-link>
-					<button class="btn btn-sm btn-block btn-clear" @click="continue_demo = true">
+					<button class="btn btn-sm btn-block btn-clear" @click="demo_dialog = false">
 						Continue demo
 					</button>
 				</div>
@@ -186,7 +175,6 @@ export default {
 			audio_notification: false,
 			loading: true,
 			demo_dialog: false,
-			continue_demo: false,
 			panes: ["current", "targets", "targeted", "side"],
 			focused_pane: null,
 		};
@@ -205,7 +193,7 @@ export default {
 				id: this.encounterId,
 			});
 		} else {
-			this.demo_dialog = !this.demo_encounter;
+			this.demo_dialog = !!this.userId;
 		}
 		await this.init_Encounter({
 			cid: this.campaignId,
diff --git a/src/views/UserContent/Encounters/EditEncounter.vue b/src/views/UserContent/Encounters/EditEncounter.vue
index b4322fc6..834feef6 100644
--- a/src/views/UserContent/Encounters/EditEncounter.vue
+++ b/src/views/UserContent/Encounters/EditEncounter.vue
@@ -1,7 +1,10 @@
 <template>
 	<div class="content">
 		<EditEncounter>
-			<router-link :to="`/content/campaigns/${campaignId}`" class="btn btn-sm btn-clear">
+			<router-link
+				:to="campaignId ? `/content/campaigns/${campaignId}` : `/`"
+				class="btn btn-sm btn-clear"
+			>
 				<hk-icon icon="fa fa-arrow-left" class="mr-1" />
 				Back
 			</router-link>