diff --git a/src/components/encounters/Entities.vue b/src/components/encounters/Entities.vue
index 53ff30c4c..77513f900 100644
--- a/src/components/encounters/Entities.vue
+++ b/src/components/encounters/Entities.vue
@@ -73,20 +73,30 @@
 
 		<!-- CUSTOM NPCs -->
 		<template v-if="monster_resource === 'custom'">
-			<q-input
-				:dark="$store.getters.theme !== 'light'"
-				v-model="searchNpc"
-				borderless
-				filled
-				square
-				debounce="300"
-				clearable
-				placeholder="Search custom NPCs"
-			>
-				<q-icon slot="prepend" name="search" />
-			</q-input>
+			<div class="d-flex items-center mb-1">
+				<q-input
+					:dark="$store.getters.theme !== 'light'"
+					v-model="searchNpc"
+					borderless
+					filled
+					square
+					debounce="300"
+					clearable
+					placeholder="Search custom NPCs"
+					class="col"
+				>
+					<q-icon slot="prepend" name="search" />
+				</q-input>
+				<q-toggle
+					v-if="campaignId"
+					:dark="$store.getters.theme !== 'light'"
+					v-model="campaignOnly"
+					label="Campaign only"
+					class="ml-2"
+				/>
+			</div>
 			<q-table
-				:data="npcs"
+				:data="filteredCustomNpcs"
 				:visible-columns="visibleColumns"
 				:columns="columns"
 				row-key="key"
@@ -107,7 +117,7 @@
 							:props="props"
 							:auto-width="col.name !== 'name'"
 						>
-							<router-link v-if="col.name === 'name'" :to="`/content/npcs/${col.key}`">
+							<router-link v-if="col.name === 'name'" :to="`/content/npcs/${props.key}`">
 								{{ col.value }}
 							</router-link>
 							<span v-else-if="col.name === 'environment'">
@@ -457,7 +467,7 @@ import { mapActions, mapGetters } from "vuex";
 
 import { dice } from "src/mixins/dice.js";
 import { general } from "src/mixins/general.js";
-import { uuid } from "src/utils/generalFunctions";
+import { uuid, campaignGroupKey } from "src/utils/generalFunctions";
 import ViewMonster from "src/components/compendium/Monster.vue";
 import TutorialPopover from "src/components/demo/TutorialPopover.vue";
 
