diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
index 65e04d92..6abc6ba0 100644
--- a/CHANGELOG-nightly.md
+++ b/CHANGELOG-nightly.md
@@ -1,3 +1,6 @@
+### 3.1.17.1000
+
+-   Added priority system for custom highlights
 ### 3.1.16.2000
 
 -   Updated Firefox extension URL in onboarding
diff --git a/src/app/settings/SettingsConfigHighlights.vue b/src/app/settings/SettingsConfigHighlights.vue
index 7d377310..afc54379 100644
--- a/src/app/settings/SettingsConfigHighlights.vue
+++ b/src/app/settings/SettingsConfigHighlights.vue
@@ -2,19 +2,35 @@
 	<main class="seventv-settings-custom-highlights">
 		<div class="tabs"></div>
 		<div class="list">
-			<u><h5>Phrases & Words</h5></u>
+			<!--Phrases & Words highlights-->
+			<div class="category-header">
+				<u><h5>Phrases & Words</h5></u>
+			</div>
 			<div class="phrase-item item heading">
+				<div class="centered">Priority</div>
 				<div>Pattern</div>
 				<div>Label</div>
-				<div class="centered">Flash Title</div>
+				<div class="centered">Case Sensitive</div>
 				<div class="centered">RegExp</div>
-				<div>Case Sensitive</div>
+				<div class="centered">Flash Title</div>
 				<div>Color</div>
 			</div>
 
 			<UiScrollable>
-				<template v-for="(h, _, index) of highlights.getAllPhraseHighlights()" :key="h.id">
+				<template v-for="(h, index) of phraseHighlightsSorted" :key="h.id">
 					<div class="phrase-item item">
+						<!-- Priority input -->
+						<div name="priority" class="centered">
+							<input
+								type="number"
+								class="priority-input"
+								:value="h.priority"
+								min="1"
+								@blur="onPriorityChange(h, $event)"
+								@keydown.enter="($event.target as HTMLInputElement).blur()"
+							/>
+						</div>
+
 						<!-- Pattern -->
 						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
 							<span>{{ h.pattern }}</span>
@@ -35,11 +51,6 @@
 							/>
 						</div>
 
-						<!-- Checkbox: Flash Title -->
-						<div name="flash-title" class="centered">
-							<FormCheckbox :checked="!!h.flashTitle" @update:checked="onFlashTitleChange(h, $event)" />
-						</div>
-
 						<!-- Checkbox: RegExp -->
 						<div name="is-regexp" class="centered">
 							<FormCheckbox
@@ -58,6 +69,11 @@
 							/>
 						</div>
 
+						<!-- Checkbox: Flash Title -->
+						<div name="flash-title" class="centered">
+							<FormCheckbox :checked="!!h.flashTitle" @update:checked="onFlashTitleChange(h, $event)" />
+						</div>
+
 						<div name="color">
 							<input v-model="h.color" type="color" @input="onColorChange(h, $event as InputEvent)" />
 						</div>
@@ -109,19 +125,34 @@
 			<hr class="solid" />
 
 			<!--Badge highlights-->
-			<u><h5>Badges</h5></u>
+			<div class="category-header">
+				<u><h5>Badges</h5></u>
+			</div>
 			<div class="badge-item item heading">
+				<div class="centered">Priority</div>
 				<div>Badge ID</div>
-				<div>Version</div>
-				<div>Label</div>
-				<div>Badge</div>
+				<div>Lable</div>
+				<div class="centered">Version</div>
+				<div class="centered">Badge</div>
 				<div class="centered">Flash Title</div>
 				<div>Color</div>
 			</div>
 
 			<UiScrollable>
-				<template v-for="(h, _, index) of highlights.getAllBadgeHighlights()" :key="h.id">
+				<template v-for="(h, index) of badgeHighlightsSorted" :key="h.id">
 					<div class="badge-item item">
+						<!-- Priority input -->
+						<div name="priority" class="centered">
+							<input
+								type="number"
+								class="priority-input"
+								:value="h.priority"
+								min="1"
+								@blur="onPriorityChange(h, $event)"
+								@keydown.enter="($event.target as HTMLInputElement).blur()"
+							/>
+						</div>
+
 						<!-- Badge ID -->
 						<div
 							name="pattern"
@@ -138,16 +169,6 @@
 							/>
 						</div>
 
