diff --git a/package-lock.json b/package-lock.json
index 9c4c3170..54288368 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "harmless_key",
-	"version": "2.21.0",
+	"version": "2.22.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "harmless_key",
-			"version": "2.21.0",
+			"version": "2.22.0",
 			"dependencies": {
 				"@octokit/rest": "^19.0.5",
 				"@quasar/extras": "^1.16.9",
diff --git a/package.json b/package.json
index 24c8b9e0..6441e0db 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"version": "2.21.0",
+	"version": "2.22.0",
 	"name": "harmless_key",
 	"description": "A Dungeons and Dragons Combat Tracker",
 	"productName": "Harmless Key",
diff --git a/src/components/compendium/Monster.vue b/src/components/compendium/Monster.vue
index 3f0c814c..98b25f8a 100644
--- a/src/components/compendium/Monster.vue
+++ b/src/components/compendium/Monster.vue
@@ -357,6 +357,10 @@
 				</template>
 			</div>
 		</div>
+
+		<div v-if="monster.environment?.length" class="mt-3">
+			<strong>Environment:</strong> {{ monster.environment.join(", ").capitalizeEach() }}
+		</div>
 		<q-resize-observer @resize="setSize" />
 	</div>
 	<hk-loader v-else name="monster" />
diff --git a/src/components/encounters/Entities.vue b/src/components/encounters/Entities.vue
index 2682b322..8a606db7 100644
--- a/src/components/encounters/Entities.vue
+++ b/src/components/encounters/Entities.vue
@@ -92,53 +92,65 @@
 				:filter="searchNpc"
 				wrap-cells
 			>
-				<template v-slot:body-cell="props">
-					<q-td v-if="props.col.name !== 'actions'">
-						<div class="truncate-cell">
-							<div class="truncate">
-								<router-link v-if="props.col.name === 'name'" :to="`/content/npcs/${props.key}`">
-									{{ props.value }}
-								</router-link>
-								<template v-else>
-									{{ props.value }}
+				<template v-slot:body="props">
+					<q-tr :props="props">
+						<q-td
+							v-for="col in props.cols"
+							:key="col.name"
+							:props="props"
+							:auto-width="col.name !== 'name'"
+						>
+							<router-link v-if="col.name === 'name'" :to="`/content/npcs/${col.key}`">
+								{{ col.value }}
+							</router-link>
+							<span v-else-if="col.name === 'environment'">
+								{{ col.value?.[0]?.capitalize() }}
+								<template v-if="col.value?.length > 1">
+									<span class="neutral-2">+{{ col.value.length - 1 }}</span>
+									<q-tooltip anchor="top middle" self="center middle">
+										{{ col.value?.join(", ").capitalizeEach() }}
+									</q-tooltip>
 								</template>
+							</span>
+							<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]"
+									/>
+									<a
+									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">
+											Add with average HP
+										</q-tooltip>
+									</a>
+									<a
+										class="btn btn-sm bg-neutral-5"
+										@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>
+									</a>
+								</div>
 							</div>
-						</div>
-					</q-td>
-					<q-td v-else 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]"
-							/>
-							<a
-								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">
-									Add with average HP
-								</q-tooltip>
-							</a>
-							<a
-								class="btn btn-sm bg-neutral-5"
-								@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>
-							</a>
-						</div>
-					</q-td>
+							<template v-else>
+								{{ col.value }}
+							</template>
+						</q-td>
+					</q-tr>
 				</template>
 				<div slot="no-data" />
 				<hk-loader slot="loading" name="monsters" />
@@ -164,10 +176,15 @@
 				debounce="300"
 				clearable
 				placeholder="Search SRD monster"
-				@change="filter"
+				@change="filterMonsters"
+				@clear="filterMonsters"
 			>
 				<q-icon slot="prepend" name="search" />
-				<q-btn slot="after" no-caps color="primary" label="Search" @click="filter" />
+				<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-btn>
 			</q-input>
 			<q-table
 				:data="monsters"
@@ -190,7 +207,12 @@
 				<template v-slot:header="props">
 					<q-tr :props="props">
 						<q-th auto-width />
-						<q-th v-for="col in props.cols" :key="col.name" :props="props">
+						<q-th
+							v-for="col in props.cols"
+							:key="col.name"
+							:props="props"
+							:auto-width="col.name !== 'name'"
+						>
 							{{ col.label }}
 						</q-th>
 					</q-tr>
@@ -200,7 +222,7 @@
 				<template v-slot:body="props">
 					<q-tr :props="props">
 						<q-td auto-width>
-							<a @click="props.expand = !props.expand">
+							<a @click="props.expand = !props.expand" class="neutral-2">
 								<i
 									aria-hidden="true"
 									class="fas"
@@ -208,52 +230,55 @@
 								/>
 							</a>
 						</q-td>
-						<q-td v-for="col in props.cols" :key="col.name" :props="props">
-							<div class="truncate-cell">
-								<div class="truncate">
-									<router-link
-										v-if="col.name === 'name'"
-										:to="'/compendium/monsters/' + col.value.replace(/ /g, '-').toLowerCase()"
-									>
-										{{ col.value }}
-									</router-link>
-									<div v-else-if="col.name === 'actions'" 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]"
-										/>
-										<a
-											class="btn btn-sm bg-neutral-5 mx-1"
-											@click="multi_add($event, props.key, 'npc', props.row.name, false)"
-										>
-											<i aria-hidden="true" class="fas fa-plus"></i>
-											<q-tooltip anchor="top middle" self="center middle">
-												Add with average HP
-											</q-tooltip>
-										</a>
-										<a
-											class="btn btn-sm bg-neutral-5"
-											@click="multi_add($event, props.key, 'npc', props.row.name, false, 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>
-										</a>
-									</div>
-									<template v-else>{{ col.value }}</template>
-								</div>
+						<q-td
+							v-for="col in props.cols" :key="col.name"
+							:props="props"
+							:auto-width="col.name !== 'name'"
+						>
+							<div v-if="col.name === 'actions'" 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]"
+								/>
+								<a
+									class="btn btn-sm bg-neutral-5 mx-1"
+									@click="multi_add($event, props.key, 'npc', props.row.name, false)"
+								>
+									<i aria-hidden="true" class="fas fa-plus"></i>
+									<q-tooltip anchor="top middle" self="center middle">
+										Add with average HP
+									</q-tooltip>
+								</a>
+								<a
+									class="btn btn-sm bg-neutral-5"
+									@click="multi_add($event, props.key, 'npc', props.row.name, false, 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>
+								</a>
 							</div>
+							<span v-else-if="col.name === 'environment'">
+								{{ col.value?.[0]?.capitalize() }}
+								<template v-if="col.value?.length > 1">
+									<span class="neutral-2">+{{ col.value.length - 1 }}</span>
+									<q-tooltip anchor="top middle" self="center middle">
+										{{ col.value?.join(", ").capitalizeEach() }}
+									</q-tooltip>
+								</template>
+							</span>
+							<template v-else>{{ col.value }}</template>
 						</q-td>
 					</q-tr>
 					<q-tr v-if="props.expand" :props="props">
@@ -266,6 +291,24 @@
 		</template>
 		<q-resize-observer @resize="setSize" />
 
+		<q-dialog v-model="filter_dialog">
+			<hk-card header="Filter monsters" :min-width="300">
+				<div class="card-body">
+					<hk-filter v-model="filter" type="monster" />
+				</div>
+				<div slot="footer" class="card-footer">
+					<button class="btn bg-neutral-5" @click="clearFilter">
+						<i class="fas fa-times" aria-hidden="true" />
+						Clear filter
+					</button>
+					<button class="btn ml-2" @click="setFilter">
+						<i class="fas fa-filter" aria-hidden="true" />
+						Set filter
+					</button>
+				</div>
+			</hk-card>
+		</q-dialog>
+
 		<q-dialog v-model="player_dialog">
 			<div>
 				<ValidationObserver v-slot="{ handleSubmit, valid }">