@@ -499,6 +509,7 @@ export default {
 			player: {},
 			drawer: this.$store.getters.getDrawer,
 			to_add: {},
+			campaignOnly: false,
 			filter_dialog: false,
 			filter: {},
 			typeFilter: [],
@@ -599,6 +610,12 @@ export default {
 	computed: {
 		...mapGetters(["content_count"]),
 		...mapGetters("npcs", ["npcs", "npc_count"]),
+		filteredCustomNpcs() {
+			const npcs = this.npcs;
+			if (!this.campaignOnly || !this.campaignId) return npcs;
+			const groupKey = campaignGroupKey(this.campaignId);
+			return npcs.filter((npc) => npc.groups && npc.groups[groupKey]);
+		},
 		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
 		monster_resource: {
 			get() {
diff --git a/src/components/npcs/NpcGroupManager.vue b/src/components/npcs/NpcGroupManager.vue
new file mode 100644
index 000000000..4546d77cd
--- /dev/null
+++ b/src/components/npcs/NpcGroupManager.vue
@@ -0,0 +1,295 @@
+<template>
+	<hk-card class="npc-group-manager">
+		<div slot="header" class="card-header">
+			<template v-if="selectedGroup">
+				<a @click="selectedGroup = null" class="btn btn-sm bg-neutral-5 mr-2" aria-label="Back to groups">
+					<i aria-hidden="true" class="fas fa-arrow-left" />
+				</a>
+				<span>{{ selectedGroup.name ? selectedGroup.name.capitalizeEach() : "" }}</span>
+			</template>
+			<span v-else>Manage NPC Groups</span>
+			<q-btn padding="sm" size="sm" no-caps icon="fas fa-times" flat v-close-popup />
+		</div>
+		<div class="card-body">
+			<!-- GROUP DETAIL VIEW -->
+			<template v-if="selectedGroup">
+				<!-- Rename (only for custom groups, not campaigns) -->
+				<div v-if="!selectedGroup.isCampaign" class="row q-col-gutter-sm mb-3">
+					<div class="col">
+						<q-input
+							:dark="$store.getters.theme === 'dark'"
+							filled
+							square
+							dense
+							v-model="editName"
+							label="Group name"
+							@keyup.enter="renameGroup"
+						/>
+					</div>
+					<div class="col-auto">
+						<q-btn
+							no-caps
+							color="primary"
+							:disable="!editName || editName.toLowerCase() === selectedGroup.name"
+							@click="renameGroup"
+						>
+							Rename
+						</q-btn>
+					</div>
+				</div>
+
+				<!-- Add NPCs -->
+				<q-select
+					:dark="$store.getters.theme === 'dark'"
+					filled
+					square
+					dense
+					multiple
+					use-chips
+					label="Add NPCs to group"
+					v-model="groupNpcIds"
+					:options="npcOptions"
+					option-value="value"
+					option-label="label"
+					emit-value
+					map-options
+					class="mb-3"
+				/>
+
+				<!-- NPC Members -->
+				<div v-if="groupMembers.length" class="member-list">
+					<div
+						v-for="npc in groupMembers"
+						:key="npc.key"
+						class="member d-flex justify-content-between items-center"
+					>
+						<span>{{ npc.name ? npc.name.capitalizeEach() : npc.key }}</span>
+						<a class="btn btn-sm bg-neutral-5" @click="removeNpcFromGroup(npc.key)" aria-label="Remove NPC from group">
+							<i aria-hidden="true" class="fas fa-times red" />
+						</a>
+					</div>
+				</div>
+				<p v-else class="neutral-3">No NPCs in this group yet.</p>
+			</template>
+
+			<!-- GROUP LIST VIEW -->
+			<template v-else>
+				<!-- Add new group -->
+				<div class="row q-col-gutter-sm mb-3">
+					<div class="col">
+						<q-input
+							:dark="$store.getters.theme === 'dark'"
+							filled
+							square
+							dense
+							v-model="newGroupName"
+							label="New group name"
+							@keyup.enter="addGroup"
+						/>
+					</div>
+					<div class="col-auto">
+						<q-btn no-caps color="primary" :disable="!newGroupName" @click="addGroup">
+							Add
+						</q-btn>
+					</div>
+				</div>
+
+				<!-- Groups list -->
+				<div v-if="npc_groups && npc_groups.length" class="group-list">
+					<div
+						v-for="group in npc_groups"
+						:key="group.key"
+						class="group-item d-flex justify-content-between items-center"
+					>
+						<a @click="selectGroup(group)" class="group-name truncate">
+							{{ group.name ? group.name.capitalizeEach() : group.key }}
+						</a>
+						<div class="d-flex">
+							<a class="btn btn-sm bg-neutral-5 mr-1" @click="selectGroup(group)" aria-label="Edit group">
+								<i aria-hidden="true" class="fas fa-pencil" />
+							</a>
+							<a class="btn btn-sm bg-neutral-5" @click="confirmDeleteGroup(group)" aria-label="Delete group">
+								<i aria-hidden="true" class="fas fa-trash-alt" />
+							</a>
+						</div>
+					</div>
+				</div>
+				<p v-else class="neutral-3">No groups created yet.</p>
+
+				<!-- Campaign groups -->
+				<template v-if="campaignGroups.length">
+					<h3 class="mt-3 mb-2">Campaigns</h3>
+					<div class="group-list">
+						<div
+							v-for="group in campaignGroups"
+							:key="group.key"
+							class="group-item d-flex justify-content-between items-center"
+						>
+							<a @click="selectGroup(group)" class="group-name truncate">
+								{{ group.name ? group.name.capitalizeEach() : group.key }}
+							</a>
+							<a class="btn btn-sm bg-neutral-5" @click="selectGroup(group)" aria-label="Edit campaign group">
+								<i aria-hidden="true" class="fas fa-pencil" />
+							</a>
+						</div>
+					</div>
+				</template>
+			</template>
+		</div>
+	</hk-card>
+</template>
+
+<script>
+import { mapActions, mapGetters } from "vuex";
+import { campaignGroupKey } from "src/utils/generalFunctions";
+
+export default {
+	name: "NpcGroupManager",
+	data() {
+		return {
+			newGroupName: "",
+			selectedGroup: null,
+			editName: "",
+		};
+	},
+	computed: {
+		...mapGetters("npcGroups", ["npc_groups"]),
+		...mapGetters("npcs", ["npcs"]),
+		...mapGetters("campaigns", ["campaigns"]),
+		campaignGroups() {
+			if (!this.campaigns) return [];
+			return this.campaigns.map((campaign) => ({
+				key: campaignGroupKey(campaign.key),
+				name: campaign.name || campaign.key,
+				isCampaign: true,
+			}));
+		},
+		npcOptions() {
+			return this.npcs.map((npc) => ({
+				label: npc.name ? npc.name.capitalizeEach() : npc.key,
+				value: npc.key,
+			}));
+		},
+		groupMembers() {
+			if (!this.selectedGroup) return [];
+			return this.npcs.filter(
+				(npc) => npc.groups && npc.groups[this.selectedGroup.key]
+			);
+		},
+		groupNpcIds: {
+			get() {
+				return this.groupMembers.map((npc) => npc.key);
+			},
+			set(val) {
+				this.syncGroupNpcs(val);
+			},
+		},
+	},
+	methods: {
+		...mapActions("npcGroups", ["add_npc_group", "edit_npc_group", "delete_npc_group"]),
+		...mapActions("npcs", ["update_npc_groups"]),
+		async addGroup() {
+			if (!this.newGroupName) return;
+			await this.add_npc_group({ name: this.newGroupName });
+			this.newGroupName = "";
+		},
+		selectGroup(group) {
+			this.selectedGroup = group;
+			this.editName = group.name ? group.name.capitalizeEach() : "";
+		},
+		async renameGroup() {
+			if (!this.editName || this.editName.toLowerCase() === this.selectedGroup.name) return;
+			await this.edit_npc_group({
+				id: this.selectedGroup.key,
+				group: { name: this.editName },
+			});
+			this.selectedGroup.name = this.editName.toLowerCase();
+		},
+		confirmDeleteGroup(group) {
+			this.$snotify.error(
+				`Are you sure you want to delete "${group.name ? group.name.capitalizeEach() : group.key}"?`,
+				"Delete Group",
+				{
+					timeout: false,
+					buttons: [
+						{
+							text: "Yes",
+							action: (toast) => {
+								this.delete_npc_group(group.key);
+								if (this.selectedGroup && this.selectedGroup.key === group.key) {
+									this.selectedGroup = null;
+								}
+								this.$snotify.remove(toast.id);
+							},
+							bold: false,
+						},
+						{
+							text: "No",
+							action: (toast) => {
+								this.$snotify.remove(toast.id);
+							},
+							bold: true,
+						},
+					],
+				}
+			);
+		},
+		async syncGroupNpcs(newNpcIds) {
+			const groupId = this.selectedGroup.key;
+			const currentNpcIds = this.groupMembers.map((npc) => npc.key);
+
+			// NPCs to add to group
+			const toAdd = newNpcIds.filter((id) => !currentNpcIds.includes(id));
+			// NPCs to remove from group
+			const toRemove = currentNpcIds.filter((id) => !newNpcIds.includes(id));
+
+			for (const npcId of toAdd) {
+				const npc = this.npcs.find((n) => n.key === npcId);
+				const groups = { ...(npc.groups || {}), [groupId]: true };
+				await this.update_npc_groups({ id: npcId, groups });
+			}
+			for (const npcId of toRemove) {
+				await this.removeNpcFromGroup(npcId);
+			}
+		},
+		async removeNpcFromGroup(npcId) {
+			const groupId = this.selectedGroup.key;
+			const npc = this.npcs.find((n) => n.key === npcId);
+			if (npc && npc.groups) {
+				const groups = { ...npc.groups };
+				delete groups[groupId];
+				await this.update_npc_groups({
+					id: npcId,
+					groups: Object.keys(groups).length ? groups : undefined,
+				});
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.npc-group-manager {
+	max-width: 95vw;
+	width: 576px;
+	margin-top: 100px;
+}
+.group-list,
+.member-list {
+	.group-item,
+	.member {
+		padding: 5px 0;
+		border-bottom: solid 1px $neutral-6;
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+	.group-name {
+		cursor: pointer;
+		&:hover {
+			color: $blue;
+		}
+	}
+}
+</style>
diff --git a/src/components/userContent/ExportUserContent.vue b/src/components/userContent/ExportUserContent.vue
index 84a2ad8ae..3cb012893 100644
--- a/src/components/userContent/ExportUserContent.vue
+++ b/src/components/userContent/ExportUserContent.vue
@@ -241,6 +241,7 @@ export default {
 
 		addNpcToExport(npc_id, npc) {
 			delete npc.player_id;
+			delete npc.groups;
 			npc.harmless_key = npc_id;
 
 			this.exportData.npcs[npc_id] = npc;
diff --git a/src/components/userContent/ImportUserContent.vue b/src/components/userContent/ImportUserContent.vue
index 0f94b9666..0aab8013a 100644
--- a/src/components/userContent/ImportUserContent.vue
+++ b/src/components/userContent/ImportUserContent.vue
@@ -596,6 +596,7 @@ export default {
 			 */
 
 			this.removeTimestamps(npc);
+			delete npc.groups;
 
 			this.versatileToOptions(npc);
 			this.renameNpcProps(npc);
diff --git a/src/services/npc_groups.js b/src/services/npc_groups.js
new file mode 100644
index 000000000..6c5ae51ed
--- /dev/null
+++ b/src/services/npc_groups.js
@@ -0,0 +1,57 @@
+import { firebase, db } from "src/firebase";
+
+const NPC_GROUPS_REF = db.ref("npc_groups");
+
+/**
+ * NPC Groups Firebase Service
+ * CRUD interface for NPC group management
+ */
+export class NpcGroupServices {
+	/**
+	 * Get all NPC groups for a user
+	 *
+	 * @param {String} uid ID of active user
+	 * @returns All NPC groups for the user
+	 */
+	async getGroups(uid) {
+		const groups = await NPC_GROUPS_REF.child(uid).once("value");
+		return groups.val();
+	}
+
+	/**
+	 * Add a new NPC group
+	 *
+	 * @param {String} uid ID of active user
+	 * @param {Object} group Group object { name }
+	 * @returns Key of the newly added group
+	 */
+	async addGroup(uid, group) {
+		group.name = group.name.toLowerCase();
+		group.created = firebase.database.ServerValue.TIMESTAMP;
+
+		const newGroup = await NPC_GROUPS_REF.child(uid).push(group);
+		return newGroup.key;
+	}
+
+	/**
+	 * Update an existing NPC group
+	 *
+	 * @param {String} uid ID of active user
+	 * @param {String} id Group ID
+	 * @param {Object} group Updated group object
+	 */
+	async updateGroup(uid, id, group) {
+		group.name = group.name.toLowerCase();
+		await NPC_GROUPS_REF.child(`${uid}/${id}`).update(group);
+	}
+
+	/**
+	 * Delete an NPC group
+	 *
+	 * @param {String} uid ID of active user
+	 * @param {String} id Group ID
+	 */
+	async deleteGroup(uid, id) {
+		await NPC_GROUPS_REF.child(`${uid}/${id}`).remove();
+	}
+}
diff --git a/src/store/index.js b/src/store/index.js
index 44c4ddb27..d72d1bee6 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -11,6 +11,7 @@ import api_items from "./modules/content/items.js";
 import api_conditions from "./modules/content/conditions.js";
 import campaigns from "./modules/userContent/campaigns.js";
 import npcs from "./modules/userContent/npcs.js";
+import npcGroups from "./modules/userContent/npcGroups.js";
 import items from "./modules/userContent/items.js";
 import spells from "./modules/userContent/spells.js";
 import reminders from "./modules/userContent/reminders.js";
@@ -44,6 +45,7 @@ export default function () {
 			api_items: api_items,
 			api_conditions: api_conditions,
 			npcs: npcs,
+			npcGroups: npcGroups,
 			items: items,
 			spells: spells,
 			reminders: reminders,
diff --git a/src/store/modules/userContent/npcGroups.js b/src/store/modules/userContent/npcGroups.js
new file mode 100644
index 000000000..1a5a62398
--- /dev/null
+++ b/src/store/modules/userContent/npcGroups.js
@@ -0,0 +1,133 @@
+import Vue from "vue";
+import { NpcGroupServices } from "src/services/npc_groups";
+import _ from "lodash";
+
+const npc_group_state = () => ({
+	npc_group_services: null,
+	npc_groups: undefined,
+});
+
+const npc_group_getters = {
+	npc_groups: (state) => {
+		// Convert object to sorted array
+		return _.chain(state.npc_groups)
+			.filter((group, key) => {
+				group.key = key;
+				return group;
+			})
+			.orderBy("name", "asc")
+			.value();
+	},
+	npc_group_services: (state) => {
+		return state.npc_group_services;
+	},
+};
+
+const npc_group_actions = {
+	async get_npc_group_services({ getters, commit }) {
+		if (getters.npc_group_services === null || !Object.keys(getters.npc_group_services).length) {
+			commit("SET_NPC_GROUP_SERVICES", new NpcGroupServices());
+		}
+		return getters.npc_group_services;
+	},
+
+	/**
+	 * Fetches all NPC groups for a user
+	 */
+	async get_npc_groups({ state, rootGetters, dispatch, commit }) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		let groups = state.npc_groups ? state.npc_groups : undefined;
+
+		if (!groups && uid) {
+			const services = await dispatch("get_npc_group_services");
+			groups = await services.getGroups(uid);
+			commit("SET_NPC_GROUPS", groups || {});
+		}
+		return groups;
+	},
+
+	/**
+	 * Add a new NPC group
+	 *
+	 * @param {Object} group { name }
+	 * @returns {String} the id of the newly added group
+	 */
+	async add_npc_group({ rootGetters, commit, dispatch }, group) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+
+		if (uid) {
+			const services = await dispatch("get_npc_group_services");
+			const id = await services.addGroup(uid, group);
+			commit("SET_NPC_GROUP", { id, group });
+			return id;
+		}
+	},
+
+	/**
+	 * Update an existing NPC group
+	 *
+	 * @param {String} id
+	 * @param {Object} group
+	 */
+	async edit_npc_group({ rootGetters, commit, dispatch }, { id, group }) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+
+		if (uid) {
+			const services = await dispatch("get_npc_group_services");
+			await services.updateGroup(uid, id, group);
+			commit("SET_NPC_GROUP", { id, group });
+		}
+	},
+
+	/**
+	 * Delete an NPC group and remove it from all NPCs
+	 *
+	 * @param {String} id
+	 */
+	async delete_npc_group({ rootGetters, commit, dispatch }, id) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+
+		if (uid) {
+			const services = await dispatch("get_npc_group_services");
+			await services.deleteGroup(uid, id);
+			commit("REMOVE_NPC_GROUP", id);
+
+			// Remove group from all NPCs that reference it
+			await dispatch("npcs/remove_group_from_all_npcs", id, { root: true });
+		}
+	},
+
+	clear_npc_group_store({ commit }) {
+		commit("CLEAR_STORE");
+	},
+};
+
+const npc_group_mutations = {
+	SET_NPC_GROUP_SERVICES(state, payload) {
+		Vue.set(state, "npc_group_services", payload);
+	},
+	SET_NPC_GROUPS(state, value) {
+		Vue.set(state, "npc_groups", value);
+	},
+	SET_NPC_GROUP(state, { id, group }) {
+		if (state.npc_groups) {
+			Vue.set(state.npc_groups, id, group);
+		} else {
+			Vue.set(state, "npc_groups", { [id]: group });
+		}
+	},
+	REMOVE_NPC_GROUP(state, id) {
+		Vue.delete(state.npc_groups, id);
+	},
+	CLEAR_STORE(state) {
+		Vue.set(state, "npc_groups", undefined);
+	},
+};
+
+export default {
+	namespaced: true,
+	state: npc_group_state,
+	getters: npc_group_getters,
+	actions: npc_group_actions,
+	mutations: npc_group_mutations,
+};
diff --git a/src/store/modules/userContent/npcs.js b/src/store/modules/userContent/npcs.js
index 4dfbcbf95..6422e36f1 100644
--- a/src/store/modules/userContent/npcs.js
+++ b/src/store/modules/userContent/npcs.js
@@ -4,7 +4,7 @@ import _ from "lodash";
 
 // Converts a full npc to a search_npc
 const convert_npc = (npc) => {
-	const properties = ["name", "challenge_rating", "avatar", "storage_avatar", "type"];
+	const properties = ["name", "challenge_rating", "avatar", "storage_avatar", "type", "groups"];
 	const returnNpc = {};
 
 	for (const prop of properties) {
@@ -359,6 +359,40 @@ const npc_actions = {
 		}
 	},
 
+	/**
+	 * Updates the groups for an NPC
+	 *
+	 * @param {string} id NPC ID
+	 * @param {object} groups Groups object { groupId: true, ... }
+	 */
+	async update_npc_groups({ rootGetters, commit, dispatch }, { id, groups }) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
+			const services = await dispatch("get_npc_services");
+			await services.updateNpc(uid, id, "", { groups }, true);
+			commit("SET_NPC_PROP", { uid, id, property: "groups", value: groups, update_search: true });
+		}
+	},
+
+	/**
+	 * Removes a group from all NPCs that reference it
+	 * Called when a group is deleted
+	 *
+	 * @param {string} groupId
+	 */
+	async remove_group_from_all_npcs({ state, rootGetters, dispatch }, groupId) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid && state.npcs) {
+			const services = await dispatch("get_npc_services");
+			for (const [npcId, npc] of Object.entries(state.npcs)) {
+				if (npc.groups && npc.groups[groupId]) {
+					await services.updateNpc(uid, npcId, "/groups", { [groupId]: null }, true);
+					Vue.delete(state.npcs[npcId].groups, groupId);
+				}
+			}
+		}
+	},
+
 	cache_generated_npc({ commit }, npc) {
 		commit("CACHE_GENERATED_NPC", npc);
 	},
diff --git a/src/utils/generalFunctions.js b/src/utils/generalFunctions.js
index 2e4527d47..734224d6f 100644
--- a/src/utils/generalFunctions.js
+++ b/src/utils/generalFunctions.js
@@ -452,4 +452,8 @@ export async function downloadMonsterFile(element, filetype = "png", options = {
 		pdf.save(`${filename}.pdf`);
 		document.body.removeChild(clone);
 	}
+}
+
+export function campaignGroupKey(campaignId) {
+	return `campaign__${campaignId}`;
 }
\ No newline at end of file
diff --git a/src/views/UserContent/Npcs/EditNpc.vue b/src/views/UserContent/Npcs/EditNpc.vue
index 9ab5add4d..f6a6a3110 100644
--- a/src/views/UserContent/Npcs/EditNpc.vue
+++ b/src/views/UserContent/Npcs/EditNpc.vue
@@ -41,6 +41,26 @@
 					<div class="form">
 						<BasicInfo v-model="npc" />
 
+						<!-- NPC GROUPS -->
+						<hk-card v-if="userId" header="Groups">
+							<div class="card-body">
+								<q-select
+									:dark="$store.getters.theme === 'dark'"
+									filled
+									square
+									multiple
+									use-chips
+									label="Assign to groups"
+									v-model="selectedGroups"
+									:options="groupOptions"
+									option-value="value"
+									option-label="label"
+									emit-value
+									map-options
+								/>
+							</div>
+						</hk-card>
+
 						<Senses v-model="npc" />
 
 						<AbilityScores v-model="npc" />
@@ -197,7 +217,7 @@ import Defenses from "src/components/npcs/Defenses";
 import SpellCasting from "src/components/npcs/SpellCasting";
 import Actions from "src/components/npcs/Actions";
 import CopyContent from "src/components/CopyContent";
-import { downloadJSON } from "src/utils/generalFunctions";
+import { downloadJSON, campaignGroupKey } from "src/utils/generalFunctions";
 import SignUp from "src/components/SignUp.vue";
 import GenerateMonster from "src/components/npcs/GenerateMonster.vue";
 
@@ -239,6 +259,10 @@ export default {
 		};
 	},
 	async mounted() {
+		if (this.userId) {
+			this.get_npc_groups();
+			this.get_campaigns();
+		}
 		if (this.npcId) {
 			this.loading = true;
 			await this.get_npc({ uid: this.userId, id: this.npcId }).then((npc) => {
@@ -255,6 +279,40 @@ export default {
 	computed: {
 		...mapGetters(["user", "tier", "overencumbered"]),
 		...mapGetters("npcs", ["npc_count"]),
+		...mapGetters("npcGroups", { npc_groups: "npc_groups" }),
+		...mapGetters("campaigns", { all_campaigns: "campaigns" }),
+		selectedGroups: {
+			get() {
+				return this.npc.groups ? Object.keys(this.npc.groups) : [];
+			},
+			set(val) {
+				const groups = {};
+				for (const id of val) {
+					groups[id] = true;
+				}
+				this.$set(this.npc, "groups", Object.keys(groups).length ? groups : undefined);
+			},
+		},
+		groupOptions() {
+			const options = [];
+			if (this.npc_groups) {
+				for (const group of this.npc_groups) {
+					options.push({
+						label: group.name ? group.name.capitalizeEach() : group.key,
+						value: group.key,
+					});
+				}
+			}
+			if (this.all_campaigns) {
+				for (const campaign of this.all_campaigns) {
+					options.push({
+						label: `[Campaign] ${campaign.name ? campaign.name.capitalizeEach() : campaign.key}`,
+						value: campaignGroupKey(campaign.key),
+					});
+				}
+			}
+			return options;
+		},
 	},
 	watch: {
 		npc: {
@@ -275,6 +333,8 @@ export default {
 		...mapActions(["setDrawer"]),
 		...mapActions("api_monsters", ["fetch_monsters", "fetch_monster"]),
 		...mapActions("npcs", ["add_npc", "edit_npc", "get_npc"]),
+		...mapActions("npcGroups", ["get_npc_groups"]),
+		...mapActions("campaigns", ["get_campaigns"]),
 		isOwner() {
 			return this.$route.name !== "Edit Companion";
 		},
diff --git a/src/views/UserContent/Npcs/Npcs.vue b/src/views/UserContent/Npcs/Npcs.vue
index 349cfb5ea..b54e29dab 100644
--- a/src/views/UserContent/Npcs/Npcs.vue
+++ b/src/views/UserContent/Npcs/Npcs.vue
@@ -3,6 +3,9 @@
 		<hk-card>
 			<ContentHeader type="npcs">
 				<template #actions-left>
+					<button class="btn btn-sm bg-neutral-5 mr-2" @click="group_dialog = true">
+						Groups
+					</button>
 					<ExportUserContent
 						class="btn-sm bg-neutral-5 mr-2"
 						content-type="npc"
@@ -31,21 +34,45 @@
 			<div class="card-body" v-if="!loading_npcs">
 				<p class="neutral-2">These are your custom Non-Player Characters and monsters.</p>
 				<template v-if="npcs.length">
-					<q-input
-						:dark="$store.getters.theme !== 'light'"
-						v-model="search"
-						borderless
-						filled
-						square
-						debounce="300"
-						clearable
-						placeholder="Search NPCs"
-					>
-						<q-icon slot="prepend" name="search" />
-					</q-input>
+					<div class="row q-col-gutter-sm mb-1">
+						<div class="col">
+							<q-input
+								:dark="$store.getters.theme !== 'light'"
+								v-model="search"
+								borderless
+								filled
+								square
+								dense
+								debounce="300"
+								clearable
+								placeholder="Search NPCs"
+							>
+								<q-icon slot="prepend" name="search" />
+							</q-input>
+						</div>
+						<div class="col" v-if="groupFilterOptions.length">
+							<q-select
+								:dark="$store.getters.theme !== 'light'"
+								v-model="groupFilter"
+								:options="groupFilterOptions"
+								multiple
+								filled
+								square
+								dense
+								clearable
+								label="Filter by group"
+								placeholder="Filter by group"
+								option-value="value"
+								option-label="label"
+								emit-value
+								map-options
+								use-chips
+							/>
+						</div>
+					</div>
 
 					<q-table
-						:data="npcs"
+						:data="filteredNpcs"
 						:visible-columns="visibleColumns"
 						:columns="columns"
 						row-key="key"
@@ -74,6 +101,21 @@
 									<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 === 'groups'">
+										<template v-if="props.row.groups">
+											<q-chip
+												v-for="(_, groupId) in props.row.groups"
+												:key="groupId"
+												dense
+												size="sm"
+												color="neutral-4"
+												text-color="white"
+												class="mr-1"
+											>
+												{{ groupNameMap[groupId] || groupId }}
+											</q-chip>
+										</template>
+									</template>
 									<template v-else-if="col.name !== 'actions'">
 										<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.key}`">
 											{{ col.value }}
@@ -143,6 +185,11 @@
 			</hk-card>
 		</q-dialog>
 
+		<!-- Groups dialog -->
+		<q-dialog v-model="group_dialog">
+			<NpcGroupManager />
+		</q-dialog>
+
 		<!-- generate dialog-->
 		<q-dialog v-model="generate_dialog">
 			<hk-card class="npc-dialog" :persistent="generating">
@@ -175,11 +222,13 @@
 
 <script>
 import { mapActions, mapGetters } from "vuex";
+import { campaignGroupKey } from "src/utils/generalFunctions";
 import { monsterMixin } from "src/mixins/monster";
 import ImportUserContent from "src/components/userContent/ImportUserContent.vue";
 import ContentHeader from "src/components/userContent/ContentHeader.vue";
 import ExportUserContent from "src/components/userContent/ExportUserContent.vue";
 import GenerateMonster from "src/components/npcs/GenerateMonster.vue";
+import NpcGroupManager from "src/components/npcs/NpcGroupManager.vue";
 
 export default {
 	name: "Npcs",
@@ -189,15 +238,18 @@ export default {
 		ContentHeader,
 		ExportUserContent,
 		GenerateMonster,
+		NpcGroupManager,
 	},
 	data() {
 		return {
 			userId: this.$store.getters.user.uid,
 			import_dialog: false,
 			generate_dialog: false,
+			group_dialog: false,
 			loading_npcs: true,
 			show_warning: true,
 			search: "",
+			groupFilter: [],
 			card_width: 0,
 			overwrite: undefined,
 			generating: false,
@@ -225,6 +277,12 @@ export default {
 					align: "left",
 					sortable: true,
 				},
+				{
+					name: "groups",
+					label: "Groups",
+					field: "groups",
+					align: "left",
+				},
 				{
 					name: "challenge_rating",
 					label: "CR",
@@ -247,19 +305,72 @@ export default {
 		...mapGetters("npcs", ["npcs"]),
 		...mapGetters("players", ["players"]),
 		...mapGetters("campaigns", ["campaigns"]),
+		...mapGetters("npcGroups", { npc_groups: "npc_groups" }),
 		visibleColumns() {
-			return this.card_width > 600
-				? ["avatar", "name", "type", "challenge_rating", "actions"]
-				: this.card_width > 450
-					? ["avatar", "name", "type", "actions"]
-					: ["avatar", "name", "actions"];
+			if (this.card_width > 800) {
+				return ["avatar", "name", "groups", "type", "challenge_rating", "actions"];
+			}
+			if (this.card_width > 600) {
+				return ["avatar", "name", "type", "challenge_rating", "actions"];
+			}
+			if (this.card_width > 450) {
+				return ["avatar", "name", "type", "actions"];
+			}
+			return ["avatar", "name", "actions"];
 		},
 		npcIds() {
 			return this.npcs.map((npc) => npc.key);
 		},
+		groupFilterOptions() {
+			const options = [];
+			if (this.npc_groups) {
+				for (const group of this.npc_groups) {
+					options.push({
+						label: group.name ? group.name.capitalizeEach() : group.key,
+						value: group.key,
+					});
+				}
+			}
+			if (this.campaigns) {
+				for (const campaign of this.campaigns) {
+					options.push({
+						label: `[Campaign] ${campaign.name ? campaign.name.capitalizeEach() : campaign.key}`,
+						value: campaignGroupKey(campaign.key),
+					});
+				}
+			}
+			return options;
+		},
+		groupNameMap() {
+			const map = {};
+			if (this.npc_groups) {
+				for (const group of this.npc_groups) {
+					map[group.key] = group.name ? group.name.capitalizeEach() : group.key;
+				}
+			}
+			if (this.campaigns) {
+				for (const campaign of this.campaigns) {
+					map[campaignGroupKey(campaign.key)] = campaign.name
+						? campaign.name.capitalizeEach()
+						: campaign.key;
+				}
+			}
+			return map;
+		},
+		filteredNpcs() {
+			if (!this.groupFilter || !this.groupFilter.length) {
+				return this.npcs;
+			}
+			return this.npcs.filter((npc) => {
+				if (!npc.groups) return false;
+				return this.groupFilter.some((groupId) => npc.groups[groupId]);
+			});
+		},
 	},
 	async mounted() {
 		await this.get_npcs();
+		this.get_npc_groups();
+		this.get_campaigns();
 		this.update_npc_count();
 
 		this.loading_npcs = false;
@@ -274,6 +385,8 @@ export default {
 			"add_npc",
 			"update_npc_count",
 		]),
+		...mapActions("npcGroups", ["get_npc_groups"]),
+		...mapActions("campaigns", ["get_campaigns"]),
 		...mapActions("spells", ["get_spell"]),
 		cr(val) {
 			return val == 0.125 ? "1/8" : val == 0.25 ? "1/4" : val == 0.5 ? "1/2" : val;