-						<!-- Version -->
-						<div name="version" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'version')">
-							<span>{{ h.version }}</span>
-							<FormInput
-								:ref="(c) => inputs.version.set(h, c as InstanceType<typeof FormInput>)"
-								v-model="h.version"
-								@blur="onInputBlur(h, 'version')"
-							/>
-						</div>
-
 						<!-- Label -->
 						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
 							<span>{{ h.label }}</span>
@@ -158,7 +179,22 @@
 							/>
 						</div>
 
-						<div name="badgeURL">
+						<!-- Version -->
+						<div
+							name="version"
+							class="use-virtual-input centered"
+							tabindex="0"
+							@click="onInputFocus(h, 'version')"
+						>
+							<span>{{ h.version }}</span>
+							<FormInput
+								:ref="(c) => inputs.version.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.version"
+								@blur="onInputBlur(h, 'version')"
+							/>
+						</div>
+
+						<div name="badgeURL" class="centered">
 							<input v-model="h.badgeURL" type="image" :src="h.badgeURL" />
 						</div>
 
@@ -223,8 +259,11 @@
 			<hr class="solid" />
 
 			<!--Username highlights-->
-			<u><h5>Usernames</h5></u>
+			<div class="category-header">
+				<u><h5>Usernames</h5></u>
+			</div>
 			<div class="username-item item heading">
+				<div class="centered">Priority</div>
 				<div>Username</div>
 				<div>Label</div>
 				<div class="centered">Flash Title</div>
@@ -232,8 +271,20 @@
 			</div>
 
 			<UiScrollable>
-				<template v-for="(h, _, index) of highlights.getAllUsernameHighlights()" :key="h.id">
+				<template v-for="(h, index) of usernameHighlightsSorted" :key="h.id">
 					<div class="username-item item">
+						<!-- Priority input -->
+						<div name="priority" class="centered">
+							<input
+								type="number"
+								class="priority-input"
+								:value="h.priority"
+								min="1"
+								@blur="onPriorityChange(h, $event)"
+								@keydown.enter="($event.target as HTMLInputElement).blur()"
+							/>
+						</div>
+
 						<!-- Username -->
 						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
 							<span>{{ h.pattern }}</span>
@@ -314,7 +365,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, reactive, ref, toRef, watch } from "vue";
+import { computed, nextTick, reactive, ref, toRef, watch } from "vue";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { HighlightDef, useChatHighlights } from "@/composable/chat/useChatHighlights";
 import { useChatProperties } from "@/composable/chat/useChatProperties";
@@ -330,6 +381,11 @@ const ctx = useChannelContext(); // this will be an empty context, as config is
 const highlights = useChatHighlights(ctx);
 const properties = useChatProperties(ctx);
 
+// Computed sorted lists for each category (reactive to priority changes)
+const phraseHighlightsSorted = computed(() => highlights.getAllPhraseHighlightsSorted());
+const usernameHighlightsSorted = computed(() => highlights.getAllUsernameHighlightsSorted());
+const badgeHighlightsSorted = computed(() => highlights.getAllBadgeHighlightsSorted());
+
 const newPhraseInput = ref("");
 const newUsernameInput = ref("");
 const newBadgeInput = ref("");