@@ -400,6 +443,8 @@ export default {
 			player: {},
 			drawer: this.$store.getters.getDrawer,
 			to_add: {},
+			filter_dialog: false,
+			filter: {},
 			typeFilter: [],
 			monsterFields: {
 				name: {
@@ -441,12 +486,24 @@ export default {
 			},
 			npcPaginationSetter: undefined,
 			columns: [
+				{
+					name: "challenge_rating",
+					label: "CR",
+					field: "challenge_rating",
+					align: "left",
+					headerStyle: "min-width: 70px;",
+					style: "font-weight: bold;",
+					sortable: true,
+					format: (val) => this.cr(val),
+				},
 				{
 					name: "name",
 					label: "Name",
 					field: "name",
 					sortable: true,
 					align: "left",
+					classes: "truncate-cell",
+					style: "font-weight: bold;",
 					format: (val) => val.capitalizeEach(),
 				},
 				{
@@ -457,12 +514,11 @@ export default {
 					sortable: true,
 				},
 				{
-					name: "challenge_rating",
-					label: "CR",
-					field: "challenge_rating",
+					name: "environment",
+					label: "Environment",
+					field: "environment",
+					style: "white-space: nowrap;",
 					align: "left",
-					sortable: true,
-					format: (val) => this.cr(val),
 				},
 				{
 					name: "actions",
@@ -512,11 +568,16 @@ export default {
 			},
 		},
 		visibleColumns() {
-			return this.width > 600
-				? ["name", "type", "challenge_rating", "actions"]
-				: this.width > 450
-				? ["name", "type", "actions"]
-				: ["name", "actions"];
+			switch (true) {
+				case this.width > 600:
+					return  ["challenge_rating", "name", "type", "environment", "actions"];
+				case this.width > 450:
+					return  ["challenge_rating", "name", "type", "actions"];
+				case this.width > 400:
+					return   ["challenge_rating", "name", "actions"];
+				default:
+					return ["name", "actions"];
+			}
 		},
 		addable() {
 			let count = 0;
@@ -543,15 +604,25 @@ export default {
 		cr(val) {
 			return val == 0.125 ? "1/8" : val == 0.25 ? "1/4" : val == 0.5 ? "1/2" : val;
 		},
-		filter() {
+		filterMonsters() {
 			this.loading_monsters = true;
 			this.monsters = [];
 			this.pagination.page = 1;
 			this.query = {
 				search: this.searchMonster,
+				...this.filter
 			};
 			this.fetchMonsters();
 		},
+		setFilter() {
+			this.filter_dialog = false;
+			this.filterMonsters();
+		},
+		clearFilter() {
+				this.filter_dialog = false;
+				this.$set(this, "filter", {});
+				this.filterMonsters();
+			},
 		request(req) {
 			this.pagination = req.pagination;
 			this.fetchMonsters();
@@ -561,7 +632,7 @@ export default {
 				pageNumber: this.pagination.page,
 				pageSize: this.pagination.rowsPerPage,
 				query: this.query,
-				fields: ["name", "type", "challenge_rating"],
+				fields: ["name", "type", "challenge_rating", "environment"],
 				sortBy: this.pagination.sortBy,
 				descending: this.pagination.descending,
 			}).then((result) => {
diff --git a/src/components/encounters/Overview.vue b/src/components/encounters/Overview.vue
index fa02a967..5490f8be 100644
--- a/src/components/encounters/Overview.vue
+++ b/src/components/encounters/Overview.vue
@@ -440,12 +440,14 @@ export default {
 		async setDifficulty() {
 			this.encDifficulty = await this.difficulty(this.encounter.entities);
 			//Store the new xp value for the encounter
-			this.set_xp({
-				campaignId: this.campaignId,
-				encounterId: this.encounterId,
-				type: "calculated",
-				value: this.encDifficulty["totalXp"],
-			});
+			if (!this.demo) {
+				this.set_xp({
+					campaignId: this.campaignId,
+					encounterId: this.encounterId,
+					type: "calculated",
+					value: this.encDifficulty["totalXp"],
+				});
+			}
 		},
 		async get_entity_data() {
 			const entities = {};
diff --git a/src/components/hk-components/hk-filter.vue b/src/components/hk-components/hk-filter.vue
index 8db9ab04..0322e9de 100644
--- a/src/components/hk-components/hk-filter.vue
+++ b/src/components/hk-components/hk-filter.vue
@@ -10,14 +10,32 @@
 				clearable
 				:options="monster_types"
 			/>
+			<hk-select
+			class="mb-3"
+			label="Size"
+			v-model="filter.sizes"
+			use-chips
+			multiple
+			clearable
+			:options="monster_sizes"
+			/>
+			<hk-select
+				class="mb-3"
+				label="Alignment"
+				v-model="filter.alignments"
+				use-chips
+				multiple
+				clearable
+				:options="monster_alignment"
+			/>
 			<hk-select
 				class="mb-3"
-				label="Size"
-				v-model="filter.sizes"
+				label="Environment"
+				v-model="filter.environments"
 				use-chips
 				multiple
 				clearable
-				:options="monster_sizes"
+				:options="monster_environments"
 			/>
 
 			<strong class="block mb-5">Challenge rating</strong>
diff --git a/src/components/npcs/BasicInfo.vue b/src/components/npcs/BasicInfo.vue
index 0dd24323..5d6c13c9 100644
--- a/src/components/npcs/BasicInfo.vue
+++ b/src/components/npcs/BasicInfo.vue
@@ -94,6 +94,17 @@
 					v-model="npc.alignment"
 					:options="monster_alignment"
 				/>
+				
+				<!-- ENVIRONMENT -->
+				<hk-select
+					class="mb-4"
+					label="Environment"
+					v-model="npc.environment"
+					use-chips
+					multiple
+					clearable
+					:options="monster_environments"
+				/>
 
 				<!-- SPEED -->
 				<div class="row q-col-gutter-sm">
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 5f460e68..2eb49a70 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -983,9 +983,10 @@ html body {
 	}
 
 	.truncate-cell {
-		display: table;
-		table-layout: fixed;
-		width: 100%;
+		white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 1px;
 	}
 	.truncate {
 		white-space: nowrap;
diff --git a/src/mixins/monster.js b/src/mixins/monster.js
index 903e1024..42209d7a 100644
--- a/src/mixins/monster.js
+++ b/src/mixins/monster.js
@@ -43,6 +43,7 @@ export const monsterMixin = {
 				30: { proficiency: 9, xp: 155000 },
 			},
 			monster_sizes: ["Tiny", "Small", "Medium", "Large", "Huge", "Gargantuan"],
+			monster_environments: ["arctic", "coastal", "desert", "forest", "grassland", "hill", "mountain", "swamp", "underdark", "underwater", "urban"],
 			monster_subtypes: {
 				Fiend: ["Demon", "Devil", "Shapechanger"],
 				Humanoid: [
@@ -82,7 +83,7 @@ export const monsterMixin = {
 				"Undead",
 			],
 			monster_alignment: [
-				"Any",
+				"Any alignment",
 				"Unaligned",
 				"Lawful good",
 				"Neutral good",
diff --git a/src/services/api/monsters.js b/src/services/api/monsters.js
index a9bd2296..932ffb23 100644
--- a/src/services/api/monsters.js
+++ b/src/services/api/monsters.js
@@ -35,6 +35,16 @@ export class monsterServices {
           queryParams.push(`size[]=${size}`);
         }
       }
+      if(query.environments && query.environments.length) {
+        for(const environment of query.environments) {
+          queryParams.push(`environment[]=${environment}`);
+        }
+      }
+      if(query.alignments && query.alignments.length) {
+        for(const alignment of query.alignments) {
+          queryParams.push(`alignment[]=${alignment}`);
+        }
+      }
       if(query.challenge_ratings) {
         let challenge_ratings = range(query.challenge_ratings.min, query.challenge_ratings.max+1);
         if(query.challenge_ratings.min === 0) {
diff --git a/src/views/Compendium/Conditions.vue b/src/views/Compendium/Conditions.vue
index d3f1aee6..4ab18e4c 100644
--- a/src/views/Compendium/Conditions.vue
+++ b/src/views/Compendium/Conditions.vue
@@ -14,9 +14,11 @@
 				filled square
 				debounce="300" 
 				clearable
-				placeholder="Search">
+				placeholder="Search"
+				@keyup.enter="filter()"
+				@clear="filter()">
 				<q-icon slot="append" name="search" />
-				<button slot="after" class="btn" @click="filter()">Filter</button>
+				<button slot="after" class="btn" @click="filter()">Search</button>
 			</q-input>
 
 			<q-table
@@ -37,38 +39,34 @@
 				
 				<template v-slot:header="props">
 					<q-tr :props="props">
-						<q-th auto-width />
 						<q-th
 							v-for="col in props.cols"
 							:key="col.name"
 							:props="props"
-						>
+							>
 							{{ col.label }}
 						</q-th>
+						<q-th auto-width />
 					</q-tr>
 				</template>
 
 				<!-- Body -->
 				<template v-slot:body="props">
 					<q-tr :props="props">
-						<q-td auto-width>
-							<a  @click="props.expand = !props.expand">
-								<i aria-hidden="true" class="fas" :class="props.expand ? 'fa-chevron-up' : 'fa-chevron-down'" />
-							</a>
-						</q-td>
 						<q-td
 							v-for="col in props.cols"
 							:key="col.name"
 							:props="props"
-						>
-							<div class="truncate-cell">
-								<div class="truncate">
-									<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.row.url}`">
-										{{ col.value }}
-									</router-link>
-									<template v-else>{{ col.value }}</template>
-								</div>
-							</div>
+							>
+							<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.row.url}`">
+								{{ col.value }}
+							</router-link>
+							<template v-else>{{ col.value }}</template>
+						</q-td>
+						<q-td auto-width>
+							<a  @click="props.expand = !props.expand" class="neutral-2">
+								<i aria-hidden="true" class="fas" :class="props.expand ? 'fa-chevron-up' : 'fa-chevron-down'" />
+							</a>
 						</q-td>
 					</q-tr>
 					<q-tr v-if="props.expand" :props="props">
@@ -110,6 +108,7 @@
 						field: "name",
 						sortable: true,
 						align: "left",
+						classes: "truncate-cell",
 						format: val => val.capitalizeEach()
 					}
 				],
diff --git a/src/views/Compendium/Items.vue b/src/views/Compendium/Items.vue
index 11d030ae..5e5c8637 100644
--- a/src/views/Compendium/Items.vue
+++ b/src/views/Compendium/Items.vue
@@ -39,51 +39,49 @@
 				
 				<template v-slot:header="props">
 					<q-tr :props="props">
-						<q-th auto-width />
 						<q-th
 							v-for="col in props.cols"
 							:key="col.name"
 							:props="props"
-						>
+							:auto-width="col.name !== 'name'"
+							>
 							{{ col.label }}
 						</q-th>
+						<q-th auto-width />
 					</q-tr>
 				</template>
 
 				<!-- Body -->
 				<template v-slot:body="props">
 					<q-tr :props="props">
-						<q-td auto-width>
-							<a  @click="props.expand = !props.expand">
-								<i aria-hidden="true" class="fas" :class="props.expand ? 'fa-chevron-up' : 'fa-chevron-down'" />
-							</a>
-						</q-td>
 						<q-td
 							v-for="col in props.cols"
 							:key="col.name"
 							:props="props"
+							:auto-width="col.name !== 'name'"
 						>
-							<div class="truncate-cell">
-								<div class="truncate">
-									<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.row.url}`">
-										{{ col.value }}
-									</router-link>
-									<span 
-										v-else-if="col.name === 'rarity'"
-										:class="{ 
-										'white': col.value == 'common',
-										'green': col.value == 'uncommon',
-										'blue': col.value == 'rare',
-										'purple': col.value == 'very rare',
-										'orange': col.value == 'legendary',
-										'red-light': col.value == 'artifact',
-										}" 
-									>
-										{{ col.value }}
-									</span>
-									<template v-else>{{ col.value }}</template>
-								</div>
-							</div>
+							<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.row.url}`">
+								{{ col.value }}
+							</router-link>
+							<span 
+								v-else-if="col.name === 'rarity'"
+								:class="{ 
+								'white': col.value == 'common',
+								'green': col.value == 'uncommon',
+								'blue': col.value == 'rare',
+								'purple': col.value == 'very rare',
+								'orange': col.value == 'legendary',
+								'red-light': col.value == 'artifact',
+								}" 
+							>
+								{{ col.value }}
+							</span>
+							<template v-else>{{ col.value }}</template>
+						</q-td>
+						<q-td auto-width>
+							<a  @click="props.expand = !props.expand" class="neutral-2">
+								<i aria-hidden="true" class="fas" :class="props.expand ? 'fa-chevron-up' : 'fa-chevron-down'" />
+							</a>
 						</q-td>
 					</q-tr>
 					<q-tr v-if="props.expand" :props="props">
@@ -125,6 +123,7 @@
 						field: "name",
 						sortable: true,
 						align: "left",
+						classes: "truncate-cell",
 						format: val => val.capitalizeEach()
 					},
 					{
@@ -132,6 +131,8 @@
 						label: "Attunement",
 						field: "requires_attunement",
 						align: "left",
+						headerStyle: "min-width: 125px;",
+						classes: "truncate-cell",
 						sortable: true
 					},
 					{
diff --git a/src/views/Compendium/Monsters.vue b/src/views/Compendium/Monsters.vue
index 07253e47..7e8b8124 100644
--- a/src/views/Compendium/Monsters.vue
+++ b/src/views/Compendium/Monsters.vue
@@ -42,7 +42,6 @@
 					{{ filter.types?.length || filter.sizes?.length ? "and" : "with" }} a CR between {{ filter.challenge_ratings.min }} and {{  filter.challenge_ratings.max }}
 				</template>
 			</p>
-
 			<q-table
 				:data="monsters"
 				:columns="columns"
@@ -50,6 +49,7 @@
 				card-class="bg-none"
 				flat
 				:dark="$store.getters.theme !== 'light'"
+				:visible-columns="visibleColumns"
 				:pagination.sync="pagination"
 				:loading="loading"
 				separator="none"
@@ -61,38 +61,45 @@
 				
 				<template v-slot:header="props">
 					<q-tr :props="props">
-						<q-th auto-width />
 						<q-th
 							v-for="col in props.cols"
 							:key="col.name"
 							:props="props"
+							:auto-width="col.name !== 'name'"
 						>
 							{{ col.label }}
 						</q-th>
+						<q-th auto-width />
 					</q-tr>
 				</template>
 
 				<!-- Body -->
 				<template v-slot:body="props">
 					<q-tr :props="props">
-						<q-td auto-width>
-							<a  @click="props.expand = !props.expand">
-								<i aria-hidden="true" class="fas" :class="props.expand ? 'fa-chevron-up' : 'fa-chevron-down'" />
-							</a>
-						</q-td>
 						<q-td
 							v-for="col in props.cols"
 							:key="col.name"
 							:props="props"
+							:auto-width="col.name !== 'name'"
 						>
-							<div class="truncate-cell">
-								<div class="truncate">
-									<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.row.url}`">
-										{{ col.value }}
-									</router-link>
-									<template v-else>{{ col.value }}</template>
-								</div>
-							</div>
+							<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.row.url}`">
+								{{ col.value }}
+							</router-link>
+							<span v-else-if="col.name === 'environment'">
+								{{ col.value?.[0]?.capitalize() }}
+								<template v-if="col.value?.length > 1">
+									<span class="neutral-2">+{{ col.value.length - 1 }}</span>
+									<q-tooltip anchor="top middle" self="center middle">
+										{{ col.value?.join(", ").capitalizeEach() }}
+									</q-tooltip>
+								</template>
+							</span>
+							<template v-else>{{ col.value }}</template>
+						</q-td>
+						<q-td auto-width>
+							<a  @click="props.expand = !props.expand" class="neutral-2">
+								<i aria-hidden="true" class="fas" :class="props.expand ? 'fa-chevron-up' : 'fa-chevron-down'" />
+							</a>
 						</q-td>
 					</q-tr>
 					<q-tr v-if="props.expand" :props="props">
@@ -102,6 +109,7 @@
 					</q-tr>
 				</template>
 			</q-table>
+			<q-resize-observer @resize="setSize" />
 		</div>
 
 		<q-dialog v-model="filter_dialog">
@@ -151,12 +159,23 @@
 					rowsNumber: 0
 				},
 				columns: [
+					{
+						name: "challenge_rating",
+						label: "CR",
+						field: "challenge_rating",
+						align: "left",
+						headerStyle: "min-width: 70px;",
+						style: "font-weight: bold;",
+						sortable: true,
+						format: val => this.cr_label(val)
+					},
 					{
 						name: "name",
 						label: "Name",
 						field: "name",
 						sortable: true,
 						align: "left",
+						classes: "truncate-cell",
 						format: val => val.capitalizeEach()
 					},
 					{
@@ -171,18 +190,28 @@
 						label: "Size",
 						field: "size",
 						align: "left",
+						headerStyle: "min-width: 80px;",
 						sortable: true
 					},
 					{
-						name: "challenge_rating",
-						label: "CR",
-						field: "challenge_rating",
+						name: "alignment",
+						label: "Alignment",
+						field: "alignment",
+						style: "white-space: nowrap;",
+						headerStyle: "min-width: 115;",
+						align: "left",
+						sortable: true
+					},
+					{
+						name: "environment",
+						label: "Environment",
+						field: "environment",
+						style: "white-space: nowrap;",
 						align: "left",
-						sortable: true,
-						format: val => this.cr_label(val)
 					}
 				],
 				loading: true,
+				width: 0,
 			}
 		},
 		computed: {
@@ -195,7 +224,21 @@
 			},
 			type_options() {
 				return this.monster_types.map(type => { return { label: type, value: type } });
-			}
+			},
+			visibleColumns() {
+				switch (true) {
+					case this.width > 700:
+						return  ["challenge_rating", "name", "type", "size", "alignment", "environment"];
+					case this.width > 620:
+						return  ["challenge_rating", "name", "type", "size", "alignment"];
+					case this.width > 500:
+						return  ["challenge_rating", "name", "type", "size"];
+					case this.width > 450:
+						return  ["challenge_rating", "name", "type",];
+					default:
+						return ["challenge_rating", "name"];
+				}
+			},
 		},
 		methods: {
 			...mapActions("api_monsters", ["fetch_monsters"]),
@@ -233,7 +276,7 @@
 					pageNumber: this.pagination.page,
 					pageSize: this.pagination.rowsPerPage,
 					query: this.query,
-					fields: ["name", "type", "challenge_rating", "size", "url"],
+					fields: ["name", "type", "challenge_rating", "size", "environment", "alignment", "url"],
 					sortBy: this.pagination.sortBy,
 					descending: this.pagination.descending
 				}).then(result => {
@@ -241,7 +284,10 @@
 					this.monsters = result.results;
 					this.loading = false;
 				});
-			}
+			},
+			setSize(e) {
+				this.width = e.width;
+			},
 		},
 		async mounted() {
 			await this.fetchMonsters();
diff --git a/src/views/Compendium/Spells.vue b/src/views/Compendium/Spells.vue
index f6824ca6..0f32e799 100644
--- a/src/views/Compendium/Spells.vue
+++ b/src/views/Compendium/Spells.vue
@@ -62,18 +62,24 @@
 
 				<template v-slot:header="props">
 					<q-tr :props="props">
-						<q-th auto-width />
-						<q-th v-for="col in props.cols" :key="col.name" :props="props">
+						<q-th v-for="col in props.cols" :key="col.name" :props="props" :auto-width="col.name !== 'name'">
 							{{ col.label }}
 						</q-th>
+						<q-th auto-width />
 					</q-tr>
 				</template>
 
 				<!-- Body -->
 				<template v-slot:body="props">
 					<q-tr :props="props">
-						<q-td auto-width>
-							<a @click="props.expand = !props.expand">
+						<q-td v-for="col in props.cols" :key="col.name" :props="props" :auto-width="col.name !== 'name'">
+							<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.row.url}`">
+								{{ col.value }}
+							</router-link>
+							<template v-else>{{ col.value }}</template>
+						</q-td>
+						<q-td auto-width class="text-center">
+							<a @click="props.expand = !props.expand" class="neutral-2">
 								<i
 									aria-hidden="true"
 									class="fas"
@@ -81,16 +87,6 @@
 								/>
 							</a>
 						</q-td>
-						<q-td v-for="col in props.cols" :key="col.name" :props="props">
-							<div class="truncate-cell">
-								<div class="truncate">
-									<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.row.url}`">
-										{{ col.value }}
-									</router-link>
-									<template v-else>{{ col.value }}</template>
-								</div>
-							</div>
-						</q-td>
 					</q-tr>
 					<q-tr v-if="props.expand" :props="props">
 						<q-td colspan="100%" auto-width>
@@ -150,6 +146,7 @@ export default {
 					field: "name",
 					sortable: true,
 					align: "left",
+					classes: "truncate-cell",
 					format: (val) => val.capitalizeEach(),
 				},
 				{
diff --git a/src/views/UserContent/CharacterBuilder/index.vue b/src/views/UserContent/CharacterBuilder/index.vue
index dccae969..84b462c4 100644
--- a/src/views/UserContent/CharacterBuilder/index.vue
+++ b/src/views/UserContent/CharacterBuilder/index.vue
@@ -28,40 +28,42 @@
 					:pagination="{ rowsPerPage: 15 }"
 					wrap-cells
 				>	
-					<template v-slot:body-cell="props">
-						<q-td 
-							v-if="props.col.name === 'avatar'" 
-							class="avatar"
-							:style="props.value ? `background-image: url('${props.value}')` : ''"
-						>
-							<i aria-hidden="true" v-if="!props.value" class="hki-player" />
-						</q-td>
-						<q-td v-else-if="props.col.name !== 'actions'">
-							<div  class="truncate-cell">
-								<div class="truncate">
-									<router-link v-if="props.col.name === 'name'" :to="`${$route.path}/${props.key}`">
-										{{ props.value }}
+					<template v-slot:body="props">
+						<q-tr :props="props">
+							<q-td
+								v-for="col in props.cols"
+								:key="col.name"
+								:props="props"
+								:auto-width="col.name !== 'name'"
+								:style="col.name === 'avatar' && col.value ? `background-image: url('${col.value}')` : ''"
+							>
+								<template v-if="col.name === 'avatar'">
+									<i aria-hidden="true" v-if="!col.value" class="hki-player" />
+								</template>
+								<template v-else-if="col.name !== 'actions'">
+									<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.key}`">
+										{{ col.value }}
 									</router-link>
 									<template v-else>
-										{{ props.value }}
+										{{ col.value }}
 									</template>
+								</template>
+								<div v-else class="text-right d-flex justify-content-end">
+									<router-link class="btn btn-sm bg-neutral-5" :to="`${$route.path}/${props.key}`">
+										<i aria-hidden="true" class="fas fa-pencil"></i>
+										<q-tooltip anchor="top middle" self="center middle">
+											Edit
+										</q-tooltip>
+									</router-link>
+									<a class="btn btn-sm bg-neutral-5 ml-2" @click="confirmDelete($event, props.key, props.row)">
+										<i aria-hidden="true" class="fas fa-trash-alt"></i>
+										<q-tooltip anchor="top middle" self="center middle">
+											Delete
+										</q-tooltip>
+									</a>
 								</div>
-							</div>
-						</q-td>
-						<q-td v-else class="text-right d-flex justify-content-between">
-							<router-link class="btn btn-sm bg-neutral-5" :to="`${$route.path}/${props.key}`">
-								<i aria-hidden="true" class="fas fa-pencil"></i>
-								<q-tooltip anchor="top middle" self="center middle">
-									Edit
-								</q-tooltip>
-							</router-link>
-							<a class="btn btn-sm bg-neutral-5 ml-2" @click="confirmDelete($event, props.key, props.row)">
-								<i aria-hidden="true" class="fas fa-trash-alt"></i>
-								<q-tooltip anchor="top middle" self="center middle">
-									Delete
-								</q-tooltip>
-							</a>
-						</q-td>
+							</q-td>
+						</q-tr>
 					</template>
 					<div slot="no-data" />
 					<hk-loader slot="loading" name="characters" />
@@ -99,12 +101,14 @@
 						name: "avatar",
 						label: "",
 						field: "avatar",
-						align: "left"
+						align: "left",
+						classes: "avatar"
 					},
 					{
 						name: "name",
 						label: "Name",
 						field: "character_name",
+						classes: "truncate-cell",
 						sortable: true,
 						align: "left"
 					},
diff --git a/src/views/UserContent/Characters/index.vue b/src/views/UserContent/Characters/index.vue
index a6a7751f..826c9abd 100644
--- a/src/views/UserContent/Characters/index.vue
+++ b/src/views/UserContent/Characters/index.vue
@@ -16,50 +16,50 @@
 				:pagination="{ rowsPerPage: 0 }"
 				wrap-cells
 			>	
-				<template v-slot:body-cell="props">
-					<q-td 
-						v-if="props.col.name === 'avatar'" 
-						class="avatar"
-						:style="avatar(props.row) ? `background-image: url('${avatar(props.row)}')` : ''"
-					>
-						<i aria-hidden="true" v-if="!avatar(props.row)" class="hki-player" />
-					</q-td>
-					<q-td v-else-if="props.col.name !== 'actions'">
-						<div  class="truncate-cell">
-							<div class="truncate">
-								<router-link v-if="props.col.name === 'name'" :to="`${$route.path}/${props.key}`">
-									{{ props.value }}
+				<template v-slot:body="props">
+					<q-tr :props="props">
+						<q-td
+							v-for="col in props.cols"
+							:key="col.name"
+							:props="props"
+							:auto-width="col.name !== 'name'"
+							:style="col.name === 'avatar' && avatar(props.row) ? `background-image: url('${avatar(props.row)}')` : ''"
+						>
+							<template v-if="col.name === 'avatar'">
+								<i aria-hidden="true" v-if="!avatar(props.row)" class="hki-player" />
+							</template>
+							<template v-else-if="col.name !== 'actions'">
+								<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.key}`">
+									{{ col.value }}
 								</router-link>						
 								<template v-else>
-									{{ props.value }}
+									{{ col.value }}
 								</template>
+							</template>
+							<div v-else class="d-flex justify-content-end items-end truncate">
+								<router-link 
+									v-if="props.row.campaign_id" 
+									class="btn btn-sm bg-neutral-9"
+									:to="`/user/${props.row.user_id}/${props.row.campaign_id}`"
+								>
+									<i aria-hidden="true" class="fas fa-dungeon neutral-2 mr-1" />
+									Campaign
+								</router-link>
+								<router-link class="btn btn-sm bg-neutral-5 mx-2" :to="`${$route.path}/${props.key}`">
+									<i aria-hidden="true" class="fas fa-pencil"></i>
+									<q-tooltip anchor="top middle" self="center middle">
+										Edit
+									</q-tooltip>
+								</router-link>
+								<a class="btn btn-sm bg-neutral-5" @click="confirmDelete($event, props.key, props.row)">
+									<i aria-hidden="true" class="fas fa-trash-alt"></i>
+									<q-tooltip anchor="top middle" self="center middle">
+										Delete
+									</q-tooltip>
+								</a>
 							</div>
-						</div>
-					</q-td>
-					<q-td v-else class="whitespace-nowrap">
-						<div class="d-flex justify-content-end items-center">
-							<router-link 
-								v-if="props.row.campaign_id" 
-								class="btn btn-sm bg-neutral-9"
-								:to="`/user/${props.row.user_id}/${props.row.campaign_id}`"
-							>
-								<i aria-hidden="true" class="fas fa-dungeon neutral-2 mr-1" />
-								Campaign
-							</router-link>
-							<router-link class="btn btn-sm bg-neutral-5 mx-2" :to="`${$route.path}/${props.key}`">
-								<i aria-hidden="true" class="fas fa-pencil"></i>
-								<q-tooltip anchor="top middle" self="center middle">
-									Edit
-								</q-tooltip>
-							</router-link>
-							<a class="btn btn-sm bg-neutral-5" @click="confirmDelete($event, props.key, props.row)">
-								<i aria-hidden="true" class="fas fa-trash-alt"></i>
-								<q-tooltip anchor="top middle" self="center middle">
-									Delete
-								</q-tooltip>
-							</a>
-						</div>
-					</q-td>
+						</q-td>
+					</q-tr>
 				</template>
 				<div slot="no-data" />
 				<div slot="bottom" />
@@ -88,12 +88,14 @@
 						name: "avatar",
 						label: "",
 						field: "avatar",
-						align: "left"
+						align: "left",
+						classes: "avatar",
 					},
 					{
 						name: "name",
 						label: "Name",
 						field: "character_name",
+						classes: "truncate-cell",
 						sortable: true,
 						align: "left"
 					},
diff --git a/src/views/UserContent/Encounters/index.vue b/src/views/UserContent/Encounters/index.vue
index a959960e..c4836f95 100644
--- a/src/views/UserContent/Encounters/index.vue
+++ b/src/views/UserContent/Encounters/index.vue
@@ -102,50 +102,55 @@
 					:filter="search"
 					wrap-cells
 				>
-					<template v-slot:body-cell="props">
-						<q-td v-if="props.col.name !== 'actions'">
-							<div class="truncate-cell">
-								<div class="truncate">
+					<template v-slot:body="props">
+						<q-tr :props="props">
+							<q-td
+								v-for="col in props.cols"
+								:key="col.name"
+								:props="props"
+								:auto-width="col.name !== 'name'"
+							>
+								<template v-if="col.name !== 'actions'">
 									<router-link
-										v-if="!overencumbered && props.col.name === 'name' && props.row.entity_count"
+										v-if="!overencumbered && col.name === 'name' && props.row.entity_count"
 										:to="`/run-encounter/${campaignId}/${props.key}`"
 									>
-										{{ props.value }}
+										{{ col.value }}
 									</router-link>
 									<template v-else>
-										{{ props.value }}
+										{{ col.value }}
 									</template>
+								</template>
+								<div v-else class="text-right d-flex justify-content-end">
+									<router-link
+										v-if="props.row.entity_count && !overencumbered"
+										class="btn btn-sm bg-neutral-5 mr-1"
+										:to="'/run-encounter/' + campaignId + '/' + props.key"
+									>
+										<i aria-hidden="true" class="fas fa-play"></i>
+										<q-tooltip anchor="top middle" self="center middle"> Run encounter </q-tooltip>
+									</router-link>
+									<a v-else class="disabled btn btn-sm mr-1 bg-neutral-5">
+										<i aria-hidden="true" class="fas fa-play"></i>
+									</a>
+									<router-link
+										v-if="!overencumbered"
+										class="mr-1 btn btn-sm bg-neutral-5"
+										:to="'/content/campaigns/' + campaignId + '/' + props.key"
+									>
+										<i aria-hidden="true" class="fas fa-pencil-alt"></i>
+										<q-tooltip anchor="top middle" self="center middle"> Edit </q-tooltip>
+									</router-link>
+									<a
+										class="btn btn-sm bg-neutral-5"
+										@click="deleteEncounter($event, props.key, props.row.name)"
+									>
+										<i aria-hidden="true" class="fas fa-trash-alt"></i>
+										<q-tooltip anchor="top middle" self="center middle"> Delete </q-tooltip>
+									</a>
 								</div>
-							</div>
-						</q-td>
-						<q-td v-else class="text-right d-flex justify-content-between">
-							<router-link
-								v-if="props.row.entity_count && !overencumbered"
-								class="btn btn-sm bg-neutral-5 mr-1"
-								:to="'/run-encounter/' + campaignId + '/' + props.key"
-							>
-								<i aria-hidden="true" class="fas fa-play"></i>
-								<q-tooltip anchor="top middle" self="center middle"> Run encounter </q-tooltip>
-							</router-link>
-							<a v-else class="disabled btn btn-sm mr-1 bg-neutral-5">
-								<i aria-hidden="true" class="fas fa-play"></i>
-							</a>
-							<router-link
-								v-if="!overencumbered"
-								class="mr-1 btn btn-sm bg-neutral-5"
-								:to="'/content/campaigns/' + campaignId + '/' + props.key"
-							>
-								<i aria-hidden="true" class="fas fa-pencil-alt"></i>
-								<q-tooltip anchor="top middle" self="center middle"> Edit </q-tooltip>
-							</router-link>
-							<a
-								class="btn btn-sm bg-neutral-5"
-								@click="deleteEncounter($event, props.key, props.row.name)"
-							>
-								<i aria-hidden="true" class="fas fa-trash-alt"></i>
-								<q-tooltip anchor="top middle" self="center middle"> Delete </q-tooltip>
-							</a>
-						</q-td>
+							</q-td>
+							</q-tr>
 					</template>
 					<div slot="no-data" />
 				</q-table>
@@ -153,8 +158,8 @@
 
 			<!-- FINISHED ENCOUNTERS -->
 			<template v-if="finished_encounters.length">
-				<div>
-					<span>Finished encounters</span>
+				<div class="d-flex justify-content-between">
+					<strong>Finished encounters</strong>
 					<a class="btn btn-sm bg-neutral-5" @click="deleteFinishedEncounters">
 						<i aria-hidden="true" class="fas fa-trash-alt mr-1 red" />
 						Delete all
@@ -173,51 +178,56 @@
 						:pagination="{ rowsPerPage: 5 }"
 						wrap-cells
 					>
-						<template v-slot:body-cell="props">
-							<q-td v-if="props.col.name !== 'actions'">
-								<div class="truncate-cell">
-									<div class="truncate">
+						<template v-slot:body="props">
+							<q-tr :props="props">
+								<q-td
+									v-for="col in props.cols"
+									:key="col.name"
+									:props="props"
+									:auto-width="col.name !== 'name'"
+								>
+									<template v-if="col.name !== 'actions'">
 										<router-link
-											v-if="props.col.name === 'name' && props.row.entity_count && !overencumbered"
+											v-if="col.name === 'name' && props.row.entity_count && !overencumbered"
 											:to="`/run-encounter/${campaignId}/${props.key}`"
 										>
-											{{ props.value }}
+											{{ col.value }}
 										</router-link>
 										<template v-else>
-											{{ props.value }}
+											{{ col.value }}
 										</template>
+									</template>
+									<div v-else class="text-right d-flex justify-content-end">
+										<router-link
+											v-if="!overencumbered"
+											class="btn btn-sm bg-neutral-5"
+											:to="`/run-encounter/${campaignId}/${props.key}`"
+										>
+											<i aria-hidden="true" class="fas fa-eye"></i>
+											<q-tooltip anchor="top middle" self="center middle"> View </q-tooltip>
+										</router-link>
+										<a class="btn btn-sm bg-neutral-5 ml-1" @click="reset(props.key, (hard = false))">
+											<i aria-hidden="true" class="fas fa-trash-restore-alt"></i>
+											<q-tooltip anchor="top middle" self="center middle"> Unfinish </q-tooltip>
+										</a>
+										<a
+											v-if="!overencumbered"
+											class="btn btn-sm bg-neutral-5 mx-1"
+											@click="reset(props.key)"
+										>
+											<i aria-hidden="true" class="fas fa-undo"></i>
+											<q-tooltip anchor="top middle" self="center middle"> Reset </q-tooltip>
+										</a>
+										<a
+											class="btn btn-sm bg-neutral-5"
+											@click="deleteEncounter($event, props.key, props.row.name)"
+										>
+											<i aria-hidden="true" class="fas fa-trash-alt"></i>
+											<q-tooltip anchor="top middle" self="center middle"> Delete </q-tooltip>
+										</a>
 									</div>
-								</div>
-							</q-td>
-							<q-td v-else class="text-right d-flex justify-content-between">
-								<router-link
-									v-if="!overencumbered"
-									class="btn btn-sm bg-neutral-5"
-									:to="`/run-encounter/${campaignId}/${props.key}`"
-								>
-									<i aria-hidden="true" class="fas fa-eye"></i>
-									<q-tooltip anchor="top middle" self="center middle"> View </q-tooltip>
-								</router-link>
-								<a class="btn btn-sm bg-neutral-5 ml-1" @click="reset(props.key, (hard = false))">
-									<i aria-hidden="true" class="fas fa-trash-restore-alt"></i>
-									<q-tooltip anchor="top middle" self="center middle"> Unfinish </q-tooltip>
-								</a>
-								<a
-									v-if="!overencumbered"
-									class="btn btn-sm bg-neutral-5 mx-1"
-									@click="reset(props.key)"
-								>
-									<i aria-hidden="true" class="fas fa-undo"></i>
-									<q-tooltip anchor="top middle" self="center middle"> Reset </q-tooltip>
-								</a>
-								<a
-									class="btn btn-sm bg-neutral-5"
-									@click="deleteEncounter($event, props.key, props.row.name)"
-								>
-									<i aria-hidden="true" class="fas fa-trash-alt"></i>
-									<q-tooltip anchor="top middle" self="center middle"> Delete </q-tooltip>
-								</a>
-							</q-td>
+								</q-td>
+							</q-tr>
 						</template>
 						<div slot="no-data" />
 						<hk-loader slot="loading" name="Encounters" />
@@ -325,6 +335,7 @@ export default {
 					field: "name",
 					sortable: true,
 					align: "left",
+					classes: "truncate-cell",
 				},
 				{
 					name: "entities",
diff --git a/src/views/UserContent/Items/Items.vue b/src/views/UserContent/Items/Items.vue
index 9bde878e..21774561 100644
--- a/src/views/UserContent/Items/Items.vue
+++ b/src/views/UserContent/Items/Items.vue
@@ -43,32 +43,30 @@
 								<i aria-hidden="true" v-if="!props.value" class="hki-axe" />
 							</q-td>
 
-							<q-td v-else-if="props.col.name !== 'actions'">
-								<div class="truncate-cell">
-									<div class="truncate">
-										<router-link v-if="props.col.name === 'name'" :to="`${$route.path}/${props.key}`">
-											{{ props.value }}
-										</router-link>
-										<template v-else>
-											{{ props.value }}
-										</template>
-									</div>
-								</div>
+							<q-td v-else-if="props.col.name !== 'actions'" class="truncate-cell">
+								<router-link v-if="props.col.name === 'name'" :to="`${$route.path}/${props.key}`">
+									{{ props.value }}
+								</router-link>
+								<template v-else>
+									{{ props.value }}
+								</template>
 							</q-td>
 
-							<q-td v-else class="text-right d-flex justify-content-between">
-								<router-link class="btn btn-sm bg-neutral-5" :to="`${$route.path}/${props.key}`">
-									<i aria-hidden="true" class="fas fa-pencil" />
-									<q-tooltip anchor="top middle" self="center middle">
-										Edit
-									</q-tooltip>
-								</router-link>
-								<a class="btn btn-sm bg-neutral-5 ml-2" @click="confirmDelete($event, props.key, props.row)">
-									<i aria-hidden="true" class="fas fa-trash-alt" />
-									<q-tooltip anchor="top middle" self="center middle">
-										Delete
-									</q-tooltip>
-								</a>
+							<q-td v-else>
+								<div class="text-right d-flex justify-content-end">
+									<router-link class="btn btn-sm bg-neutral-5" :to="`${$route.path}/${props.key}`">
+										<i aria-hidden="true" class="fas fa-pencil" />
+										<q-tooltip anchor="top middle" self="center middle">
+											Edit
+										</q-tooltip>
+									</router-link>
+									<a class="btn btn-sm bg-neutral-5 ml-2" @click="confirmDelete($event, props.key, props.row)">
+										<i aria-hidden="true" class="fas fa-trash-alt" />
+										<q-tooltip anchor="top middle" self="center middle">
+											Delete
+										</q-tooltip>
+									</a>
+								</div>
 							</q-td>
 						</template>
 						<div slot="no-data" />	
@@ -116,6 +114,7 @@
 						field: "name",
 						sortable: true,
 						align: "left",
+						classes: "truncate-cell",
 						format: val => val.capitalizeEach()
 					},
 					{
diff --git a/src/views/UserContent/Npcs/Npcs.vue b/src/views/UserContent/Npcs/Npcs.vue
index 9d8935e7..c423a1d5 100644
--- a/src/views/UserContent/Npcs/Npcs.vue
+++ b/src/views/UserContent/Npcs/Npcs.vue
@@ -49,47 +49,49 @@
 						:filter="search"
 						wrap-cells
 					>
-						<template v-slot:body-cell="props">
-							<q-td
-								v-if="props.col.name === 'avatar'"
-								class="avatar"
-								:style="avatar(props.row) ? `background-image: url('${avatar(props.row)}')` : ''"
-							>
-								<i aria-hidden="true" v-if="!avatar(props.row)" class="hki-monster" />
-							</q-td>
-							<q-td v-else-if="props.col.name !== 'actions'">
-								<div class="truncate-cell">
-									<div class="truncate">
+						<template v-slot:body="props">
+							<q-tr :props="props">
+								<q-td
+									v-for="col in props.cols"
+									:key="col.name"
+									:props="props"
+									:auto-width="col.name !== 'name'"
+									:style="col.name === 'avatar' && avatar(props.row) ? `background-image: url('${avatar(props.row)}')` : ''"
+								>
+									<template v-if="col.name === 'avatar'">
+										<i aria-hidden="true" v-if="!avatar(props.row)" class="hki-monster" />
+									</template>
+									<template v-else-if="col.name !== 'actions'">
 										<router-link
-											v-if="props.col.name === 'name'"
+											v-if="col.name === 'name'"
 											:to="`${$route.path}/${props.key}`"
 										>
-											{{ props.value }}
+											{{ col.value }}
 										</router-link>
 										<template v-else>
-											{{ props.value }}
+											{{ col.value }}
 										</template>
+									</template>
+									<div v-else class="text-right d-flex justify-content-between">
+										<router-link class="btn btn-sm bg-neutral-5" :to="`${$route.path}/${props.key}`">
+											<i aria-hidden="true" class="fas fa-pencil" />
+											<q-tooltip anchor="top middle" self="center middle"> Edit </q-tooltip>
+										</router-link>
+										<ExportUserContent
+											class="btn-sm bg-neutral-5 mx-2"
+											content-type="npc"
+											:content-id="props.key"
+										/>
+										<a
+											class="btn btn-sm bg-neutral-5"
+											@click="confirmDelete($event, props.key, props.row)"
+										>
+											<i aria-hidden="true" class="fas fa-trash-alt" />
+											<q-tooltip anchor="top middle" self="center middle"> Delete </q-tooltip>
+										</a>
 									</div>
-								</div>
-							</q-td>
-							<q-td v-else class="text-right d-flex justify-content-between">
-								<router-link class="btn btn-sm bg-neutral-5" :to="`${$route.path}/${props.key}`">
-									<i aria-hidden="true" class="fas fa-pencil" />
-									<q-tooltip anchor="top middle" self="center middle"> Edit </q-tooltip>
-								</router-link>
-								<ExportUserContent
-									class="btn-sm bg-neutral-5 mx-2"
-									content-type="npc"
-									:content-id="props.key"
-								/>
-								<a
-									class="btn btn-sm bg-neutral-5"
-									@click="confirmDelete($event, props.key, props.row)"
-								>
-									<i aria-hidden="true" class="fas fa-trash-alt" />
-									<q-tooltip anchor="top middle" self="center middle"> Delete </q-tooltip>
-								</a>
-							</q-td>
+								</q-td>
+							</q-tr>
 						</template>
 						<div slot="no-data" />
 						<hk-loader slot="loading" name="NPCs" />
@@ -159,6 +161,7 @@ export default {
 					label: "",
 					field: "avatar",
 					align: "left",
+					classes: "avatar",
 				},
 				{
 					name: "name",
@@ -166,6 +169,7 @@ export default {
 					field: "name",
 					sortable: true,
 					align: "left",
+					classes: "truncate-cell",
 					format: (val) => val.capitalizeEach(),
 				},
 				{
@@ -179,6 +183,7 @@ export default {
 					name: "challenge_rating",
 					label: "CR",
 					field: "challenge_rating",
+					headerStyle: "min-width: 70px;",
 					align: "left",
 					sortable: true,
 					format: (val) => this.cr(val),
diff --git a/src/views/UserContent/Players/index.vue b/src/views/UserContent/Players/index.vue
index 9d439fb1..cf4ff706 100644
--- a/src/views/UserContent/Players/index.vue
+++ b/src/views/UserContent/Players/index.vue
@@ -31,90 +31,90 @@
 					:filter="search"
 					wrap-cells
 				>
-					<template v-slot:body-cell="props">
-						<q-td
-							v-if="props.col.name === 'avatar'"
-							class="avatar"
-							:style="avatar(props.row) ? `background-image: url('${avatar(props.row)}')` : ''"
-						>
-							<i aria-hidden="true" v-if="!avatar(props.row)" class="hki-player" />
-						</q-td>
-						<q-td v-else-if="props.col.name !== 'actions'">
-							<div class="truncate-cell">
-								<div class="truncate">
-									<router-link v-if="props.col.name === 'name'" :to="`${$route.path}/${props.key}`">
-										{{ props.value }}
+					<template v-slot:body="props">
+						<q-tr :props="props">
+							<q-td
+								v-for="col in props.cols"
+								:key="col.name"
+								:props="props"
+								:auto-width="col.name !== 'name'"
+								:style="col.name === 'avatar' && avatar(props.row) ? `background-image: url('${avatar(props.row)}')` : ''"
+							>
+								<template v-if="col.name === 'avatar'">
+									<i aria-hidden="true" v-if="!avatar(props.row)" class="hki-player" />
+								</template>
+								<template v-else-if="col.name !== 'actions'">
+									<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.key}`">
+										{{ col.value }}
 									</router-link>
 									<template v-else>
-										{{ props.value }}
+										{{ col.value }}
 									</template>
-								</div>
-							</div>
-						</q-td>
-						<q-td v-else>
-							<div class="text-right d-flex justify-content-end">
-								<template v-if="tier.name !== 'Free' && Object.keys(sync_characters).length">
-									<button
-										v-if="
-											!props.row.sync_character || !(props.row.sync_character in sync_characters)
-										"
-										class="btn btn-sm bg-neutral-5"
-										@click="linkDialog(props.key)"
-									>
-										<i class="fas fa-link" aria-hidden="true" />
-										<q-tooltip anchor="top middle" self="center middle">
-											Link Character to Sync with
-										</q-tooltip>
-									</button>
-									<template v-else>
-										<a
-											class="btn btn-sm bg-neutral-5"
-											:href="props.row.sync_character"
-											target="_blank"
-											rel="noopener"
-										>
-											<i class="fas fa-external-link" aria-hidden="true" />
-											<q-tooltip anchor="top middle" self="center middle">
-												Open linked character sheet
-											</q-tooltip>
-										</a>
+								</template>
+								<div v-else class="text-right d-flex justify-content-end">
+									<template v-if="tier.name !== 'Free' && Object.keys(sync_characters).length">
 										<button
-											class="btn btn-sm bg-neutral-5 ml-2"
-											@click="syncCharacter(props.key, props.row.sync_character)"
+											v-if="
+												!props.row.sync_character || !(props.row.sync_character in sync_characters)
+											"
+											class="btn btn-sm bg-neutral-5"
+											@click="linkDialog(props.key)"
 										>
-											<i
-												class="fas fa-sync-alt fade-color"
-												:class="{
-													rotate: props.key in syncing,
-													green: syncing[props.key] === 'success',
-													red: syncing[props.key] === 'error',
-												}"
-												aria-hidden="true"
-											/>
+											<i class="fas fa-link" aria-hidden="true" />
 											<q-tooltip anchor="top middle" self="center middle">
-												Update with Character Sync
+												Link Character to Sync with
 											</q-tooltip>
 										</button>
+										<template v-else>
+											<a
+												class="btn btn-sm bg-neutral-5"
+												:href="props.row.sync_character"
+												target="_blank"
+												rel="noopener"
+											>
+												<i class="fas fa-external-link" aria-hidden="true" />
+												<q-tooltip anchor="top middle" self="center middle">
+													Open linked character sheet
+												</q-tooltip>
+											</a>
+											<button
+												class="btn btn-sm bg-neutral-5 ml-2"
+												@click="syncCharacter(props.key, props.row.sync_character)"
+											>
+												<i
+													class="fas fa-sync-alt fade-color"
+													:class="{
+														rotate: props.key in syncing,
+														green: syncing[props.key] === 'success',
+														red: syncing[props.key] === 'error',
+													}"
+													aria-hidden="true"
+												/>
+												<q-tooltip anchor="top middle" self="center middle">
+													Update with Character Sync
+												</q-tooltip>
+											</button>
+										</template>
+										<q-separator vertical :dark="$store.getters.theme === 'dark'" class="ml-2" />
 									</template>
-									<q-separator vertical :dark="$store.getters.theme === 'dark'" class="ml-2" />
-								</template>
 
-								<router-link
-									class="btn btn-sm bg-neutral-5 mx-2"
-									:to="`${$route.path}/${props.key}`"
-								>
-									<i aria-hidden="true" class="fas fa-pencil"></i>
-									<q-tooltip anchor="top middle" self="center middle"> Edit </q-tooltip>
-								</router-link>
-								<a
-									class="btn btn-sm bg-neutral-5"
-									@click="confirmDelete($event, props.key, props.row)"
-								>
-									<i aria-hidden="true" class="fas fa-trash-alt"></i>
-									<q-tooltip anchor="top middle" self="center middle"> Delete </q-tooltip>
-								</a>
-							</div>
-						</q-td>
+									<router-link
+										class="btn btn-sm bg-neutral-5 mx-2"
+										:to="`${$route.path}/${props.key}`"
+									>
+										<i aria-hidden="true" class="fas fa-pencil"></i>
+										<q-tooltip anchor="top middle" self="center middle"> Edit </q-tooltip>
+									</router-link>
+									<a
+										class="btn btn-sm bg-neutral-5"
+										@click="confirmDelete($event, props.key, props.row)"
+									>
+										<i aria-hidden="true" class="fas fa-trash-alt"></i>
+										<q-tooltip anchor="top middle" self="center middle"> Delete </q-tooltip>
+									</a>
+								</div>
+							</q-td>
+						</q-tr>
 					</template>
 					<div slot="no-data" />
 					<hk-loader slot="loading" name="players" />
@@ -171,11 +171,13 @@ export default {
 					label: "",
 					field: "avatar",
 					align: "left",
+					classes: "avatar",
 				},
 				{
 					name: "name",
 					label: "Name",
 					field: "character_name",
+					classes: "truncate-cell",
 					sortable: true,
 					align: "left",
 				},
diff --git a/src/views/UserContent/Reminders/index.vue b/src/views/UserContent/Reminders/index.vue
index 48adce18..c78d712f 100644
--- a/src/views/UserContent/Reminders/index.vue
+++ b/src/views/UserContent/Reminders/index.vue
@@ -21,33 +21,38 @@
 					:filter="search"
 					wrap-cells
 				>
-					<template v-slot:body-cell="props">
-						<q-td v-if="props.col.name !== 'actions'">
-							<div class="truncate-cell">
-								<div class="truncate">
-									<router-link v-if="props.col.name === 'name'" :to="`${$route.path}/${props.key}`">
-										{{ props.value }}
+					<template v-slot:body="props">
+						<q-tr :props="props">
+							<q-td
+								v-for="col in props.cols"
+								:key="col.name"
+								:props="props"
+								:auto-width="col.name !== 'name'"
+							>
+								<template v-if="col.name !== 'actions'">
+									<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.key}`">
+										{{ col.value }}
 									</router-link>
 									<template v-else>
-										{{ props.value }}
+										{{ col.value }}
 									</template>
-								</div>
-							</div>
-						</q-td>
+								</template>
 
-						<q-td v-else class="text-right d-flex justify-content-between">
-							<router-link class="btn btn-sm bg-neutral-5" :to="`${$route.path}/${props.key}`">
-								<i aria-hidden="true" class="fas fa-pencil"></i>
-								<q-tooltip anchor="top middle" self="center middle"> Edit </q-tooltip>
-							</router-link>
-							<a
-								class="btn btn-sm bg-neutral-5 ml-2"
-								@click="confirmDelete($event, props.key, props.row)"
-							>
-								<i aria-hidden="true" class="fas fa-trash-alt"></i>
-								<q-tooltip anchor="top middle" self="center middle"> Delete </q-tooltip>
-							</a>
-						</q-td>
+								<div v-else class="d-flex justify-content-end">
+									<router-link class="btn btn-sm bg-neutral-5" :to="`${$route.path}/${props.key}`">
+										<i aria-hidden="true" class="fas fa-pencil"></i>
+										<q-tooltip anchor="top middle" self="center middle"> Edit </q-tooltip>
+									</router-link>
+									<button
+										class="btn btn-sm bg-neutral-5 ml-2"
+										@click="confirmDelete($event, props.key, props.row)"
+									>
+										<i aria-hidden="true" class="fas fa-trash-alt"></i>
+										<q-tooltip anchor="top middle" self="center middle"> Delete </q-tooltip>
+									</button>
+								</div>
+							</q-td>
+						</q-tr>
 					</template>
 					<div slot="no-data" />
 				</q-table>
@@ -93,6 +98,7 @@ export default {
 					field: "title",
 					sortable: true,
 					align: "left",
+					classes: "truncate-cell",
 				},
 				{
 					name: "actions",
diff --git a/src/views/UserContent/Spells/Spells.vue b/src/views/UserContent/Spells/Spells.vue
index 60588d06..4b2dcc54 100644
--- a/src/views/UserContent/Spells/Spells.vue
+++ b/src/views/UserContent/Spells/Spells.vue
@@ -48,40 +48,45 @@
 						:filter="search"
 						wrap-cells
 					>
-						<template v-slot:body-cell="props">
-							<q-td v-if="props.col.name !== 'actions'">
-								<div class="truncate-cell">
-									<div class="truncate">
+						<template v-slot:body="props">
+							<q-tr :props="props">
+								<q-td
+									v-for="col in props.cols"
+									:key="col.name"
+									:props="props"
+									:auto-width="col.name !== 'name'"
+								>
+									<template v-if="col.name !== 'actions'">
 										<router-link
-											v-if="props.col.name === 'name'"
+											v-if="col.name === 'name'"
 											:to="`${$route.path}/${props.key}`"
 										>
-											{{ props.value }}
+											{{ col.value }}
 										</router-link>
 										<template v-else>
-											{{ props.value }}
+											{{ col.value }}
 										</template>
+									</template>
+									<div v-else class="d-flex justify-content-end">
+										<router-link class="btn btn-sm bg-neutral-5" :to="`${$route.path}/${props.key}`">
+											<i aria-hidden="true" class="fas fa-pencil" />
+											<q-tooltip anchor="top middle" self="center middle">Edit</q-tooltip>
+										</router-link>
+										<ExportUserContent
+											class="btn-sm bg-neutral-5 mx-2"
+											content-type="spell"
+											:content-id="props.key"
+										/>
+										<button
+											class="btn btn-sm bg-neutral-5"
+											@click="confirmDelete($event, props.key, props.row)"
+										>
+											<i aria-hidden="true" class="fas fa-trash-alt" />
+											<q-tooltip anchor="top middle" self="center middle">Delete</q-tooltip>
+										</button>
 									</div>
-								</div>
-							</q-td>
-							<q-td v-else class="text-right d-flex justify-content-between">
-								<router-link class="btn btn-sm bg-neutral-5" :to="`${$route.path}/${props.key}`">
-									<i aria-hidden="true" class="fas fa-pencil" />
-									<q-tooltip anchor="top middle" self="center middle">Edit</q-tooltip>
-								</router-link>
-								<ExportUserContent
-									class="btn-sm bg-neutral-5 mx-2"
-									content-type="spell"
-									:content-id="props.key"
-								/>
-								<button
-									class="btn btn-sm bg-neutral-5"
-									@click="confirmDelete($event, props.key, props.row)"
-								>
-									<i aria-hidden="true" class="fas fa-trash-alt" />
-									<q-tooltip anchor="top middle" self="center middle">Delete</q-tooltip>
-								</button>
-							</q-td>
+								</q-td>
+							</q-tr>
 						</template>
 						<div slot="no-data" />
 						<hk-loader slot="loading" name="spells" />
@@ -149,6 +154,7 @@ export default {
 					field: "name",
 					sortable: true,
 					align: "left",
+					classes: "truncate-cell",
 					format: (val) => val.capitalizeEach(),
 				},
 				{
@@ -165,6 +171,7 @@ export default {
 					field: "level",
 					sortable: true,
 					align: "left",
+					headerStyle: "min-width: 80px;",
 					format: (val) => this.spellLevel(val),
 				},
 				{
@@ -179,7 +186,6 @@ export default {
 		...mapGetters(["tier", "overencumbered"]),
 		...mapGetters("spells", ["spells"]),
 		spellIds() {
-			console.log(this.spells.map((spell) => spell.key));
 			return this.spells.map((spell) => spell.key);
 		},
 	},