diff --git a/package.json b/package.json
index f2bbf53ee..a06f18619 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
 		"@vue/eslint-config-prettier": "^7.0.0",
 		"@vue/eslint-config-typescript": "^11.0.2",
 		"chokidar": "^3.5.3",
+		"color2k": "^2.0.0",
 		"dexie": "^3.2.2",
 		"eslint": "^8.30.0",
 		"eslint-plugin-prettier": "^4.2.1",
diff --git a/src/app.d.ts b/src/app.d.ts
index c065ea148..d4d569875 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -61,6 +61,7 @@ declare namespace SevenTV {
 		data?: Emote;
 
 		provider?: Provider;
+		overlaid?: ActiveEmote[];
 	}
 
 	interface User {
diff --git a/src/common/Transform.ts b/src/common/Transform.ts
index e122e448f..832d0fb02 100644
--- a/src/common/Transform.ts
+++ b/src/common/Transform.ts
@@ -62,7 +62,7 @@ export function convertBttvEmoteSet(data: BTTV.UserResponse, channelID: string):
 		emotes: [...data.channelEmotes, ...data.sharedEmotes].map((e) => ({
 			id: e.id,
 			name: e.code,
-			flags: BTTV_ZeroWidth.indexOf(e.code) > -1 ? 0 : 256,
+			flags: 0,
 			provider: "BTTV",
 			data: convertBttvEmote(e),
 		})),
@@ -73,7 +73,7 @@ export function convertBttvEmote(data: BTTV.Emote): SevenTV.Emote {
 	return {
 		id: data.id,
 		name: data.code,
-		flags: BTTV_ZeroWidth.indexOf(data.code) > -1 ? 0 : 256,
+		flags: BTTV_ZeroWidth.indexOf(data.code) > -1 ? 256 : 0,
 		tags: [],
 		lifecycle: 3,
 		listed: true,
diff --git a/src/site/twitch.tv/index.ts b/src/site/twitch.tv/index.ts
index 98b4f96b4..be1032f6a 100644
--- a/src/site/twitch.tv/index.ts
+++ b/src/site/twitch.tv/index.ts
@@ -89,6 +89,11 @@ export function getChatLines(container: HTMLElement, idList?: string[]) {
 	return lines;
 }
 
+export namespace Regex {
+	export const MessageDelimiter = new RegExp("( )", "g");
+	export const SevenTVLink = new RegExp("^https?:\\/\\/(?:www\\.)?7tv.app\\/emotes\\/(?<emoteID>[0-9a-f]{24})", "gi");
+}
+
 export namespace Selectors {
 	export const ROOT = "#root div";
 	export const NAV = "[data-a-target='top-nav-container']";
@@ -109,3 +114,83 @@ export namespace Selectors {
 	export const ChatMessageUsername = ".chat-line__usernames";
 	export const ChatMessageTimestamp = ".chat-line__timestamp";
 }
+
+export const enum MessageType {
+	MESSAGE = 0,
+	EXTENSIONMESSAGE,
+	MODERATION,
+	MODERATIONACTION,
+	TARGETEDMODERATIONACTION,
+	AUTOMOD,
+	SUBSCRIBERONLYMODE,
+	FOLLOWERONLYMODE,
+	SLOWMODE,
+	EMOTEONLYMODE,
+	R9KMODE,
+	CONNECTED,
+	DISCONNECTED,
+	RECONNECT,
+	HOSTING,
+	UNHOST,
+	HOSTED,
+	SUBSCRIPTION,
+	RESUBSCRIPTION,
+	GIFTPAIDUPGRADE,
+	ANONGIFTPAIDUPGRADE,
+	PRIMEPAIDUPGRADE,
+	PRIMECOMMUNITYGIFTRECEIVEDEVENT,
+	EXTENDSUBSCRIPTION,
+	SUBGIFT,
+	ANONSUBGIFT,
+	CLEAR,
+	ROOMMODS,
+	ROOMSTATE,
+	RAID,
+	UNRAID,
+	NOTICE,
+	INFO,
+	BADGESUPDATED,
+	PURCHASE,
+	BITSCHARITY,
+	CRATEGIFT,
+	REWARDGIFT,
+	SUBMYSTERYGIFT,
+	ANONSUBMYSTERYGIFT,
+	STANDARDPAYFORWARD,
+	COMMUNITYPAYFORWARD,
+	FIRSTCHEERMESSAGE,
+	FIRSTMESSAGEHIGHLIGHT,
+	BITSBADGETIERMESSAGE,
+	INLINEPRIVATECALLOUT,
+	CHANNELPOINTSREWARD,
+	COMMUNITYCHALLENGECONTRIBUTION,
+	LIVEMESSAGESEPARATOR,
+	RESTRICTEDLOWTRUSTUSERMESSAGE,
+	COMMUNITYINTRODUCTION,
+	SHOUTOUT,
+	ANNOUNCEMENTMESSAGE,
+	MIDNIGHTSQUID,
+	CHARITYDONATION,
+	MESSAGEIDUPDATE,
+	PINNEDCHAT,
+}
+
+export const enum ModerationType {
+	BAN = 0,
+	TIMEOUT,
+	DELETE,
+}
+
+export const enum MessagePartType {
+	TEXT = 0,
+	MODERATEDTEXT,
+	FLAGGEDSEGMENT,
+	CURRENTUSERHIGHLIGHT,
+	MENTION,
+	LINK,
+	EMOTE,
+	CLIPLINK,
+	VIDEOLINK,
+	SEVENTVEMOTE = 700,
+	SEVENTVLINK,
+}
diff --git a/src/site/twitch.tv/modules/chat/ChatBackend.ts b/src/site/twitch.tv/modules/chat/ChatBackend.ts
index d4dd30219..001a8262d 100644
--- a/src/site/twitch.tv/modules/chat/ChatBackend.ts
+++ b/src/site/twitch.tv/modules/chat/ChatBackend.ts
@@ -1,4 +1,5 @@
-import { getEmoteButton } from "@/site/twitch.tv";
+import { getEmoteButton, getChatController } from "@/site/twitch.tv";
+import { hasBadContrast, darken, parseToRgba } from "color2k";
 
 export const tools = {
 	emoteClick: (() => null) as Twitch.EmoteButton["props"]["onEmoteClick"],
@@ -56,3 +57,40 @@ export const sendDummyMessage = (controller: Twitch.ChatControllerComponent) =>
 		id: "seventv-hook-message",
 	});
 };
+
+// Temporary solution
+const darkTheme = getChatController()?.props.theme === 1;
+
+const calculated = new Map<boolean, Map<string, string>>();
+calculated.set(true, new Map<string, string>());
+calculated.set(false, new Map<string, string>());
+
+export function normalizeUsername(colour: string, readableColors: boolean): string {
+	let temp = colour.toLowerCase();
+	const shouldShiftUp = readableColors === darkTheme;
+	const backgroundColor = shouldShiftUp ? "#0f0e11" : "#faf9fa";
+
+	if (!hasBadContrast(temp, "readable", backgroundColor)) return temp;
+
+	// See if we have calculated the value
+	const stored = calculated.get(shouldShiftUp)?.get(colour);
+	if (stored) return stored;
+
+	const rgb = parseToRgba(temp).slice(0, 3);
+
+	if (shouldShiftUp && rgb.every((e) => e < 36)) {
+		calculated.get(shouldShiftUp)?.set(colour, "#7a7a7a");
+		return "#7a7a7a";
+	}
+
+	let i = 0;
+
+	while (hasBadContrast(temp, "readable", backgroundColor) && i < 50) {
+		temp = darken(temp, 0.1 * (shouldShiftUp ? -1 : 1));
+		i++;
+	}
+
+	calculated.get(shouldShiftUp)?.set(colour, temp);
+
+	return temp;
+}
diff --git a/src/site/twitch.tv/modules/chat/ChatController.vue b/src/site/twitch.tv/modules/chat/ChatController.vue
index b668ab90f..fca55bedf 100644
--- a/src/site/twitch.tv/modules/chat/ChatController.vue
+++ b/src/site/twitch.tv/modules/chat/ChatController.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { getChatController, getChatLines, Selectors } from "@/site/twitch.tv";
+import { getChatController, getChatLines, Selectors, MessageType, ModerationType } from "@/site/twitch.tv";
 import { ref, reactive, nextTick, onUnmounted, watch } from "vue";
 import { useTwitchStore } from "@/site/twitch.tv/TwitchStore";
 import { registerCardOpeners, sendDummyMessage } from "@/site/twitch.tv/modules/chat/ChatBackend";
@@ -210,7 +210,6 @@ function unhookController() {
 }
 
 // Take over the chat's native message container
-const handledMessageTypes = [0, 2];
 const overwriteMessageContainer = (
 	scopedController: Twitch.ChatControllerComponent,
 	scrollContainer: HTMLDivElement,
@@ -282,14 +281,30 @@ const scroll = reactive({
 	buffer: [] as Twitch.ChatMessage[], // twitch chat message buffe when scrolling is paused
 });
 
-const onMessage = (msg: Twitch.ChatMessage): boolean => {
-	if (msg.id === "seventv-hook-message" || !handledMessageTypes.includes(msg.type)) {
+const onMessage = (msg: Twitch.Message): boolean => {
+	if (msg.id === "seventv-hook-message") {
 		return false;
 	}
 
+	switch (msg.type) {
+		case MessageType.MESSAGE:
+			onChatMessage(msg as Twitch.ChatMessage);
+			break;
+
+		case MessageType.MODERATION:
+			onModerationMessage(msg as Twitch.ModerationMessage);
+			break;
+
+		default:
+			return false;
+	}
+	return true;
+};
+
+function onChatMessage(msg: Twitch.ChatMessage) {
 	if (scroll.paused) {
 		// if scrolling is paused, buffer the message
-		scroll.buffer.push(msg);
+		scroll.buffer.push(msg as Twitch.ChatMessage);
 		if (scroll.buffer.length > lineLimit.value) scroll.buffer.shift();
 
 		return true;
@@ -297,15 +312,25 @@ const onMessage = (msg: Twitch.ChatMessage): boolean => {
 
 	// Add message to store
 	// it will be rendered on the next tick
-	chatStore.pushMessage(msg);
+	chatStore.pushMessage(msg as Twitch.ChatMessage);
 
 	nextTick(() => {
 		// autoscroll on new message
 		scrollToLive();
 	});
+}
 
-	return true;
-};
+function onModerationMessage(msg: Twitch.ModerationMessage) {
+	if (msg.moderationType == ModerationType.DELETE) {
+		const found = chatStore.messages.find((m) => m.id == msg.targetMessageID);
+		if (found) found.deleted = true;
+	} else {
+		chatStore.messages.forEach((m) => {
+			if (!m.seventv || m.user.userLogin != msg.userLogin) return;
+			m.banned = true;
+		});
+	}
+}
 
 const scrollToLive = () => {
 	if (!containerEl.value || scroll.paused) {
@@ -388,7 +413,7 @@ onUnmounted(() => {
 	overflow-x: hidden !important;
 
 	.seventv-message-container {
-		padding-bottom: 1em;
+		padding: 1em 0;
 		line-height: 1.5em;
 	}
 
diff --git a/src/site/twitch.tv/modules/chat/ChatList.vue b/src/site/twitch.tv/modules/chat/ChatList.vue
index 5c666fee7..c2739dc3e 100644
--- a/src/site/twitch.tv/modules/chat/ChatList.vue
+++ b/src/site/twitch.tv/modules/chat/ChatList.vue
@@ -1,7 +1,7 @@
 <template>
 	<div v-for="msg of messages" :key="msg.id" :msg-id="msg.id">
 		<template v-if="msg.seventv">
-			<ChatMessage :msg="msg" @open-viewer-card="openViewerCard" />
+			<ChatMessage :msg="msg" :controller="controller" @open-viewer-card="openViewerCard" />
 		</template>
 		<template v-else>
 			<ChatMessageUnhandled :msg="msg" />
diff --git a/src/site/twitch.tv/modules/chat/components/BanSlider.vue b/src/site/twitch.tv/modules/chat/components/BanSlider.vue
new file mode 100644
index 000000000..503c3a7c7
--- /dev/null
+++ b/src/site/twitch.tv/modules/chat/components/BanSlider.vue
@@ -0,0 +1,141 @@
+<template>
+	<div
+		v-if="shouldModerate(props.msg)"
+		class="seventv-ban-slider"
+		:style="{
+			transform: 'translateX(' + data.pos + ')',
+			transition: transition ? 'transform 0.3s ease' : 'none',
+			boxShadow: tracking ? 'black 0px 0.1rem 0.2rem' : 'none',
+		}"
+	>
+		<div class="ban-background" :style="{ backgroundColor: data.color, width: data.pos }">
+			<span class="text" :style="{ opacity: data.banVis }">
+				{{ data.text }}
+			</span>
+		</div>
+		<div class="grabbable-wrapper">
+			<div class="grabbable-outer" @pointerdown="handleDown" @pointerup="handleRelease" @pointermove="update">
+				<div class="grabbable-inner">
+					<div class="dots" />
+				</div>
+			</div>
+		</div>
+		<!-- The wrapped object-->
+		<slot />
+		<div class="unban-background" :style="{ width: 'calc(-1 *' + data.pos + ')' }">
+			<span class="text" :style="{ opacity: data.unbanVis }"> Unban </span>
+		</div>
+	</div>
+	<slot v-else />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { sliderData, maxVal, executeModAction, shouldModerate } from "./BanSliderBackend";
+
+const props = defineProps<{
+	msg: Twitch.ChatMessage;
+}>();
+
+const transition = ref(false);
+const tracking = ref(false);
+
+const data = ref(new sliderData(0));
+let initial = 0;
+
+const handleDown = (e: PointerEvent) => {
+	e.stopPropagation();
+	initial = e.pageX;
+	tracking.value = true;
+	(e.target as HTMLElement).setPointerCapture(e.pointerId);
+};
+
+const handleRelease = (e: PointerEvent): void => {
+	tracking.value = false;
+
+	if (data.value.command) {
+		executeModAction(data.value.command, props.msg.user.userLogin, props.msg.id);
+	}
+
+	transition.value = true;
+	setTimeout(() => (transition.value = false), 300);
+
+	data.value = new sliderData(0);
+	(e.target as HTMLElement).releasePointerCapture(e.pointerId);
+};
+
+const update = (e: PointerEvent): void => {
+	if (!tracking.value) return;
+	e.preventDefault();
+
+	const calcPos = Math.max(Math.min(e.pageX - initial, maxVal), -60);
+
+	data.value = new sliderData(calcPos);
+};
+</script>
+
+<style scoped lang="scss">
+.transition {
+	transition: transform 0.3s ease;
+}
+
+%background {
+	position: absolute;
+	top: 0;
+	box-shadow: inset 0.1em 0.1em 0.4em black;
+	display: flex;
+	align-items: center;
+	overflow: hidden;
+	height: 100%;
+	transition: background-color 0.2s ease;
+	.text {
+		position: relative;
+		white-space: nowrap;
+		width: 100%;
+		text-align: center;
+		text-shadow: 0.1em 0 0.2rem var(--color-background-body), 0 0.1em 0.2rem var(--color-background-body),
+			-0.1em 0 0.2rem var(--color-background-body), 0 -0.1em 0.2rem var(--color-background-body);
+		transition: opacity 0.2s ease;
+	}
+}
+.unban-background {
+	@extend %background;
+	left: 100%;
+	background-color: green;
+}
+
+.ban-background {
+	@extend %background;
+	right: 100%;
+}
+
+.grabbable-wrapper {
+	width: 0;
+	height: 100%;
+	position: absolute;
+	.grabbable-outer {
+		height: 100%;
+		display: inline-flex;
+		padding: 0.5rem 0;
+		width: 2rem;
+		pointer-events: all;
+		cursor: grab;
+
+		.grabbable-inner {
+			height: 100%;
+			border: 0.1rem outset var(--color-border-input);
+			border-radius: 0 0.3rem 0.3rem 0;
+			display: inline-flex;
+			align-items: center;
+			border-left: none;
+			box-shadow: 0 0 0.4rem black;
+			.dots {
+				background-image: radial-gradient(circle, var(--color-border-input) 0.1rem, transparent 0.2rem);
+				background-size: 100% 33.33%;
+				height: 1.4rem;
+				width: 0.6rem;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/site/twitch.tv/modules/chat/components/BanSliderBackend.ts b/src/site/twitch.tv/modules/chat/components/BanSliderBackend.ts
new file mode 100644
index 000000000..1a998939e
--- /dev/null
+++ b/src/site/twitch.tv/modules/chat/components/BanSliderBackend.ts
@@ -0,0 +1,73 @@
+import { getChatController } from "@/site/twitch.tv";
+
+export const maxVal = 300.0;
+const minVal = 40.0;
+const delVal = 80.0;
+const maxSeconds = 1209600.0;
+
+const controller = getChatController();
+
+export function shouldModerate(msg: Twitch.ChatMessage) {
+	return (
+		(controller?.props.isCurrentUserModerator &&
+			msg.badges &&
+			!("moderator" in msg.badges) &&
+			!("broadcaster" in msg.badges) &&
+			!("staff" in msg.badges)) ??
+		false
+	);
+}
+
+export function executeModAction(message: string, name: string, id: string) {
+	controller?.sendMessage(message.replace("{user}", name).replace("{id}", id));
+}
+
+export function numberToTime(val: number): string {
+	if (val < 60) {
+		return `${Math.round(val)} seconds`;
+	} else if (val < 60 * 60) {
+		return `${Math.round(val / 60)} minutes`;
+	} else if (val < 60 * 60 * 24) {
+		return `${Math.round(val / (60 * 60))} hours`;
+	} else {
+		return `${Math.round(val / (60 * 60 * 24))} days`;
+	}
+}
+
+export class sliderData {
+	command = "";
+	text = "";
+	time = 0;
+	banVis = 0;
+	unbanVis = 0;
+	color = "";
+	pos = "0px";
+
+	constructor(pos: number) {
+		this.pos = `${pos}px`;
+
+		if (pos < -40) {
+			this.command = "/unban {user}";
+			this.unbanVis = 1;
+		} else if (pos < minVal) {
+			return;
+		} else if (pos < delVal) {
+			this.command = "/delete {id}";
+			this.text = "Delete";
+			this.color = "#FFFF00";
+			this.banVis = 1;
+		} else if (pos < maxVal) {
+			const time = Math.pow((pos + 0.25 * maxVal - delVal) / (1.25 * maxVal - delVal), 10) * maxSeconds;
+
+			this.command = `/timeout {user} ${Math.round(time)}`;
+			this.text = String(numberToTime(time));
+			this.color = "#FFA500";
+			this.banVis = 1;
+		} else {
+			this.command = "/ban {user}";
+			this.text = "Ban";
+			this.color = "#C40000";
+			this.banVis = 1;
+		}
+	}
+}
diff --git a/src/site/twitch.tv/modules/chat/components/ChatBadge.vue b/src/site/twitch.tv/modules/chat/components/ChatBadge.vue
index e9307b477..df731b036 100644
--- a/src/site/twitch.tv/modules/chat/components/ChatBadge.vue
+++ b/src/site/twitch.tv/modules/chat/components/ChatBadge.vue
@@ -32,6 +32,8 @@ const { show, hide } = useTooltip(ChatBadgeTooltip, {
 <style scoped lang="scss">
 .seventv-chat-badge {
 	display: inline-block;
-	vertical-align: middle;
+	height: 1.8rem;
+	width: 1.8rem;
+	vertical-align: baseline;
 }
 </style>
diff --git a/src/site/twitch.tv/modules/chat/components/ChatEmote.vue b/src/site/twitch.tv/modules/chat/components/ChatEmote.vue
index 908159606..3f5fd7b26 100644
--- a/src/site/twitch.tv/modules/chat/components/ChatEmote.vue
+++ b/src/site/twitch.tv/modules/chat/components/ChatEmote.vue
@@ -2,12 +2,15 @@
 	<img
 		ref="imgRef"
 		class="chat-emote"
-		:srcset="srcset"
+		:srcset="getSrcSet(props.emote)"
 		:alt="emote.name"
 		@click="openCard"
 		@mouseenter="show(imgRef)"
 		@mouseleave="hide()"
 	/>
+	<template v-for="(e, index) of emote.overlaid" :key="index">
+		<img class="chat-emote zero-width-emote" :srcset="getSrcSet(e)" :alt="' ' + e.name" />
+	</template>
 </template>
 
 <script setup lang="ts">
@@ -18,14 +21,15 @@ import ChatEmoteTooltip from "@/site/twitch.tv/modules/chat/components/ChatEmote
 
 const props = defineProps<{
 	emote: SevenTV.ActiveEmote;
-	format: SevenTV.ImageFormat;
 }>();
 
-const host = props.emote.data?.host ?? { url: "", files: [] };
-const srcset = host.files
-	.filter((f) => f.format === host.files[0].format)
-	.map((f, i) => `${host.url}/${f.name} ${i + 1}x`)
-	.join(", ");
+function getSrcSet(emote: SevenTV.ActiveEmote) {
+	const host = emote.data?.host ?? { url: "", files: [] };
+	return host.files
+		.filter((f) => f.format === host.files[0].format)
+		.map((f, i) => `${host.url}/${f.name} ${i + 1}x`)
+		.join(", ");
+}
 
 const imgRef = ref<HTMLElement>();
 
@@ -49,12 +53,17 @@ const openCard = (ev: MouseEvent) => {
 
 <style scoped lang="scss">
 img.chat-emote {
-	vertical-align: middle;
-	color: red;
 	font-weight: 900;
+	grid-column: 1;
+	grid-row: 1;
+	margin: auto;
 
 	&:hover {
 		cursor: pointer;
 	}
 }
+
+img.zero-width-emote {
+	pointer-events: none;
+}
 </style>
diff --git a/src/site/twitch.tv/modules/chat/components/ChatMessage.vue b/src/site/twitch.tv/modules/chat/components/ChatMessage.vue
index 7bc5243bf..c0056c23c 100644
--- a/src/site/twitch.tv/modules/chat/components/ChatMessage.vue
+++ b/src/site/twitch.tv/modules/chat/components/ChatMessage.vue
@@ -1,36 +1,86 @@
 <template>
-	<span v-if="msg" class="seventv-chat-message">
-		<!-- Chat Author -->
-		<template v-if="msg.user && msg.user.userDisplayName">
-			<ChatUserTag
-				v-if="msg.user"
-				:user="msg.user"
-				:badges="msg.badges"
-				@click="emit('open-viewer-card', $event, msg.user)"
-			/>
-			<span>: </span>
-		</template>
-
-		<!-- Message Content -->
-		<span class="seventv-chat-message-body">
-			<span v-for="(t, index) of tokens" :key="index" class="message-token" :token-type="t.type">
-				<template v-if="t.type === 'text'">
-					{{ t.value }}
-				</template>
-				<template v-else-if="t.type === 'emote'">
-					<ChatEmote :emote="(t.value as SevenTV.ActiveEmote)" format="WEBP" />
+	<BanSlider :msg="msg">
+		<span class="seventv-chat-message-container">
+			<span class="seventv-chat-message" :class="props.msg.banned || props.msg.deleted ? 'deleted' : ''">
+				<!-- Chat Author -->
+				<template v-if="msg.user && msg.user.userDisplayName">
+					<ChatUserTag
+						v-if="msg.user"
+						:user="msg.user"
+						:badges="msg.badges"
+						@click="emit('open-viewer-card', $event, msg.user)"
+					/>
+					<span>: </span>
 				</template>
+
+				<!-- Message Content -->
+				<span class="seventv-chat-message-body">
+					<template v-for="(part, index) of tokenizer.getParts()" :key="index">
+						<span v-if="part.type === MessagePartType.TEXT" class="text-part">
+							{{ part.content }}
+						</span>
+
+						<span v-else-if="part.type === MessagePartType.MODERATEDTEXT" class="moderated-text-part">
+							{{ part.content }}
+						</span>
+
+						<span v-else-if="part.type === MessagePartType.CURRENTUSERHIGHLIGHT" class="mention-part">
+							{{ part.content }}
+						</span>
+
+						<span
+							v-else-if="part.type === MessagePartType.MENTION"
+							:class="part.content.currentUserMentionRelation === 1 ? 'mention-part' : 'text-part'"
+						>
+							{{ "@" + part.content.recipient }}
+						</span>
+
+						<a v-else-if="part.type === MessagePartType.LINK" :href="part.content.url" class="link-part">
+							{{ part.content.displayText }}
+						</a>
+
+						<span v-else-if="part.type === MessagePartType.EMOTE"> !This should not appear! </span>
+
+						<a
+							v-else-if="part.type === MessagePartType.CLIPLINK"
+							:href="part.content.url"
+							class="link-part"
+						>
+							{{ part.content.displayText }}
+						</a>
+
+						<a
+							v-else-if="part.type === MessagePartType.VIDEOLINK"
+							:href="part.content.url"
+							class="link-part"
+						>
+							{{ part.content.displayText }}
+						</a>
+
+						<span v-else-if="part.type === MessagePartType.SEVENTVEMOTE" class="emote-part">
+							<ChatEmote :emote="part.content" />
+						</span>
+						<a
+							v-else-if="part.type === MessagePartType.SEVENTVLINK"
+							:href="part.content.url"
+							class="link-part"
+						>
+							{{ part.content.displayText }}
+						</a>
+					</template>
+				</span>
 			</span>
 		</span>
-	</span>
+	</BanSlider>
 </template>
 
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
-import { useTwitchStore } from "@/site/twitch.tv/TwitchStore";
-import { convertTwitchEmote } from "@/common/Transform";
 import ChatUserTag from "@/site/twitch.tv/modules/chat/components/ChatUserTag.vue";
 import ChatEmote from "@/site/twitch.tv/modules/chat/components/ChatEmote.vue";
+import BanSlider from "@/site/twitch.tv/modules/chat/components/BanSlider.vue";
+import { Tokenizer } from "./Tokenizer";
+import { useTwitchStore } from "@/site/twitch.tv/TwitchStore";
+import { MessagePartType } from "@/site/twitch.tv";
 
 const emit = defineEmits<{
 	(e: "open-viewer-card", ev: MouseEvent, viewer: Twitch.ChatUser): void;
@@ -38,87 +88,47 @@ const emit = defineEmits<{
 
 const props = defineProps<{
 	msg: Twitch.ChatMessage;
+	controller?: Twitch.ChatControllerComponent;
 }>();
 
-const { emoteMap } = storeToRefs(useTwitchStore());
-const localEmoteMap = {} as { [key: string]: SevenTV.ActiveEmote };
-
 // Tokenize the message
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const tokens = [] as MessageToken<any>[];
-
-if (props.msg && typeof props.msg.messageBody === "string") {
-	const split = (props.msg.messageBody ?? "").split(" ");
-	const currentText = [] as string[];
-
-	// Local twitch emotes?
-	props.msg.messageParts
-		.filter((p) => p.type === 6)
-		.forEach((p) => {
-			const emote = p.content as Twitch.ChatMessage.EmoteRef;
-			if (Object.keys(emote).length) {
-				localEmoteMap[emote.alt] = {
-					id: emote.emoteID,
-					name: emote.alt,
-					data: convertTwitchEmote({ id: emote.emoteID, token: emote.alt }),
-					provider: "TWITCH",
-				} as SevenTV.ActiveEmote;
-			}
-		});
-
-	const tokenOfCurrentText = () => {
-		tokens.push({
-			type: "text",
-			value: currentText.join(" "),
-		} as MessageToken<"text">);
-
-		currentText.length = 0;
-	};
-
-	let i = 0;
-	while (split.length) {
-		const s = split.shift() ?? "";
-		if (s == "") continue;
-
-		const emote = localEmoteMap[s] || emoteMap.value[s];
-		const start = !split[i - 1];
-		const end = !split[i + 1];
-
-		if (emote) {
-			tokenOfCurrentText();
-
-			tokens.push({
-				type: "emote",
-				value: emote,
-			} as MessageToken<"emote">);
-		} else {
-			currentText.push(start ? "" : " ", s, end ? "" : " ");
-		}
-
-		i++;
+
+const tokenizer = new Tokenizer(props.msg.messageParts, useTwitchStore().emoteMap);
+</script>
+
+<style scoped lang="scss">
+.seventv-chat-message-container {
+	display: block;
+	padding: 0.5rem 2rem;
+	overflow-wrap: anywhere;
+
+	&:has(.mention-part) {
+		display: block;
+		padding: 0.5rem 2rem;
+		overflow-wrap: anywhere;
+		box-shadow: inset 0 0 0.2rem 0.2rem red;
+		background-color: #ff000040;
+		border-radius: 0.4rem;
 	}
-	tokenOfCurrentText();
 }
 
-interface MessageToken<T extends MessageTokenType> {
-	type: T;
-	value: MessageTokenValue<T>;
+.emote-part {
+	display: inline-grid;
+	vertical-align: middle;
+	margin: -1rem 0;
 }
 
-type MessageTokenValue<T extends MessageTokenType> = {
-	text: string;
-	emote: SevenTV.ActiveEmote;
-	[key: string]: unknown;
-}[T];
+.seventv-chat-message {
+	vertical-align: baseline;
+}
 
-type MessageTokenType = "text" | "emote";
-</script>
+.mention-part {
+	padding: 0.2rem;
+	font-weight: bold;
+}
 
-<style scoped lang="scss">
-.seventv-chat-message {
-	display: inline-block !important;
-	vertical-align: middle;
-	margin-left: 1em;
-	margin-right: 1em;
+.deleted:not(:hover) {
+	opacity: 0.5;
+	text-decoration: line-through;
 }
 </style>
diff --git a/src/site/twitch.tv/modules/chat/components/ChatUserTag.vue b/src/site/twitch.tv/modules/chat/components/ChatUserTag.vue
index dd65b785f..1feef739e 100644
--- a/src/site/twitch.tv/modules/chat/components/ChatUserTag.vue
+++ b/src/site/twitch.tv/modules/chat/components/ChatUserTag.vue
@@ -1,7 +1,7 @@
 <template>
-	<span v-if="user && user.userDisplayName" class="seventv-chat-user" :style="{ color: user.color }">
+	<span v-if="user && user.userDisplayName" class="seventv-chat-user" :style="{ color: color }">
 		<!--Badge List -->
-		<span class="seventv-chat-user-badge-list">
+		<span v-if="badges.length" class="seventv-chat-user-badge-list">
 			<ChatBadge v-for="(badge, index) of badges" :key="index" :badge="badge" />
 		</span>
 
@@ -17,6 +17,7 @@
 import { useTwitchStore } from "@/site/twitch.tv/TwitchStore";
 import { ref } from "vue";
 import ChatBadge from "./ChatBadge.vue";
+import { normalizeUsername } from "@/site/twitch.tv/modules/chat/ChatBackend";
 const props = defineProps<{
 	user: Twitch.ChatUser;
 	badges?: Record<string, string>;
@@ -25,6 +26,12 @@ const props = defineProps<{
 const { twitchBadgeSets } = useTwitchStore();
 const badges = ref([] as Twitch.ChatBadge[]);
 
+const color = ref(props.user.color);
+
+// Get these from twitch settings
+const readableColors = true;
+color.value = normalizeUsername(color.value, readableColors);
+
 if (props.badges && twitchBadgeSets) {
 	for (const [key, value] of Object.entries(props.badges)) {
 		const setID = key;
@@ -46,7 +53,7 @@ if (props.badges && twitchBadgeSets) {
 
 <style scoped lang="scss">
 .seventv-chat-user {
-	display: inline-block !important;
+	display: inline;
 	cursor: pointer;
 	word-break: break-all;
 }
diff --git a/src/site/twitch.tv/modules/chat/components/Tokenizer.ts b/src/site/twitch.tv/modules/chat/components/Tokenizer.ts
new file mode 100644
index 000000000..aacb8b06a
--- /dev/null
+++ b/src/site/twitch.tv/modules/chat/components/Tokenizer.ts
@@ -0,0 +1,127 @@
+import { Regex, MessagePartType } from "@/site/twitch.tv";
+import { convertTwitchEmote } from "@/common/Transform";
+
+export class Tokenizer {
+	private newParts = new Array<Twitch.ChatMessage.Part>();
+	private emoteMap;
+
+	constructor(parts: Twitch.ChatMessage.Part[], emoteMap: Record<string, SevenTV.ActiveEmote>) {
+		this.emoteMap = emoteMap;
+		for (const part of parts) {
+			switch (part.type) {
+				case MessagePartType.TEXT:
+				case MessagePartType.MODERATEDTEXT:
+					this.tokenizeText(part.content as string);
+
+					break;
+				case MessagePartType.EMOTE:
+					this.newParts.push(twitchEmoteToPart(part.content as Twitch.ChatMessage.Part.EmoteContent));
+					break;
+				case MessagePartType.LINK:
+					this.newParts.push(matchLink(part.content as Twitch.ChatMessage.Part.LinkContent));
+					break;
+				default:
+					this.newParts.push(part);
+			}
+		}
+	}
+
+	private tokenizeText(content: string) {
+		const remainder = content.split(Regex.MessageDelimiter).reduce((pre, cur) => {
+			const emote = this.emoteMap[cur];
+
+			if (!emote) return pre + cur;
+
+			if (pre != "") this.newParts.push(stringToPart(pre));
+
+			this.handleFoundEmote(emote);
+
+			return "";
+		}, "");
+
+		if (remainder == "") return;
+
+		this.newParts.push(stringToPart(remainder));
+	}
+
+	private handleFoundEmote(emote: SevenTV.ActiveEmote) {
+		// Check if emote is zeroWidth and the preceding non space element is an emote
+		if (
+			(emote.data?.flags ?? 0) & 256 &&
+			this.newParts.at(-1)?.content == " " &&
+			this.newParts.at(-2)?.type == MessagePartType.SEVENTVEMOTE
+		) {
+			// Remove the " " space element
+			this.newParts.pop();
+
+			const previousEmote = this.newParts.pop()?.content as SevenTV.ActiveEmote;
+
+			this.newParts.push(sevenTVEmoteToPart(previousEmote, emote));
+			return;
+		}
+
+		this.newParts.push(sevenTVEmoteToPart(emote));
+	}
+
+	public getParts() {
+		return this.newParts;
+	}
+}
+
+function matchLink(content: { displayText: string; url: string }): Twitch.ChatMessage.Part {
+	const match = content.url.match(Regex.SevenTVLink);
+	if (match) return linkToSevenTVLink(content, match[0]);
+	return {
+		type: MessagePartType.LINK,
+		content: content,
+	};
+}
+
+function stringToPart(content: string): Twitch.ChatMessage.Part {
+	return {
+		type: MessagePartType.TEXT,
+		content: content,
+	};
+}
+
+// Use type instead
+function linkToSevenTVLink(content: Twitch.ChatMessage.Part.LinkContent, emoteID: string): Twitch.ChatMessage.Part {
+	return {
+		type: MessagePartType.SEVENTVLINK,
+		content: {
+			...content,
+			emoteID: emoteID,
+		},
+	};
+}
+
+function twitchEmoteToPart(emote: Twitch.ChatMessage.Part.EmoteContent): Twitch.ChatMessage.Part {
+	return {
+		type: MessagePartType.SEVENTVEMOTE,
+		content: {
+			id: emote.emoteID,
+			name: emote.alt,
+			flags: 0,
+			data: convertTwitchEmote({ id: emote.emoteID, token: emote.alt }),
+			provider: "TWITCH",
+		} as SevenTV.ActiveEmote,
+	};
+}
+
+function sevenTVEmoteToPart(emote: SevenTV.ActiveEmote, zeroWidth?: SevenTV.ActiveEmote): Twitch.ChatMessage.Part {
+	if (!zeroWidth)
+		return {
+			type: MessagePartType.SEVENTVEMOTE,
+			content: emote,
+		};
+
+	const arr = emote.overlaid ?? [];
+	arr.push(zeroWidth);
+	return {
+		type: MessagePartType.SEVENTVEMOTE,
+		content: {
+			...emote,
+			overlaid: arr,
+		},
+	};
+}
diff --git a/src/twitch.d.ts b/src/twitch.d.ts
index 2a99d5f63..aba5ab0a6 100644
--- a/src/twitch.d.ts
+++ b/src/twitch.d.ts
@@ -478,6 +478,11 @@ declare module Twitch {
 		replies: [];
 	}
 
+	export interface Message {
+		id: string;
+		type: number;
+	}
+
 	export interface ChatMessage {
 		badgeDynamicData: {};
 		badges: Record<string, string>;
@@ -513,47 +518,53 @@ declare module Twitch {
 	}
 	export namespace ChatMessage {
 		export interface Part {
-			content: string | EmoteRef | { [key: string]: any };
+			content: string | EmoteRef | LinkContent | { [key: string]: any };
 			type: number;
 		}
-
-		export interface EmoteRef {
-			alt: string;
-			emoteID?: string;
-			images?: {
-				dark: {
-					"1x": string;
-					"2x": string;
-					"3x": string;
-					"4x": string;
+		export namespace Part {
+			export interface EmoteContent {
+				alt: string;
+				emoteID?: string;
+				images?: {
+					dark: {
+						"1x": string;
+						"2x": string;
+						"3x": string;
+						"4x": string;
+					};
+					light: {
+						"1x": string;
+						"2x": string;
+						"3x": string;
+						"4x": string;
+					};
+					themed: boolean;
 				};
-				light: {
-					"1x": string;
-					"2x": string;
-					"3x": string;
-					"4x": string;
-				};
-				themed: boolean;
-			};
 
-			// Only exists if cheermote
-			cheerAmount?: number;
-			cheerColor?: string;
+				// Only exists if cheermote
+				cheerAmount?: number;
+				cheerColor?: string;
+			}
+
+			export interface LinkContent {
+				displayText: string;
+				url: string;
+			}
 		}
 
 		export interface AppPart {
 			type: "text" | "emote" | "twitch-emote" | "link" | "mention";
 			content?: string | { [key: string]: any };
 		}
-
-		export interface ModerationMessage {
-			duration: number;
-			id: string;
-			moderationType: number;
-			reason: string;
-			type: number;
-			userLogin: string;
-		}
+	}
+	export interface ModerationMessage {
+		duration: number;
+		id: string;
+		moderationType: number;
+		reason: string;
+		type: number;
+		userLogin: string;
+		targetMessageID?: string;
 	}
 
 	export interface ChatUser {
diff --git a/src/worker/net.http.worker.ts b/src/worker/net.http.worker.ts
index 0cb97bd9e..8e34279a7 100644
--- a/src/worker/net.http.worker.ts
+++ b/src/worker/net.http.worker.ts
@@ -66,6 +66,7 @@ export const seventv = {
 		const data = (await resp.json()) as SevenTV.UserConnection;
 
 		const set = structuredClone(data.emote_set) as SevenTV.EmoteSet;
+		set.emotes = set.emotes ?? [];
 		set.provider = "7TV";
 		set.priority = ProviderPriority.SEVENTV;
 
diff --git a/yarn.lock b/yarn.lock
index 2c87d7b86..125574e43 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -894,6 +894,11 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color2k@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/color2k/-/color2k-2.0.0.tgz#86992c82e248c29f524023ed0822bc152c4fa670"
+  integrity sha512-DWX9eXOC4fbJNiuvdH4QSHvvfLWyFo9TuFp7V9OzdsbPAdrWAuYc8qvFP2bIQ/LKh4LrAVnJ6vhiQYPvAHdtTg==
+
 colord@^2.9.3:
   version "2.9.3"
   resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"