@@ -480,6 +536,18 @@ function setupWatcher(inputRef: any, patternKey: string) {
 setupWatcher(newPhraseInput, "phrase");
 setupWatcher(newUsernameInput, "username");
 setupWatcher(newBadgeInput, "badge");
+
+// Priority change handler - updates priority and triggers re-numbering
+function onPriorityChange(h: HighlightDef, ev: Event): void {
+	if (!(ev.target instanceof HTMLInputElement)) return;
+	const newPriority = parseInt(ev.target.value, 10);
+	if (isNaN(newPriority) || newPriority < 1) {
+		// Reset input to current priority if invalid
+		ev.target.value = String(h.priority ?? 1);
+		return;
+	}
+	highlights.setPriority(h.id, newPriority);
+}
 </script>
 
 <style scoped lang="scss">
@@ -492,6 +560,17 @@ main.seventv-settings-custom-highlights {
 		"list";
 	overflow-x: auto;
 
+	.category-header {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		margin-top: 0.5rem;
+
+		u {
+			flex: 1;
+		}
+	}
+
 	hr.solid {
 		border-top: 2px solid #fff;
 		opacity: 0.2;
@@ -511,21 +590,21 @@ main.seventv-settings-custom-highlights {
 		max-height: 100rem;
 
 		.phrase-item {
-			grid-template-columns: 20% 9rem 1fr 1fr 1fr 1fr 1fr;
+			grid-template-columns: 3rem 20% 9rem 1fr 1fr 1fr 1fr 1fr;
 		}
 
 		.username-item {
-			grid-template-columns: 20% 9rem 1fr 1fr 1fr;
+			grid-template-columns: 3rem 20% 9rem 1fr 1fr 1fr;
 		}
 
 		.badge-item {
-			grid-template-columns: 20% 9rem 1fr 1fr 1fr 1fr 1fr;
+			grid-template-columns: 3rem 20% 9rem 1fr 1fr 1fr 1fr 1fr;
 		}
 
 		.item {
 			display: grid;
 			grid-auto-flow: row dense;
-			column-gap: 3rem;
+			column-gap: 2rem;
 			padding: 1rem;
 
 			> div {
@@ -568,6 +647,31 @@ main.seventv-settings-custom-highlights {
 				}
 			}
 
+			.priority-input {
+				width: 2.5rem;
+				padding: 0.3rem;
+				text-align: center;
+				font-size: 0.875rem;
+				font-weight: 500;
+				background-color: var(--seventv-input-background);
+				border: 0.1rem solid var(--seventv-input-border);
+				border-radius: 0.25rem;
+				color: var(--seventv-text-color-normal);
+				appearance: textfield;
+
+				&:focus {
+					border-color: var(--seventv-primary);
+					outline: none;
+				}
+
+				/* Hide spin buttons */
+				&::-webkit-outer-spin-button,
+				&::-webkit-inner-spin-button {
+					appearance: none;
+					margin: 0;
+				}
+			}
+
 			&:not(.create-new) > .use-virtual-input {
 				cursor: text;
 				padding: 0.5rem;
diff --git a/src/composable/chat/useChatHighlights.ts b/src/composable/chat/useChatHighlights.ts
index 9417e79a..e8b915ad 100644
--- a/src/composable/chat/useChatHighlights.ts
+++ b/src/composable/chat/useChatHighlights.ts
@@ -10,6 +10,15 @@ import { useConfig } from "../useSettings";
 
 interface ChatHighlights {
 	highlights: Record<string, HighlightDef>;
+	// Per-context sorted caches - invalidated when highlights change
+	sortedCache: HighlightDef[] | null;
+	sortedPhraseCache: HighlightDef[] | null;
+	sortedUsernameCache: HighlightDef[] | null;
+	sortedBadgeCache: HighlightDef[] | null;
+	// Version counter to force Vue reactivity on cache invalidation
+	cacheVersion: number;
+	// Track max priority to avoid O(n) scan on each new highlight
+	currentMaxPriority: number;
 }
 
 export interface HighlightDef {
@@ -38,6 +47,7 @@ export interface HighlightDef {
 	badge?: boolean;
 	badgeURL?: string;
 	version?: string;
+	priority?: number;
 }
 
 const m = new WeakMap<ChannelContext, ChatHighlights>();
@@ -45,6 +55,19 @@ const m = new WeakMap<ChannelContext, ChatHighlights>();
 const customHighlights = useConfig<Map<string, HighlightDef>>("highlights.custom");
 const soundVolume = useConfig<number>("highlights.sound_volume");
 
+export enum HighlightCategory {
+	Phrase = "phrase",
+	Username = "username",
+	Badge = "badge",
+}
+
+// Gets the category of a highlight based on its flags.
+function getHighlightCategory(h: HighlightDef): HighlightCategory {
+	if (h.username) return HighlightCategory.Username;
+	if (h.badge) return HighlightCategory.Badge;
+	return HighlightCategory.Phrase; // Default to phrase (includes phrase=true or no category flags)
+}
+
 export function useChatHighlights(ctx: ChannelContext) {
 	const visibility = useDocumentVisibility();
 
@@ -53,16 +76,54 @@ export function useChatHighlights(ctx: ChannelContext) {
 		ping: useSound(assetsBase + "/sound/ping.ogg"),
 	});
 
+	// Ensures a highlight has a valid priority assigned.
+	// If missing or invalid, assigns currentMaxPriority + 1 so new/legacy entries land at the end.
+	function ensurePriority(h: HighlightDef): void {
+		if (!data) return;
+
+		// Validate existing priority: must be a finite positive integer
+		if (typeof h.priority === "number" && Number.isFinite(h.priority) && h.priority >= 1) {
+			// Update max tracker if this priority is higher
+			if (h.priority > data.currentMaxPriority) {
+				data.currentMaxPriority = h.priority;
+			}
+			return;
+		}
+
+		// Assign next available priority
+		data.currentMaxPriority++;
+		h.priority = data.currentMaxPriority;
+	}
+
+	// Invalidates this context's sort caches
+	function invalidateSortCache(): void {
+		if (!data) return;
+		data.sortedCache = null;
+		data.sortedPhraseCache = null;
+		data.sortedUsernameCache = null;
+		data.sortedBadgeCache = null;
+		// Increment version to trigger Vue reactivity
+		data.cacheVersion++;
+	}
+
 	let data = m.get(ctx);
 	if (!data) {
+		// Make data reactive so Vue tracks cache invalidation
 		data = reactive<ChatHighlights>({
 			highlights: {},
-		});
+			sortedCache: null,
+			sortedPhraseCache: null,
+			sortedUsernameCache: null,
+			sortedBadgeCache: null,
+			cacheVersion: 0,
+			currentMaxPriority: 0,
+		}) as ChatHighlights;
 
 		watch(
 			customHighlights,
 			(h) => {
 				if (!data) return;
+				if (!h) return;
 
 				// Clear all custom highlights
 				for (const [k, v] of Object.entries(data.highlights)) {
@@ -71,11 +132,18 @@ export function useChatHighlights(ctx: ChannelContext) {
 					delete data.highlights[k];
 				}
 
+				// Reset max priority before loading
+				data.currentMaxPriority = 0;
+
 				for (const [, v] of h) {
+					ensurePriority(v);
 					data.highlights[v.id] = v;
 					updateSoundData(v);
 					updateFlashTitle(v);
 				}
+
+				// Invalidate sort cache after bulk load
+				invalidateSortCache();
 			},
 			{
 				immediate: true,
@@ -88,9 +156,10 @@ export function useChatHighlights(ctx: ChannelContext) {
 	const save = debounceFn(function (): void {
 		if (!data) return;
 
-		const items: [string, HighlightDef][] = Array.from(Object.values(data.highlights))
-			.filter((h) => h.persist)
-			.map((h) => [
+		const items: [string, HighlightDef][] = [];
+		for (const h of Object.values(data.highlights)) {
+			if (!h.persist) continue;
+			items.push([
 				h.id,
 				toRaw({
 					...h,
@@ -99,6 +168,7 @@ export function useChatHighlights(ctx: ChannelContext) {
 					flashTitleFn: undefined,
 				}),
 			]);
+		}
 
 		customHighlights.value = new Map(items);
 	}, 250);
@@ -107,8 +177,12 @@ export function useChatHighlights(ctx: ChannelContext) {
 		if (!data) return {} as HighlightDef;
 
 		const h = (data.highlights[id] = { ...def, id, persist });
+		ensurePriority(h);
 		updateSoundData(h);
 
+		// Invalidate cache when adding new highlight
+		invalidateSortCache();
+
 		if (!persist) return h;
 
 		// Store to DB
@@ -143,6 +217,20 @@ export function useChatHighlights(ctx: ChannelContext) {
 		if (!data) return;
 
 		delete data.highlights[id];
+
+		// Re-number priorities sequentially after removal to avoid gaps
+		// Use fresh sort since cache will be invalidated anyway
+		const remaining = Object.values(data.highlights).sort(priorityComparator);
+		for (let i = 0; i < remaining.length; i++) {
+			remaining[i].priority = i + 1;
+		}
+
+		// Update max priority (it's simply the count after sequential re-numbering)
+		data.currentMaxPriority = remaining.length;
+
+		// Invalidate caches
+		invalidateSortCache();
+
 		save();
 	}
 
@@ -154,35 +242,43 @@ export function useChatHighlights(ctx: ChannelContext) {
 
 		let ok = false;
 
-		if (h.phrase || (!h.phrase && !h.username && !h.badge)) {
-			if (h.regexp) {
-				let regexp = h.cachedRegExp;
-				if (!regexp) {
-					try {
-						regexp = new RegExp(h.pattern as string, "i");
-						Object.defineProperty(h, "cachedRegExp", { value: regexp });
-					} catch (err) {
-						log.warn("<ChatHighlights>", "Invalid regexp:", h.pattern ?? "");
-
-						msg.setHighlight("#878787", "Error " + (err as Error).message);
-						return false;
+		switch (getHighlightCategory(h)) {
+			case HighlightCategory.Phrase:
+				if (h.regexp) {
+					let regexp = h.cachedRegExp;
+					if (!regexp) {
+						try {
+							regexp = new RegExp(h.pattern as string, "i");
+							Object.defineProperty(h, "cachedRegExp", { value: regexp });
+						} catch (err) {
+							log.warn("<ChatHighlights>", "Invalid regexp:", h.pattern ?? "");
+
+							msg.setHighlight("#878787", "Error " + (err as Error).message);
+							return false;
+						}
 					}
-				}
 
-				ok = regexp.test(msg.body);
-			} else if (h.pattern) {
-				ok = h.caseSensitive
-					? msg.body.includes(h.pattern)
-					: msg.body.toLowerCase().includes(h.pattern.toLowerCase());
-			} else if (typeof h.test === "function") {
-				ok = h.test(msg);
+					ok = regexp.test(msg.body);
+				} else if (h.pattern) {
+					ok = h.caseSensitive
+						? msg.body.includes(h.pattern)
+						: msg.body.toLowerCase().includes(h.pattern.toLowerCase());
+				} else if (typeof h.test === "function") {
+					ok = h.test(msg);
+				}
+				break;
+
+			case HighlightCategory.Username:
+				ok = msg.author?.displayName.toLowerCase() === h.pattern?.toLowerCase();
+				break;
+
+			case HighlightCategory.Badge: {
+				// Check if badge ID exists and version matches
+				const badgeId = h.pattern?.toLowerCase() ?? "";
+				const badgeVersion = h.version?.toLowerCase() ?? "";
+				ok = badgeId in msg.badges && msg.badges[badgeId]?.toLowerCase() === badgeVersion;
+				break;
 			}
-		} else if (h.username) {
-			ok = msg.author?.displayName.toLowerCase() === h.pattern?.toLowerCase();
-		} else if (h.badge) {
-			ok =
-				Object.keys(msg.badges).indexOf(h.pattern?.toLowerCase() ?? "") > -1 &&
-				Object.values(msg.badges).indexOf(h.version?.toLowerCase() ?? "") > -1;
 		}
 
 		if (ok) {
@@ -268,6 +364,127 @@ export function useChatHighlights(ctx: ChannelContext) {
 		return toReactive(filteredHighlights);
 	}
 
+	// Comparator for priority sorting (ascending: 1 = highest priority)
+	const priorityComparator = (a: HighlightDef, b: HighlightDef): number =>
+		(a.priority ?? Infinity) - (b.priority ?? Infinity);
+
+	// Returns all highlights sorted by priority (ascending: 1 = highest priority).
+	// Uses cached array - only re-sorts when highlights change.
+	function getAllSorted(): HighlightDef[] {
+		if (!data) return [];
+
+		// Access cacheVersion to create reactive dependency
+		void data.cacheVersion;
+
+		if (!data.sortedCache) {
+			data.sortedCache = Object.values(data.highlights).sort(priorityComparator);
+		}
+		return data.sortedCache;
+	}
+
+	// Returns phrase highlights sorted by priority (ascending: 1 = highest).
+	// Uses cached array - only re-sorts when highlights change.
+	function getAllPhraseHighlightsSorted(): HighlightDef[] {
+		if (!data) return [];
+
+		// Access cacheVersion to create reactive dependency
+		void data.cacheVersion;
+
+		if (!data.sortedPhraseCache) {
+			const result: HighlightDef[] = [];
+			for (const h of Object.values(data.highlights)) {
+				if (h.phrase === true || (!h.phrase && !h.username && !h.badge)) {
+					result.push(h);
+				}
+			}
+			result.sort(priorityComparator);
+			data.sortedPhraseCache = result;
+		}
+		return data.sortedPhraseCache;
+	}
+
+	// Returns username highlights sorted by priority (ascending: 1 = highest).
+	// Uses cached array - only re-sorts when highlights change.
+	function getAllUsernameHighlightsSorted(): HighlightDef[] {
+		if (!data) return [];
+
+		// Access cacheVersion to create reactive dependency
+		void data.cacheVersion;
+
+		if (!data.sortedUsernameCache) {
+			const result: HighlightDef[] = [];
+			for (const h of Object.values(data.highlights)) {
+				if (h.username === true) {
+					result.push(h);
+				}
+			}
+			result.sort(priorityComparator);
+			data.sortedUsernameCache = result;
+		}
+		return data.sortedUsernameCache;
+	}
+
+	// Returns badge highlights sorted by priority (ascending: 1 = highest).
+	// Uses cached array - only re-sorts when highlights change.
+	function getAllBadgeHighlightsSorted(): HighlightDef[] {
+		if (!data) return [];
+
+		// Access cacheVersion to create reactive dependency
+		void data.cacheVersion;
+
+		if (!data.sortedBadgeCache) {
+			const result: HighlightDef[] = [];
+			for (const h of Object.values(data.highlights)) {
+				if (h.badge === true) {
+					result.push(h);
+				}
+			}
+			result.sort(priorityComparator);
+			data.sortedBadgeCache = result;
+		}
+		return data.sortedBadgeCache;
+	}
+
+	// Sets the priority for a highlight and re-numbers other highlights to avoid duplicates.
+	// Priority 1 is highest. If newPriority already exists, shifts other highlights.
+	function setPriority(id: string, newPriority: number): void {
+		if (!data) return;
+
+		const highlight = data.highlights[id];
+		if (!highlight) return;
+
+		// Validate and clamp newPriority
+		if (!Number.isFinite(newPriority)) return;
+		newPriority = Math.max(1, Math.floor(newPriority));
+
+		const oldPriority = highlight.priority ?? Infinity;
+		if (oldPriority === newPriority) return;
+
+		// Always use fresh sort for setPriority to ensure correct ordering
+		// This is only called on user interaction, not per-message, so O(n log n) is fine
+		const allHighlights = Object.values(data.highlights).sort(priorityComparator);
+
+		// Remove the highlight from its current position
+		const filtered = allHighlights.filter((h) => h.id !== id);
+
+		// Insert at new position (newPriority - 1 because array is 0-indexed)
+		const insertIndex = Math.min(newPriority - 1, filtered.length);
+		filtered.splice(insertIndex, 0, highlight);
+
+		// Re-number all priorities sequentially starting from 1
+		for (let i = 0; i < filtered.length; i++) {
+			filtered[i].priority = i + 1;
+		}
+
+		// Max priority is simply the count after sequential re-numbering
+		data.currentMaxPriority = filtered.length;
+
+		// Invalidate cache since priorities changed
+		invalidateSortCache();
+
+		save();
+	}
+
 	function updateId(oldId: string, newId: string): void {
 		if (!data) return;
 
@@ -279,6 +496,9 @@ export function useChatHighlights(ctx: ChannelContext) {
 
 		h.id = newId;
 
+		// Invalidate cache since the object reference in cache may be stale
+		invalidateSortCache();
+
 		save();
 	}
 
@@ -286,13 +506,19 @@ export function useChatHighlights(ctx: ChannelContext) {
 		define,
 		remove,
 		getAll,
+		getAllSorted,
 		getAllPhraseHighlights,
 		getAllUsernameHighlights,
 		getAllBadgeHighlights,
+		getAllPhraseHighlightsSorted,
+		getAllUsernameHighlightsSorted,
+		getAllBadgeHighlightsSorted,
+		setPriority,
 		save,
 		updateId,
 		checkMatch,
 		updateSoundData,
 		updateFlashTitle,
+		getHighlightCategory,
 	};
 }
diff --git a/src/site/twitch.tv/modules/chat/ChatList.vue b/src/site/twitch.tv/modules/chat/ChatList.vue
index 6fc0aa51..3866841a 100644
--- a/src/site/twitch.tv/modules/chat/ChatList.vue
+++ b/src/site/twitch.tv/modules/chat/ChatList.vue
@@ -349,9 +349,12 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 	if (IsChatMessage(msgData)) msg.setTimestamp(msgData.timestamp);
 	else if (msgData.message) msg.setTimestamp(msgData.message.timestamp ?? 0);
 
-	// highlight when message mentions the actor
-	for (const highlightID in chatHighlights.getAll()) {
-		chatHighlights.checkMatch(highlightID, msg);
+	// Highlight when message matches a highlight rule.
+	// Iterate over highlights sorted by priority (highest first) and stop on first match.
+	for (const h of chatHighlights.getAllSorted()) {
+		if (chatHighlights.checkMatch(h.id, msg)) {
+			break;
+		}
 	}
 
 	if (ctx.actor.roles.has("MODERATOR")) {