diff --git a/.env.dev b/.env.dev
index 5594f0fd0..5f9b7ff2e 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,7 +1,7 @@
 NODE_ENV=development
-VITE_APP_SITE="http://localhost:4200"
-VITE_APP_API="http://localhost:3100/v3"
-VITE_APP_API_GQL="http://localhost:3000/v3/gql"
-VITE_APP_API_EVENTS="ws://localhost:3700/v3"
-VITE_APP_API_EGVAULT="http://localhost:3444/v1"
-VITE_APP_HOST="http://localhost:8080"
+VITE_APP_SITE="https://7tv.app"
+VITE_APP_API="https://7tv.io/v3"
+VITE_APP_API_GQL="https://7tv.io/v3/gql"
+VITE_APP_API_EVENTS="wss://events.7tv.io/v3"
+VITE_APP_API_EGVAULT="https://egvault.7tv.io/v1"
+VITE_APP_HOST="https://extension.7tv.gg"
diff --git a/.old.env.dev b/.old.env.dev
new file mode 100644
index 000000000..5594f0fd0
--- /dev/null
+++ b/.old.env.dev
@@ -0,0 +1,7 @@
+NODE_ENV=development
+VITE_APP_SITE="http://localhost:4200"
+VITE_APP_API="http://localhost:3100/v3"
+VITE_APP_API_GQL="http://localhost:3000/v3/gql"
+VITE_APP_API_EVENTS="ws://localhost:3700/v3"
+VITE_APP_API_EGVAULT="http://localhost:3444/v1"
+VITE_APP_HOST="http://localhost:8080"
diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
index 69341cea7..7aa9b7611 100644
--- a/CHANGELOG-nightly.md
+++ b/CHANGELOG-nightly.md
@@ -1,3 +1,55 @@
+### 3.1.2.4000
+
+-   Fixed a bug that could cause issues when clicking an emoji in chat
+-   Fixed an issue with emote sets not switching on channel switch
+-   Fixed an issue with making users unable to chat
+-   Fixed an issue with certain settings not saving
+
+### 3.1.2.3000
+
+-   Added an option to expand sidebar on twitch when hovering
+-   Fixed mentions not being clickable when colored mentions are turned off
+-   Added link to creators 7TV profile to emote cards of 7TV emotes
+
+### 3.1.2.2000
+
+-   Fixed some settings on kick
+-   Added more drop shadow settings
+
+### 3.1.2.1000
+
+-   **Implement support for the new Kick site:**
+    -   Chat emotes
+    -   Emote menu
+    -   Emote auto-completion
+    -   Cosmetics
+-   Added option to settings to hide Stories from the sidebar
+-   Fixed settings to hide recommended channels and viewers also watch channels
+-   Fixed an issue where history navigation is accidentally triggered during IME composition
+-   Added option to highlight messages of specific usernames
+-   Added option to highlight messages based on badges
+-   Added button to user card to toggle highlighting for a users messages
+-   Added mod icon for warning users to chat mod icons and user card
+-   Added an option to limit the drop shadows on paints
+
+### 3.1.1.3000
+
+-   Added support for animated FFZ emotes
+-   Added option to hide whispers
+-   Added tooltip to error messages in /search
+
+### 3.1.1.2100
+
+-   Fixed an issue where certain hooks would not work properly
+
+### 3.1.1.2000
+
+-   Added option to hide 7TV badges from chat
+-   Added option to hide bits from community button
+-   Fixed an issue where twitch emotes were displayed larger after hovering over them
+-   Fixed an issue causing VOD messages to display two timestamps
+-   Fixed an issue where the chat would keep rendering emotes of the previous channel
+
 ### 3.1.0.3000
 
 -   Fixed video player stats not showing
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7bfd7b22b..5e117ec31 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,26 @@
+### 3.1.2
+
+-   **Implement support for the new Kick site:**
+    -   Chat emotes
+    -   Emote menu
+    -   Emote auto-completion
+    -   Cosmetics
+    -   Settings
+-   Added option to settings to hide Stories from the sidebar
+-   Fixed settings to hide recommended channels and viewers also watch channels
+-   Fixed an issue where history navigation is accidentally triggered during IME composition
+-   Added option to highlight messages of specific usernames
+-   Added option to highlight messages based on badges
+-   Added button to user card to toggle highlighting for a users messages
+-   Added mod icon for warning users to chat mod icons and user card
+-   Added an option to limit the drop shadows on paints
+-   Added more drop shadow settings
+-   Added link to creators 7TV profile to emote cards of 7TV emotes
+-   Fixed a bug that could cause issues when clicking an emoji in chat
+-   Fixed an issue with emote sets not switching on channel switch
+-   Fixed an issue with making users unable to chat
+-   Added an option to expand sidebar on twitch when hovering
+
 ### 3.1.1
 
 -   Fixed video player stats not showing
diff --git a/locale/en_US.yaml b/locale/en_US.yaml
index 1fcb38e61..344e9f0ab 100644
--- a/locale/en_US.yaml
+++ b/locale/en_US.yaml
@@ -21,7 +21,10 @@ user_card:
     previously_subscription_length: Previously subscribed for {length} months
     hidden_subscription_status: Status hidden
     native: Open Native User Card
+    highlight: Highlight messages of this user
+    stop_highlight: Stop highlighting of this user
     no_messages: "{user} has not chatted here"
+    no_warnings: "{user} has not been warned before"
     no_timeouts: "{user} hasn't been timed out before"
     no_bans: "{user} hasn't been banned before"
     no_comments: "No mod comments have been written for {user}"
@@ -30,6 +33,7 @@ user_card:
     unban_button: Unban
     mod_button: Mod
     unmod_button: Unmod
+    warn_button: Warn
 
 # Emote Menu
 # This interface allows the user to pick from available emotes
diff --git a/package.json b/package.json
index 44e5446e0..2c9fa7186 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,8 @@
 	"displayName": "7TV",
 	"description": "Improve your viewing experience on Twitch & YouTube with new features, emotes, vanity and performance.",
 	"private": true,
-	"version": "3.1.1",
-	"dev_version": "1.0",
+	"version": "3.1.2",
+	"dev_version": "4.0",
 	"scripts": {
 		"start": "NODE_ENV=dev yarn build:dev && NODE_ENV=dev vite --mode dev",
 		"build:section:app": "vite build --config vite.config.mts",
diff --git a/src/app/chat/Badge.vue b/src/app/chat/Badge.vue
index 21923ade2..a3c6c037a 100644
--- a/src/app/chat/Badge.vue
+++ b/src/app/chat/Badge.vue
@@ -6,6 +6,7 @@
 			:alt="alt"
 			:style="{
 				backgroundColor,
+				borderRadius,
 			}"
 			@mouseenter="show(imgRef)"
 			@mouseleave="hide()"
@@ -20,16 +21,19 @@ import BadgeTooltip from "./BadgeTooltip.vue";
 
 const props = defineProps<{
 	alt: string;
-	type: "twitch" | "app";
-	badge: Twitch.ChatBadge | SevenTV.Cosmetic<"BADGE">;
+	type: "twitch" | "picture" | "app";
+	badge: Twitch.ChatBadge | Twitch.SharedChat | SevenTV.Cosmetic<"BADGE">;
 }>();
 
 const backgroundColor = ref("");
+const borderRadius = ref("");
 const srcset = {
 	twitch: (badge: Twitch.ChatBadge) => `${badge.image1x} 1x, ${badge.image2x} 2x, ${badge.image4x} 4x`,
+	picture: (badge: Twitch.SharedChat) =>
+		`${badge.profileImageURL.slice(0, -9)}28x28.png 1.6x, ${badge.profileImageURL.slice(0, -9)}70x70.png 3.8x`,
 	app: (badge: SevenTV.Cosmetic<"BADGE">) =>
 		badge.data.host.files.map((fi, i) => `https:${badge.data.host.url}/${fi.name} ${i + 1}x`).join(", "),
-}[props.type](props.badge as SevenTV.Cosmetic<"BADGE"> & Twitch.ChatBadge);
+}[props.type](props.badge as SevenTV.Cosmetic<"BADGE"> & Twitch.SharedChat & Twitch.ChatBadge);
 
 const imgRef = ref<HTMLElement>();
 
@@ -44,6 +48,10 @@ function isApp(badge: typeof props.badge): badge is SevenTV.Cosmetic<"BADGE"> {
 if (isApp(props.badge)) {
 	backgroundColor.value = props.badge.data.backgroundColor ?? "";
 }
+
+if (typeof props.badge == "string") {
+	borderRadius.value = "25%";
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/app/chat/Emote.vue b/src/app/chat/Emote.vue
index 94acd32bc..efe002b8a 100644
--- a/src/app/chat/Emote.vue
+++ b/src/app/chat/Emote.vue
@@ -21,7 +21,6 @@
 		<SingleEmoji
 			v-else-if="!unload && emote.id"
 			:id="emote.id"
-			ref="boxRef"
 			:alt="emote.name"
 			class="seventv-chat-emote seventv-emoji"
 			:style="{ width: `${scale * 2}rem`, height: `${scale * 2}rem` }"
diff --git a/src/app/chat/MessageTokenMention.vue b/src/app/chat/MessageTokenMention.vue
index c9305f776..63ee07343 100644
--- a/src/app/chat/MessageTokenMention.vue
+++ b/src/app/chat/MessageTokenMention.vue
@@ -1,28 +1,23 @@
 <template>
 	<span class="mention-token">
-		<span v-if="shouldRenderColoredMentions" :style="{ color: token.content.user?.color }">
-			<UserTag
-				:user="
-					token.content.user ?? {
-						id: uuid(),
-						username: tag.toLowerCase(),
-						displayName: tag,
-						color: '',
-					}
-				"
-				:as-mention="asMention"
-				:hide-badges="true"
-			/>
-		</span>
-		<span v-else>
-			{{ token.content.displayText }}
-		</span>
+		<UserTag
+			:user="
+				token.content.user ?? {
+					id: uuid(),
+					username: tag.toLowerCase(),
+					displayName: tag,
+					color: '',
+				}
+			"
+			is-mention
+			:hide-at="!hasAt"
+			hide-badges
+		/>
 	</span>
 </template>
 
 <script setup lang="ts">
 import type { ChatMessage, MentionToken } from "@/common/chat/ChatMessage";
-import { useConfig } from "@/composable/useSettings";
 import UserTag from "./UserTag.vue";
 import { v4 as uuid } from "uuid";
 
@@ -31,10 +26,8 @@ const props = defineProps<{
 	msg?: ChatMessage;
 }>();
 
-const shouldRenderColoredMentions = useConfig("chat.colored_mentions");
-
-const asMention = props.token.content.displayText.charAt(0) === "@";
-const tag = asMention ? props.token.content.displayText.slice(1) : props.token.content.displayText;
+const hasAt = props.token.content.displayText.charAt(0) === "@";
+const tag = hasAt ? props.token.content.displayText.slice(1) : props.token.content.displayText;
 </script>
 
 <style scoped lang="scss">
diff --git a/src/app/chat/UserCard.vue b/src/app/chat/UserCard.vue
index 706051e19..c5d1c99ca 100644
--- a/src/app/chat/UserCard.vue
+++ b/src/app/chat/UserCard.vue
@@ -5,6 +5,12 @@
 				<!--Identity (avatar, nametag, badges) -->
 				<div ref="dragHandle" class="seventv-user-card-identity">
 					<div class="seventv-user-card-menuactions">
+						<BellSlashIcon
+							v-if="data.targetUser.username in chatHighlights.getAllUsernameHighlights()"
+							v-tooltip="t('user_card.stop_highlight')"
+							@click="highlightUserMessages"
+						/>
+						<BellIcon v-else v-tooltip="t('user_card.highlight')" @click="highlightUserMessages" />
 						<LogoTwitch v-tooltip="t('user_card.native')" @click="openNativeCard" />
 						<CloseIcon class="close-button" @click="emit('close')" />
 					</div>
@@ -96,6 +102,7 @@
 					v-if="ctx.actor.roles.has('MODERATOR')"
 					:active-tab="data.activeTab"
 					:message-count="data.count.messages"
+					:warning-count="data.count.warnings"
 					:ban-count="data.count.bans"
 					:timeout-count="data.count.timeouts"
 					:comment-count="data.count.comments"
@@ -125,6 +132,7 @@ import { convertTwitchMessage } from "@/common/Transform";
 import { convertTwitchBadge } from "@/common/Transform";
 import { ChatMessage, ChatUser } from "@/common/chat/ChatMessage";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
+import { useChatHighlights } from "@/composable/chat/useChatHighlights";
 import { useChatMessages } from "@/composable/chat/useChatMessages";
 import { useChatTools } from "@/composable/chat/useChatTools";
 import { useApollo } from "@/composable/useApollo";
@@ -135,6 +143,8 @@ import {
 	twitchUserCardModLogsQuery,
 	twitchUserCardQuery,
 } from "@/assets/gql/tw.user-card.gql";
+import BellIcon from "@/assets/svg/icons/BellIcon.vue";
+import BellSlashIcon from "@/assets/svg/icons/BellSlashIcon.vue";
 import CakeIcon from "@/assets/svg/icons/CakeIcon.vue";
 import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
 import HeartIcon from "@/assets/svg/icons/HeartIcon.vue";
@@ -165,6 +175,7 @@ const messages = useChatMessages(ctx);
 const { identity } = storeToRefs(useStore());
 const cosmetics = useCosmetics(props.target.id);
 const tools = useChatTools(ctx);
+const chatHighlights = useChatHighlights(ctx);
 
 const apollo = useApollo();
 const { t } = useI18n();
@@ -205,12 +216,14 @@ const data = reactive({
 	messageCursors: new WeakMap<ChatMessage, string>(),
 	timelines: {
 		messages: {} as Record<string, ChatMessage[]>,
+		warnings: {} as Record<string, ChatMessage[]>,
 		bans: {} as Record<string, ChatMessage[]>,
 		timeouts: {} as Record<string, ChatMessage[]>,
 		comments: {} as Record<string, ChatMessage[]>,
 	} as Record<UserCardTabName, Record<string, ChatMessage[]>>,
 	count: {
 		messages: 0,
+		warnings: 0,
 		bans: 0,
 		timeouts: 0,
 		comments: 0,
@@ -267,6 +280,7 @@ async function fetchModeratorData(): Promise<void> {
 	if (!resp || resp.errors?.length || !resp.data.channelUser) return;
 
 	data.count.messages = resp.data.viewerCardModLogs.messages.count ?? 0;
+	data.count.warnings = resp.data.viewerCardModLogs.warnings.count ?? 0;
 	data.count.bans = resp.data.viewerCardModLogs.bans.count ?? 0;
 	data.count.timeouts = resp.data.viewerCardModLogs.timeouts.count ?? 0;
 	data.count.comments = resp.data.viewerCardModLogs.comments.edges.length ?? 0;
@@ -275,11 +289,13 @@ async function fetchModeratorData(): Promise<void> {
 
 	const timeouts = resp.data.viewerCardModLogs.timeouts.edges;
 	const bans = resp.data.viewerCardModLogs.bans.edges;
+	const warnings = resp.data.viewerCardModLogs.warnings.edges;
 
-	// Add timeouts and bans to the timeline
+	// Add warnings, timeouts and bans to the timeline
 	for (const [tabName, a] of [
 		["timeouts", timeouts] as [UserCardTabName, typeof timeouts],
 		["bans", bans] as [UserCardTabName, typeof bans],
+		["warnings", warnings] as [UserCardTabName, typeof warnings],
 	]) {
 		const result = [] as ChatMessage[];
 
@@ -388,6 +404,31 @@ function openNativeCard(ev: MouseEvent): void {
 	emit("close");
 }
 
+function highlightUserMessages(): void {
+	if (!data.targetUser.username) return;
+	let ok = false;
+	if (data.targetUser.username in chatHighlights.getAllUsernameHighlights()) {
+		chatHighlights.remove(data.targetUser.username);
+		ok = true;
+	} else {
+		chatHighlights.define(
+			data.targetUser.username,
+			{
+				pattern: data.targetUser.username,
+				label: "Messages by " + data.targetUser.username,
+				color: "#8803fc",
+				flashTitle: false,
+				username: true,
+			},
+			true,
+		);
+		ok = true;
+	}
+
+	if (!ok) return;
+	chatHighlights.save();
+}
+
 function getProfileURL(): string {
 	return window.location.origin + "/" + props.target.username;
 }
@@ -507,7 +548,7 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="scss">
-$card-width: 32rem;
+$card-width: 37rem;
 $card-height: 48rem;
 
 main.seventv-user-card-container {
@@ -587,6 +628,7 @@ main.seventv-user-card-container {
 		right: 0.5rem;
 		top: 0.5rem;
 		height: 2rem;
+		width: 8rem;
 		display: flex;
 		column-gap: 0.25rem;
 
@@ -683,7 +725,7 @@ main.seventv-user-card-container {
 			// grid: position each badge next to the other on the same row, wrapping if necessary
 			display: flex;
 			flex-wrap: wrap;
-			max-width: 18rem;
+			max-width: 22rem;
 			gap: 0.5rem;
 			align-self: start;
 			z-index: 1;
diff --git a/src/app/chat/UserCardMod.vue b/src/app/chat/UserCardMod.vue
index 4d313545b..392f7f128 100644
--- a/src/app/chat/UserCardMod.vue
+++ b/src/app/chat/UserCardMod.vue
@@ -8,6 +8,13 @@
 			/>
 		</div>
 
+		<div class="seventv-user-card-mod-side seventv-user-card-mod-warn">
+			<WarningIcon
+				v-tooltip="t('user_card.warn_button')"
+				@click="tools.openViewerWarnPopover(target.id, target.username, 0)"
+			/>
+		</div>
+
 		<div v-show="!ban" class="seventv-user-card-mod-timeout-options">
 			<button
 				v-for="opt of timeoutOptions"
@@ -38,9 +45,11 @@ import { useI18n } from "vue-i18n";
 import type { ChatUser } from "@/common/chat/ChatMessage";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatModeration } from "@/composable/chat/useChatModeration";
+import { useChatTools } from "@/composable/chat/useChatTools";
 import { TwTypeChatBanStatus } from "@/assets/gql/tw.gql";
 import GavelIcon from "@/assets/svg/icons/GavelIcon.vue";
 import ShieldIcon from "@/assets/svg/icons/ShieldIcon.vue";
+import WarningIcon from "@/assets/svg/icons/WarningIcon.vue";
 
 const props = defineProps<{
 	target: ChatUser;
@@ -59,6 +68,7 @@ const { t } = useI18n();
 
 const ctx = useChannelContext();
 const mod = useChatModeration(ctx, props.target.username);
+const tools = useChatTools(ctx);
 
 async function banUser(duration: string): Promise<void> {
 	const resp = await mod.banUserFromChat(duration).catch(() => void 0);
@@ -87,9 +97,9 @@ const timeoutOptions = ["1s", "30s", "1m", "10m", "30m", "1h", "4h", "12h", "1d"
 <style scoped lang="scss">
 .seventv-user-card-mod {
 	display: grid;
-	grid-template-columns: 3em 1fr 3em;
+	grid-template-columns: 3em 3em 1fr 3em;
 	grid-template-rows: 1fr;
-	grid-template-areas: ". . .";
+	grid-template-areas: ". . . .";
 	height: 3rem;
 	align-items: center;
 	border-top: 0.1rem solid hsla(0deg, 0%, 100%, 10%);
@@ -127,5 +137,9 @@ const timeoutOptions = ["1s", "30s", "1m", "10m", "30m", "1h", "4h", "12h", "1d"
 	.seventv-user-card-mod-ban[is-banned="1"]:hover {
 		color: var(--seventv-accent);
 	}
+
+	.seventv-user-card-mod-warn:hover {
+		color: #fd0;
+	}
 }
 </style>
diff --git a/src/app/chat/UserCardTabs.vue b/src/app/chat/UserCardTabs.vue
index 23b2e4435..01850eb2d 100644
--- a/src/app/chat/UserCardTabs.vue
+++ b/src/app/chat/UserCardTabs.vue
@@ -15,11 +15,12 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-export type UserCardTabName = "messages" | "timeouts" | "bans" | "comments";
+export type UserCardTabName = "messages" | "warnings" | "timeouts" | "bans" | "comments";
 
 const props = defineProps<{
 	activeTab: UserCardTabName;
 	messageCount: number;
+	warningCount: number;
 	timeoutCount: number;
 	banCount: number;
 	commentCount: number;
@@ -33,6 +34,7 @@ const buttons = computed(
 	() =>
 		[
 			{ id: "messages", label: "Messages", count: props.messageCount, maxCount: 1000 },
+			{ id: "warnings", label: "Warnings", count: props.warningCount, maxCount: 99 },
 			{ id: "timeouts", label: "Timeouts", count: props.timeoutCount, maxCount: 99 },
 			{ id: "bans", label: "Bans", count: props.banCount, maxCount: 99 },
 			{ id: "comments", label: "Comments", count: props.commentCount, maxCount: 10 },
@@ -48,8 +50,8 @@ function formatCount(count: number, maxCount: number): string {
 .seventv-user-card-tabs {
 	border-top: 0.1rem solid hsla(0deg, 0%, 100%, 10%);
 	display: grid;
-	grid-template-columns: repeat(4, 1fr);
-	grid-template-areas: ". . . .";
+	grid-template-columns: repeat(5, 1fr);
+	grid-template-areas: ". . . . .";
 	height: 4rem;
 	box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 35%);
 	background-color: var(--seventv-background-transparent-1);
diff --git a/src/app/chat/UserMessage.vue b/src/app/chat/UserMessage.vue
index 78706e590..f914f79af 100644
--- a/src/app/chat/UserMessage.vue
+++ b/src/app/chat/UserMessage.vue
@@ -38,6 +38,7 @@
 		<UserTag
 			v-if="msg.author && !hideAuthor"
 			:user="msg.author"
+			:source-data="msg.sourceData"
 			:badges="msg.badges"
 			:msg-id="msg.sym"
 			@open-native-card="openViewerCard($event, msg.author.username, msg.id)"
diff --git a/src/app/chat/UserTag.vue b/src/app/chat/UserTag.vue
index 2d6195f9a..82d3d8ee6 100644
--- a/src/app/chat/UserTag.vue
+++ b/src/app/chat/UserTag.vue
@@ -1,10 +1,24 @@
 <template>
-	<div v-if="user && user.displayName" ref="tagRef" class="seventv-chat-user" :style="{ color: user.color }">
+	<div
+		v-if="user && user.displayName"
+		ref="tagRef"
+		class="seventv-chat-user"
+		:style="shouldColor ? { color: user.color } : {}"
+	>
 		<!--Badge List -->
 		<span
-			v-if="!hideBadges && ((twitchBadges.length && twitchBadgeSets?.count) || cosmetics.badges.size)"
+			v-if="
+				!hideBadges && ((twitchBadges.length && twitchBadgeSets?.count) || cosmetics.badges.size || sourceData)
+			"
 			class="seventv-chat-user-badge-list"
 		>
+			<Badge
+				v-if="sourceData"
+				:key="sourceData.login"
+				:badge="sourceData"
+				:alt="sourceData.displayName"
+				type="picture"
+			/>
 			<Badge
 				v-for="badge of twitchBadges"
 				:key="badge.id"
@@ -13,17 +27,25 @@
 				type="twitch"
 				@click="handleClick($event)"
 			/>
-			<Badge v-for="badge of activeBadges" :key="badge.id" :badge="badge" :alt="badge.data.tooltip" type="app" />
+			<template v-if="shouldRender7tvBadges">
+				<Badge
+					v-for="badge of activeBadges"
+					:key="badge.id"
+					:badge="badge"
+					:alt="badge.data.tooltip"
+					type="app"
+				/>
+			</template>
 		</span>
 
 		<!-- Message Author -->
 		<span
-			v-tooltip="paint && paint.data ? `Paint: ${paint.data.name}` : ''"
+			v-tooltip="shouldPaint ? `Paint: ${paint!.data.name}` : ''"
 			class="seventv-chat-user-username"
 			@click="handleClick($event)"
 		>
-			<span v-cosmetic-paint="paint ? paint.id : null">
-				<span v-if="asMention">@</span>
+			<span v-cosmetic-paint="shouldPaint ? paint!.id : null">
+				<span v-if="isMention && !hideAt">@</span>
 				<span>{{ user.displayName }}</span>
 				<span v-if="user.intl"> ({{ user.username }})</span>
 			</span>
@@ -46,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, toRef, watch, watchEffect } from "vue";
+import { computed, nextTick, ref, toRef, watch, watchEffect } from "vue";
 import type { ChatUser } from "@/common/chat/ChatMessage";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatProperties } from "@/composable/chat/useChatProperties";
@@ -60,8 +82,10 @@ import { autoPlacement, shift } from "@floating-ui/dom";
 const props = withDefaults(
 	defineProps<{
 		user: ChatUser;
+		sourceData?: Twitch.SharedChat;
 		msgId?: symbol;
-		asMention?: boolean;
+		isMention?: boolean;
+		hideAt?: boolean;
 		hideBadges?: boolean;
 		clickable?: boolean;
 		badges?: Record<string, string>;
@@ -75,13 +99,21 @@ const emit = defineEmits<{
 	(e: "open-native-card", ev: MouseEvent): void;
 }>();
 
+enum MentionStyle {
+	NONE = 0,
+	COLORED = 1,
+	PAINTED = 2,
+}
+
 const ctx = useChannelContext();
 const properties = useChatProperties(ctx);
 const cosmetics = useCosmetics(props.user.id);
-const shouldRenderPaint = useConfig("vanity.nametag_paints");
-const betterUserCardEnabled = useConfig("chat.user_card");
+const shouldRenderPaint = useConfig<boolean>("vanity.nametag_paints");
+const shouldRender7tvBadges = useConfig<boolean>("vanity.7tv_Badges");
+const betterUserCardEnabled = useConfig<boolean>("chat.user_card");
 const twitchBadges = ref<Twitch.ChatBadge[]>([]);
 const twitchBadgeSets = toRef(properties, "twitchBadgeSets");
+const mentionStyle = useConfig<MentionStyle>("chat.colored_mentions");
 
 const tagRef = ref<HTMLDivElement>();
 const showUserCard = ref(false);
@@ -89,6 +121,17 @@ const cardHandle = ref<HTMLDivElement>();
 const paint = ref<SevenTV.Cosmetic<"PAINT"> | null>(null);
 const activeBadges = ref<SevenTV.Cosmetic<"BADGE">[]>([]);
 
+const shouldPaint = computed(() => {
+	if (!shouldRenderPaint.value) return false;
+	if (!paint.value) return false;
+	if (!props.isMention) return true;
+	return mentionStyle.value === MentionStyle.PAINTED;
+});
+
+const shouldColor = computed(() => {
+	return !props.isMention || mentionStyle.value === MentionStyle.COLORED;
+});
+
 function handleClick(ev: MouseEvent) {
 	if (!props.clickable) return;
 	if (!betterUserCardEnabled.value) {
@@ -105,7 +148,10 @@ watchEffect(() => {
 			const setID = key;
 			const badgeID = value;
 
-			for (const setGroup of [twitchBadgeSets.value.channelsBySet, twitchBadgeSets.value.globalsBySet]) {
+			for (const setGroup of [
+				props.sourceData?.badges.channelsBySet ?? twitchBadgeSets.value.channelsBySet,
+				twitchBadgeSets.value.globalsBySet,
+			]) {
 				if (!setGroup) continue;
 
 				const set = setGroup.get(setID);
@@ -132,8 +178,8 @@ const stop = watch(
 			return;
 		}
 
-		paint.value = shouldRenderPaint.value && paints && paints.size ? paints.values().next().value : null;
-		activeBadges.value = [...badges.values()];
+		paint.value = paints && paints.size ? paints.values().next().value : null;
+		activeBadges.value = badges && badges.size ? [...badges.values()] : [];
 	},
 	{ immediate: true },
 );
diff --git a/src/app/chat/msg/14.SubscriptionMessage.vue b/src/app/chat/msg/14.SubscriptionMessage.vue
index d327a7801..c95b173db 100644
--- a/src/app/chat/msg/14.SubscriptionMessage.vue
+++ b/src/app/chat/msg/14.SubscriptionMessage.vue
@@ -11,7 +11,9 @@
 				</span>
 				<span class="bold">Subscribed</span>
 				with
-				{{ plan }}.
+				{{ plan }}
+				<template v-if="msgData.sourceData"> to {{ msgData.sourceData.displayName }} </template>
+				<span>.</span>
 			</div>
 		</div>
 
diff --git a/src/app/chat/msg/15.Resubscription.vue b/src/app/chat/msg/15.Resubscription.vue
index 90456ef3c..9aa88bbc5 100644
--- a/src/app/chat/msg/15.Resubscription.vue
+++ b/src/app/chat/msg/15.Resubscription.vue
@@ -11,7 +11,9 @@
 				</span>
 				<span class="bold">Subscribed</span>
 				with
-				{{ plan }}. They've subscribed for
+				{{ plan }}
+				<template v-if="msgData.sourceData"> to {{ msgData.sourceData.displayName }} </template>
+				<span>. They've subscribed for </span>
 				<span class="bold"> {{ msgData.cumulativeMonths }} months</span>
 				<template v-if="msgData.shouldShareStreakTenure">
 					, {{ msgData.streakMonths }} month{{ (msgData.streakMonths ?? 0) > 1 ? "s" : "" }} in a row.
diff --git a/src/app/chat/msg/21.SubGift.vue b/src/app/chat/msg/21.SubGift.vue
index 61bfc8e9a..bf898638d 100644
--- a/src/app/chat/msg/21.SubGift.vue
+++ b/src/app/chat/msg/21.SubGift.vue
@@ -12,6 +12,7 @@
 				<span class="bold"> Tier {{ msgData.methods?.plan.charAt(0) }} </span>
 				Sub to
 				<span class="bold"> {{ msgData.recipientDisplayName }} </span>
+				<template v-if="msgData.sourceData"> in {{ msgData.sourceData.displayName }}'s channel! </template>
 			</div>
 		</div>
 	</span>
diff --git a/src/app/chat/msg/26.Raid.vue b/src/app/chat/msg/26.Raid.vue
index 14609bce0..dc4b4698c 100644
--- a/src/app/chat/msg/26.Raid.vue
+++ b/src/app/chat/msg/26.Raid.vue
@@ -1,7 +1,9 @@
 <template>
 	<span class="seventv-raid-message-container seventv-highlight">
 		<span class="bold">{{ msgData.params.displayName }}</span>
-		raided with a viewer count of
+		raided
+		<template v-if="msgData.sourceData"> {{ msgData.sourceData.displayName }}'s channel </template>
+		with a viewer count of
 		<span class="bold"> {{ msgData.params.viewerCount }}</span>
 		<span>.</span>
 	</span>
diff --git a/src/app/chat/msg/35.SubMysteryGift.vue b/src/app/chat/msg/35.SubMysteryGift.vue
index 2ff0c39e9..26f5606c3 100644
--- a/src/app/chat/msg/35.SubMysteryGift.vue
+++ b/src/app/chat/msg/35.SubMysteryGift.vue
@@ -11,7 +11,10 @@
 				is gifting {{ msgData.massGiftCount }} Tier {{ msgData.plan.charAt(0) }} Sub{{
 					msgData.massGiftCount > 1 ? "s" : ""
 				}}
-				to {{ msgData.channel }}'s community.
+				<template v-if="msgData.sourceData">
+					<span>to {{ msgData.sourceData.displayName }}'s community</span>
+				</template>
+				<span>.</span>
 				<template v-if="msgData.senderCount == msgData.massGiftCount">
 					It's their first Gift Sub in the channel!
 				</template>
diff --git a/src/app/chat/msg/41.BitsBadgeTier.vue b/src/app/chat/msg/41.BitsBadgeTier.vue
index 2afcb2c33..3e87842d9 100644
--- a/src/app/chat/msg/41.BitsBadgeTier.vue
+++ b/src/app/chat/msg/41.BitsBadgeTier.vue
@@ -9,7 +9,11 @@
 					{{ msgData.user.displayName }}
 				</span>
 				just earned a new
-				<span class="bold">{{ msgData.threshold }} Bits badge!</span>
+				<span class="bold">{{ msgData.threshold }} Bits badge</span>
+				<template v-if="msgData.sourceData">
+					<span> in {{ msgData.sourceData.displayName }}'s channel</span>
+				</template>
+				<span>!</span>
 			</div>
 		</div>
 		<div v-if="msg.body" class="bits-badge-message">
diff --git a/src/app/chat/msg/43.PointsReward.vue b/src/app/chat/msg/43.PointsReward.vue
index 0c6e4f939..718ecfefb 100644
--- a/src/app/chat/msg/43.PointsReward.vue
+++ b/src/app/chat/msg/43.PointsReward.vue
@@ -9,6 +9,7 @@
 				<span class="reward-name bold">
 					{{ msgData.reward.name }}
 				</span>
+				<template v-if="msgData.sourceData"> in {{ msgData.sourceData.displayName }}'s channel </template>
 			</div>
 			<span class="reward-cost bold">
 				<TwChannelPoints />
diff --git a/src/app/chat/msg/49.AnnouncementMessage.vue b/src/app/chat/msg/49.AnnouncementMessage.vue
index 790961db0..e94979401 100644
--- a/src/app/chat/msg/49.AnnouncementMessage.vue
+++ b/src/app/chat/msg/49.AnnouncementMessage.vue
@@ -4,7 +4,10 @@
 			<div class="announce-icon">
 				<TwAnnounce />
 			</div>
-			<div class="announce-title">Announcement</div>
+			<div class="announce-title">
+				<template v-if="msgData.sourceData"> {{ msgData.sourceData.displayName }}'s </template>
+				Announcement
+			</div>
 		</div>
 		<div class="announce-message">
 			<slot />
diff --git a/src/app/chat/msg/52.ViewerMilestone.vue b/src/app/chat/msg/52.ViewerMilestone.vue
index d29543454..a048b5c6c 100644
--- a/src/app/chat/msg/52.ViewerMilestone.vue
+++ b/src/app/chat/msg/52.ViewerMilestone.vue
@@ -15,7 +15,11 @@
 				</div>
 				<span class="bold">Watch Streak Reached!: </span>
 				<span v-if="msg.author">{{ msg.author.displayName }}</span>
-				is currently on a {{ msgData.watchStreak }}-stream streak!
+				is currently on a {{ msgData.watchStreak }}-stream streak
+				<template v-if="msgData.sourceData">
+					<span>in {{ msgData.sourceData.displayName }}'s channel</span>
+				</template>
+				<span>!</span>
 			</div>
 		</div>
 
diff --git a/src/app/emote-menu/EmoteMenu.vue b/src/app/emote-menu/EmoteMenu.vue
index 795e14270..982e1c992 100644
--- a/src/app/emote-menu/EmoteMenu.vue
+++ b/src/app/emote-menu/EmoteMenu.vue
@@ -138,6 +138,7 @@ onKeyStroke("e", (ev) => {
 
 // Up/Down Arrow iterates providers
 useEventListener("keydown", (ev) => {
+	if (ev.isComposing) return;
 	if (!["ArrowUp", "ArrowDown"].includes(ev.key)) return;
 
 	const cur = Object.keys(visibleProviders).indexOf(activeProvider.value ?? "7TV");
diff --git a/src/app/paint-tool/PaintTool.vue b/src/app/paint-tool/PaintTool.vue
index 0c8d7a15c..7afbaf0de 100644
--- a/src/app/paint-tool/PaintTool.vue
+++ b/src/app/paint-tool/PaintTool.vue
@@ -5,6 +5,11 @@
 			<div ref="shareButton">
 				<UiButton @click="onImport">IMPORT...</UiButton>
 			</div>
+			<h6 style="color: red">
+				⚠️ Paints you try on here will not be visible to other users and are not permanent. To actually change
+				your paint, go to 'Edit Profile' on 7tv.app.
+			</h6>
+			<br /><br /><br /><br />
 			<sub>Select Project</sub>
 		</div>
 		<UiScrollable>
diff --git a/src/app/settings/SettingsConfigHighlights.vue b/src/app/settings/SettingsConfigHighlights.vue
index 615e063eb..7d3773104 100644
--- a/src/app/settings/SettingsConfigHighlights.vue
+++ b/src/app/settings/SettingsConfigHighlights.vue
@@ -2,7 +2,8 @@
 	<main class="seventv-settings-custom-highlights">
 		<div class="tabs"></div>
 		<div class="list">
-			<div class="item heading">
+			<u><h5>Phrases & Words</h5></u>
+			<div class="phrase-item item heading">
 				<div>Pattern</div>
 				<div>Label</div>
 				<div class="centered">Flash Title</div>
@@ -12,8 +13,8 @@
 			</div>
 
 			<UiScrollable>
-				<template v-for="(h, _, index) of highlights.getAll()" :key="h.id">
-					<div class="item">
+				<template v-for="(h, _, index) of highlights.getAllPhraseHighlights()" :key="h.id">
+					<div class="phrase-item item">
 						<!-- Pattern -->
 						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
 							<span>{{ h.pattern }}</span>
@@ -41,13 +42,18 @@
 
 						<!-- Checkbox: RegExp -->
 						<div name="is-regexp" class="centered">
-							<FormCheckbox :checked="!!h.regexp" @update:checked="onRegExpStateChange(h, $event)" />
+							<FormCheckbox
+								:checked="!!h.regexp"
+								:disabled="h.username"
+								@update:checked="onRegExpStateChange(h, $event)"
+							/>
 						</div>
 
 						<!-- Checkbox: Case Sensitive -->
 						<div name="case-sensitive" class="centered">
 							<FormCheckbox
 								:checked="!!h.caseSensitive"
+								:disabled="h.username"
 								@update:checked="onCaseSensitiveChange(h, $event)"
 							/>
 						</div>
@@ -56,7 +62,7 @@
 							<input v-model="h.color" type="color" @input="onColorChange(h, $event as InputEvent)" />
 						</div>
 
-						<div ref="interactRef" name="interact">
+						<div ref="interactRefPhrases" name="interact">
 							<button
 								ref="soundEffectButton"
 								class="sound-button"
@@ -65,7 +71,7 @@
 							>
 								<CompactDiscIcon v-tooltip="'Set Custom Sound'" />
 								<div class="sound-options">
-									<UiFloating v-if="interactRef?.[index]" :anchor="interactRef[index]">
+									<UiFloating v-if="interactRefPhrases?.[index]" :anchor="interactRefPhrases[index]">
 										<button :active="!h.soundPath && !h.soundFile" @click="onRemoveSound(h)">
 											No Sound
 										</button>
@@ -96,7 +102,211 @@
 			<!-- New -->
 			<div class="item create-new">
 				<div name="pattern">
-					<FormInput v-model="newInput" label="New Highlight..."> hi </FormInput>
+					<FormInput v-model="newPhraseInput" label="New Phrase Highlight..."> hi </FormInput>
+				</div>
+			</div>
+
+			<hr class="solid" />
+
+			<!--Badge highlights-->
+			<u><h5>Badges</h5></u>
+			<div class="badge-item item heading">
+				<div>Badge ID</div>
+				<div>Version</div>
+				<div>Label</div>
+				<div>Badge</div>
+				<div class="centered">Flash Title</div>
+				<div>Color</div>
+			</div>
+
+			<UiScrollable>
+				<template v-for="(h, _, index) of highlights.getAllBadgeHighlights()" :key="h.id">
+					<div class="badge-item item">
+						<!-- Badge ID -->
+						<div
+							name="pattern"
+							class="use-virtual-input"
+							contenteditable="false"
+							tabindex="0"
+							@click="onInputFocus(h, 'pattern')"
+						>
+							<span>{{ h.pattern }}</span>
+							<FormInput
+								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.pattern"
+								@blur="onInputBlur(h, 'pattern')"
+							/>
+						</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>
+							<FormInput
+								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.label"
+								@blur="onInputBlur(h, 'label')"
+							/>
+						</div>
+
+						<div name="badgeURL">
+							<input v-model="h.badgeURL" type="image" :src="h.badgeURL" />
+						</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>
+
+						<div ref="interactRefBadges" name="interact">
+							<button
+								ref="soundEffectButton"
+								class="sound-button"
+								:class="{ 'has-sound': !!h.soundFile }"
+								tabindex="0"
+							>
+								<CompactDiscIcon v-tooltip="'Set Custom Sound'" />
+								<div class="sound-options">
+									<UiFloating v-if="interactRefBadges?.[index]" :anchor="interactRefBadges[index]">
+										<button :active="!h.soundPath && !h.soundFile" @click="onRemoveSound(h)">
+											No Sound
+										</button>
+										<button :active="!!h.soundPath && !h.soundFile" @click="onUseDefaultSound(h)">
+											Default Sound
+										</button>
+										<button :active="!!h.soundFile">
+											<label>
+												Custom Sound{{ h.soundFile ? "" : "..." }}
+												<p v-if="h.soundFile">{{ h.soundFile.name }}</p>
+												<input
+													type="file"
+													accept="audio/midi, audio/mpeg, audio/ogg, audio/wav, audio/webm, audio/vorbis, audio/ogg"
+													@input="onUploadSoundFile(h, $event)"
+												/>
+											</label>
+										</button>
+									</UiFloating>
+								</div>
+							</button>
+
+							<CloseIcon v-tooltip="'Remove'" tabindex="0" @click="onDeleteHighlight(h)" />
+						</div>
+					</div>
+				</template>
+			</UiScrollable>
+
+			<!-- New -->
+			<div class="item create-new">
+				<div name="badge">
+					<select v-model="newBadgeInput" v-tooltip="'Badge to highlight'" autocomplete="on">
+						<option value="" disabled selected>New Badge Highlight</option>
+						<option v-for="badge in globalBadgeObjects" :key="badge.title">
+							{{ badge.title }} | {{ badge.setID }} | {{ badge.version }}
+						</option>
+					</select>
+				</div>
+			</div>
+
+			<hr class="solid" />
+
+			<!--Username highlights-->
+			<u><h5>Usernames</h5></u>
+			<div class="username-item item heading">
+				<div>Username</div>
+				<div>Label</div>
+				<div class="centered">Flash Title</div>
+				<div>Color</div>
+			</div>
+
+			<UiScrollable>
+				<template v-for="(h, _, index) of highlights.getAllUsernameHighlights()" :key="h.id">
+					<div class="username-item item">
+						<!-- Username -->
+						<div name="pattern" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'pattern')">
+							<span>{{ h.pattern }}</span>
+							<FormInput
+								:ref="(c) => inputs.pattern.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.pattern"
+								@blur="onInputBlur(h, 'pattern')"
+							/>
+						</div>
+
+						<!-- Label -->
+						<div name="label" class="use-virtual-input" tabindex="0" @click="onInputFocus(h, 'label')">
+							<span>{{ h.label }}</span>
+							<FormInput
+								:ref="(c) => inputs.label.set(h, c as InstanceType<typeof FormInput>)"
+								v-model="h.label"
+								@blur="onInputBlur(h, 'label')"
+							/>
+						</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>
+
+						<div ref="interactRefUsernames" name="interact">
+							<button
+								ref="soundEffectButton"
+								class="sound-button"
+								:class="{ 'has-sound': !!h.soundFile }"
+								tabindex="0"
+							>
+								<CompactDiscIcon v-tooltip="'Set Custom Sound'" />
+								<div class="sound-options">
+									<UiFloating
+										v-if="interactRefUsernames?.[index]"
+										:anchor="interactRefUsernames[index]"
+									>
+										<button :active="!h.soundPath && !h.soundFile" @click="onRemoveSound(h)">
+											No Sound
+										</button>
+										<button :active="!!h.soundPath && !h.soundFile" @click="onUseDefaultSound(h)">
+											Default Sound
+										</button>
+										<button :active="!!h.soundFile">
+											<label>
+												Custom Sound{{ h.soundFile ? "" : "..." }}
+												<p v-if="h.soundFile">{{ h.soundFile.name }}</p>
+												<input
+													type="file"
+													accept="audio/midi, audio/mpeg, audio/ogg, audio/wav, audio/webm, audio/vorbis, audio/ogg"
+													@input="onUploadSoundFile(h, $event)"
+												/>
+											</label>
+										</button>
+									</UiFloating>
+								</div>
+							</button>
+
+							<CloseIcon v-tooltip="'Remove'" tabindex="0" @click="onDeleteHighlight(h)" />
+						</div>
+					</div>
+				</template>
+			</UiScrollable>
+
+			<!-- New -->
+			<div class="item create-new">
+				<div name="pattern">
+					<FormInput v-model="newUsernameInput" label="New Username Highlight..."> hi </FormInput>
 				</div>
 			</div>
 		</div>
@@ -104,9 +314,10 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, reactive, ref, watch } from "vue";
+import { 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";
 import FormCheckbox from "@/site/global/components/FormCheckbox.vue";
 import FormInput from "@/site/global/components/FormInput.vue";
 import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
@@ -117,13 +328,27 @@ import { v4 as uuid } from "uuid";
 
 const ctx = useChannelContext(); // this will be an empty context, as config is not tied to channel
 const highlights = useChatHighlights(ctx);
+const properties = useChatProperties(ctx);
 
-const newInput = ref("");
+const newPhraseInput = ref("");
+const newUsernameInput = ref("");
+const newBadgeInput = ref("");
 const inputs = reactive({
 	pattern: new WeakMap<HighlightDef, InstanceType<typeof FormInput>>(),
 	label: new WeakMap<HighlightDef, InstanceType<typeof FormInput>>(),
+	version: new WeakMap<HighlightDef, InstanceType<typeof FormInput>>(),
+});
+const interactRefPhrases = ref<HTMLElement[]>();
+const interactRefUsernames = ref<HTMLElement[]>();
+const interactRefBadges = ref<HTMLElement[]>();
+
+const globalBadges = toRef(properties, "twitchBadgeSets").value?.globalsBySet;
+const globalBadgeObjects: Twitch.ChatBadge[] = [];
+globalBadges!.forEach((badgeObject) => {
+	badgeObject.forEach((value) => {
+		globalBadgeObjects.push(value);
+	});
 });
-const interactRef = ref<HTMLElement[]>();
 
 function onInputFocus(h: HighlightDef, inputName: keyof typeof inputs): void {
 	const input = inputs[inputName].get(h);
@@ -217,27 +442,44 @@ function onDeleteHighlight(h: HighlightDef): void {
 
 // Watch for user writing to "new highlight" input
 // If they do, we create a new highlight and switch focus
-watch(newInput, (val, old) => {
-	if (!val || old) return;
-
-	const h = highlights.define(
-		"new-highlight",
-		{
-			color: "#8803fc",
-			label: "",
-			pattern: val,
-		},
-		true,
-	);
-
-	nextTick(() => {
-		const input = inputs.pattern.get(h);
-		if (!input) return;
-
-		input.focus();
-		newInput.value = "";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function setupWatcher(inputRef: any, patternKey: string) {
+	watch(inputRef, (val, old) => {
+		if (!val || old) return;
+
+		const h = highlights.define(
+			newBadgeInput.value ? inputRef.value : "new-highlight",
+			{
+				color: "#8803fc",
+				label: newBadgeInput.value ? inputRef.value.split(/\s*\|\s*/)[0] : "",
+				badgeURL: newBadgeInput.value
+					? globalBadgeObjects.find(
+							(key) =>
+								key.setID === inputRef.value.split(/\s*\|\s*/)[1] &&
+								key.version === inputRef.value.split(/\s*\|\s*/)[2],
+					  )!.image1x
+					: "",
+				version: newBadgeInput.value ? inputRef.value.split(/\s*\|\s*/)[2]! : "",
+				pattern: newBadgeInput.value ? inputRef.value.split(/\s*\|\s*/)[1] : inputRef.value,
+				[patternKey]: true,
+			},
+			true,
+		);
+
+		nextTick(() => {
+			const input = inputs.pattern.get(h);
+			if (!input) return;
+
+			input.focus();
+			inputRef.value = "";
+		});
 	});
-});
+}
+
+// Set up watchers for each input
+setupWatcher(newPhraseInput, "phrase");
+setupWatcher(newUsernameInput, "username");
+setupWatcher(newBadgeInput, "badge");
 </script>
 
 <style scoped lang="scss">
@@ -250,6 +492,12 @@ main.seventv-settings-custom-highlights {
 		"list";
 	overflow-x: auto;
 
+	hr.solid {
+		border-top: 2px solid #fff;
+		opacity: 0.2;
+		padding: 1.5rem;
+	}
+
 	.tabs {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
@@ -260,12 +508,23 @@ main.seventv-settings-custom-highlights {
 	.list {
 		display: grid;
 		grid-area: list;
-		max-height: 36rem;
+		max-height: 100rem;
+
+		.phrase-item {
+			grid-template-columns: 20% 9rem 1fr 1fr 1fr 1fr 1fr;
+		}
+
+		.username-item {
+			grid-template-columns: 20% 9rem 1fr 1fr 1fr;
+		}
+
+		.badge-item {
+			grid-template-columns: 20% 9rem 1fr 1fr 1fr 1fr 1fr;
+		}
 
 		.item {
 			display: grid;
 			grid-auto-flow: row dense;
-			grid-template-columns: 20% 9rem 1fr 1fr 1fr 1fr 1fr;
 			column-gap: 3rem;
 			padding: 1rem;
 
@@ -296,6 +555,19 @@ main.seventv-settings-custom-highlights {
 				}
 			}
 
+			select {
+				background-color: var(--seventv-input-background);
+				border: 0.01rem solid var(--seventv-input-border);
+				border-radius: 0.25rem;
+				color: var(--seventv-text-color-normal);
+				padding: 0.5rem;
+				opacity: 0.5;
+
+				&[type="number"] {
+					max-width: 6rem;
+				}
+			}
+
 			&:not(.create-new) > .use-virtual-input {
 				cursor: text;
 				padding: 0.5rem;
diff --git a/src/app/settings/SettingsMenu.vue b/src/app/settings/SettingsMenu.vue
index 8ebb8ac8e..822725484 100644
--- a/src/app/settings/SettingsMenu.vue
+++ b/src/app/settings/SettingsMenu.vue
@@ -418,6 +418,7 @@ watch(
 		margin-top: auto;
 		align-items: center;
 		padding: 1rem;
+		height: 100%;
 
 		&:hover {
 			cursor: pointer;
diff --git a/src/assets/gql/tw.user-card.gql.ts b/src/assets/gql/tw.user-card.gql.ts
index 90024074d..552d95c4a 100644
--- a/src/assets/gql/tw.user-card.gql.ts
+++ b/src/assets/gql/tw.user-card.gql.ts
@@ -194,6 +194,9 @@ export const twitchUserCardModLogsQuery = gql`
 			untimeouts: targetedActions(first: 99, type: UNTIMEOUT) {
 				...modLogsTargetedActionsResultFragment
 			}
+			warnings: targetedActions(first: 99, type: WARN) {
+				...modLogsTargetedActionsResultFragment
+			}
 			comments(first: 100) {
 				... on ModLogsCommentConnection {
 					edges {
@@ -291,7 +294,7 @@ export namespace twitchUserCardModLogsQuery {
 			}[];
 		};
 		timestamp: string;
-		type: "BAN" | "TIMEOUT" | "UNBAN" | "UNTIMEOUT";
+		type: "BAN" | "WARN" | "TIMEOUT" | "UNBAN" | "UNTIMEOUT";
 	}
 
 	interface ActionsConnection {
@@ -333,6 +336,7 @@ export namespace twitchUserCardModLogsQuery {
 			};
 			bans: ActionsConnection;
 			timeouts: ActionsConnection;
+			warnings: ActionsConnection;
 		};
 	}
 }
diff --git a/src/assets/style/global.scss b/src/assets/style/global.scss
index 0dd9b6d51..114e3439f 100644
--- a/src/assets/style/global.scss
+++ b/src/assets/style/global.scss
@@ -89,3 +89,13 @@ body[theme="light"] {
 	-webkit-background-clip: text !important;
 	font-weight: 700;
 }
+
+:root.seventv-alternating-chat-lines {
+	.seventv-chat-observer > div:nth-child(even) {
+		background-color: var(--seventv-chat-alternate-background-color);
+	}
+
+	.seventv-chat-list .seventv-message:nth-child(even) {
+		background-color: var(--seventv-chat-alternate-background-color);
+	}
+}
diff --git a/src/assets/svg/icons/BellIcon.vue b/src/assets/svg/icons/BellIcon.vue
new file mode 100644
index 000000000..1abdb4e09
--- /dev/null
+++ b/src/assets/svg/icons/BellIcon.vue
@@ -0,0 +1,9 @@
+/* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free
+Copyright 2024 Fonticons, Inc. */
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
+		<path
+			d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"
+		/>
+	</svg>
+</template>
diff --git a/src/assets/svg/icons/BellSlashIcon.vue b/src/assets/svg/icons/BellSlashIcon.vue
new file mode 100644
index 000000000..836bb1fee
--- /dev/null
+++ b/src/assets/svg/icons/BellSlashIcon.vue
@@ -0,0 +1,9 @@
+/* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free
+Copyright 2024 Fonticons, Inc. */
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="currentColor">
+		<path
+			d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7l-90.2-70.7c.2-.4 .4-.9 .6-1.3c5.2-11.5 3.1-25-5.3-34.4l-7.4-8.3C497.3 319.2 480 273.9 480 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V51.2c-42.6 8.6-79 34.2-102 69.3L38.8 5.1zM406.2 416L160 222.1v4.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S115.4 416 128 416H406.2zm-40.9 77.3c12-12 18.7-28.3 18.7-45.3H320 256c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"
+		/>
+	</svg>
+</template>
diff --git a/src/assets/svg/twitch/TwChatModWarn.vue b/src/assets/svg/twitch/TwChatModWarn.vue
new file mode 100644
index 000000000..8ac5b4927
--- /dev/null
+++ b/src/assets/svg/twitch/TwChatModWarn.vue
@@ -0,0 +1,11 @@
+<template>
+	<svg width="1em" height="1em" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" fill="currentColor">
+		<g>
+			<path
+				fill-rule="evenodd"
+				d="M10.954 3.543c-.422-.724-1.486-.724-1.908 0l-6.9 11.844c-.418.719.11 1.613.955 1.613h13.798c.844 0 1.373-.894.955-1.613l-6.9-11.844zM11 15H9v-2h2v2zm0-3H9V7h2v5z"
+				clip-rule="evenodd"
+			></path>
+		</g>
+	</svg>
+</template>
diff --git a/src/common/Image.ts b/src/common/Image.ts
index 7f6861046..59ea1468f 100644
--- a/src/common/Image.ts
+++ b/src/common/Image.ts
@@ -1,7 +1,7 @@
 import { useUserAgent } from "@/composable/useUserAgent";
 
 const layout = {
-	PLATFORM: [1, 2, 3],
+	PLATFORM: [1, 2, 4],
 	"7TV": [1, 2, 3, 4],
 	FFZ: [1, 2, 4],
 	BTTV: [1, 2, 4],
@@ -39,7 +39,7 @@ export function imageHostToSrcset(
 		multiplier /= targetSize;
 
 		if (srcset) srcset += ", ";
-		srcset += `https:${host.url}/${size.name} ${multiplier}x`;
+		srcset += `${host.url}/${size.name} ${multiplier}x`;
 	}
 
 	if (targetSize === 1) known[host.url] = srcset;
diff --git a/src/common/Input.ts b/src/common/Input.ts
new file mode 100644
index 000000000..4aaf00807
--- /dev/null
+++ b/src/common/Input.ts
@@ -0,0 +1,26 @@
+export function getSearchRange(text: string, position: number): [number, number] {
+	let start = 0;
+	let end = 0;
+
+	for (let i = position; ; i--) {
+		if (i < 1 || (text.charAt(i - 1) === " " && i !== position)) {
+			start = i;
+			break;
+		}
+	}
+
+	for (let i = position + 1; ; i++) {
+		if (i > text.length || text.charAt(i - 1) === " ") {
+			end = i - 1;
+			break;
+		}
+	}
+
+	return [start, end];
+}
+
+export interface TabToken {
+	token: string;
+	priority: number;
+	item?: SevenTV.ActiveEmote;
+}
diff --git a/src/common/ReactHooks.ts b/src/common/ReactHooks.ts
index d42c04a65..93c9f2bb4 100644
--- a/src/common/ReactHooks.ts
+++ b/src/common/ReactHooks.ts
@@ -25,6 +25,15 @@ export function getRootVNode(): ReactExtended.ReactVNode | undefined {
 	return undefined;
 }
 
+export function getReactProps<T>(element: Element): T | undefined {
+	for (const k in element) {
+		if (k.startsWith("__reactProps")) {
+			const props = Reflect.get(element, k);
+			return props;
+		}
+	}
+	return undefined;
+}
 /**
  * Searches the React VDOM tree for a component, starting at the defined node, searching upwards.
  * @param node React VDOM node to start at
@@ -306,6 +315,9 @@ export function defineComponentHook<C extends ReactExtended.WritableComponent>(
 				if (options.functionHooks) {
 					for (const [k, f] of Object.entries(options.functionHooks)) {
 						defineFunctionHook(proto, k as keyof C, f);
+						for (const instance of instances) {
+							defineFunctionHook(instance, k as keyof C, f);
+						}
 					}
 				}
 
@@ -413,6 +425,9 @@ export function useComponentHook<C extends ReactExtended.WritableComponent>(
 				if (hook.cls) {
 					unsetPropertyHook(hook.cls.prototype, k as keyof C);
 				}
+				for (const instance of hook.instances) {
+					unsetPropertyHook(instance.component, k as keyof C);
+				}
 			}
 		}
 		unhookComponent(hook);
@@ -421,6 +436,73 @@ export function useComponentHook<C extends ReactExtended.WritableComponent>(
 	return hook;
 }
 
+export function getElementFiberStatic<P>(
+	elem: Element,
+	offset: number,
+): ReactExtended.ReactFunctionalFiber<P> | undefined {
+	const node = getVNodeFromDOM(elem);
+	if (!node) return;
+	let current = node;
+	for (let i = 0; i < offset; i++) {
+		if (!current.return) return;
+		current = current.return;
+	}
+	if (!current.elementType) return;
+
+	return current as unknown as ReactExtended.ReactFunctionalFiber<P>;
+}
+
+export async function useStaticRenderFunctionHook<P extends object>(
+	selector: string,
+	offset: number,
+	func: HookedElementFunction<P>,
+) {
+	let elem = document.querySelector(selector);
+
+	if (!elem || !getElementFiberStatic(elem, offset)) {
+		elem = await new Promise<Element>((resolve) => {
+			const observer = new MutationObserver((records) => {
+				for (const record of records) {
+					if (!record.addedNodes) continue;
+					record.addedNodes.forEach((node) => {
+						if (node instanceof Element && node.querySelector(selector)) {
+							if (getElementFiberStatic(node, offset)) {
+								resolve(node);
+								observer.disconnect();
+								return;
+							}
+						}
+					});
+				}
+			});
+			observer.observe(document, { childList: true, subtree: true });
+		});
+	}
+
+	if (!elem) return;
+
+	const fiber = getElementFiberStatic<P>(elem, offset)!;
+
+	defineFunctionHook(fiber.elementType, "render", func);
+	func.call(fiber.elementType, null, fiber.pendingProps);
+
+	onUnmounted(() => {
+		unsetPropertyHook(fiber.elementType, "render");
+	});
+}
+
+type RenderFunction<P extends object> = (props: P, ref?: React.RefObject<Element>) => ReactExtended.ReactRuntimeElement;
+
+type HookedElementFunction<
+	P extends object,
+	E extends ReactExtended.ReactFunctionalFiber<P> = ReactExtended.ReactFunctionalFiber<P>,
+> = (
+	this: E["elementType"],
+	old: RenderFunction<P> | null,
+	props: P,
+	ref?: React.RefObject<Element>,
+) => ReactExtended.ReactRuntimeElement | null;
+
 interface ComponentCriteria {
 	parentSelector?: string;
 	childSelector?: string;
diff --git a/src/common/Tokenize.ts b/src/common/Tokenize.ts
index ee844b6c6..4aa073c86 100644
--- a/src/common/Tokenize.ts
+++ b/src/common/Tokenize.ts
@@ -1,14 +1,31 @@
-import type { AnyToken, ChatUser, EmoteToken, LinkToken, VoidToken } from "@/common/chat/ChatMessage";
+import type { AnyToken, ChatUser, EmoteToken, LinkToken, TextToken, VoidToken } from "@/common/chat/ChatMessage";
+import { convertExternalKickEmote } from "./Transform";
 import { parse as tldParse } from "tldts";
 
 const URL_PROTOCOL_REGEXP = /^https?:\/\//i;
+const KICK_EMOTE_REGEXP = /^\[emote:(?<id>\d+):(?<name>.+)\]$/;
 const backwardModifierBlacklist = new Set(["w!", "h!", "v!", "z!"]);
 
+const delimiter = /( )|(\[emote:\d{1,10}:.{1,30}\])/;
+
 export function tokenize(opt: TokenizeOptions) {
 	const tokens = [] as AnyToken[];
 
-	const textParts = opt.body.split(" ");
+	const textParts = opt.body.split(delimiter).filter((part) => !!part);
+
 	const getEmote = (name: string) => {
+		if (opt.isKick) {
+			const match = KICK_EMOTE_REGEXP.exec(name);
+			if (match && match.groups) {
+				const { name, id } = match.groups;
+				return {
+					name: name,
+					id: id,
+					data: convertExternalKickEmote(id, name),
+					provider: "PLATFORM",
+				} as SevenTV.ActiveEmote;
+			}
+		}
 		if (opt.localEmoteMap?.[name] && Object.hasOwn(opt.localEmoteMap, name)) {
 			return opt.localEmoteMap[name];
 		}
@@ -79,10 +96,20 @@ export function tokenize(opt: TokenizeOptions) {
 					url: parsedUrl.toString(),
 				},
 			} as LinkToken);
+		} else if (tokens.at(-1)?.kind === "TEXT") {
+			const prev = tokens.at(-1) as TextToken;
+			prev.content += part;
+			prev.range = [prev.range[0], next - 1];
+		} else if (part !== " " || !nextEmote || !prevEmote) {
+			tokens.push({
+				kind: "TEXT",
+				range: [cursor + 1, next - 1],
+				content: part,
+			} as TextToken);
 		}
 
 		cursor = next;
-		if (!maybeEmote && !!part) lastEmoteToken = undefined;
+		if (!maybeEmote && !!part && part !== " ") lastEmoteToken = undefined;
 	}
 
 	tokens.sort((a, b) => a.range[0] - b.range[0]);
@@ -113,4 +140,5 @@ export interface TokenizeOptions {
 	filteredWords?: string[];
 	actorUsername?: string;
 	showModifiers?: boolean;
+	isKick?: boolean;
 }
diff --git a/src/common/Transform.ts b/src/common/Transform.ts
index 2b2e23ce5..b1383a1a0 100644
--- a/src/common/Transform.ts
+++ b/src/common/Transform.ts
@@ -37,6 +37,39 @@ export function convertPlatformEmoteSet(data: Twitch.TwitchEmoteSet): SevenTV.Em
 	};
 }
 
+export function convertKickEmoteSet(data: Kick.KickEmoteSet): SevenTV.EmoteSet {
+	const isGlobalSet = !("user" in data);
+
+	return {
+		id: "PLATFORM#" + data.id,
+		name: isGlobalSet ? data.name : data.user.username,
+		immutable: true,
+		privileged: true,
+		tags: [],
+		flags: 0,
+		provider: "PLATFORM",
+		scope: isGlobalSet ? "GLOBAL" : "CHANNEL",
+		owner: !isGlobalSet
+			? {
+					id: data.user_id.toString(),
+					username: data.user.username,
+					display_name: data.user.username,
+					avatar_url: data.user.profile_pic,
+			  }
+			: undefined,
+		emotes: data.emotes.map((e) => {
+			const d = convertKickEmote(e, !isGlobalSet ? data.user : undefined);
+			return {
+				id: e.id.toString(),
+				name: e.name,
+				flags: 0,
+				provider: "PLATFORM",
+				data: d,
+			};
+		}),
+	};
+}
+
 export function convertTwitchEmote(
 	data: Partial<Twitch.TwitchEmote>,
 	owner?: Twitch.TwitchEmoteSet["owner"],
@@ -68,10 +101,6 @@ export function convertTwitchEmote(
 					name: "2.0",
 					format: "PNG",
 				},
-				{
-					name: "3.0",
-					format: "PNG",
-				},
 				{
 					name: "4.0",
 					format: "PNG",
@@ -84,6 +113,36 @@ export function convertTwitchEmote(
 	return emote;
 }
 
+export function convertKickEmote(data: Kick.KickEmote, owner?: Kick.KickUserEmoteSet["user"]): SevenTV.Emote {
+	return {
+		id: data.id?.toString(),
+		name: data.name,
+		flags: undefined,
+		tags: [],
+		state: [],
+		lifecycle: 3,
+		listed: true,
+		owner: owner
+			? {
+					id: owner.id,
+					username: owner.username,
+					display_name: owner.username,
+					avatar_url: owner.profile_pic,
+			  }
+			: null,
+		host: {
+			url: "//files.kick.com/emotes/" + data.id.toString(),
+			files: [
+				{
+					name: "fullsize",
+					format: "PNG",
+				},
+			],
+			srcset: `https://files.kick.com/emotes/${data.id}/fullsize 2.2x`,
+		},
+	};
+}
+
 export function convertCheerEmote(data: Twitch.ChatMessage.EmotePart["content"]): SevenTV.Emote {
 	return {
 		id: data.emoteID ?? "",
@@ -236,13 +295,22 @@ export function convertFFZEmote(data: FFZ.Emote): SevenTV.Emote {
 		listed: true,
 		owner: null,
 		host: {
-			url: "//cdn.frankerfacez.com/emote/" + data.id,
-			files: Object.keys(data.urls).map((key) => {
-				return {
-					name: key,
-					format: "PNG",
-				};
-			}),
+			url: data.animated
+				? "//cdn.frankerfacez.com/emote/" + data.id + "/animated"
+				: "//cdn.frankerfacez.com/emote/" + data.id,
+			files: data.animated
+				? Object.keys(data.animated).map((key) => {
+						return {
+							name: key,
+							format: "WEBP",
+						};
+				  })
+				: Object.keys(data.urls).map((key) => {
+						return {
+							name: key,
+							format: "PNG",
+						};
+				  }),
 		},
 	};
 }
@@ -342,3 +410,25 @@ export function semanticVersionToNumber(ver: string): number {
 
 	return result;
 }
+
+export function convertExternalKickEmote(id: string, name: string): SevenTV.Emote {
+	return {
+		id: id,
+		name: name,
+		tags: [],
+		state: [],
+		lifecycle: 3,
+		listed: true,
+		owner: null,
+		host: {
+			url: "//files.kick.com/emotes/" + id,
+			files: [
+				{
+					name: "fullsize",
+					format: "PNG",
+				},
+			],
+			srcset: `https://files.kick.com/emotes/${id}/fullsize 2.2x`,
+		},
+	};
+}
diff --git a/src/common/chat/ChatMessage.ts b/src/common/chat/ChatMessage.ts
index 4a776e9a6..0655d62fb 100644
--- a/src/common/chat/ChatMessage.ts
+++ b/src/common/chat/ChatMessage.ts
@@ -10,6 +10,7 @@ export class ChatMessage<C extends ComponentFactory = ComponentFactory> {
 	public body = "";
 	public author: ChatUser | null = null;
 	public channelID = "";
+	public sourceData: Twitch.SharedChat | undefined;
 	private component?: C | null = null;
 	public componentProps?: InstanceType<C>["$props"] | null = null;
 	public highlight: Highlight | null = null;
@@ -96,6 +97,10 @@ export class ChatMessage<C extends ComponentFactory = ComponentFactory> {
 		this.id = id;
 	}
 
+	public setSourceData(sourceData: Twitch.SharedChat | undefined): void {
+		this.sourceData = sourceData;
+	}
+
 	public setHighlight(color: string, label: string): void {
 		this.highlight = {
 			color,
diff --git a/src/composable/chat/useChatEmotes.ts b/src/composable/chat/useChatEmotes.ts
index 40c5838d2..3933da02e 100644
--- a/src/composable/chat/useChatEmotes.ts
+++ b/src/composable/chat/useChatEmotes.ts
@@ -32,7 +32,7 @@ export function useChatEmotes(ctx: ChannelContext) {
 		m.set(ctx, x);
 	}
 
-	function resetProviders() {
+	function reset() {
 		if (!x) return;
 
 		for (const k in x.providers) {
@@ -42,6 +42,12 @@ export function useChatEmotes(ctx: ChannelContext) {
 				delete x.providers[k as SevenTV.Provider][k2];
 			}
 		}
+
+		for (const k in x.active) {
+			const ae = x.active[k];
+			if (ae.provider === "EMOJI") continue;
+			delete x.active[k];
+		}
 	}
 
 	function byProvider(provider: SevenTV.Provider) {
@@ -75,7 +81,7 @@ export function useChatEmotes(ctx: ChannelContext) {
 		sets: x.sets,
 		emojis: x.emojis,
 		providers: x.providers,
-		resetProviders,
+		reset,
 		byProvider,
 		find,
 	});
diff --git a/src/composable/chat/useChatHighlights.ts b/src/composable/chat/useChatHighlights.ts
index 87827caea..9417e79a2 100644
--- a/src/composable/chat/useChatHighlights.ts
+++ b/src/composable/chat/useChatHighlights.ts
@@ -33,6 +33,11 @@ export interface HighlightDef {
 		data: ArrayBuffer;
 	};
 	persist?: boolean;
+	phrase?: boolean;
+	username?: boolean;
+	badge?: boolean;
+	badgeURL?: string;
+	version?: string;
 }
 
 const m = new WeakMap<ChannelContext, ChatHighlights>();
@@ -149,27 +154,35 @@ export function useChatHighlights(ctx: ChannelContext) {
 
 		let ok = false;
 
-		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;
+		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;
+					}
 				}
-			}
 
-			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);
+			}
+		} 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) {
@@ -222,6 +235,39 @@ export function useChatHighlights(ctx: ChannelContext) {
 		return toReactive(data.highlights);
 	}
 
+	function getAllPhraseHighlights(): Record<string, HighlightDef> {
+		if (!data) return {};
+		// Filtering the highlights to include only those with phrase: true
+		const filteredHighlights = Object.fromEntries(
+			Object.entries(data.highlights).filter(
+				([, highlight]) =>
+					highlight.phrase === true || (!highlight.phrase && !highlight.username && !highlight.badge),
+			),
+		);
+
+		return toReactive(filteredHighlights);
+	}
+
+	function getAllUsernameHighlights(): Record<string, HighlightDef> {
+		if (!data) return {};
+		// Filtering the highlights to include only those with username: true
+		const filteredHighlights = Object.fromEntries(
+			Object.entries(data.highlights).filter(([, highlight]) => highlight.username === true),
+		);
+
+		return toReactive(filteredHighlights);
+	}
+
+	function getAllBadgeHighlights(): Record<string, HighlightDef> {
+		if (!data) return {};
+		// Filtering the highlights to include only those with badge: true
+		const filteredHighlights = Object.fromEntries(
+			Object.entries(data.highlights).filter(([, highlight]) => highlight.badge === true),
+		);
+
+		return toReactive(filteredHighlights);
+	}
+
 	function updateId(oldId: string, newId: string): void {
 		if (!data) return;
 
@@ -240,6 +286,9 @@ export function useChatHighlights(ctx: ChannelContext) {
 		define,
 		remove,
 		getAll,
+		getAllPhraseHighlights,
+		getAllUsernameHighlights,
+		getAllBadgeHighlights,
 		save,
 		updateId,
 		checkMatch,
diff --git a/src/composable/chat/useChatTools.ts b/src/composable/chat/useChatTools.ts
index d64ce6616..9c8ef7f57 100644
--- a/src/composable/chat/useChatTools.ts
+++ b/src/composable/chat/useChatTools.ts
@@ -4,6 +4,11 @@ import { ChannelContext } from "../channel/useChannelContext";
 interface ChatTools {
 	TWITCH: {
 		onShowViewerCard: Twitch.ViewerCardComponent["onShowViewerCard"];
+		onShowViewerWarnPopover: (
+			userId: string,
+			userLogin: string,
+			placement: Twitch.WarnUserPopoverPlacement,
+		) => void;
 	};
 	YOUTUBE: Record<string, never>;
 	KICK: Record<string, never>;
@@ -18,6 +23,7 @@ export function useChatTools(ctx: ChannelContext) {
 		data = reactive<ChatTools>({
 			TWITCH: {
 				onShowViewerCard: () => void 0,
+				onShowViewerWarnPopover: () => void 0,
 			},
 			YOUTUBE: {},
 			KICK: {},
@@ -27,10 +33,10 @@ export function useChatTools(ctx: ChannelContext) {
 		m.set(ctx, data);
 	}
 
-	function update<P extends Platform>(platorm: P, key: keyof ChatTools[P], value: ChatTools[P][keyof ChatTools[P]]) {
+	function update<P extends Platform>(platform: P, key: keyof ChatTools[P], value: ChatTools[P][keyof ChatTools[P]]) {
 		if (!data) return;
 
-		data[platorm][key] = value;
+		data[platform][key] = value;
 	}
 
 	function openViewerCard(e: MouseEvent, username: string, msgID: string) {
@@ -41,8 +47,16 @@ export function useChatTools(ctx: ChannelContext) {
 		return true;
 	}
 
+	function openViewerWarnPopover(userId: string, userLogin: string, placement: Twitch.WarnUserPopoverPlacement) {
+		if (!data || !userId || !userLogin) return false;
+
+		data[ctx.platform].onShowViewerWarnPopover(userId, userLogin, placement);
+		return true;
+	}
+
 	return {
 		update,
 		openViewerCard,
+		openViewerWarnPopover,
 	};
 }
diff --git a/src/composable/useActor.ts b/src/composable/useActor.ts
index a772f9caa..f5986dfb3 100644
--- a/src/composable/useActor.ts
+++ b/src/composable/useActor.ts
@@ -10,6 +10,7 @@ class ActorContext {
 	user: SevenTV.User | null = null;
 	sub: SubscriptionResponse | null = null;
 	token = useConfig<string>("app.7tv.token") as unknown as string;
+	editAnySet = false;
 
 	platform: Platform | null = null;
 	platformUserID: string | null = null;
diff --git a/src/composable/useCosmetics.ts b/src/composable/useCosmetics.ts
index bdef80501..af0d249a4 100644
--- a/src/composable/useCosmetics.ts
+++ b/src/composable/useCosmetics.ts
@@ -1,8 +1,9 @@
-import { Ref, reactive, ref, toRef } from "vue";
+import { Ref, reactive, ref, toRef, watch } from "vue";
 import { until, useTimeout } from "@vueuse/core";
 import { DecimalToStringRGBA } from "@/common/Color";
 import { log } from "@/common/Logger";
 import { db } from "@/db/idb";
+import { useConfig } from "@/composable/useSettings";
 import { useLiveQuery } from "./useLiveQuery";
 import { useWorker } from "./useWorker";
 
@@ -23,6 +24,13 @@ const data = reactive({
 
 	staticallyAssigned: {} as Record<string, Record<string, never> | undefined>,
 });
+const dropShadowRender = useConfig<0 | 1 | 2>("vanity.paints_drop_shadows");
+
+watch(dropShadowRender, () =>
+	Object.values(data.cosmetics)
+		.filter((c) => c.kind === "PAINT")
+		.forEach((c) => updatePaintStyle(c as SevenTV.Cosmetic<"PAINT">)),
+);
 
 class CosmeticMap<T extends SevenTV.CosmeticKind> extends Map<string, SevenTV.Cosmetic<T>> {
 	private providers = new Set<SevenTV.Provider>();
@@ -61,16 +69,18 @@ db.ready().then(async () => {
 	useLiveQuery(
 		() => db.cosmetics.toArray(),
 		(result) => {
-			data.cosmetics = {};
+			const temp = {} as typeof data.cosmetics;
 
 			for (const cos of result) {
-				if (data.cosmetics[cos.id]) continue;
-				data.cosmetics[cos.id] = reactive(cos);
+				if (temp[cos.id]) continue;
+				temp[cos.id] = reactive(cos);
 
 				if (cos.kind === "PAINT") {
 					updatePaintStyle(cos as SevenTV.Cosmetic<"PAINT">);
 				}
 			}
+
+			data.cosmetics = temp;
 		},
 	);
 
@@ -384,11 +394,14 @@ export function updatePaintStyle(paint: SevenTV.Cosmetic<"PAINT">, remove = fals
 
 	const gradients = paint.data.gradients.map((g) => createGradientFromPaint(g));
 	const filter = (() => {
-		if (!paint.data.shadows) {
+		if (!paint.data.shadows || dropShadowRender.value == 0) {
 			return "";
 		}
 
-		return paint.data.shadows.map((v) => createFilterDropshadow(v)).join(" ");
+		return paint.data.shadows
+			.slice(0, dropShadowRender.value == 2 ? 1 : undefined)
+			.map((v) => createFilterDropshadow(v))
+			.join(" ");
 	})();
 
 	const selector = `.seventv-paint[data-seventv-paint-id="${paint.id}"]`;
diff --git a/src/composable/useLiveQuery.ts b/src/composable/useLiveQuery.ts
index 3c287aa16..14770f4a2 100644
--- a/src/composable/useLiveQuery.ts
+++ b/src/composable/useLiveQuery.ts
@@ -9,34 +9,36 @@ export function useLiveQuery<T>(
 ) {
 	const value = ref<T>();
 
-	if (opt.reactives) {
-		opt.reactives.forEach((r) => watch(r, async () => handleResult(await queryFn()), { deep: true }));
-		watch(queryFn, async () => handleResult(await queryFn()));
-	}
+	let queryStop = () => {};
+	let watchStop = () => {};
+	const stop = () => {
+		queryStop();
+		watchStop();
+	};
 
 	const handleResult = (result: T | undefined) => {
 		if (!result) return;
 		if (typeof opt.count === "number" && opt.count-- <= 0) {
-			sub.unsubscribe();
+			stop();
 		}
 
 		value.value = result;
 		onResult?.(result);
 	};
 
-	const observable = liveQuery(queryFn);
-	const sub = observable.subscribe({
-		next(x) {
-			handleResult(x);
-		},
-	});
-
-	tryOnUnmounted(() => sub.unsubscribe());
+	queryStop = liveQuery(queryFn).subscribe(handleResult).unsubscribe;
 
-	if (opt.until) {
-		opt.until.then(() => sub.unsubscribe());
+	if (opt.reactives) {
+		watchStop = watch(opt.reactives, () => {
+			queryStop();
+			queryStop = liveQuery(queryFn).subscribe(handleResult).unsubscribe;
+		});
 	}
 
+	tryOnUnmounted(stop);
+
+	opt.until?.then(stop);
+
 	return value;
 }
 
diff --git a/src/composable/useSetMutation.ts b/src/composable/useSetMutation.ts
index 00900b9d3..5528232ca 100644
--- a/src/composable/useSetMutation.ts
+++ b/src/composable/useSetMutation.ts
@@ -48,7 +48,8 @@ export function useSetMutation(setID?: string): SetMutation {
 	const canEditIfLoggedIn = computed(() => {
 		if (!actor.user) return false;
 		if (ctx.id == actor.platformUserID) return true;
-		return (ctx.user?.editors ?? []).some((e) => e.id == actor.user?.id);
+		if ((ctx.user?.editors ?? []).some((e) => e.id == actor.user?.id)) return true;
+		return actor.editAnySet;
 	});
 
 	const canEditSet = computed(() => {
diff --git a/src/composable/useSettings.ts b/src/composable/useSettings.ts
index c4c8760c6..747687ef7 100644
--- a/src/composable/useSettings.ts
+++ b/src/composable/useSettings.ts
@@ -209,7 +209,15 @@ export function useSettings() {
 			};
 
 			if (["string", "boolean", "object", "number", "undefined"].includes(typeof raw[node.key])) {
-				raw[node.key] = raw[node.key] ?? node.defaultValue;
+				raw[node.key] = (() => {
+					const v = raw[node.key];
+					if (v === undefined) return node.defaultValue;
+
+					if (v.constructor.name === node.defaultValue?.constructor.name) return v;
+
+					if (typeof node.transform === "function") return node.transform(v);
+					return node.defaultValue ? node.defaultValue : v;
+				})();
 			}
 
 			if (typeof node.effect === "function") {
diff --git a/src/composable/useTooltip.ts b/src/composable/useTooltip.ts
index 47abc5f30..398422532 100644
--- a/src/composable/useTooltip.ts
+++ b/src/composable/useTooltip.ts
@@ -22,8 +22,8 @@ export function useTooltip(content?: string | Component, props?: Record<string,
 		if (!el) return;
 
 		// Set the content, this is necessary to calculate the tooltip's positioning
-		if (content) {
-			tooltip.content = typeof content === "string" ? content : markRaw(content);
+		if (content !== undefined) {
+			tooltip.content = typeof content !== "string" ? markRaw(content) : content === "" ? null : content;
 			tooltip.contentProps = props ?? {};
 		}
 
diff --git a/src/directive/TextPaintDirective.ts b/src/directive/TextPaintDirective.ts
index c08d9524f..0c8da8ba3 100644
--- a/src/directive/TextPaintDirective.ts
+++ b/src/directive/TextPaintDirective.ts
@@ -16,11 +16,26 @@ export const TextPaintDirective = {
 	},
 } as Directive<HTMLElement, string | null>;
 
-export function updateElementStyles(el: HTMLElement, paintID: string | null): void {
-	if (!paintID || (el.hasAttribute(ATTR_SEVENTV_PAINT_ID) && el.getAttribute(ATTR_SEVENTV_PAINT_ID) !== paintID)) {
-		el.style.backgroundImage = "";
-		el.style.filter = "";
-		el.style.color = "";
+type PaintedElement = HTMLElement & {
+	__seventv_backup_style?: { backgroundImage: string; filter: string; color: string };
+};
+export function updateElementStyles(el: PaintedElement, paintID: string | null): void {
+	const hasPaint = el.hasAttribute(ATTR_SEVENTV_PAINT_ID);
+	const newPaint = hasPaint && paintID !== el.getAttribute(ATTR_SEVENTV_PAINT_ID);
+
+	if (!hasPaint) {
+		el.__seventv_backup_style = {
+			backgroundImage: el.style.backgroundImage,
+			filter: el.style.filter,
+			color: el.style.color,
+		};
+	}
+
+	if (hasPaint && newPaint) {
+		const backup = el.__seventv_backup_style;
+		el.style.backgroundImage = backup?.backgroundImage ?? "";
+		el.style.filter = backup?.filter ?? "";
+		el.style.color = backup?.color ?? "";
 
 		el.classList.remove("seventv-painted-content");
 		el.removeAttribute(ATTR_SEVENTV_TEXT);
diff --git a/src/site/App.vue b/src/site/App.vue
index 1c794a01b..f2e102b7f 100644
--- a/src/site/App.vue
+++ b/src/site/App.vue
@@ -22,6 +22,7 @@ import { log } from "@/common/Logger";
 import { db } from "@/db/idb";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { convertEmojis } from "@/composable/chat/useChatEmotes";
+import { useActor } from "@/composable/useActor";
 import { loadEmojiList } from "@/composable/useEmoji";
 import { useFrankerFaceZ } from "@/composable/useFrankerFaceZ";
 import { fillSettings, useConfig, useSettings } from "@/composable/useSettings";
@@ -33,6 +34,7 @@ const YouTubeSite = defineAsyncComponent(() => import("@/site/youtube.com/YouTub
 const KickSite = defineAsyncComponent(() => import("@/site/kick.com/KickSite.vue"));
 
 useChannelContext();
+useActor();
 
 if (import.meta.hot) {
 	import.meta.hot.on("full-reload", () => {
diff --git a/src/site/global/Changelog.vue b/src/site/global/Changelog.vue
index e1dd498cf..6b03c9cdb 100644
--- a/src/site/global/Changelog.vue
+++ b/src/site/global/Changelog.vue
@@ -128,7 +128,7 @@ function updateMediaHref(value: string): string {
 		display: grid;
 		row-gap: 0.5rem;
 		list-style: square;
-		margin: 0.25rem 0.5rem;
+		margin: 0.5rem 1rem;
 	}
 
 	:deep(li) {
diff --git a/src/site/global/Global.vue b/src/site/global/Global.vue
index 5ab1aea92..d0c2a39d5 100644
--- a/src/site/global/Global.vue
+++ b/src/site/global/Global.vue
@@ -1,6 +1,9 @@
 <template>
 	<Tooltip />
 	<FloatContext />
+	<Transition name="settings-menu" appear>
+		<SettingsMenu v-if="settingsMenuCtx.open" />
+	</Transition>
 </template>
 
 <script setup lang="ts">
@@ -9,24 +12,17 @@ import { useConfig, useSettings } from "@/composable/useSettings";
 import useUpdater from "@/composable/useUpdater";
 import { useWorker } from "@/composable/useWorker";
 import FloatContext from "./FloatContext.vue";
+import { dataSettings, globalSettings } from "./GlobalSettings";
 import Tooltip from "./Tooltip.vue";
+import { useSettingsMenu } from "@/app/settings/Settings";
+import SettingsMenu from "@/app/settings/SettingsMenu.vue";
+
+const settingsMenuCtx = useSettingsMenu();
 
 const { register } = useSettings();
-register([
-	{
-		key: "app.version",
-		type: "NONE",
-		label: "App Version",
-		defaultValue: void 0 as never,
-	},
-	{
-		key: "app.7tv.token",
-		type: "NONE",
-		label: "7TV Bearer Token",
-		expires: 0,
-		defaultValue: "",
-	},
-]);
+
+register(dataSettings);
+register(globalSettings);
 
 const updater = useUpdater();
 const version = useConfig("app.version");
diff --git a/src/site/global/GlobalSettings.ts b/src/site/global/GlobalSettings.ts
new file mode 100644
index 000000000..019c69fdd
--- /dev/null
+++ b/src/site/global/GlobalSettings.ts
@@ -0,0 +1,142 @@
+import { declareConfig, useConfig } from "@/composable/useSettings";
+
+export const dataSettings = [
+	declareConfig("app.version", "NONE", {
+		label: "App Version",
+		defaultValue: void 0 as never,
+	}),
+	declareConfig("app.7tv.token", "NONE", {
+		label: "7TV Bearer Token",
+		defaultValue: "",
+		serialize: false,
+	}),
+	declareConfig("ui.emote_menu.favorites", "NONE", {
+		label: "Emote menu favourites",
+		defaultValue: new Set(),
+	}),
+	declareConfig("ui.emote_menu.usage", "NONE", {
+		label: "Emote menu usage",
+		defaultValue: new Map(),
+		transform: (v) => (String(v) !== "[object Map]" ? new Map() : (v as Map<string, number>)),
+		serialize: false,
+	}),
+	declareConfig("ui.emote_menu.collapsed_sets", "NONE", {
+		label: "Emote menu collapsed sets",
+		defaultValue: new Set(),
+		serialize: false,
+	}),
+];
+
+export const globalSettings = [
+	declareConfig("ui.transparent_backgrounds", "TOGGLE", {
+		path: ["Appearance", "Interface"],
+		label: "Use UI transparency",
+		hint: "If checked some backgrounds will be transparent and blurred. This may affect performance",
+		effect(v) {
+			document.documentElement.classList.toggle("seventv-transparent", v);
+			document.body.classList.toggle("seventv-transparent", v);
+		},
+		defaultValue: true,
+	}),
+	declareConfig("chat.alternating_background", "TOGGLE", {
+		label: "settings.chat_alternating_background.label",
+		hint: "settings.chat_alternating_background.hint",
+		path: ["Chat", ""],
+		defaultValue: false,
+		effect(v) {
+			document.documentElement.classList.toggle("seventv-alternating-chat-lines", v);
+		},
+	}),
+	declareConfig<string>("chat.alternating_background_color", "COLOR", {
+		path: ["Chat", "Style"],
+		label: "Alternating Background Color",
+		hint: "Configure the color of alternating background (~6% opacity)",
+		disabledIf: () => !useConfig("chat.alternating_background").value,
+		effect(v) {
+			document.documentElement.style.setProperty("--seventv-chat-alternate-background-color", `${v}0f`);
+		},
+		defaultValue: "#808080",
+	}),
+	declareConfig("general.blur_unlisted_emotes", "TOGGLE", {
+		path: ["General", ""],
+		label: "Hide Unlisted Emotes",
+		hint: "If checked, emotes which have not yet been approved for listing on 7tv.app will be blurred",
+		defaultValue: false,
+	}),
+	declareConfig<number>("chat.emote_margin", "SLIDER", {
+		path: ["Chat", "Style"],
+		label: "Emote Spacing",
+		hint: "Choose the margin around emotes in chat. Negative values lets them overlap and keep the chatlines inline. 0 Makes the emotes not overlap at all",
+		options: {
+			min: -1,
+			max: 1,
+			step: 0.1,
+			unit: "rem",
+		},
+		defaultValue: -0.5,
+		effect(v) {
+			document.documentElement.style.setProperty("--seventv-emote-margin", `${v}rem`);
+		},
+	}),
+	declareConfig<number>("chat.emote_scale", "SLIDER", {
+		path: ["Chat", "Style"],
+		label: "Emote Scale",
+		ffz_key: "chat.emotes.2x",
+		ffz_transform(v: unknown) {
+			return typeof v === "number" && v > 0 ? 2 : 1;
+		},
+		hint: "Change how large emotes should be in chat, as a multiple of their original size.",
+		options: {
+			min: 0.25,
+			max: 3,
+			step: 0.25,
+			unit: "x",
+		},
+		defaultValue: 1,
+	}),
+	declareConfig("ui.emote_menu.default_tab", "DROPDOWN", {
+		path: ["Appearance", "Interface"],
+		label: "Emote Menu: Default Emote Tab",
+		hint: "Select default tab when opening emote menu",
+		options: [
+			["Favorite", "FAVORITE"],
+			["7TV", "7TV"],
+			["FFZ", "FFZ"],
+			["BTTV", "BTTV"],
+			["Platform", "PLATFORM"],
+			["Emoji", "EMOJI"],
+		],
+		defaultValue: "7TV",
+	}),
+	declareConfig<boolean>("ui.emote_menu.most_used", "TOGGLE", {
+		path: ["Appearance", "Interface"],
+		label: "Emote Menu: Most Used Emotes",
+		hint: "Whether or not to display the emotes you type the most in the emote menu (Temporarily disabled due to performance issues)",
+		disabledIf: () => true,
+		defaultValue: true,
+	}),
+	declareConfig<boolean>("vanity.nametag_paints", "TOGGLE", {
+		path: ["Appearance", "Vanity"],
+		label: "Nametag Paints",
+		hint: "Whether or not to display nametag paints",
+		defaultValue: true,
+	}),
+	declareConfig<boolean>("vanity.7tv_Badges", "TOGGLE", {
+		path: ["Appearance", "Vanity"],
+		label: "7TV Badges",
+		hint: "Whether or not to display 7TV Badges",
+		defaultValue: true,
+	}),
+	declareConfig<number>("vanity.paints_drop_shadows", "DROPDOWN", {
+		path: ["Appearance", "Vanity"],
+		label: "Drop shadows on paints",
+		options: [
+			["None", 0],
+			["One", 2],
+			["All", 1],
+		],
+		hint: "Wheather or not to display drop shadows on paints (Requires a refresh)",
+		disabledIf: () => !useConfig("vanity.nametag_paints").value,
+		defaultValue: 1,
+	}),
+];
diff --git a/src/site/global/components/EmoteCard.vue b/src/site/global/components/EmoteCard.vue
index fd24e8f32..d30943b0c 100644
--- a/src/site/global/components/EmoteCard.vue
+++ b/src/site/global/components/EmoteCard.vue
@@ -134,6 +134,16 @@ watchEffect(async () => {
 			}),
 		);
 
+		const { result: emoteArtistResult } = useQuery<userQuery.Result, userQuery.Variables>(
+			userQuery,
+			{
+				id: props.emote.data?.owner?.id ?? "",
+			},
+			() => ({
+				enabled: !!props.emote.data?.owner?.id,
+			}),
+		);
+
 		watch(
 			emoteActorResult,
 			(value) => {
@@ -147,10 +157,24 @@ watchEffect(async () => {
 			{ immediate: true },
 		);
 
+		watch(
+			emoteArtistResult,
+			(value) => {
+				if (!value?.user) return;
+				artist.id = value?.user.id;
+				artist.username = value?.user.username;
+				artist.displayName = value?.user.display_name;
+				artist.avatarURL = value?.user.avatar_url;
+				artist.url = `https://7tv.app/users/${value?.user.id}`;
+			},
+			{ immediate: true },
+		);
+
 		timestamp.value = new Date(props.emote.timestamp ?? 0).toLocaleDateString();
 		emoteLink.value = `//7tv.app/emotes/${props.emote.id}`;
 	} else if (props.emote.provider === "BTTV") emoteLink.value = `//betterttv.com/emotes/${props.emote.id}`;
 	else if (props.emote.provider === "FFZ") emoteLink.value = `//frankerfacez.com/emoticon/${props.emote.id}`;
+	else if (props.emote.provider === "EMOJI") emoteLink.value = "";
 });
 
 watch(
diff --git a/src/site/global/components/FormCheckbox.vue b/src/site/global/components/FormCheckbox.vue
index 219077c61..041e537f6 100644
--- a/src/site/global/components/FormCheckbox.vue
+++ b/src/site/global/components/FormCheckbox.vue
@@ -1,12 +1,13 @@
 <template>
 	<div>
-		<input id="checkbox" :checked="checked" type="checkbox" @change="onInput" />
+		<input id="checkbox" :checked="checked" :disabled="disabled" type="checkbox" @change="onInput" />
 	</div>
 </template>
 
 <script setup lang="ts">
 defineProps<{
 	checked: boolean;
+	disabled?: boolean;
 }>();
 
 const emit = defineEmits<{
diff --git a/src/site/kick.com/KickSite.vue b/src/site/kick.com/KickSite.vue
index 49961ac81..f2b9947f9 100644
--- a/src/site/kick.com/KickSite.vue
+++ b/src/site/kick.com/KickSite.vue
@@ -12,11 +12,12 @@ import { defineAsyncComponent, provide } from "vue";
 import { useStore } from "@/store/main";
 import { SITE_CURRENT_PLATFORM } from "@/common/Constant";
 import { useActor } from "@/composable/useActor";
+import { useCookies } from "@/composable/useCookies";
 import { getModule } from "@/composable/useModule";
 import { useSettings } from "@/composable/useSettings";
 import { useUserAgent } from "@/composable/useUserAgent";
-import { useApp } from "./composable/useApp";
-import { usePinia } from "./composable/usePinia";
+// import { useApp } from ".x/composable/useApp";
+import { useUserdata } from "./composable/useUserdata";
 import { KickModuleID } from "@/types/kick.module";
 
 const ModuleWrapper = defineAsyncComponent(() => import("@/site/global/ModuleWrapper.vue"));
@@ -31,27 +32,14 @@ store.setPlatform("KICK", ["7TV"], []);
 
 document.body.setAttribute("seventv-kick", "true");
 
-const app = useApp();
-const user = usePinia<{
-	user: {
-		id: number;
-		username: string;
-		bio: string;
-		email: string;
-		streamer_channel: {
-			slug: string;
-		};
-		discord?: string;
-		facebook?: string;
-		twitter?: string;
-		youtube?: string;
-		tiktok?: string;
-		instagram?: string;
-	};
-}>(app, "user");
+const cookies = useCookies();
+const auth = cookies.get("XSRF-TOKEN");
+const sessionToken = cookies.get("session_token");
+
+const user = auth ? await useUserdata(auth, sessionToken) : null;
 
 if (user) {
-	const updateIdentity = (data: typeof user.$state.user) => {
+	const updateIdentity = (data: typeof user) => {
 		if (!data || !data.id) return;
 
 		store.setIdentity("KICK", {
@@ -71,10 +59,9 @@ if (user) {
 		actor.setPlatformUserID("KICK", data.id.toString());
 	};
 
-	user.$subscribe(() => {
-		updateIdentity(user.$state.user);
-	});
-	updateIdentity(user.$state.user);
+	//TODO: subscribe for allowing new login
+
+	updateIdentity(user);
 }
 
 provide(SITE_CURRENT_PLATFORM, "KICK");
diff --git a/src/site/kick.com/composable/useApp.ts b/src/site/kick.com/composable/useApp.ts
deleted file mode 100644
index 803f80c0f..000000000
--- a/src/site/kick.com/composable/useApp.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { App, InjectionKey, inject } from "vue";
-
-const KICK_APP_KEY: InjectionKey<App<Element>> = Symbol("KICK_APP_KEY");
-
-export function useApp() {
-	let app = inject(KICK_APP_KEY, null);
-	if (!app) {
-		app = (document.querySelector("#app") as unknown as Record<string, never>)?.__vue_app__ as App<Element>;
-		if (!app) throw new Error("Could not acquire vue app");
-
-		inject(KICK_APP_KEY, app);
-	}
-
-	return app;
-}
diff --git a/src/site/kick.com/composable/usePinia.ts b/src/site/kick.com/composable/usePinia.ts
deleted file mode 100644
index a1189fd56..000000000
--- a/src/site/kick.com/composable/usePinia.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { App } from "vue";
-import { Pinia, StateTree, _StoreWithState } from "pinia";
-
-export function usePinia<T extends StateTree>(app: App<Element>, key: string) {
-	const pinia = app.config.globalProperties.$pinia;
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const stores = (pinia as Pinia & { _s: Map<string, _StoreWithState<"ANY-KICK-STORE", T, unknown, unknown>> })["_s"];
-
-	return stores.get(key) as _StoreWithState<"ANY-KICK-STORE", T, unknown, unknown> | undefined;
-}
diff --git a/src/site/kick.com/composable/useRouter.ts b/src/site/kick.com/composable/useRouter.ts
deleted file mode 100644
index fa34e07f2..000000000
--- a/src/site/kick.com/composable/useRouter.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { App, Ref, reactive } from "vue";
-import type { RouteLocationNormalizedLoaded } from "vue-router";
-import { definePropertyHook } from "@/common/Reflection";
-
-interface KickRouter {
-	currentRoute: RouteLocationNormalizedLoaded | null;
-}
-
-const m = new WeakMap<App<Element>, KickRouter>();
-
-export function useRouter(app: App<Element>) {
-	let router = m.get(app) as KickRouter;
-	if (!router) {
-		const inst = app.config.globalProperties.$router;
-		if (!inst) throw new Error("Could not acquire vue router");
-
-		router = reactive<KickRouter>({
-			currentRoute: null,
-		});
-
-		definePropertyHook(inst.currentRoute as Ref<RouteLocationNormalizedLoaded> & Record<string, never>, "_value", {
-			value(v) {
-				router.currentRoute = v;
-			},
-		});
-
-		m.set(app, router);
-	}
-
-	return router;
-}
diff --git a/src/site/kick.com/composable/useUserdata.ts b/src/site/kick.com/composable/useUserdata.ts
new file mode 100644
index 000000000..b1022e988
--- /dev/null
+++ b/src/site/kick.com/composable/useUserdata.ts
@@ -0,0 +1,28 @@
+export async function useUserdata(
+	auth: string,
+	sessionToken: string | undefined,
+): Promise<{
+	id: number;
+	username: string;
+	bio: string;
+	email: string;
+	streamer_channel: {
+		slug: string;
+	};
+	discord?: string;
+	facebook?: string;
+	twitter?: string;
+	youtube?: string;
+	tiktok?: string;
+	instagram?: string;
+}> {
+	const data = await fetch("https://kick.com/api/v1/user", {
+		headers: {
+			Authorization: "Bearer " + sessionToken,
+			"X-XSRF-TOKEN": auth,
+		},
+		method: "GET",
+	});
+
+	return await data.json();
+}
diff --git a/src/site/kick.com/modules/auth/AuthButton.vue b/src/site/kick.com/modules/auth/AuthButton.vue
index 9d311678c..02afd88dd 100644
--- a/src/site/kick.com/modules/auth/AuthButton.vue
+++ b/src/site/kick.com/modules/auth/AuthButton.vue
@@ -191,15 +191,15 @@ function closePopup(): void {
 }
 
 watchEffect(() => {
-	const navBlock = document.querySelector(".main-navbar");
+	const navBlock = document.getElementsByTagName("nav")[0];
 	if (navBlock) {
-		navBlock.lastElementChild?.insertAdjacentElement("beforebegin", navContainer);
+		navBlock.lastElementChild?.insertAdjacentElement("afterbegin", navContainer);
 	}
 
 	if (props.slug) {
-		const channelInfoBlock = document.querySelector(".channel-info, .stream-info");
+		const channelInfoBlock = document.getElementById("channel-content");
 		if (channelInfoBlock) {
-			channelInfoBlock.insertAdjacentElement("afterend", channelContainer);
+			channelInfoBlock.firstElementChild?.insertAdjacentElement("afterend", channelContainer);
 		}
 	}
 });
diff --git a/src/site/kick.com/modules/auth/AuthModule.vue b/src/site/kick.com/modules/auth/AuthModule.vue
index 531f9b1d2..8e3ddb6f8 100644
--- a/src/site/kick.com/modules/auth/AuthModule.vue
+++ b/src/site/kick.com/modules/auth/AuthModule.vue
@@ -9,8 +9,6 @@ import { useStore } from "@/store/main";
 import { LOCAL_STORAGE_KEYS } from "@/common/Constant";
 import { useCookies } from "@/composable/useCookies";
 import { declareModule } from "@/composable/useModule";
-import { useApp } from "@/site/kick.com/composable/useApp";
-import { useRouter } from "@/site/kick.com/composable/useRouter";
 import { setBioCode } from "./Auth";
 import AuthButton from "./AuthButton.vue";
 
@@ -19,33 +17,45 @@ const { markAsReady } = declareModule<"KICK">("auth", {
 	depends_on: [],
 });
 
-const app = useApp();
-const router = useRouter(app);
 const cookies = useCookies();
 const store = useStore();
 
 const currentSlug = ref("");
 const currentSlugDbc = debouncedRef(currentSlug, 1e3);
 
-watch(
-	() => router.currentRoute,
-	(v) => {
-		if (!v || v.name !== "channel") return;
+function updateSlug() {
+	const path = location.pathname.split("/");
+	if (path[1] == "popout") {
+		currentSlug.value = path[2];
+	} else {
+		currentSlug.value = path[1];
+	}
+}
+
+const observer = new MutationObserver((mutationList) => {
+	for (const mutation of mutationList) {
+		for (let i = 0; i < mutation.addedNodes.length; i++) {
+			if (mutation.addedNodes.item(i)?.nodeName == "TITLE") {
+				updateSlug();
+				break;
+			}
+		}
+	}
+});
 
-		currentSlug.value = typeof v.params.channel === "string" ? v.params.channel ?? "" : "";
-	},
-	{ immediate: true },
-);
+const head = document.getElementsByTagName("head")[0];
+observer.observe(head, { childList: true, subtree: true });
 
 const appToken = useLocalStorage(LOCAL_STORAGE_KEYS.APP_TOKEN, "");
+const urlParams = new URLSearchParams(window.location.search);
 
-if (router.currentRoute && router.currentRoute.query.seventv_token) {
+if (urlParams.get("seventv_token")) {
 	watch(
 		() => store.identity,
 		(identity) => {
-			if (!router.currentRoute || !router.currentRoute.query.seventv_token) return;
+			if (!urlParams.get("seventv_token")) return;
 
-			appToken.value = router.currentRoute.query.seventv_token.toString();
+			appToken.value = urlParams.get("seventv_token");
 
 			setBioCode(identity as KickIdentity, "", cookies).then(() => {
 				setTimeout(() => {
@@ -57,5 +67,6 @@ if (router.currentRoute && router.currentRoute.query.seventv_token) {
 	);
 }
 
+updateSlug();
 markAsReady();
 </script>
diff --git a/src/site/kick.com/modules/chat-input/ChatInput.vue b/src/site/kick.com/modules/chat-input/ChatInput.vue
new file mode 100644
index 000000000..0d970ca21
--- /dev/null
+++ b/src/site/kick.com/modules/chat-input/ChatInput.vue
@@ -0,0 +1,456 @@
+<template>
+	<template v-if="colon.active && colon.matches.length">
+		<UiFloating
+			:anchor="anchorEl"
+			:middleware="[shift({ crossAxis: true, mainAxis: true }), offset({ crossAxis: 0 })]"
+			placement="top-start"
+		>
+			<div ref="colonList" class="seventv-autocomplete-list">
+				<div
+					v-for="(match, i) in colon.matches"
+					:key="(match.item?.provider ?? 'EMOJI') + (match.item?.id ?? match.token)"
+					class="seventv-autocomplete-item"
+					:selected="i === colon.select"
+					@click="insertAtAnchor(match.token)"
+				>
+					<template v-if="match.item">
+						<Emote :emote="match.item" />
+						<span class="seventv-autocomplete-item-name">{{ match.item.name }}</span>
+						<span
+							v-if="
+								match.item.provider &&
+								match.item.provider !== 'EMOJI' &&
+								match.item.provider !== 'PLATFORM'
+							"
+							class="seventv-autocomplete-item-provider"
+							>({{ match.item.provider }})</span
+						>
+					</template>
+					<template v-else>
+						<span class="seventv-autocomplete-item-name">{{ match.token }}</span>
+					</template>
+				</div>
+			</div>
+		</UiFloating>
+	</template>
+</template>
+
+<script setup lang="ts">
+import { onUnmounted, reactive, ref, toRaw, toRef, watch } from "vue";
+import { useMagicKeys } from "@vueuse/core";
+import { useStore } from "@/store/main";
+import { TabToken, getSearchRange } from "@/common/Input";
+import { useChannelContext } from "@/composable/channel/useChannelContext";
+import { useChatEmotes } from "@/composable/chat/useChatEmotes";
+import { useCosmetics } from "@/composable/useCosmetics";
+import { useWorker } from "@/composable/useWorker";
+import Emote from "@/app/chat/Emote.vue";
+import UiFloating from "@/ui/UiFloating.vue";
+import { offset, shift } from "@floating-ui/dom";
+
+const props = defineProps<{
+	anchorEl: HTMLElement;
+	editor: Kick.Lexical.LexicalEditor;
+}>();
+
+const ctx = useChannelContext();
+const { sendMessage: sendWorkerMessage } = useWorker();
+
+const { identity } = useStore();
+const emotes = useChatEmotes(ctx);
+const cosmetics = useCosmetics(identity?.id ?? "");
+
+const colonList = ref<HTMLDivElement | null>(null);
+const editorRef = toRef(props, "editor");
+
+const tabState = ref<
+	| {
+			index: number;
+			matches: TabToken[];
+			currentMatch: TabToken;
+			expectedOffset: number;
+			expectedWord: string;
+	  }
+	| undefined
+>();
+
+const colon = reactive({
+	active: false,
+	cursor: "",
+	matches: [] as TabToken[],
+	select: 0,
+});
+
+const history = reactive({
+	index: -1,
+	messages: [] as Kick.Lexical.EditorState[],
+	previous: undefined as Kick.Lexical.EditorState | undefined,
+});
+
+const awaitingUpdate = ref(false);
+
+const TextNode = props.editor._nodes.get("text")?.klass as typeof Kick.Lexical.TextNode;
+
+const listeners = new Set<() => void>();
+
+function onSendMessage() {
+	sendWorkerMessage("CHANNEL_ACTIVE_CHATTER", {
+		channel: toRaw(ctx),
+	});
+
+	history.messages.unshift(props.editor.getEditorState());
+
+	resetState();
+}
+
+function findCommandListener(predicate: (listener: Kick.Lexical.CommandListener<unknown>) => boolean) {
+	const editor = toRaw(editorRef.value);
+
+	return Array.from(editor._commands.entries()).find(([, entries]) =>
+		entries.find((listeners) => Array.from(listeners).find(predicate)),
+	);
+}
+
+const { shift: isShiftPressed } = useMagicKeys();
+
+function onKeyDown(ev: KeyboardEvent) {
+	const editor = toRaw(editorRef.value);
+	const state = editor.getEditorState();
+	const selection = state?._selection as Kick.Lexical.RangeSelection | undefined;
+	const root = state._nodeMap.get("root") as Kick.Lexical.RootNode;
+
+	if (!state || !selection) return;
+
+	editor.update(() => {
+		const [node] = selection.getNodes() ?? [];
+
+		switch (ev.key) {
+			case "Tab":
+			case "Enter":
+				ev.preventDefault();
+
+				if (colon.active) {
+					ev.stopPropagation();
+					insertAtAnchor(colon.matches[colon.select].token);
+					colon.active = false;
+				} else if (ev.key === "Tab") {
+					handleTab(node, selection, isShiftPressed.value);
+				}
+				break;
+			case "ArrowUp":
+			case "ArrowDown": {
+				const direction = ev.key === "ArrowUp" ? "up" : "down";
+
+				if (colon.active) {
+					ev.preventDefault();
+
+					if (direction === "up") {
+						if (colon.select === 0) colon.select = colon.matches.length;
+						colon.select = Math.max(0, colon.select - 1);
+					} else {
+						if (colon.select === colon.matches.length - 1) colon.select = 0;
+						else colon.select = Math.min(colon.matches.length - 1, colon.select + 1);
+					}
+
+					const selectedItem = colonList.value?.children.item(colon.select);
+					selectedItem?.scrollIntoView({
+						block: "nearest",
+						inline: "nearest",
+					});
+				} else {
+					const content = root.getTextContent();
+
+					const index = direction === "up" ? history.index + 1 : history.index - 1;
+					if (index < -1 || index > history.messages.length) {
+						return;
+					}
+
+					if (!history.previous) {
+						history.previous = state;
+					}
+
+					const historyState = index < 0 ? toRaw(history.previous) : history.messages[index];
+					if (!historyState) {
+						return;
+					}
+
+					awaitingUpdate.value = true;
+
+					if (direction === "up" && selection.focus.offset > 1) return;
+					else if (direction === "down" && selection.focus.offset < content.length) return;
+
+					editor.setEditorState(historyState);
+					history.index = index;
+					ev.preventDefault();
+				}
+
+				break;
+			}
+			case "Escape":
+				colon.active = false;
+				break;
+			default:
+				history.index = -1;
+				break;
+		}
+	});
+}
+
+function handleInputChange(): void {
+	const editor = toRaw(editorRef.value);
+
+	const state = editor.getEditorState();
+	const selection = state._selection as Kick.Lexical.RangeSelection;
+	const [node] = selection.getNodes();
+
+	const anchorOffset = selection.anchor.offset;
+
+	const text = node.getTextContent();
+	const [wordStart, wordEnd] = getSearchRange(text, anchorOffset);
+	const currentWord = text.substring(wordStart, wordEnd);
+
+	const lastColonAt = currentWord.lastIndexOf(":");
+
+	// no space since last colon
+	if (lastColonAt !== 0 || currentWord.substring(lastColonAt).indexOf(" ") !== -1) {
+		colon.active = false;
+	} else {
+		colon.active = true;
+	}
+
+	if (colon.active) {
+		const textAfterColon = currentWord.substring(currentWord.lastIndexOf(":") + 1) ?? "";
+		colon.cursor = textAfterColon;
+
+		colon.matches = [
+			...Object.values(emotes.active),
+			...Object.values(cosmetics.emotes),
+			...Object.values(emotes.byProvider("PLATFORM")).reduce<SevenTV.ActiveEmote[]>(
+				(accum, set) => [...accum, ...set.emotes],
+				[],
+			),
+		]
+			.filter((e) => e.name.toLowerCase().includes(textAfterColon.toLowerCase()))
+			.sort((a, b) => a.name.length - b.name.length)
+			.slice(0, 25)
+			.map((e) => ({
+				token: e.unicode || e.name,
+				priority: e.name.length,
+				item: e,
+			}));
+
+		if (colon.matches.length > 0) awaitingUpdate.value = true;
+
+		if (colon.select > colon.matches.length - 1) {
+			colon.select = Math.max(0, colon.matches.length - 1);
+		}
+	}
+}
+
+function insertAtAnchor(value: string): void {
+	const editor = toRaw(editorRef.value);
+
+	editor.focus(() => {
+		editor.update(() => {
+			const state = editor.getEditorState();
+			const selection = state._selection as Kick.Lexical.RangeSelection;
+			const anchor = selection.anchor;
+
+			const anchorOffset = anchor.offset;
+			const node = anchor.getNode();
+			const text = node.getTextContent();
+
+			if (!(node instanceof TextNode)) return;
+
+			if (node instanceof TextNode) {
+				const endIndex = text.substring(0, anchorOffset).lastIndexOf(" ", anchorOffset) + 1;
+
+				node.spliceText(endIndex, Math.abs(anchorOffset - endIndex), value + " ", true);
+			}
+		});
+	});
+}
+
+function handleTab(node: Kick.Lexical.LexicalNode, selection: Kick.Lexical.RangeSelection, isBackwards = false): void {
+	const editor = toRaw(editorRef.value);
+	const anchorOffset = selection.anchor.offset;
+
+	const text = node.getTextContent();
+	const [wordStart, wordEnd] = getSearchRange(text, anchorOffset);
+	const currentWord = text.substring(wordStart, wordEnd);
+
+	if (anchorOffset === wordStart || currentWord.trim().length === 0) {
+		tabState.value = undefined;
+		return;
+	}
+
+	const state = tabState.value;
+
+	let match: TabToken | undefined;
+	let matchIndex = 0;
+	let matches: TabToken[];
+
+	if (!state || state.expectedOffset !== anchorOffset || state.expectedWord !== currentWord) {
+		const searchWord = currentWord.endsWith(" ") ? currentWord.slice(0, -1) : currentWord;
+		matches = [
+			...Object.values(emotes.active),
+			...Object.values(cosmetics.emotes),
+			...Object.values(emotes.byProvider("PLATFORM")).reduce<SevenTV.ActiveEmote[]>(
+				(accum, set) => [...accum, ...set.emotes],
+				[],
+			),
+		]
+			.filter((ae) => ae.name.toLowerCase().startsWith(searchWord.toLowerCase()) && ae.provider !== "EMOJI")
+			.map((e) => ({
+				token: e.unicode || e.name,
+				priority: e.name.length,
+				item: e,
+			}));
+		matches.sort((a, b) => a.token.localeCompare(b.token));
+		match = matches[matchIndex];
+		if (matches.length === 0) return;
+	} else {
+		matches = state.matches;
+		matchIndex = isBackwards ? state.index - 1 : state.index + 1;
+		matchIndex %= matches.length;
+		if (isBackwards && matchIndex < 0) matchIndex = matches.length - 1;
+		match = matches[matchIndex];
+	}
+
+	if (match) {
+		awaitingUpdate.value = true;
+
+		editor.focus(() => {
+			editor.update(() => {
+				const anchor = selection.anchor;
+				const node = anchor.getNode();
+
+				if (!(node instanceof TextNode)) return;
+
+				const newText = match!.token + " ";
+				const newOffset = wordStart + newText.length;
+				node.spliceText(wordStart, wordEnd - wordStart, newText, true);
+
+				tabState.value = {
+					index: matchIndex,
+					matches: matches,
+					currentMatch: match!,
+					expectedOffset: newOffset,
+					expectedWord: newText,
+				};
+			});
+		});
+		editor.blur();
+	} else {
+		tabState.value = undefined;
+	}
+}
+
+function resetState() {
+	colon.matches = [];
+	colon.select = 0;
+	colon.active = false;
+	colon.cursor = "";
+
+	history.index = -1;
+	history.previous = undefined;
+}
+
+watch(
+	editorRef,
+	(editor) => {
+		const removeTextNodeTransform = editor.registerNodeTransform(TextNode, handleInputChange);
+		listeners.add(removeTextNodeTransform);
+
+		const removeTextContentListener = editor.registerTextContentListener(() => {
+			if (!awaitingUpdate.value) resetState();
+			awaitingUpdate.value = false;
+		});
+		listeners.add(removeTextContentListener);
+
+		const keyEnterListener = findCommandListener((listener) =>
+			["preventDefault", "dispatchCommand", "shiftKey"].every((raw) => listener.toString().includes(raw)),
+		);
+
+		if (keyEnterListener) {
+			const [KEY_ENTER_COMMAND] = keyEnterListener;
+
+			const removeCommand = editor.registerCommand(
+				KEY_ENTER_COMMAND,
+				() => {
+					onSendMessage();
+					return false;
+				},
+				4, // CommandListenerPriority.COMMAND_PRIORITY_CRITICAL
+			);
+
+			listeners.add(removeCommand);
+		}
+
+		const removeRootListener = editor.registerRootListener((rootEl, prevRootEl) => {
+			prevRootEl?.removeEventListener("keydown", onKeyDown, { capture: true });
+			rootEl?.addEventListener("keydown", onKeyDown, { capture: true });
+		});
+		listeners.add(removeRootListener);
+
+		// Delete the emote suggestion transformer to avoid native emote suggestions
+		const textTransforms = editor._nodes.get("text")?.transforms ?? new Set();
+		const emoteSuggestionTransformer = [...textTransforms].find((transformer) =>
+			["chat_emote_suggestion_list"].every((text) => transformer.toString().includes(text)),
+		);
+
+		if (emoteSuggestionTransformer) {
+			textTransforms.delete(emoteSuggestionTransformer);
+		}
+	},
+	{ immediate: true },
+);
+
+onUnmounted(() => {
+	for (const listener of listeners) {
+		listener();
+	}
+
+	listeners.clear();
+});
+</script>
+
+<style lang="scss" scoped>
+.seventv-autocomplete-list {
+	display: grid;
+	background-color: rgb(23, 28, 30);
+	border: 1px solid rgba(168, 177, 184, 13.3%);
+	backdrop-filter: blur(2rem);
+	border-radius: 0.25rem;
+	padding: 0.5rem;
+	max-height: 16em;
+	max-width: 18.3em;
+	overflow: auto;
+	margin-bottom: 0.5rem;
+}
+
+.seventv-autocomplete-item {
+	display: grid;
+	grid-template-columns: 4rem 1fr 1fr;
+	align-items: center;
+	align-content: center;
+	row-gap: 1em;
+	column-gap: 0.5em;
+	padding: 0.5em 0;
+	border-radius: 0.125rem;
+	padding-right: 0.5em;
+
+	&:hover {
+		cursor: pointer;
+		background-color: rgba(255, 255, 255, 10%);
+	}
+
+	&[selected="true"] {
+		background-color: rgba(255, 255, 255, 5%);
+	}
+}
+
+.seventv-autocomplete-item-provider {
+	color: var(--seventv-primary);
+}
+</style>
diff --git a/src/site/kick.com/modules/chat-input/ChatInputModule.vue b/src/site/kick.com/modules/chat-input/ChatInputModule.vue
new file mode 100644
index 000000000..2977fb71d
--- /dev/null
+++ b/src/site/kick.com/modules/chat-input/ChatInputModule.vue
@@ -0,0 +1,97 @@
+<template>
+	<template v-if="inputContainer && editorRef">
+		<ChatInput :anchor-el="inputContainer" :editor="editorRef" />
+	</template>
+</template>
+
+<script setup lang="ts">
+import { ref, toRaw, watch } from "vue";
+import { useMutationObserver } from "@vueuse/core";
+import { declareModule } from "@/composable/useModule";
+import ChatInput from "@/site/kick.com/modules/chat-input/ChatInput.vue";
+
+const { markAsReady } = declareModule<"KICK">("chat-input", {
+	name: "Chat Input",
+	depends_on: [],
+});
+
+const editorRef = ref<Kick.Lexical.LexicalEditor | null>(null);
+
+const mainContainer = document.querySelector<HTMLDivElement>("div[data-chat] > div:has(div > main)");
+
+const chatContainer = ref<HTMLDivElement | null>(document.querySelector<HTMLDivElement>("#channel-chatroom") ?? null);
+const inputContainer = ref<HTMLDivElement | null>(null);
+
+useMutationObserver(
+	mainContainer,
+	() => {
+		chatContainer.value = document.querySelector<HTMLDivElement>("#channel-chatroom") ?? null;
+	},
+	{ childList: true },
+);
+
+watch(
+	chatContainer,
+	(container) => {
+		const wrapper = container?.querySelector<HTMLDivElement>("#chat-input-wrapper") ?? null;
+		inputContainer.value = wrapper;
+
+		if (!wrapper) {
+			editorRef.value = null;
+		}
+
+		if (!container) return;
+
+		const input = wrapper?.querySelector<HTMLDivElement>(".editor-input");
+		if (!input) return;
+
+		if (!("__lexicalEditor" in input)) return;
+
+		editorRef.value = input.__lexicalEditor as Kick.Lexical.LexicalEditor;
+	},
+	{ immediate: true },
+);
+
+function appendText(text: string) {
+	const editor = toRaw(editorRef.value);
+	if (!editor) return;
+
+	editor.focus(() => {
+		editor.update(() => {
+			const state = editor.getEditorState();
+			const root = state._nodeMap.get("root") as Kick.Lexical.RootNode;
+
+			const TextNode = editor._nodes.get("text")?.klass as typeof Kick.Lexical.TextNode;
+			const ParagraphNode = editor._nodes.get("paragraph")?.klass as typeof Kick.Lexical.ParagraphNode;
+
+			const lastChild = root.getLastChild();
+			const newNode = new TextNode(text);
+
+			if (lastChild instanceof ParagraphNode) {
+				const content = lastChild.getTextContent();
+				lastChild.append(newNode);
+
+				if (content.length !== 0 && !content.endsWith(" ")) {
+					newNode.insertBefore(new TextNode(" "));
+				}
+
+				newNode.insertAfter(new TextNode(" "));
+				lastChild.selectEnd();
+			} else {
+				const paragraph = new ParagraphNode();
+				paragraph.append(newNode);
+				paragraph.selectEnd();
+				root.append(paragraph);
+			}
+		});
+	});
+	editor.blur();
+}
+
+defineExpose({
+	appendText,
+	container: inputContainer,
+});
+
+markAsReady();
+</script>
diff --git a/src/site/kick.com/modules/chat/ChatAutocomplete.vue b/src/site/kick.com/modules/chat/ChatAutocomplete.vue
deleted file mode 100644
index 3f2f4832b..000000000
--- a/src/site/kick.com/modules/chat/ChatAutocomplete.vue
+++ /dev/null
@@ -1,328 +0,0 @@
-<template>
-	<template v-if="colon.active && footerEl">
-		<UiFloating
-			:anchor="footerEl"
-			:middleware="[shift({ crossAxis: true, mainAxis: true }), offset({ crossAxis: 16 })]"
-			placement="top-start"
-		>
-			<div ref="colonList" class="seventv-autocomplete-list">
-				<div
-					v-for="(match, i) in colon.matches"
-					:key="i"
-					class="seventv-autocomplete-item"
-					:selected="i === colon.select"
-					@click="insertAtEnd(match.token)"
-				>
-					<template v-if="match.item">
-						<Emote :emote="match.item" :size="24" />
-						<span class="seventv-autocomplete-item-name">{{ match.item.name }}</span>
-					</template>
-					<template v-else>
-						<span class="seventv-autocomplete-item-name">{{ match.token }}</span>
-					</template>
-				</div>
-			</div>
-		</UiFloating>
-	</template>
-</template>
-
-<script setup lang="ts">
-import { inject, reactive, ref, toRef, watch, watchEffect } from "vue";
-import { useEventListener, useMagicKeys, useMutationObserver } from "@vueuse/core";
-import { useStore } from "@/store/main";
-import { useChannelContext } from "@/composable/channel/useChannelContext";
-import { useChatEmotes } from "@/composable/chat/useChatEmotes";
-import { useCosmetics } from "@/composable/useCosmetics";
-import { KICK_CHANNEL_KEY } from "@/site/kick.com";
-import Emote from "@/app/chat/Emote.vue";
-import UiFloating from "@/ui/UiFloating.vue";
-import { offset, shift } from "@floating-ui/dom";
-
-export interface TabToken {
-	token: string;
-	priority: number;
-	item?: SevenTV.ActiveEmote;
-}
-
-const info = inject(KICK_CHANNEL_KEY);
-if (!info) throw new Error("Could not retrieve channel info");
-
-const { identity } = useStore();
-const ctx = useChannelContext();
-const emotes = useChatEmotes(ctx);
-const cosmetics = useCosmetics(identity?.id ?? "");
-
-const currentMessage = toRef(info, "currentMessage");
-const inputEl = ref<HTMLDivElement | null>(null);
-const footerEl = ref<HTMLDivElement | null>(null);
-const colonList = ref<HTMLDivElement | null>(null);
-
-const colon = reactive({
-	active: false,
-	cursor: "",
-	matches: [] as TabToken[],
-	select: 0,
-});
-
-const history = reactive({
-	index: 0,
-	messages: [] as string[],
-});
-
-function handleInputChange(): void {
-	if (!inputEl.value || typeof inputEl.value.textContent !== "string") return;
-
-	const lastColonAt = inputEl.value.textContent.lastIndexOf(":");
-
-	// no space since last colon
-	if (lastColonAt === -1 || inputEl.value.textContent.substring(lastColonAt).indexOf(" ") !== -1) {
-		colon.active = false;
-	} else {
-		colon.active = true;
-	}
-
-	if (colon.active) {
-		// get the current text typed after the colon
-		const text = inputEl.value.textContent?.substring(inputEl.value.textContent.lastIndexOf(":") + 1) ?? "";
-		colon.cursor = text;
-
-		colon.matches = [...Object.values(emotes.active), ...Object.values(cosmetics.emotes)]
-			.filter((e) => e.name.toLowerCase().includes(text.toLowerCase()))
-			.sort((a, b) => a.name.length - b.name.length)
-			.slice(0, 25)
-			.map((e) => ({
-				token: e.unicode || e.name,
-				priority: e.name.length,
-				item: e,
-			}));
-
-		if (colon.select > colon.matches.length - 1) {
-			colon.select = colon.matches.length - 1;
-		}
-	}
-}
-
-function insertAtEnd(value: string): void {
-	if (!inputEl.value || typeof inputEl.value.textContent !== "string") return;
-
-	// remove colon-complete cursor if it exists
-	const lastColonAt = inputEl.value.textContent.lastIndexOf(":");
-	if (lastColonAt !== -1) {
-		inputEl.value.textContent = inputEl.value.textContent.substring(0, lastColonAt - 1);
-	}
-
-	inputEl.value.textContent +=
-		inputEl.value.textContent.charAt(value.length - 1) === " " ? value + " " : ` ${value} `;
-	if (info) info.currentMessage = inputEl.value.textContent;
-
-	const range = document.createRange();
-	const sel = window.getSelection();
-	if (!sel) return;
-
-	range.selectNodeContents(inputEl.value);
-	range.collapse(false); // Move cursor to the end
-	sel.removeAllRanges();
-	sel.addRange(range);
-
-	colon.active = false;
-}
-
-const tab = reactive({
-	matches: [] as SevenTV.ActiveEmote[],
-	index: -1,
-	cursorLocation: -1,
-	previousText: "",
-});
-
-function handleTab(n: Text, sel: Selection, back = false): void {
-	const { anchorOffset, focusOffset } = sel;
-
-	const start = Math.min(anchorOffset, focusOffset);
-	const end = Math.max(anchorOffset, focusOffset);
-
-	const text = n.textContent ?? "";
-	const tokenStart = text.substring(0, focusOffset).lastIndexOf(" ", focusOffset);
-
-	if (sel.anchorOffset != tab.cursorLocation || text !== tab.previousText) {
-		tab.matches = [];
-		tab.index = -1;
-		tab.cursorLocation = sel.anchorOffset;
-	}
-
-	const searchWord = text.substring(tokenStart + 1, start);
-	if (tab.matches.length === 0) {
-		tab.matches = [...Object.values(emotes.active), ...Object.values(cosmetics.emotes)].filter(
-			(ae) => ae.name.toLowerCase().startsWith(searchWord.toLowerCase()) && ae.provider !== "EMOJI",
-		);
-		if (tab.matches.length === 0 || tab.matches[0].provider === "EMOJI") return;
-	}
-	tab.matches.sort((a, b) => a.name.localeCompare(b.name));
-
-	tab.index = (back ? tab.index - 1 : tab.index + 1) % tab.matches.length;
-	if (tab.index < 0) tab.index = tab.matches.length - 1;
-
-	const selectedToken = tab.matches[tab.index];
-	const spaceAtEnd = end === n.length;
-	const textNode = document.createTextNode(`${selectedToken.name}${spaceAtEnd ? "" : " "}`);
-	tab.previousText = textNode.textContent ?? "";
-
-	const range = document.createRange();
-	range.setStart(n, start - searchWord.length);
-	range.setEnd(n, end);
-	range.deleteContents();
-	range.insertNode(textNode);
-
-	sel.collapse(textNode, selectedToken.name.length + (spaceAtEnd ? 0 : 1));
-
-	tab.cursorLocation = sel.focusOffset;
-}
-
-// add message to history using unshift
-function handleMessageSend(text: string) {
-	if (!text) return;
-
-	if (history.messages[0] !== text) {
-		history.messages.unshift(text);
-	}
-
-	history.index = 0;
-}
-
-watch(currentMessage, handleInputChange);
-
-const { shift: isShiftPressed } = useMagicKeys();
-useEventListener(
-	inputEl,
-	"keydown",
-	(ev: KeyboardEvent) => {
-		const sel = document.getSelection();
-		if (!sel) return;
-
-		const n = sel.focusNode as Text | null;
-
-		switch (ev.key) {
-			case "Tab":
-			case "Enter":
-				if (ev.key === "Tab" && n && n.nodeName === "#text") {
-					ev.preventDefault();
-					handleTab(n, sel, isShiftPressed.value);
-				}
-
-				if (!colon.active) break;
-
-				ev.stopPropagation();
-				insertAtEnd(colon.matches[colon.select].token);
-				colon.active = false;
-				break;
-			case "ArrowUp":
-			case "ArrowDown": {
-				const direction = ev.key === "ArrowUp" ? "up" : "down";
-
-				if (colon.active) {
-					ev.preventDefault();
-
-					if (direction === "up") {
-						colon.select = Math.max(0, colon.select - 1);
-					} else {
-						colon.select = Math.min(colon.matches.length - 1, colon.select + 1);
-					}
-
-					const selectedItem = colonList.value?.children.item(colon.select);
-					if (selectedItem) {
-						selectedItem.scrollIntoView({
-							block: "nearest",
-							inline: "nearest",
-						});
-					}
-				} else if (inputEl.value) {
-					ev.preventDefault();
-
-					if (direction === "up") {
-						history.index = inputEl.value.textContent?.length
-							? Math.min(history.messages.length - 1, history.index + 1)
-							: 0;
-					} else {
-						history.index = Math.max(0, history.index - 1);
-					}
-
-					inputEl.value.textContent = history.messages[history.index];
-				}
-
-				break;
-			}
-			default:
-				history.index = 0;
-				break;
-		}
-	},
-	{
-		capture: true,
-	},
-);
-
-watchEffect(() => {
-	inputEl.value = (document.getElementById("message-input") as HTMLDivElement) ?? null;
-	footerEl.value = (document.getElementById("chatroom-footer") as HTMLDivElement) ?? null;
-});
-
-useMutationObserver(
-	inputEl.value,
-	(records) => {
-		for (const rec of records) {
-			if (!(rec.target instanceof HTMLElement)) continue;
-			if (rec.type !== "attributes" || rec.attributeName !== "contenteditable") continue;
-
-			const isEditable = rec.target.getAttribute("contenteditable") === "true";
-			if (!isEditable) {
-				rec.target.setAttribute("contenteditable", "true");
-				rec.target.focus();
-			}
-		}
-	},
-	{
-		attributeFilter: ["contenteditable"],
-		attributes: true,
-	},
-);
-
-defineExpose({
-	insertAtEnd,
-	handleMessageSend,
-});
-</script>
-
-<style lang="scss" scoped>
-.seventv-autocomplete-list {
-	display: grid;
-	background-color: var(--seventv-background-transparent-1);
-	backdrop-filter: blur(2rem);
-	border-radius: 0.25rem;
-	padding: 0.5rem;
-	max-height: 16em;
-	overflow: auto;
-
-	// add border between each item
-	& > * + * {
-		border-top: 1px solid var(--seventv-input-border);
-	}
-}
-
-.seventv-autocomplete-item {
-	display: grid;
-	grid-template-columns: 4rem 1fr;
-	align-items: center;
-	align-content: center;
-	row-gap: 1em;
-	column-gap: 0.5em;
-	padding: 0.5em 0;
-
-	&:hover {
-		cursor: pointer;
-		background-color: var(--seventv-background-transparent-2);
-	}
-
-	&[selected="true"] {
-		outline: 2px solid var(--seventv-primary);
-	}
-}
-</style>
diff --git a/src/site/kick.com/modules/chat/ChatController.vue b/src/site/kick.com/modules/chat/ChatController.vue
index d63a00bdd..e21a259b5 100644
--- a/src/site/kick.com/modules/chat/ChatController.vue
+++ b/src/site/kick.com/modules/chat/ChatController.vue
@@ -1,70 +1,35 @@
 <template>
 	<template v-if="shallowList">
 		<ChatObserver :list-element="shallowList" />
-		<ChatAutocomplete ref="autocomplete" />
 	</template>
 
 	<ChatData />
-	<ChatEmoteMenu @pick-emote="(ae) => insertToInput(ae.provider === 'EMOJI' ? ae.unicode ?? ae.name : ae.name)" />
 </template>
 
 <script setup lang="ts">
-import { ref, toRaw, watchEffect } from "vue";
+import { ref, watchEffect } from "vue";
 import { ObserverPromise } from "@/common/Async";
-import { log } from "@/common/Logger";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
-import { useWorker } from "@/composable/useWorker";
-import ChatAutocomplete from "./ChatAutocomplete.vue";
-import ChatEmoteMenu from "./ChatEmoteMenu.vue";
 import ChatObserver from "./ChatObserver.vue";
 import ChatData from "@/app/chat/ChatData.vue";
 
 const props = defineProps<{
+	channelId: string;
 	slug: string;
 }>();
 
-defineExpose({
-	onMessageSend,
-});
-
-function onMessageSend(text: string) {
-	sendWorkerMessage("CHANNEL_ACTIVE_CHATTER", {
-		channel: toRaw(ctx),
-	});
-
-	autocomplete.value?.handleMessageSend(text);
-}
-
-// need to fetch the channel because we can only get the chatroom ID from this which isn't equal to the user ID
-const resp = await fetch(`https://kick.com/api/v2/channels/${props.slug}`).catch((err) => {
-	log.error("failed to fetch channel data", err);
-});
-if (!resp) throw new Error("failed to fetch channel data");
-
-const { user_id: id } = await resp.json();
-if (!id) throw new Error("failed to get channel ID");
-
-const ctx = useChannelContext(id.toString(), true);
-const { sendMessage: sendWorkerMessage } = useWorker();
+const ctx = useChannelContext(props.channelId, true);
 
 // The list
 const chatList = ref<HTMLDivElement | null>(null);
 const shallowList = ref<HTMLDivElement | null>(null);
 
-const autocomplete = ref<InstanceType<typeof ChatAutocomplete> | null>(null);
-
-function insertToInput(value: string): void {
-	if (!autocomplete.value) return;
-
-	autocomplete.value.insertAtEnd(value);
-}
-
 let observer: ObserverPromise<HTMLDivElement> | null = null;
 
 watchEffect(async () => {
 	// Update channel context
 	const ok = ctx.setCurrentChannel({
-		id: id.toString(),
+		id: props.channelId,
 		username: props.slug,
 		displayName: props.slug,
 		active: true,
@@ -76,14 +41,14 @@ watchEffect(async () => {
 
 	// Find chatroom element
 	// "chatroom-top" is the heading
-	const chatroomTop = document.getElementById("chatroom-top");
-	if (!chatroomTop || !chatroomTop.nextElementSibling) return;
+	const chatroomTop = document.getElementById("chatroom-messages");
+	if (!chatroomTop) return;
 
-	chatList.value = chatroomTop.nextElementSibling as HTMLDivElement;
+	chatList.value = chatroomTop.firstElementChild as HTMLDivElement;
 
 	// Create observer
 	if (observer) observer.disconnect();
-	if (!chatroomTop.nextElementSibling.firstElementChild) {
+	if (!chatroomTop.firstElementChild) {
 		observer = new ObserverPromise<HTMLDivElement>(
 			(records, emit) => {
 				for (const rec of records) {
@@ -93,7 +58,7 @@ watchEffect(async () => {
 					emit(rec.target.firstElementChild as HTMLDivElement);
 				}
 			},
-			chatroomTop.nextElementSibling,
+			chatroomTop,
 			{
 				childList: true,
 				subtree: true,
@@ -103,7 +68,7 @@ watchEffect(async () => {
 		const el = await observer;
 		shallowList.value = el;
 	} else {
-		shallowList.value = chatroomTop.nextElementSibling.firstElementChild as HTMLDivElement;
+		shallowList.value = chatroomTop.firstElementChild as HTMLDivElement;
 	}
 });
 </script>
diff --git a/src/site/kick.com/modules/chat/ChatMessage.vue b/src/site/kick.com/modules/chat/ChatMessage.vue
index 237c3738a..44d3c48b1 100644
--- a/src/site/kick.com/modules/chat/ChatMessage.vue
+++ b/src/site/kick.com/modules/chat/ChatMessage.vue
@@ -2,7 +2,14 @@
 	<template v-for="(box, index) of containers" :key="index">
 		<Teleport :to="box">
 			<template v-for="(token, i) of tokens.get(box)" :key="i">
-				<span v-if="typeof token === 'string'" class="seventv-text-token"> {{ token }}</span>
+				<span v-if="IsTextToken(token)" class="seventv-text-token">
+					{{ token.content }}
+				</span>
+				<span v-else-if="IsLinkToken(token)">
+					<a :href="token.content.url" target="_blank" class="seventv-links" rel="noopener noreferrer">{{
+						token.content.url
+					}}</a>
+				</span>
 				<span v-else-if="IsEmoteToken(token)">
 					<Emote
 						class="seventv-emote-token"
@@ -15,7 +22,7 @@
 		</Teleport>
 	</template>
 
-	<Teleport :to="badgeContainer">
+	<Teleport v-if="shouldRenderBadges" :to="badgeContainer">
 		<span v-if="cosmetics.badges.size" class="seventv-badge-list">
 			<Badge
 				v-for="[id, badge] of cosmetics.badges"
@@ -29,22 +36,22 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, reactive, watch, watchEffect } from "vue";
+import { nextTick, reactive, watch } from "vue";
 import { ref } from "vue";
 import { onUnmounted } from "vue";
 import { useEventListener } from "@vueuse/core";
+import { getReactProps } from "@/common/ReactHooks";
 import { tokenize } from "@/common/Tokenize";
 import { AnyToken } from "@/common/chat/ChatMessage";
-import { IsEmoteToken } from "@/common/type-predicates/MessageTokens";
+import { IsEmoteToken, IsLinkToken, IsTextToken } from "@/common/type-predicates/MessageTokens";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatEmotes } from "@/composable/chat/useChatEmotes";
 import { useCosmetics } from "@/composable/useCosmetics";
+import { useConfig } from "@/composable/useSettings";
 import Badge from "@/app/chat/Badge.vue";
 import Emote from "@/app/chat/Emote.vue";
 import { updateElementStyles } from "@/directive/TextPaintDirective";
 
-type MessageTokenOrText = AnyToken | string;
-
 export interface ChatMessageBinding {
 	id: string;
 	authorID: string;
@@ -56,7 +63,6 @@ export interface ChatMessageBinding {
 
 const props = defineProps<{
 	bind: ChatMessageBinding;
-	parity?: "odd" | "even";
 }>();
 
 const emit = defineEmits<{
@@ -67,76 +73,65 @@ const emit = defineEmits<{
 const ctx = useChannelContext();
 const emotes = useChatEmotes(ctx);
 const cosmetics = useCosmetics(props.bind.authorID);
-
 const badgeContainer = document.createElement("seventv-container");
 
 const containers = ref<HTMLElement[]>([]);
-const tokens = reactive<WeakMap<HTMLElement, MessageTokenOrText[]>>(new WeakMap());
+const tokens = reactive<WeakMap<HTMLElement, AnyToken[]>>(new WeakMap());
+
+const shouldRenderPaints = useConfig<boolean>("vanity.nametag_paints");
+const shouldRenderBadges = useConfig<boolean>("vanity.7tv_Badges");
 
 // Listen for click events
 useEventListener(props.bind.usernameEl.parentElement, "click", () => {
 	emit("open-card", props.bind);
 });
 
+function textElToMessage(el: HTMLElement) {
+	const props = getReactProps<{ children: { props: { content: string } } }>(el);
+	return props?.children.props.content;
+}
+
 // Process kick's text entries into a containerized token
 function process(): void {
-	if (props.parity) props.bind.el.setAttribute("parity", props.parity);
-	props.bind.usernameEl.insertAdjacentElement("beforebegin", badgeContainer);
-
-	if (cosmetics.paints.size) {
-		updateElementStyles(props.bind.usernameEl, Array.from(cosmetics.paints.values())[0].id);
-	}
-
 	containers.value.length = 0;
 	for (const el of props.bind.texts) {
-		const text = el.textContent ?? "";
+		const message = textElToMessage(el);
+		if (!message) continue;
 
 		const newTokens = tokenize({
-			body: text,
+			body: message,
 			chatterMap: {},
 			emoteMap: emotes.active,
 			localEmoteMap: { ...cosmetics.emotes },
+			isKick: true,
 		});
 
-		const result = [] as MessageTokenOrText[];
-
-		let lastOffset = 0;
-		for (const tok of newTokens) {
-			const start = tok.range[0];
-			const end = tok.range[1];
-
-			const before = text.substring(lastOffset, start);
-			if (before) {
-				result.push(before);
-			}
-
-			result.push(tok);
-
-			lastOffset = end + 1;
-		}
-
-		const after = text.substring(lastOffset);
-		if (after) {
-			result.push(after);
-		}
-
 		const tokenEl = document.createElement("seventv-container");
 		tokenEl.classList.add("seventv-text-token");
-
 		el.after(tokenEl);
-		el.style.display = "none"; // to allow for graceful recovery, we only hide the original token
+		el.style.display = "none";
 
 		containers.value.push(tokenEl);
-		tokens.set(tokenEl, result);
+		tokens.set(tokenEl, newTokens);
 	}
 
 	nextTick(() => emit("render"));
 }
 
-watch(cosmetics, process);
-watchEffect(process);
-
-onMounted(process);
+watch(() => props.bind.texts, process, { immediate: true });
+watch(
+	() => props.bind.usernameEl,
+	(el) => {
+		if (!el.contains(badgeContainer)) el.insertAdjacentElement("beforebegin", badgeContainer);
+	},
+	{ immediate: true },
+);
+
+watch(
+	[() => props.bind.usernameEl, cosmetics, shouldRenderPaints],
+	([el, c, s]) => updateElementStyles(el, s && c.paints.size ? Array.from(c.paints.values())[0].id : null),
+	{ immediate: true },
+);
 
 onUnmounted(() => {
 	for (const el of containers.value) {
@@ -173,9 +168,20 @@ onUnmounted(() => {
 	word-break: break-word;
 }
 
+.seventv-links {
+	text-decoration-line: underline;
+}
+
 .seventv-badge-list {
 	display: inline-grid;
 	vertical-align: middle;
 	margin-right: 0.25rem;
 }
+
+.kick-emote-token {
+	width: 30px;
+	height: 20px;
+	display: inline-block;
+	position: relative;
+}
 </style>
diff --git a/src/site/kick.com/modules/chat/ChatModule.vue b/src/site/kick.com/modules/chat/ChatModule.vue
index 1cb60f920..282e5f6b1 100644
--- a/src/site/kick.com/modules/chat/ChatModule.vue
+++ b/src/site/kick.com/modules/chat/ChatModule.vue
@@ -1,155 +1,44 @@
 <template>
-	<template v-if="chan.active">
-		<Suspense>
-			<ChatController ref="controller" :slug="chan.slug" />
-		</Suspense>
-	</template>
+	<Suspense>
+		<ChatController ref="controller" :channel-id="channelID" :slug="slug" />
+	</Suspense>
 </template>
 
 <script setup lang="ts">
-import { onMounted, provide, reactive, ref, watch } from "vue";
-import { noop, useEventListener } from "@vueuse/core";
-import { defineFunctionHook } from "@/common/Reflection";
+import { ref, watch } from "vue";
+import { Logger } from "@/common/Logger";
+import { useStaticRenderFunctionHook } from "@/common/ReactHooks";
+import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { declareModule } from "@/composable/useModule";
-import { ChatRoom, KICK_CHANNEL_KEY, KickChannelInfo } from "@/site/kick.com";
-import { useApp } from "@/site/kick.com/composable/useApp";
-import { usePinia } from "@/site/kick.com/composable/usePinia";
-import { useRouter } from "@/site/kick.com/composable/useRouter";
 import ChatController from "./ChatController.vue";
-import { declareConfig } from "@/composable/useSettings";
 
 const { markAsReady } = declareModule<"KICK">("chat", {
 	name: "Chat",
 	depends_on: [],
 });
 
-// Acquire vue app
-const app = useApp();
-const router = useRouter(app);
-
-const controller = ref<InstanceType<typeof ChatController> | null>(null);
-
-const chan = reactive<KickChannelInfo>({
-	active: false,
-	slug: "",
-	currentMessage: "",
-});
-
-provide(KICK_CHANNEL_KEY, chan);
-
-const CHAT_ROUTES = ["channel", "channel.chatroom", "moderation-dashboard", "dashboard.stream"];
-
-let ok = false;
-const stoppers: (typeof noop)[] = [];
-function handle(): void {
-	const route = router.currentRoute;
-	if (route && typeof route.name === "string" && !CHAT_ROUTES.includes(route.name)) return;
-	if (ok && chan.active) return;
-
-	const chatroomStore = usePinia<ChatRoom>(app, "chatroomv2");
-	type chatroomWithActions = typeof chatroomStore & {
-		sendCurrentMessage: () => void;
-	};
-	if (!chatroomStore) return;
-
-	ok = true;
-
-	chan.slug = chatroomStore.$state.currentChannelSlug;
-	chan.active = !!chan.slug;
-
-	while (stoppers.length) stoppers.pop()?.();
-	stoppers.push(
-		chatroomStore.$subscribe(async (_, s: ChatRoom) => {
-			if (!s.chatroom || typeof s.chatroom.id !== "number") return;
-
-			if (chan.slug !== s.currentChannelSlug) {
-				chan.active = false;
-				await new Promise((r) => setTimeout(r, 250));
-				chan.active = true;
-				ok = false;
-			}
-
-			chan.slug = s.currentChannelSlug;
-			chan.currentMessage = s.currentMessage;
-		}),
-	);
-
-	stoppers.push(
-		watch(
-			() => chan.currentMessage,
-			(v) => {
-				chatroomStore?.$patch({
-					currentMessage: v,
-				});
-			},
-		),
-	);
-
-	defineFunctionHook(chatroomStore as chatroomWithActions, "sendCurrentMessage", function (this, ...args) {
-		const f = args[0];
-
-		if (controller.value) {
-			controller.value.onMessageSend(this.$state.currentMessage);
-		}
-
-		return f?.apply(this, []);
-	});
-}
-
-onMounted(() => {
-	handle();
-});
-
+const slug = ref("");
+const channelID = ref("");
+useChannelContext(channelID.value);
 watch(
-	() => router.currentRoute,
-	(route) => {
-		if (route && typeof route.name === "string" && !CHAT_ROUTES.includes(route.name)) {
-			chan.active = false;
-		}
-		handle();
+	slug,
+	async (v) => {
+		if (!v) return;
+		const resp = await fetch(`https://kick.com/api/v2/channels/${v}`).catch((err) => {
+			Logger.Get().error("failed to fetch channel data", err);
+		});
+		if (!resp) return;
+		const { user_id: id } = await resp.json();
+		if (!id) return;
+		channelID.value = id.toString() as string;
 	},
 	{ immediate: true },
 );
-useEventListener(document, "click", () => setTimeout(handle, 250));
-
-markAsReady();
-</script>
 
-<script lang="ts">
-export const config = [
-	declareConfig("chat.alternating_background", "TOGGLE", {
-		label: "settings.chat_alternating_background.label",
-		hint: "settings.chat_alternating_background.hint",
-		path: ["Chat", ""],
-		defaultValue: false,
-		effect(v) {
-			document.documentElement.classList.toggle("seventv-alternating-chat-lines", v);
-		},
-	}),
+useStaticRenderFunctionHook<{ channelSlug: string }>("#chatroom-messages", 2, function (this, old, props, ref) {
+	slug.value = props.channelSlug;
+	return old ? old.call(this, props, ref) : null;
+});
 
-	declareConfig("chat.message_batch_duration", "SLIDER", {
-		path: ["Chat", "Performance"],
-		label: "Message Batching",
-		hint: "The time to wait between rendering new messages",
-		options: {
-			min: 25,
-			max: 1000,
-			step: 25,
-			unit: "ms",
-			named_thresolds: [
-				[0, 50, "Instant"],
-				[50, 250, "Fast"],
-				[250, 500, "Balanced"],
-				[500, 999, "Slow"],
-				[1000, 1000, "PowerPoint Presentation"],
-			],
-		},
-		defaultValue: 100,
-	}),
-	declareConfig<Set<string>>("ui.emote_menu.collapsed_sets", "NONE", {
-		path: ["", ""],
-		label: "",
-		defaultValue: new Set(),
-	}),
-];
+markAsReady();
 </script>
diff --git a/src/site/kick.com/modules/chat/ChatObserver.vue b/src/site/kick.com/modules/chat/ChatObserver.vue
index aaf722cac..f0a846863 100644
--- a/src/site/kick.com/modules/chat/ChatObserver.vue
+++ b/src/site/kick.com/modules/chat/ChatObserver.vue
@@ -1,7 +1,8 @@
+kj
 <template>
 	<!-- Patch messages -->
-	<template v-for="(bind, i) of messages" :key="bind.id">
-		<ChatMessageVue :parity="i % 2 === 0 ? 'even' : 'odd'" :bind="bind" @open-card="onOpenUserCard" />
+	<template v-for="bind of messages" :key="bind.id">
+		<ChatMessageVue :bind="bind" @open-card="onOpenUserCard" />
 	</template>
 
 	<!-- Modify user card -->
@@ -11,10 +12,10 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, onUnmounted, reactive, ref, watchEffect } from "vue";
+import { nextTick, onMounted, onUnmounted, reactive, ref, watch, watchEffect } from "vue";
 import { useMutationObserver } from "@vueuse/core";
 import { ObserverPromise } from "@/common/Async";
-import { useConfig } from "@/composable/useSettings";
+import { getReactProps } from "@/common/ReactHooks";
 import ChatMessageVue, { ChatMessageBinding } from "./ChatMessage.vue";
 import ChatUserCard from "./ChatUserCard.vue";
 
@@ -33,32 +34,47 @@ const messageDeleteBuffer = ref<ChatMessageBinding[]>([]);
 const messageMap = reactive<WeakMap<HTMLDivElement, ChatMessageBinding>>(new WeakMap());
 const userCard = ref<ActiveUserCard[]>([]);
 
-const refreshRate = useConfig<number>("chat.message_batch_duration", 100);
-
-function patchMessageElement(el: HTMLDivElement, noBuffer?: boolean): void {
-	if (!el.hasAttribute("data-chat-entry")) return; // not a message
+function isDefaultReactMessageProps(props: unknown): props is Kick.Message.DefaultProps {
+	return (
+		props != null &&
+		typeof props === "object" &&
+		"sender" in props &&
+		typeof props.sender === "object" &&
+		"message" in props &&
+		typeof props.message === "object"
+	);
+}
 
-	const entryID = el.getAttribute("data-chat-entry")!;
+function getMessageReactProps(el: HTMLDivElement): Kick.Message.DefaultProps | undefined {
+	const messageElements = el.querySelector("div > div[style*='chatroom-font-size']");
+	if (!messageElements) return;
+	const props = getReactProps<Kick.Message.MessageListProps>(messageElements);
+	if (!props || !Array.isArray(props.children)) return;
 
-	const identity = el.querySelector<HTMLSpanElement>(".chat-message-identity");
-	if (!identity) return; // missing identity
+	const child = props.children.find((child) => child?.props?.sender);
+	return child?.props;
+}
 
-	const entryUser = identity.querySelector<HTMLSpanElement>(".chat-entry-username");
-	if (!entryUser) return; // missing username
+function patchMessageElement(el: HTMLDivElement & { __seventv?: boolean }, noBuffer?: boolean): void {
+	if (el.__seventv) return; // already patched
+	if (!el.hasAttribute("data-index")) return; // not a message
+	const props = getMessageReactProps(el);
+	if (!props) return;
 
-	const userID = entryUser.getAttribute("data-chat-entry-user-id");
-	const username = entryUser.getAttribute("data-chat-entry-user");
-	if (!userID || !username) return; // missing user ID or username
+	el.__seventv = true;
 
-	// find all untokenized content
-	const texts = el.querySelectorAll<HTMLSpanElement>(".chat-entry-content");
+	const entryID = isDefaultReactMessageProps(props) ? props.messageId : props;
+	const userID = props.sender.id.toString();
+	const username = props.sender.username;
+	const usernameEl = el.querySelector<HTMLSpanElement>("div.inline-flex > button[title]")!;
+	const textElements = el.querySelectorAll<HTMLSpanElement>("span.font-normal");
 
 	const bind: ChatMessageBinding = {
 		id: entryID,
 		authorID: userID,
 		authorName: username,
-		texts: Array.from(texts),
-		usernameEl: entryUser,
+		texts: Array.from(textElements),
+		usernameEl: usernameEl,
 		el,
 	};
 
@@ -97,7 +113,7 @@ async function onOpenUserCard(bind: ChatMessageBinding) {
 }
 
 function patch(): void {
-	const entries = props.listElement.querySelectorAll("[data-chat-entry]");
+	const entries = props.listElement.querySelectorAll("[data-index]");
 	for (const el of Array.from(entries)) {
 		patchMessageElement(el as HTMLDivElement, true);
 	}
@@ -154,64 +170,65 @@ watchEffect(() => {
 	props.listElement.classList.toggle("seventv-chat-observer", true);
 });
 
-useMutationObserver(
-	props.listElement,
-	(records) => {
-		for (const rec of records) {
-			rec.addedNodes.forEach((n) => {
-				if (!(n instanceof HTMLDivElement)) return;
+let stop = () => {
+	void 0;
+};
+watch(
+	() => props.listElement,
+	() => {
+		stop();
+		stop = useMutationObserver(
+			props.listElement,
+			(records) => {
+				for (const rec of records) {
+					rec.addedNodes.forEach((n) => {
+						if (!(n instanceof HTMLDivElement)) return;
 
-				patchMessageElement(n);
-			});
+						patchMessageElement(n);
+					});
 
-			rec.removedNodes.forEach((n) => {
-				if (!(n instanceof HTMLDivElement)) return;
+					rec.removedNodes.forEach((n) => {
+						if (!(n instanceof HTMLDivElement)) return;
 
-				const b = messageMap.get(n);
-				if (!b) return;
+						const b = messageMap.get(n);
+						if (!b) return;
 
-				messageDeleteBuffer.value.push(b);
-				messageMap.delete(n);
-			});
+						messageDeleteBuffer.value.push(b);
+						messageMap.delete(n);
+					});
 
-			flush();
-		}
+					flush();
+				}
+			},
+			{ childList: true },
+		).stop;
+		flush();
 	},
-	{ childList: true },
+	{ immediate: true },
 );
 
-let flushTimeout: number | null = null;
 function flush(): void {
-	if (flushTimeout) return;
+	if (messageBuffer.value.length) {
+		const unbuf = messageBuffer.value.splice(0, messageBuffer.value.length);
 
-	flushTimeout = window.setTimeout(() => {
-		if (messageBuffer.value.length) {
-			const unbuf = messageBuffer.value.splice(0, messageBuffer.value.length);
-
-			for (const bind of unbuf) {
-				bind.el.classList.remove("seventv-chat-message-buffered");
-			}
-			messages.value.push(...unbuf);
+		for (const bind of unbuf) {
+			bind.el.classList.remove("seventv-chat-message-buffered");
 		}
+		messages.value.push(...unbuf);
+	}
 
-		if (messageDeleteBuffer.value.length >= 25) {
-			flushTimeout = window.setTimeout(() => {
-				for (const bind of messageDeleteBuffer.value) {
-					messages.value.splice(messages.value.indexOf(bind), 1);
-				}
-
-				messageDeleteBuffer.value.length = 0;
-
-				flushTimeout = null;
-			}, refreshRate.value / 1.5);
-		} else {
-			flushTimeout = null;
+	if (messageDeleteBuffer.value.length >= 25) {
+		for (const bind of messageDeleteBuffer.value) {
+			messages.value.splice(messages.value.indexOf(bind), 1);
 		}
 
-		onMessageRendered();
-	}, refreshRate.value);
+		messageDeleteBuffer.value.length = 0;
+	}
+	onMessageRendered();
 }
 
+// ftk789: I have no clue what the F is above, And why does it have setTimeouts, with it being present it lags the chat and makes it go crazy.so I just commented settimeouts.
+
 useMutationObserver(
 	props.listElement.parentElement!,
 	() => {
@@ -250,14 +267,6 @@ onUnmounted(() => {
 </style>
 
 <style lang="scss">
-:root.seventv-alternating-chat-lines {
-	.seventv-chat-observer {
-		> div[parity="even"] {
-			background-color: hsla(0deg, 0%, 50%, 6%);
-		}
-	}
-}
-
 .seventv-chat-message-buffered {
 	display: none !important;
 }
diff --git a/src/site/kick.com/modules/chat/ChatEmoteMenu.vue b/src/site/kick.com/modules/emote-menu/EmoteMenu.vue
similarity index 51%
rename from src/site/kick.com/modules/chat/ChatEmoteMenu.vue
rename to src/site/kick.com/modules/emote-menu/EmoteMenu.vue
index c37d092c4..605272a01 100644
--- a/src/site/kick.com/modules/chat/ChatEmoteMenu.vue
+++ b/src/site/kick.com/modules/emote-menu/EmoteMenu.vue
@@ -8,45 +8,65 @@
 	<template v-if="emoteMenu.open && emoteMenuAnchor">
 		<EmoteMenu
 			:anchor-el="emoteMenuAnchor"
-			width="20.5rem"
+			width="20rem"
 			scale="0.62rem"
-			@emote-click="emit('pick-emote', $event)"
+			@emote-click="onEmoteClick($event)"
 			@close="close"
 		/>
 	</template>
 </template>
 
 <script setup lang="ts">
-import { onUnmounted, watchEffect } from "vue";
+import { onUnmounted, ref, watch } from "vue";
 import Logo7TV from "@/assets/svg/logos/Logo7TV.vue";
 import EmoteMenu from "@/app/emote-menu/EmoteMenu.vue";
 import { useEmoteMenuContext } from "@/app/emote-menu/EmoteMenuContext";
 
-const emit = defineEmits<{
-	(e: "pick-emote", emote: SevenTV.ActiveEmote): void;
+const props = defineProps<{
+	container: HTMLElement | null;
+	onPickEmote: ((emote: SevenTV.ActiveEmote) => void) | null;
 }>();
 
 const emoteMenu = useEmoteMenuContext();
-const emoteMenuAnchor = document.getElementById("chatroom-footer");
+
+const emoteMenuAnchor = ref<HTMLDivElement | null>(null);
 
 const emoteMenuButtonContainer = document.createElement("seventv-container");
 
 function close(ev: MouseEvent): void {
 	if (!(ev.target instanceof HTMLElement)) return;
-	if (emoteMenuAnchor?.contains(ev.target) || emoteMenuButtonContainer.contains(ev.target)) return;
+	if (emoteMenuAnchor.value?.contains(ev.target) || emoteMenuButtonContainer.contains(ev.target)) return;
 
 	emoteMenu.open = false;
 }
 
-watchEffect(() => {
-	const parent = document.getElementById("chatroom");
-	if (!parent) return;
+watch(
+	() => props.container,
+	async (container) => {
+		emoteMenuAnchor.value =
+			document.querySelector<HTMLDivElement>("#channel-chatroom > div > div:has(#chat-input-wrapper)") ?? null;
 
-	const inputRow = parent.querySelector(".chat-input-wrapper");
-	if (!inputRow) return;
+		if (!container && emoteMenu.open) {
+			emoteMenu.open = false;
+		}
 
-	inputRow.lastElementChild?.insertAdjacentElement("beforebegin", emoteMenuButtonContainer);
-});
+		if (!container) return;
+
+		const input = container.querySelector("div:has(> .editor-input)");
+		if (input) {
+			input.after(emoteMenuButtonContainer);
+		} else if (container.lastElementChild) {
+			container.lastElementChild.insertAdjacentElement("beforebegin", emoteMenuButtonContainer);
+		} else {
+			container.appendChild(emoteMenuButtonContainer);
+		}
+	},
+	{ immediate: true },
+);
+
+function onEmoteClick(emote: SevenTV.ActiveEmote) {
+	props.onPickEmote?.(emote);
+}
 
 onUnmounted(() => {
 	emoteMenuButtonContainer.remove();
@@ -65,16 +85,16 @@ onUnmounted(() => {
 	background: transparent;
 	cursor: pointer;
 	transition: background 0.2s ease-in-out;
-	height: 2.25rem;
+	height: 1.875rem;
 	border-radius: 0.25rem;
 	padding: 0 0.5rem;
 
 	&:hover {
-		background: rgba(255, 255, 255, 10%);
+		background: rgba(255, 255, 255, 15%);
 	}
 
 	.icon {
-		font-size: 1.25rem;
+		font-size: 1rem;
 	}
 }
 </style>
diff --git a/src/site/kick.com/modules/emote-menu/EmoteMenuModule.vue b/src/site/kick.com/modules/emote-menu/EmoteMenuModule.vue
new file mode 100644
index 000000000..73fbc1e1b
--- /dev/null
+++ b/src/site/kick.com/modules/emote-menu/EmoteMenuModule.vue
@@ -0,0 +1,54 @@
+<template>
+	<EmoteMenu :container="mod?.instance?.container ?? null" :on-pick-emote="onPickEmote" />
+</template>
+
+<script setup lang="ts">
+import { watch } from "vue";
+import { log } from "@/common/Logger";
+import { convertKickEmoteSet } from "@/common/Transform";
+import { useChannelContext } from "@/composable/channel/useChannelContext";
+import { useChatEmotes } from "@/composable/chat/useChatEmotes";
+import { declareModule, getModuleRef } from "@/composable/useModule";
+import EmoteMenu from "./EmoteMenu.vue";
+
+const { markAsReady } = declareModule("emote-menu", {
+	name: "Emote Menu",
+	depends_on: [],
+});
+
+const mod = getModuleRef<"KICK", "chat-input">("chat-input");
+
+const ctx = useChannelContext();
+const emotes = useChatEmotes(ctx);
+
+function onPickEmote(emote: SevenTV.ActiveEmote) {
+	if (emote.provider === "EMOJI") {
+		mod?.value?.instance?.appendText(emote.unicode ?? emote.name);
+	} else {
+		mod?.value?.instance?.appendText(emote.name);
+	}
+}
+
+watch(
+	() => ctx.id,
+	async (id, oldID) => {
+		if (id === oldID) return;
+
+		const resp = await fetch(`https://kick.com/emotes/${ctx.username}`).catch((err) => {
+			log.error("failed to fetch channel emote data", err);
+		});
+		if (!resp) throw new Error("failed to fetch channel emote data");
+
+		const emoteSets = (await resp.json()) as Kick.KickEmoteSet[];
+
+		for (const emoteSet of emoteSets) {
+			emotes.providers.PLATFORM ??= {};
+
+			if ("user" in emoteSet && emoteSet.user_id.toString() == ctx.id) continue;
+			emotes.providers.PLATFORM[emoteSet.id] = convertKickEmoteSet(emoteSet);
+		}
+	},
+);
+
+markAsReady();
+</script>
diff --git a/src/site/kick.com/modules/settings/SettingsModule.vue b/src/site/kick.com/modules/settings/SettingsModule.vue
index 44989ccaa..e6ce3a0ea 100644
--- a/src/site/kick.com/modules/settings/SettingsModule.vue
+++ b/src/site/kick.com/modules/settings/SettingsModule.vue
@@ -1,20 +1,15 @@
 <template>
-	<SettingsMenu v-if="ctx.open" />
-
 	<template v-if="chatSettingsPopup">
 		<SettingsChatHook :el="chatSettingsPopup" @open-settings="ctx.open = true" />
 	</template>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import { useEventListener } from "@vueuse/core";
 import { declareModule } from "@/composable/useModule";
-import { useApp } from "@/site/kick.com/composable/useApp";
-import { useRouter } from "@/site/kick.com/composable/useRouter";
 import SettingsChatHook from "./SettingsChatHook.vue";
 import { useSettingsMenu } from "@/app/settings/Settings";
-import SettingsMenu from "@/app/settings/SettingsMenu.vue";
 
 declareModule<"KICK">("settings", {
 	name: "Settings",
@@ -24,8 +19,6 @@ declareModule<"KICK">("settings", {
 const ctx = useSettingsMenu();
 
 // Acquire vue app
-const app = useApp();
-const router = useRouter(app);
 
 const chatSettingsPopup = ref<HTMLElement | null>(null);
 
@@ -33,7 +26,7 @@ function handle(): void {
 	chatSettingsPopup.value = document.querySelector(".chat-actions-popup");
 }
 
-watch(() => router.currentRoute, handle, { immediate: true });
+useEventListener(window, "popstate", () => setTimeout(handle, 0));
 useEventListener(document, "click", () => setTimeout(handle, 0), {
 	capture: true,
 });
diff --git a/src/site/twitch.tv/TwitchSite.vue b/src/site/twitch.tv/TwitchSite.vue
index 13865175a..ab359d477 100644
--- a/src/site/twitch.tv/TwitchSite.vue
+++ b/src/site/twitch.tv/TwitchSite.vue
@@ -8,14 +8,14 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, onMounted, provide, ref, watch } from "vue";
+import { defineAsyncComponent, onMounted, provide, ref } from "vue";
 import { useStore } from "@/store/main";
 import { SITE_CURRENT_PLATFORM, SITE_NAV_PATHNAME } from "@/common/Constant";
 import { useComponentHook } from "@/common/ReactHooks";
 import { useActor } from "@/composable/useActor";
 import { useFrankerFaceZ } from "@/composable/useFrankerFaceZ";
 import { getModule } from "@/composable/useModule";
-import { synchronizeFrankerFaceZ, useConfig, useSettings } from "@/composable/useSettings";
+import { synchronizeFrankerFaceZ, useSettings } from "@/composable/useSettings";
 import { useUserAgent } from "@/composable/useUserAgent";
 import type { TwModuleID } from "@/types/tw.module";
 
@@ -26,7 +26,6 @@ const actor = useActor();
 const ua = useUserAgent();
 const ffz = useFrankerFaceZ();
 
-const useTransparency = useConfig("ui.transparent_backgrounds");
 ua.preferredFormat = store.avifSupported ? "AVIF" : "WEBP";
 store.setPreferredImageFormat(ua.preferredFormat);
 store.setPlatform("TWITCH", ["7TV", "FFZ", "BTTV"], ffz.active ? ["FFZ"] : []);
@@ -90,16 +89,6 @@ useComponentHook<Twitch.RouterComponent>(
 	},
 );
 
-const rootClasses = document.documentElement.classList;
-
-watch(
-	useTransparency,
-	() => {
-		useTransparency.value ? rootClasses.add("seventv-transparent") : rootClasses.remove("seventv-transparent");
-	},
-	{ immediate: true },
-);
-
 const settings = useSettings();
 function onModuleUpdate(mod: TwModuleID, config: SevenTV.SettingNode[], inst: InstanceType<ComponentFactory>) {
 	const modInst = getModule(mod);
diff --git a/src/site/twitch.tv/modules/chat-input/ChatInput.vue b/src/site/twitch.tv/modules/chat-input/ChatInput.vue
index 8cdfda613..222d982c6 100644
--- a/src/site/twitch.tv/modules/chat-input/ChatInput.vue
+++ b/src/site/twitch.tv/modules/chat-input/ChatInput.vue
@@ -17,6 +17,7 @@ import { useMagicKeys } from "@vueuse/core";
 import { useStore } from "@/store/main";
 import { REACT_TYPEOF_TOKEN } from "@/common/Constant";
 import { imageHostToSrcset } from "@/common/Image";
+import { TabToken, getSearchRange } from "@/common/Input";
 import { HookedInstance } from "@/common/ReactHooks";
 import {
 	defineFunctionHook,
@@ -34,12 +35,6 @@ import { useConfig } from "@/composable/useSettings";
 import { useUserAgent } from "@/composable/useUserAgent";
 import ChatInputCarousel from "./ChatInputCarousel.vue";
 
-export interface TabToken {
-	token: string;
-	priority: number;
-	item?: SevenTV.ActiveEmote;
-}
-
 const props = defineProps<{
 	instance: HookedInstance<Twitch.ChatAutocompleteComponent>;
 }>();
@@ -195,19 +190,7 @@ function handleTabPress(ev: KeyboardEvent | null, isBackwards?: boolean): void {
 		const searchText = currentNode.text;
 		const searchStart = cursorLocation.offset;
 
-		for (let i = searchStart; ; i--) {
-			if (i < 1 || (searchText.charAt(i - 1) === " " && i !== searchStart)) {
-				wordStart = i;
-				break;
-			}
-		}
-
-		for (let i = searchStart + 1; ; i++) {
-			if (i > searchText.length || searchText.charAt(i - 1) === " ") {
-				wordEnd = i - 1;
-				break;
-			}
-		}
+		[wordStart, wordEnd] = getSearchRange(searchText, searchStart);
 
 		if (cursorLocation.offset != wordStart) {
 			currentWord = searchText.substring(wordStart, wordEnd);
@@ -402,6 +385,8 @@ function resetState() {
 }
 
 function onKeyDown(ev: KeyboardEvent) {
+	if (ev.isComposing) return;
+
 	switch (ev.key) {
 		case "Tab":
 			handleTabPress(ev, isShift.value);
diff --git a/src/site/twitch.tv/modules/chat-input/ChatInputCarousel.vue b/src/site/twitch.tv/modules/chat-input/ChatInputCarousel.vue
index dab7d0c25..071a6eda7 100644
--- a/src/site/twitch.tv/modules/chat-input/ChatInputCarousel.vue
+++ b/src/site/twitch.tv/modules/chat-input/ChatInputCarousel.vue
@@ -32,10 +32,10 @@
 <script setup lang="ts">
 import { ref, watchEffect } from "vue";
 import { useEventListener } from "@vueuse/core";
+import { TabToken } from "@/common/Input";
 import { HookedInstance } from "@/common/ReactHooks";
 import { useConfig } from "@/composable/useSettings";
 import CaretIcon from "@/assets/svg/icons/CaretIcon.vue";
-import { TabToken } from "./ChatInput.vue";
 import Emote from "@/app/chat/Emote.vue";
 import UiFloating from "@/ui/UiFloating.vue";
 
@@ -73,6 +73,7 @@ useEventListener(
 	"keydown",
 	(ev) => {
 		if (!shouldListenToArrowPresses.value) return;
+		if (ev.isComposing) return;
 
 		if (ev.key === "ArrowLeft") {
 			emit("back", ev);
diff --git a/src/site/twitch.tv/modules/chat-vod/ChatVod.vue b/src/site/twitch.tv/modules/chat-vod/ChatVod.vue
index 0ea919f9b..44f7f62e7 100644
--- a/src/site/twitch.tv/modules/chat-vod/ChatVod.vue
+++ b/src/site/twitch.tv/modules/chat-vod/ChatVod.vue
@@ -111,6 +111,8 @@ definePropertyHook(props.controller.component, "props", {
 		} else {
 			ctx.actor.roles.delete("MODERATOR");
 		}
+
+		properties.showTimestamps = false;
 	},
 });
 
diff --git a/src/site/twitch.tv/modules/chat/ChatController.vue b/src/site/twitch.tv/modules/chat/ChatController.vue
index 4fcaa488f..797b10c9e 100644
--- a/src/site/twitch.tv/modules/chat/ChatController.vue
+++ b/src/site/twitch.tv/modules/chat/ChatController.vue
@@ -10,7 +10,12 @@
 			@mouseleave="properties.hovering = false"
 		>
 			<div id="seventv-message-container" class="seventv-message-container">
-				<ChatList ref="chatList" :list="list" :message-handler="messageHandler" />
+				<ChatList
+					ref="chatList"
+					:list="list"
+					:shared-chat-data="sharedChatDataByChannelID"
+					:message-handler="messageHandler"
+				/>
 			</div>
 
 			<!-- New Messages during Scrolling Pause -->
@@ -40,7 +45,7 @@ import { log } from "@/common/Logger";
 import { HookedInstance, awaitComponents } from "@/common/ReactHooks";
 import { defineFunctionHook, definePropertyHook, unsetPropertyHook } from "@/common/Reflection";
 import { ChatMessage } from "@/common/chat/ChatMessage";
-import { ChannelRole, useChannelContext } from "@/composable/channel/useChannelContext";
+import { ChannelContext, ChannelRole, useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatEmotes } from "@/composable/chat/useChatEmotes";
 import { useChatMessages } from "@/composable/chat/useChatMessages";
 import { useChatProperties } from "@/composable/chat/useChatProperties";
@@ -64,12 +69,13 @@ const props = defineProps<{
 	list: HookedInstance<Twitch.ChatListComponent>;
 	buffer?: HookedInstance<Twitch.MessageBufferComponent>;
 	events?: HookedInstance<Twitch.ChatEventComponent>;
+	presentation?: HookedInstance<Twitch.ChatListPresentationComponent>;
 }>();
 
 const mod = getModule<"TWITCH", "chat">("chat")!;
 const { sendMessage: sendWorkerMessage } = useWorker();
 
-const { list, controller, room } = toRefs(props);
+const { list, controller, room, presentation } = toRefs(props);
 
 const el = document.createElement("seventv-container");
 el.id = "seventv-chat-controller";
@@ -101,6 +107,7 @@ const ignoreClearChat = useConfig<boolean>("chat.ignore_clear_chat");
 
 // Defines the current channel for hooking
 const currentChannel = ref<CurrentChannel | null>(null);
+const sharedChannels = new Map<string, ChannelContext>();
 
 // Capture the chat root node
 watchEffect(() => {
@@ -224,9 +231,22 @@ definePropertyHook(controller.value.component, "props", {
 		// Send presence upon message sent
 		messages.sendMessage = v.chatConnectionAPI.sendMessage;
 		defineFunctionHook(v.chatConnectionAPI, "sendMessage", function (old, ...args) {
-			worker.sendMessage("CHANNEL_ACTIVE_CHATTER", {
-				channel: toRaw(ctx.base),
-			});
+			if (sharedChatDataByChannelID.value?.size != 0) {
+				for (const [key, value] of sharedChatDataByChannelID.value?.entries() ?? []) {
+					worker.sendMessage("CHANNEL_ACTIVE_CHATTER", {
+						channel: {
+							id: key,
+							username: value.login,
+							displayName: value.displayName,
+							active: true,
+						},
+					});
+				}
+			} else {
+				worker.sendMessage("CHANNEL_ACTIVE_CHATTER", {
+					channel: toRaw(ctx.base),
+				});
+			}
 
 			// Run message content patching middleware
 			for (const fn of mod.instance?.messageSendMiddleware.values() ?? []) {
@@ -244,6 +264,32 @@ definePropertyHook(controller.value.component, "props", {
 	},
 });
 
+const sharedChatDataByChannelID = ref<Map<string, Twitch.SharedChat> | null>(null);
+watch(
+	presentation,
+	(inst, old) => {
+		if (!inst || !inst.component) return;
+
+		if (old && old.component && inst !== old) {
+			unsetPropertyHook(old.component, "props");
+			return;
+		}
+
+		definePropertyHook(inst.component, "props", {
+			value(v) {
+				sharedChatDataByChannelID.value = v.sharedChatDataByChannelID;
+
+				for (const channelID of sharedChatDataByChannelID.value.keys()) {
+					if (!sharedChannels.has(channelID) && channelID != ctx.id) {
+						sharedChannels.set(channelID, useChannelContext(channelID, true));
+					}
+				}
+			},
+		});
+	},
+	{ immediate: true },
+);
+
 const a = awaitComponents<Twitch.MessageCardOpeners>({
 	parentSelector: ".stream-chat",
 	predicate: (n) => {
@@ -259,6 +305,19 @@ a.then(
 	() => null,
 );
 
+tools.update(
+	"TWITCH",
+	"onShowViewerWarnPopover",
+	(userId: string, userLogin: string, placement: Twitch.WarnUserPopoverPlacement) => {
+		const props = controller.value.component.props;
+		props.setWarnUserTarget({
+			targetUserID: userId,
+			targetUserLogin: userLogin,
+		});
+		props.setWarnUserPopoverPlacement(placement);
+	},
+);
+
 if (a instanceof ObserverPromise) {
 	until(useTimeout(1e4))
 		.toBeTruthy()
@@ -328,7 +387,7 @@ watch(
 		messages.clear();
 		scroller.unpause();
 
-		nextTick(() => emotes.resetProviders());
+		nextTick(emotes.reset);
 	},
 	{ immediate: true },
 );
diff --git a/src/site/twitch.tv/modules/chat/ChatList.vue b/src/site/twitch.tv/modules/chat/ChatList.vue
index 84461b81c..622e9a4ae 100644
--- a/src/site/twitch.tv/modules/chat/ChatList.vue
+++ b/src/site/twitch.tv/modules/chat/ChatList.vue
@@ -1,5 +1,5 @@
 <template>
-	<main ref="chatListEl" class="seventv-chat-list" :alternating-background="isAlternatingBackground">
+	<main ref="chatListEl" class="seventv-chat-list">
 		<div v-for="msg of displayedMessages" :key="msg.sym" :msg-id="msg.id" class="seventv-message">
 			<template v-if="msg.instance">
 				<component
@@ -51,6 +51,7 @@ import BasicSystemMessage from "@/app/chat/msg/BasicSystemMessage.vue";
 const props = defineProps<{
 	list: HookedInstance<Twitch.ChatListComponent>;
 	messageHandler: Twitch.MessageHandlerAPI | null;
+	sharedChatData: Map<string, Twitch.SharedChat> | null;
 }>();
 
 const ctx = useChannelContext();
@@ -67,7 +68,6 @@ const pausedByVisibility = ref(false);
 
 const isModSliderEnabled = useConfig<boolean>("chat.mod_slider");
 const showModerationMessages = useConfig<boolean>("chat.mod_messages");
-const isAlternatingBackground = useConfig<boolean>("chat.alternating_background");
 const showMentionHighlights = useConfig("highlights.basic.mention");
 const showFirstTimeChatter = useConfig<boolean>("highlights.basic.first_time_chatter");
 const showSelfHighlights = useConfig<boolean>("highlights.basic.self");
@@ -78,6 +78,7 @@ const showMonitoredLowTrustUser = useConfig<boolean>("highlights.basic.monitored
 
 const messageHandler = toRef(props, "messageHandler");
 const list = toRef(props, "list");
+const sharedChatData = toRef(props, "sharedChatData");
 
 // Unrender messages out of view
 const chatListEl = ref<HTMLElement>();
@@ -162,6 +163,17 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 		msg.setHighlight("#ff7d00", "Restricted Suspicious User");
 	}
 
+	let sourceRoomID =
+		msgData.sourceRoomID ?? msgData.sharedChat?.sourceRoomID ?? msgData.message?.sourceRoomID ?? null;
+	if (!sourceRoomID && msgData.nonce) {
+		sourceRoomID = msg.channelID;
+	}
+
+	if (sourceRoomID) {
+		msgData.sourceData = sharedChatData.value?.get(sourceRoomID);
+		msg.setSourceData(msgData.sourceData);
+	}
+
 	// define message author
 	const authorData = msgData.user ?? msgData.message?.user ?? null;
 	if (authorData) {
@@ -543,6 +555,7 @@ watch(
 					? (msg: ChatMessage) => `🔔 @${msg.author?.username ?? "A user"} mentioned you`
 					: undefined,
 				flashTitle: true,
+				phrase: true,
 			});
 
 			chatHighlights.define("~reply", {
@@ -561,6 +574,7 @@ watch(
 					? (msg: ChatMessage) => `🔔 @${msg.author?.username ?? "A user"} replied to you`
 					: undefined,
 				flashTitle: true,
+				phrase: true,
 			});
 		} else {
 			chatHighlights.remove("~mention");
@@ -583,10 +597,4 @@ defineExpose({
 	font-size: var(--seventv-chat-font-size, inherit);
 	line-height: 1.5em;
 }
-
-.seventv-chat-list[alternating-background="true"] {
-	.seventv-message:nth-child(even) {
-		background-color: var(--seventv-chat-alternate-background-color);
-	}
-}
 </style>
diff --git a/src/site/twitch.tv/modules/chat/ChatModule.vue b/src/site/twitch.tv/modules/chat/ChatModule.vue
index 2e801d183..78386b238 100644
--- a/src/site/twitch.tv/modules/chat/ChatModule.vue
+++ b/src/site/twitch.tv/modules/chat/ChatModule.vue
@@ -7,6 +7,7 @@
 			:room="chatRoom.instances[0] ?? undefined"
 			:buffer="chatBuffer.instances[0] ?? undefined"
 			:events="chatEvents.instances[0] ?? undefined"
+			:presentation="chatListPresentation.instances[0] ?? undefined"
 		/>
 	</template>
 </template>
@@ -78,6 +79,27 @@ const chatEvents = useComponentHook<Twitch.ChatEventComponent>({
 	predicate: (n) => n.onClearChatEvent,
 });
 
+const hideBitsBalance = useConfig<boolean>("chat.hide_bits_balance");
+useComponentHook<Twitch.ChatCommunityPointsButtonComponent>(
+	{
+		childSelector: ".community-points-summary",
+		predicate: (el) => el.shouldShowBitsBalance,
+	},
+	{
+		functionHooks: {
+			shouldShowBitsBalance(this, old) {
+				if (hideBitsBalance.value) return false;
+				return old.call(this);
+			},
+		},
+	},
+);
+
+const chatListPresentation = useComponentHook<Twitch.ChatListPresentationComponent>({
+	parentSelector: ".stream-chat",
+	predicate: (n) => n.props && n.props.sharedChatDataByChannelID,
+});
+
 const isHookable = ref(false);
 const isHookableDbc = refDebounced(isHookable, 200);
 
@@ -115,43 +137,6 @@ const timestampKeyValues: Record<TimestampFormatKey, string> = {
 const timestampFormatOptions = Object.entries(timestampKeyValues).map(([k, v]) => [v, k]);
 
 export const config = [
-	declareConfig("general.blur_unlisted_emotes", "TOGGLE", {
-		path: ["General", ""],
-		label: "Hide Unlisted Emotes",
-		hint: "If checked, emotes which have not yet been approved for listing on 7tv.app will be blurred",
-		defaultValue: false,
-	}),
-	declareConfig<number>("chat.emote_margin", "SLIDER", {
-		path: ["Chat", "Style"],
-		label: "Emote Spacing",
-		hint: "Choose the margin around emotes in chat. Negative values lets them overlap and keep the chatlines inline. 0 Makes the emotes not overlap at all",
-		options: {
-			min: -1,
-			max: 1,
-			step: 0.1,
-			unit: "rem",
-		},
-		defaultValue: -0.5,
-		effect(v) {
-			document.documentElement.style.setProperty("--seventv-emote-margin", `${v}rem`);
-		},
-	}),
-	declareConfig<number>("chat.emote_scale", "SLIDER", {
-		path: ["Chat", "Style"],
-		label: "Emote Scale",
-		ffz_key: "chat.emotes.2x",
-		ffz_transform(v: unknown) {
-			return typeof v === "number" && v > 0 ? 2 : 1;
-		},
-		hint: "Change how large emotes should be in chat, as a multiple of their original size.",
-		options: {
-			min: 0.25,
-			max: 3,
-			step: 0.25,
-			unit: "x",
-		},
-		defaultValue: 1,
-	}),
 	declareConfig("chat.show_emote_modifiers", "TOGGLE", {
 		path: ["Chat", "Style"],
 		label: "Show Emote Modifiers",
@@ -241,23 +226,6 @@ export const config = [
 		hint: "Make the tooltips compact instead of showing the full emote",
 		defaultValue: false,
 	}),
-	declareConfig<boolean>("chat.alternating_background", "TOGGLE", {
-		path: ["Chat", "Style"],
-		ffz_key: "chat.lines.alternate",
-		label: "settings.chat_alternating_background.label",
-		hint: "settings.chat_alternating_background.hint",
-		defaultValue: false,
-	}),
-	declareConfig<string>("chat.alternating_background_color", "COLOR", {
-		path: ["Chat", "Style"],
-		label: "Alternating Background Color",
-		hint: "Configure the color of alternating background (~6% opacity)",
-		disabledIf: () => !useConfig("chat.alternating_background").value,
-		effect(v) {
-			document.body.style.setProperty("--seventv-chat-alternate-background-color", `${v}0f`);
-		},
-		defaultValue: "#808080",
-	}),
 	declareConfig<number>("chat.padding", "DROPDOWN", {
 		path: ["Chat", "Style"],
 		label: "Padding Style",
@@ -306,11 +274,19 @@ export const config = [
 		},
 		defaultValue: 13,
 	}),
-	declareConfig<boolean>("chat.colored_mentions", "TOGGLE", {
+	declareConfig<0 | 1 | 2>("chat.colored_mentions", "DROPDOWN", {
 		path: ["Chat", "Style"],
-		label: "Colored Mentions",
-		hint: "Show the color of users mentioned in chat",
-		defaultValue: true,
+		label: "Mention Style",
+		hint: "Control how mentions are displayed in chat",
+		options: [
+			["Default", 0],
+			["Colored", 1],
+			["Painted", 2],
+		],
+		transform(v) {
+			return v === false ? 0 : 2;
+		},
+		defaultValue: 1,
 	}),
 	declareConfig<number>("chat.deleted_messages", "DROPDOWN", {
 		path: ["Chat", "Style"],
@@ -435,7 +411,7 @@ export const config = [
 			gridMode: "new-row",
 		},
 		label: "Custom Highlights",
-		hint: "Create custom highlights for specific words or phrases",
+		hint: "Create custom highlights for specific words, phrases or all messages from specific users",
 		defaultValue: new Map(),
 	}),
 	declareConfig<number>("highlights.sound_volume", "SLIDER", {
@@ -472,11 +448,11 @@ export const config = [
 		},
 		defaultValue: 10,
 	}),
-	declareConfig<boolean>("vanity.nametag_paints", "TOGGLE", {
-		path: ["Appearance", "Vanity"],
-		label: "Nametag Paints",
-		hint: "Whether or not to display nametag paints",
-		defaultValue: true,
+	declareConfig("chat.hide_bits_balance", "TOGGLE", {
+		label: "Hide Bits From Community Points Button",
+		hint: "Hide the bits balance from the community points button under the chatbox",
+		path: ["Chat", "Style"],
+		defaultValue: false,
 	}),
 ];
 </script>
diff --git a/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue b/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue
index 08d817202..f716b4f9b 100644
--- a/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue
+++ b/src/site/twitch.tv/modules/chat/components/mod/ModIcons.vue
@@ -20,6 +20,16 @@
 			<TwChatModTimeout />
 		</span>
 
+		<span
+			v-if="msg.author && !msg.author.isActor"
+			ref="warnRef"
+			@click="showWarnPopover()"
+			@mouseenter="warnTooltip.show(warnRef)"
+			@mouseleave="warnTooltip.hide()"
+		>
+			<TwChatModWarn />
+		</span>
+
 		<span
 			ref="deleteRef"
 			@click="deleteChatMessage(msg.id)"
@@ -36,24 +46,35 @@ import { ref } from "vue";
 import type { ChatMessage } from "@/common/chat/ChatMessage";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatModeration } from "@/composable/chat/useChatModeration";
+import { useChatTools } from "@/composable/chat/useChatTools";
 import { useTooltip } from "@/composable/useTooltip";
 import TwChatModBan from "@/assets/svg/twitch/TwChatModBan.vue";
 import TwChatModDelete from "@/assets/svg/twitch/TwChatModDelete.vue";
 import TwChatModTimeout from "@/assets/svg/twitch/TwChatModTimeout.vue";
+import TwChatModWarn from "@/assets/svg/twitch/TwChatModWarn.vue";
 
 const props = defineProps<{
 	msg: ChatMessage;
 }>();
 
 const ctx = useChannelContext();
+const tools = useChatTools(ctx);
 const { banUserFromChat, deleteChatMessage } = useChatModeration(ctx, props.msg.author?.username ?? "");
 
+function showWarnPopover() {
+	if (!props.msg.author) return;
+	tools.openViewerWarnPopover(props.msg.author.id, props.msg.author.username, 0);
+}
+
 const banRef = ref();
 const banTooltip = useTooltip(`Ban ${props.msg.author?.username ?? "???"}`);
 
 const timeoutRef = ref();
 const timeoutTooltip = useTooltip(`Timeout ${props.msg.author?.username ?? "???"}`);
 
+const warnRef = ref();
+const warnTooltip = useTooltip(`Warn ${props.msg.author?.username ?? "???"}`);
+
 const deleteRef = ref();
 const deleteTooltip = useTooltip(`Delete message by ${props.msg.author?.username ?? "???"}`);
 </script>
diff --git a/src/site/twitch.tv/modules/chat/components/tray/ChatTray.ts b/src/site/twitch.tv/modules/chat/components/tray/ChatTray.ts
index 15ba49569..dc8521eed 100644
--- a/src/site/twitch.tv/modules/chat/components/tray/ChatTray.ts
+++ b/src/site/twitch.tv/modules/chat/components/tray/ChatTray.ts
@@ -181,7 +181,7 @@ export function useTrayRef(options: Twitch.CustomTrayOptions, modifier: boolean
 		$$typeof: REACT_ELEMENT_SYMBOL,
 		key: "body",
 		ref: (e: TrayRef) => (bodyRef.value = e),
-		type: "seventv-vue-component",
+		type: "seventv-tray-container-body",
 		props: {},
 	};
 
diff --git a/src/site/twitch.tv/modules/chat/components/tray/Tray.vue b/src/site/twitch.tv/modules/chat/components/tray/Tray.vue
index bbe9daca9..f0bbf3a7f 100644
--- a/src/site/twitch.tv/modules/chat/components/tray/Tray.vue
+++ b/src/site/twitch.tv/modules/chat/components/tray/Tray.vue
@@ -19,6 +19,7 @@ const props = withDefaults(
 		messageHandler?: (v: string) => void;
 		placeholder?: string;
 		modifier?: boolean;
+		floating?: boolean;
 	}>(),
 	{
 		modifier: false,
diff --git a/src/site/twitch.tv/modules/custom-commands/Commands/Dashboard.vue b/src/site/twitch.tv/modules/custom-commands/Commands/Dashboard.vue
index 072a71c80..bff5484fa 100644
--- a/src/site/twitch.tv/modules/custom-commands/Commands/Dashboard.vue
+++ b/src/site/twitch.tv/modules/custom-commands/Commands/Dashboard.vue
@@ -4,6 +4,7 @@
 		placeholder="Search again..."
 		:input-value-override="search"
 		disable-commands
+		floating
 		:message-handler="(m) => (search = m)"
 	>
 		<EnableTray :search="search" :mut="mut" name="body" @close="showTray = false" />
@@ -16,6 +17,8 @@
 import { nextTick, onMounted, onUnmounted, ref } from "vue";
 import { refAutoReset } from "@vueuse/core";
 import { SEVENTV_EMOTE_ID, SEVENTV_EMOTE_LINK } from "@/common/Constant";
+import { SevenTVRoles } from "@/common/Roles";
+import { useActor } from "@/composable/useActor";
 import { useSetMutation } from "@/composable/useSetMutation";
 import EnableTray from "./components/EnableTray.vue";
 import { useSettingsMenu } from "@/app/settings/Settings";
@@ -203,11 +206,29 @@ const commandAlias: Twitch.ChatCommand = {
 	group: "7TV",
 };
 
+const actor = useActor();
+const perms = [SevenTVRoles.ADMIN, SevenTVRoles.MODERATOR] as string[];
+
+const commandEditAnySet: Twitch.ChatCommand = {
+	name: "letmemamageemoteset",
+	description: "<Mod> Lets you edit any 7TV emote set",
+	helpText: "",
+	permissionLevel: 0,
+	handler: () => {
+		actor.editAnySet = true;
+	},
+	group: "7TV",
+	get hidden() {
+		return actor.editAnySet || mut.canEditSet || !actor.user?.roles?.some((v) => perms.includes(v));
+	},
+};
+
 onMounted(() => {
 	props.add(commandSearch);
 	props.add(commandEnable);
 	props.add(commandDisable);
 	props.add(commandAlias);
+	props.add(commandEditAnySet);
 });
 
 onUnmounted(() => {
@@ -215,6 +236,7 @@ onUnmounted(() => {
 	props.remove(commandEnable);
 	props.remove(commandDisable);
 	props.remove(commandAlias);
+	props.remove(commandEditAnySet);
 });
 </script>
 
diff --git a/src/site/twitch.tv/modules/custom-commands/Commands/components/EnableTray.vue b/src/site/twitch.tv/modules/custom-commands/Commands/components/EnableTray.vue
index 5ba449757..de504a422 100644
--- a/src/site/twitch.tv/modules/custom-commands/Commands/components/EnableTray.vue
+++ b/src/site/twitch.tv/modules/custom-commands/Commands/components/EnableTray.vue
@@ -8,7 +8,7 @@
 				<div class="header-button" :disabled="page === 1" @click="page--"><text> &lt; </text></div>
 				<div class="header-button" :disabled="page === maxPage" @click="page++"><text> &gt; </text></div>
 			</div>
-			<span class="text" :class="notice.type">
+			<span v-tooltip:top="notice.tooltip" class="text" :class="notice.type">
 				{{ notice.type === "none" ? search : notice.message }}
 			</span>
 			<Alias v-if="mut.canEditSet" :alias="alias" :invalid="invalidAlias" @update:alias="alias = $event" />
@@ -62,6 +62,7 @@ import Alias from "@/app/chat/EmoteAliasButton.vue";
 import { useSettingsMenu } from "@/app/settings/Settings";
 import UiScrollable from "@/ui/UiScrollable.vue";
 import { useQuery } from "@vue/apollo-composable";
+import { GraphQLError } from "graphql";
 
 const props = defineProps<{
 	search: string;
@@ -78,7 +79,7 @@ const exactMatch = ref(false);
 const page = ref(1);
 const maxPage = computed(() => (result.value ? Math.ceil(result.value?.emotes.count / pageSize.value) : 1));
 
-type Notice = { type: "error" | "info" | "none"; message: string };
+type Notice = { type: "error" | "info" | "none"; message: string; tooltip?: string };
 
 const notice = refAutoReset<Notice>({ type: "none", message: "" }, 3000);
 const alias = ref("");
@@ -135,30 +136,30 @@ const onEmoteClick = (e: MouseEvent, emote: SevenTV.Emote) => {
 
 	if (!props.mut.canEditSet) {
 		navigator.clipboard.writeText(`https://7tv.app/emotes/${emote.id}`);
-		notice.value = { type: "info", message: "Copied" };
+		notice.value = { type: "info", message: "Copied", tooltip: "Emote link copied to clipboard" };
 		return;
 	}
 
 	if (isEnabled(emote)) {
-		props.mut.remove(emote.id).catch(() => {
-			notice.value = { type: "error", message: "Error" };
+		props.mut.remove(emote.id).catch((err: GraphQLError) => {
+			notice.value = { type: "error", message: "Error", tooltip: err.message };
 		});
 		return;
 	}
 
 	if (invalidAlias.value) {
-		notice.value = { type: "error", message: "Invalid alias" };
+		notice.value = { type: "error", message: "Invalid alias", tooltip: "The alias contains illegal characters" };
 		return;
 	}
 
 	if (isConflict(emote)) {
-		notice.value = { type: "error", message: "Name conflict" };
+		notice.value = { type: "error", message: "Name conflict", tooltip: "The emote name is already in use" };
 		return;
 	}
 
 	const name = alias.value !== "" ? alias.value : emote.name;
-	props.mut.add(emote.id, name).catch(() => {
-		notice.value = { type: "error", message: "Error" };
+	props.mut.add(emote.id, name).catch((err: GraphQLError) => {
+		notice.value = { type: "error", message: "Error", tooltip: err.message };
 	});
 	alias.value = "";
 };
diff --git a/src/site/twitch.tv/modules/emote-menu/EmoteMenuModule.vue b/src/site/twitch.tv/modules/emote-menu/EmoteMenuModule.vue
index 43224484e..5ec504ade 100644
--- a/src/site/twitch.tv/modules/emote-menu/EmoteMenuModule.vue
+++ b/src/site/twitch.tv/modules/emote-menu/EmoteMenuModule.vue
@@ -71,7 +71,7 @@ const doButtonUpdate = debounceFn((nodes: Element[]) => {
 
 watch(
 	placement,
-	(v) => {
+	() => {
 		for (const n of Object.values(chatInputController.instances).map((i) => i.domNodes)) {
 			doButtonUpdate(Object.values(n));
 		}
@@ -84,20 +84,6 @@ markAsReady();
 
 <script lang="ts">
 export const config = [
-	declareConfig("ui.emote_menu.default_tab", "DROPDOWN", {
-		path: ["Appearance", "Interface"],
-		label: "Emote Menu: Default Emote Tab",
-		hint: "Select default tab when opening emote menu",
-		options: [
-			["Favorite", "FAVORITE"],
-			["7TV", "7TV"],
-			["FFZ", "FFZ"],
-			["BTTV", "BTTV"],
-			["Platform", "PLATFORM"],
-			["Emoji", "EMOJI"],
-		],
-		defaultValue: "7TV",
-	}),
 	declareConfig("ui.emote_menu_search", "TOGGLE", {
 		path: ["Appearance", "Interface"],
 		label: "Emote Menu: Live Input Search",
@@ -115,30 +101,6 @@ export const config = [
 		],
 		defaultValue: "regular",
 	}),
-	declareConfig<boolean>("ui.emote_menu.most_used", "TOGGLE", {
-		path: ["Appearance", "Interface"],
-		label: "Emote Menu: Most Used Emotes",
-		hint: "Whether or not to display the emotes you type the most in the emote menu (Temporarily disabled due to performance issues)",
-		disabledIf: () => true,
-		defaultValue: true,
-	}),
-	declareConfig<Set<string>>("ui.emote_menu.favorites", "NONE", {
-		path: ["", ""],
-		label: "",
-		defaultValue: new Set(),
-	}),
-	declareConfig<Map<string, number>>("ui.emote_menu.usage", "NONE", {
-		path: ["", ""],
-		label: "",
-		defaultValue: new Map(),
-		serialize: false,
-	}),
-	declareConfig<Set<string>>("ui.emote_menu.collapsed_sets", "NONE", {
-		path: ["", ""],
-		label: "",
-		defaultValue: new Set(),
-		serialize: false,
-	}),
 ];
 </script>
 
diff --git a/src/site/twitch.tv/modules/hidden-elements/HiddenElementsModule.vue b/src/site/twitch.tv/modules/hidden-elements/HiddenElementsModule.vue
index 8a1362e3a..a9a9eb594 100644
--- a/src/site/twitch.tv/modules/hidden-elements/HiddenElementsModule.vue
+++ b/src/site/twitch.tv/modules/hidden-elements/HiddenElementsModule.vue
@@ -155,6 +155,23 @@ export const config = [
 		hint: "If checked, on-screen celebrations will be hidden",
 		defaultValue: false,
 	}),
+	declareConfig("layout.hide_whispers", "DROPDOWN", {
+		path: ["Site Layout", "Twitch Features"],
+		label: "Hide Whispers",
+		hint: "Choose when to hide whispers, fullscreen means when chat is hidden",
+		options: [
+			["Never", 0],
+			["Fullscreen", 1],
+			["Allways", 2],
+		],
+		defaultValue: 0,
+	}),
+	declareConfig("layout.hide_stories", "TOGGLE", {
+		path: ["Site Layout", "Sidebar"],
+		label: "Hide Stories",
+		hint: "If checked, Stories will be hidden from the side bar",
+		defaultValue: false,
+	}),
 ];
 </script>
 
@@ -229,13 +246,65 @@ export const config = [
 }
 
 .seventv-hide-recommended-channels {
-	#side-nav > *:nth-child(1) > *:nth-child(1) > *:nth-child(3) {
+	div[class$="side-nav--collapsed"]
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(3)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(2)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(3) {
+		display: none !important;
+	}
+
+	div[class$="side-nav--expanded"]
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(3)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(2)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(4) {
 		display: none !important;
 	}
 }
 
 .seventv-hide-viewers-also-watch {
-	#side-nav > *:nth-child(1) > *:nth-child(1) > *:nth-child(4) {
+	div[class$="side-nav--collapsed"]
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(3)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(2)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(4) {
+		display: none !important;
+	}
+
+	div[class$="side-nav--expanded"]
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(3)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(2)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(5) {
 		display: none !important;
 	}
 }
@@ -293,5 +362,26 @@ export const config = [
 		display: none !important;
 	}
 }
+
+.seventv-hide-whispers-fullscreen {
+	div.whispers-open-threads:not(.whispers--right-column-expanded-beside) {
+		display: none !important;
+	}
+}
+
+.seventv-hide-whispers-all {
+	div.whispers-open-threads {
+		display: none !important;
+	}
+}
+
+.seventv-hide-stories {
+	div[class$="storiesLeftNavSection--csO9S"] {
+		display: none !important;
+	}
+	button:has(div[class$="storiesLeftNavSectionCollapsedButton--txKvw"]) {
+		display: none !important;
+	}
+}
 /* stylelint-enable */
 </style>
diff --git a/src/site/twitch.tv/modules/hidden-elements/hiddenElements.ts b/src/site/twitch.tv/modules/hidden-elements/hiddenElements.ts
index 2b0ae8f3f..a1a5858bf 100644
--- a/src/site/twitch.tv/modules/hidden-elements/hiddenElements.ts
+++ b/src/site/twitch.tv/modules/hidden-elements/hiddenElements.ts
@@ -1,4 +1,4 @@
-import { Ref } from "vue";
+import { Ref, computed } from "vue";
 import { useConfig } from "@/composable/useSettings";
 
 const hideLeaderboard = useConfig<boolean>("layout.hide_channel_leaderboard");
@@ -22,7 +22,8 @@ const hideChatInputBox = useConfig<boolean>("layout.hide_chat_input_box");
 const hidePlayerExtensions = useConfig<boolean>("player.hide_player_extensions");
 const hideChannelPointBalanceButton = useConfig<boolean>("layout.hide_channel_point_balance_button");
 const hideOnscreenCelebrations = useConfig<boolean>("player.hide_onscreen_celebrations");
-
+const hideWhispers = useConfig<number>("layout.hide_whispers");
+const hideStories = useConfig<boolean>("layout.hide_stories");
 export const hiddenElementSettings: Array<{ class: string; isHidden: Ref<boolean> }> = [
 	{ class: "seventv-hide-leaderboard", isHidden: hideLeaderboard },
 	{ class: "seventv-hide-buttons-below-chatbox", isHidden: hideButtonsBelowChatbox },
@@ -45,4 +46,7 @@ export const hiddenElementSettings: Array<{ class: string; isHidden: Ref<boolean
 	{ class: "seventv-hide-player-ext", isHidden: hidePlayerExtensions },
 	{ class: "seventv-hide-channel-point-balance-button", isHidden: hideChannelPointBalanceButton },
 	{ class: "seventv-hide-onscreen-celebrations", isHidden: hideOnscreenCelebrations },
+	{ class: "seventv-hide-whispers-fullscreen", isHidden: computed(() => hideWhispers.value === 1) },
+	{ class: "seventv-hide-whispers-all", isHidden: computed(() => hideWhispers.value === 2) },
+	{ class: "seventv-hide-stories", isHidden: hideStories },
 ];
diff --git a/src/site/twitch.tv/modules/settings/SettingsModule.vue b/src/site/twitch.tv/modules/settings/SettingsModule.vue
index 5278c5ce0..54dd5cbcf 100644
--- a/src/site/twitch.tv/modules/settings/SettingsModule.vue
+++ b/src/site/twitch.tv/modules/settings/SettingsModule.vue
@@ -1,17 +1,11 @@
 <template>
-	<Transition name="settings-menu" appear>
-		<SettingsMenu v-if="ctx.open" />
-	</Transition>
-
 	<SettingsMenuButton @toggle="ctx.open = !ctx.open" />
 </template>
 
 <script setup lang="ts">
 import { declareModule } from "@/composable/useModule";
-import { useSettingsMenu } from "@/app/settings/Settings";
 import SettingsMenuButton from "./SettingsMenuButton.vue";
-import SettingsMenu from "../../../../app/settings/SettingsMenu.vue";
-import { declareConfig } from "@/composable/useSettings";
+import { useSettingsMenu } from "@/app/settings/Settings";
 
 const { markAsReady } = declareModule("settings", {
 	name: "Settings",
@@ -23,17 +17,6 @@ const ctx = useSettingsMenu();
 markAsReady();
 </script>
 
-<script lang="ts">
-export const config = [
-	declareConfig("ui.transparent_backgrounds", "TOGGLE", {
-		path: ["Appearance", "Interface"],
-		label: "Use UI transparency",
-		hint: "If checked some backgrounds will be transparent and blurred. This may affect performance",
-		defaultValue: true,
-	}),
-];
-</script>
-
 <style scoped lang="scss">
 .settings-menu-enter-active,
 .settings-menu-leave-active {
diff --git a/src/site/twitch.tv/modules/sidebar-previews/SidebarPreviewsModule.vue b/src/site/twitch.tv/modules/sidebar-previews/SidebarPreviewsModule.vue
index 2d0b0b6cf..c4ac63bcb 100644
--- a/src/site/twitch.tv/modules/sidebar-previews/SidebarPreviewsModule.vue
+++ b/src/site/twitch.tv/modules/sidebar-previews/SidebarPreviewsModule.vue
@@ -9,6 +9,8 @@ import { declareModule } from "@/composable/useModule";
 import { declareConfig, useConfig } from "@/composable/useSettings";
 import { useComponentHook } from "@/common/ReactHooks";
 import SidebarCard from "./SidebarCard.vue";
+import { ref, watch } from "vue";
+import { useElementHover } from "@vueuse/core";
 
 const { markAsReady } = declareModule("sidebar-previews", {
 	name: "Sidebar Previews",
@@ -22,6 +24,43 @@ const sidebarCard = useComponentHook<Twitch.SidebarCardComponent>({
 	predicate: (n) => n.props && n.props.title && n.props.isWatchParty !== null && n.props.linkTo,
 });
 
+const sidebar = useComponentHook<Twitch.SideBarComponent>(
+	{
+		childSelector: ".side-nav",
+		predicate: (n) => n.collapseOnBreakpoint,
+	},
+	{
+		trackRoot: true,
+	},
+);
+
+const sidebarToggle = useComponentHook<Twitch.SideBarToggleComponent>({
+	parentSelector: ".side-nav",
+	predicate: (n) => n.handleToggleVisibility,
+});
+
+const expandOnHover = useConfig<boolean>("ui.sidebar_hover_expand");
+function toggle(hovering: boolean) {
+	if (!expandOnHover.value) return;
+
+	const btn = sidebarToggle.instances.at(0)?.component;
+	if (!btn) return;
+
+	if (hovering !== btn.props.collapsed) return;
+
+	btn.handleToggleVisibility();
+}
+
+const sidebarEl = ref<Element>();
+const isHovering = useElementHover(sidebarEl);
+watch(isHovering, toggle, { immediate: true });
+
+watch(
+	() => sidebar.instances.at(0)?.domNodes["root"],
+	(n) => (sidebarEl.value = n),
+	{ immediate: true },
+);
+
 markAsReady();
 </script>
 
@@ -33,5 +72,30 @@ export const config = [
 		hint: "Show stream thumbnails when hovering over streams on the sidebar.",
 		defaultValue: false,
 	}),
+	declareConfig("ui.sidebar_hover_expand", "TOGGLE", {
+		path: ["Appearance", "Interface"],
+		label: "Sidebar Expand on Hover",
+		hint: "Expand the sidebar when hovering over it.",
+		effect: (v) => document.body.classList.toggle("seventv-sidebar-hover", v),
+		defaultValue: false,
+	}),
 ];
 </script>
+<style lang="scss">
+.seventv-sidebar-hover {
+	/* stylelint-disable */
+	.side-nav-card__link__tooltip-arrow {
+		display: none !important;
+	}
+	/* stylelint-enable */
+
+	.side-nav {
+		position: absolute;
+		z-index: 3;
+	}
+
+	.twilight-main {
+		margin-left: 5rem;
+	}
+}
+</style>
diff --git a/src/types/app.d.ts b/src/types/app.d.ts
index cf6894893..d9971f9cd 100644
--- a/src/types/app.d.ts
+++ b/src/types/app.d.ts
@@ -106,6 +106,7 @@ declare namespace SevenTV {
 		disabledIf?: () => boolean;
 		predicate?: (p: T) => boolean;
 		effect?: (v: T) => void;
+		transform?: (v: unknown) => T;
 
 		options?: {
 			SELECT: [string, T][];
@@ -480,6 +481,7 @@ declare namespace FFZ {
 			display_name: string;
 		} | null;
 		urls: LinkMap;
+		animated?: LinkMap;
 	}
 
 	interface BadgesResponse {
diff --git a/src/types/kick.d.ts b/src/types/kick.d.ts
new file mode 100644
index 000000000..df1c1b2b1
--- /dev/null
+++ b/src/types/kick.d.ts
@@ -0,0 +1,211 @@
+declare module Kick {
+	namespace Message {
+		interface DefaultProps {
+			channelSlug: string;
+			message: {
+				id: string;
+				chatroom_id: number;
+				content: string;
+				created_at: string;
+				sender: {
+					id: number;
+					username: string;
+					slug: string;
+					type: string;
+				};
+			};
+			sender: {
+				id: number;
+				slug: string;
+				username: string;
+			};
+			messageId: string;
+		}
+		type MessageListProps = {
+			children: ReactExtended.WritableComponent<DefaultProps>[];
+		};
+	}
+
+	namespace Lexical {
+		type RootListener = (rootElement: null | HTMLElement, prevRootElement: null | HTMLElement) => void;
+		type TextContentListener = (text: string) => void;
+
+		type EditorReadOptions = {
+			pending?: boolean;
+		};
+
+		type EditorUpdateOptions = {
+			onUpdate?: () => void;
+			tag?: string | Array<string>;
+			skipTransforms?: true;
+			discrete?: true;
+		};
+
+		type EditorFocusOptions = {
+			defaultSelection?: "rootStart" | "rootEnd";
+		};
+
+		type EditorSetOptions = {
+			tag?: string;
+		};
+
+		interface EditorState {
+			_nodeMap: NodeMap;
+			_selection: null | BaseSelection;
+		}
+
+		type EditorStateReadOptions = {
+			editor?: LexicalEditor | null;
+		};
+
+		type CommandListener<P> = (payload: P, editor: LexicalEditor) => boolean;
+
+		class LexicalEditor {
+			_commands: Map<LexicalCommand<unknown>, Array<Set<CommandListener<unknown>>>>;
+			_nodes: RegisteredNodes;
+			registerRootListener(listener: RootListener): () => void;
+			registerTextContentListener(listener: TextContentListener): () => void;
+			registerCommand<P>(
+				command: LexicalCommand<P>,
+				listener: CommandListener<P>,
+				priority: CommandListenerPriority,
+			): () => void;
+			registerNodeTransform<T extends LexicalNode>(klass: Class<T>, listener: Transform<T>): () => void;
+			hasNodes(nodes: Array<Class<LexicalNode>>): boolean;
+			getEditorState(): EditorState;
+			setEditorState(editorState: EditorState, options?: EditorSetOptions): void;
+			update(updateFn: () => void, options?: EditorUpdateOptions): boolean;
+			focus(callbackFn?: () => void, options?: EditorFocusOptions): void;
+			blur(): void;
+		}
+
+		type NodeKey = string;
+
+		class LexicalNode {
+			__type: string;
+			constructor(key?: NodeKey): void;
+			getChildren<T extends LexicalNode>(): Array<T>;
+			getChildren<T extends Array<LexicalNode>>(): T;
+			getTextContent(includeDirectionless?: boolean): string;
+			getTextContentSize(includeDirectionless?: boolean): number;
+			select(_anchorOffset?: number, _focusOffset?: number): RangeSelection;
+			remove(preserveEmptyParent?: boolean): void;
+			replace<N extends LexicalNode>(replaceWith: N): N;
+			insertAfter(nodeToInsert: LexicalNode, restoreSelection?: boolean): LexicalNode;
+			insertBefore(nodeToInsert: LexicalNode, restoreSelection?: boolean): LexicalNode;
+			append(...nodesToAppend: Array<LexicalNode>): this;
+		}
+
+		type NodeMap = Map<NodeKey, LexicalNode>;
+
+		interface BaseSelection {
+			getNodes(): Array<LexicalNode>;
+			getTextContent(): string;
+			insertText(text: string): void;
+			insertNodes(nodes: Array<LexicalNode>): void;
+		}
+
+		class NodeSelection {
+			_nodes: Set<NodeKey>;
+			constructor(objects: Set<NodeKey>): void;
+			add(key: NodeKey): void;
+			delete(key: NodeKey): void;
+			clear(): void;
+			insertRawText(): void;
+			insertText(): void;
+			getNodes(): Array<LexicalNode>;
+			getTextContent(): string;
+			insertNodes(nodes: Array<LexicalNode>): void;
+		}
+
+		class RangeSelection {
+			anchor: Point;
+			focus: Point;
+			constructor(anchor: Point, focus: Point, format: number): void;
+			getNodes(): Array<LexicalNode>;
+			getTextContent(): string;
+			insertText(text: string): void;
+			insertNodes(nodes: Array<LexicalNode>): void;
+			insertNodes(nodes: Array<LexicalNode>): void;
+		}
+
+		type TextPointType = {
+			offset: number;
+			type: "text";
+			getNode: () => TextNode;
+		};
+
+		type ElementPointType = {
+			offset: number;
+			type: "element";
+			getNode: () => ElementNode;
+		};
+
+		type Point = TextPointType | ElementPointType;
+
+		class TextNode extends LexicalNode {
+			constructor(text: string, key?: NodeKey): void;
+			getTextContent(): string;
+			select(_anchorOffset?: number, _focusOffset?: number): RangeSelection;
+			spliceText(offset: number, delCount: number, newText: string, moveSelection?: boolean): TextNode;
+		}
+
+		class RootNode extends ElementNode {
+			constructor(): void;
+			getChildren<T extends LexicalNode>(): Array<T>;
+			getChildren<T extends Array<LexicalNode>>(): T;
+			getTextContent(): string;
+			select(_anchorOffset?: number, _focusOffset?: number): RangeSelection;
+			remove(): void;
+			replace<N extends LexicalNode>(node: N): N;
+			insertBefore<T extends LexicalNode>(nodeToInsert: T): T;
+			insertAfter<T extends LexicalNode>(nodeToInsert: T): T;
+			append(...nodesToAppend: Array<LexicalNode>): this;
+		}
+
+		export declare class ElementNode extends LexicalNode {
+			constructor(key?: NodeKey): void;
+			getChildren<T extends LexicalNode>(): Array<T>;
+			getChildren<T extends Array<LexicalNode>>(): T;
+			getAllTextNodes(): Array<TextNode>;
+			getFirstChild<T extends LexicalNode>(): null | T;
+			getLastChild<T extends LexicalNode>(): null | T;
+			getTextContent(): string;
+			select(_anchorOffset?: number, _focusOffset?: number): RangeSelection;
+			selectStart(): RangeSelection;
+			selectEnd(): RangeSelection;
+			clear(): this;
+			append(...nodesToAppend: Array<LexicalNode>): this;
+		}
+
+		class ParagraphNode extends ElementNode {
+			constructor(key?: NodeKey): void;
+		}
+	}
+
+	export interface KickEmote {
+		id: number;
+		channel_id: number | null;
+		name: string;
+		sbuscribers_only: boolean;
+	}
+
+	export interface KickBaseEmoteSet {
+		id: string;
+		emotes: KickEmote[];
+	}
+
+	export interface KickGlobalEmoteSet extends KickBaseEmoteSet {
+		name: string;
+	}
+
+	export interface KickUserEmoteSet extends KickBaseEmoteSet {
+		user_id: number;
+		slug: string;
+		user: KickIdentity & {
+			profile_pic: string;
+		};
+	}
+
+	export type KickEmoteSet = KickGlobalEmoteSet | KickUserEmoteSet;
+}
diff --git a/src/types/kick.module.d.ts b/src/types/kick.module.d.ts
index a76aeb1f9..7d7f85103 100644
--- a/src/types/kick.module.d.ts
+++ b/src/types/kick.module.d.ts
@@ -1,5 +1,7 @@
 import AuthModuleVue from "@/site/kick.com/modules/auth/AuthModule.vue";
+import ChatInputModuleVue from "@/site/kick.com/modules/chat-input/ChatInputModule.vue";
 import ChatModuleVue from "@/site/kick.com/modules/chat/ChatModule.vue";
+import EmoteMenuModuleVue from "@/site/kick.com/modules/emote-menu/EmoteMenuModule.vue";
 import SettingsModuleVue from "@/site/kick.com/modules/settings/SettingsModule.vue";
 
 declare type KickModuleID = keyof KickModuleComponentMap;
@@ -8,4 +10,6 @@ declare type KickModuleComponentMap = {
 	auth: typeof AuthModuleVue;
 	chat: typeof ChatModuleVue;
 	settings: typeof SettingsModuleVue;
+	"chat-input": typeof ChatInputModuleVue;
+	"emote-menu": typeof EmoteMenuModuleVue;
 };
diff --git a/src/types/react-extended.d.ts b/src/types/react-extended.d.ts
index 6a680fd75..35e992a81 100644
--- a/src/types/react-extended.d.ts
+++ b/src/types/react-extended.d.ts
@@ -14,12 +14,12 @@ declare namespace ReactExtended {
 
 	type Writeable<T> = { -readonly [P in keyof T]: Writeable<T[P]> };
 
-	interface ReactVNode {
+	interface ReactVNode<P = {} | null> {
 		alternate: ReactVNode | null;
 		child: ReactVNode | null;
 		childExpirationTime: number | null;
 		effectTag: number | null;
-		elementType: React.ElementType | null;
+		elementType: React.ElementType<P> | null;
 		expirationTime: number | null;
 		index: number | null;
 		key: Key | null;
@@ -28,7 +28,14 @@ declare namespace ReactExtended {
 		sibling: ReactVNode | null;
 		stateNode: React.ReactInstance | null;
 		tag: number | null;
-		type: React.ElementType | null;
+		type: React.ElementType<P> | null;
+		pendingProps: P;
+		memoizedProps: P;
+	}
+
+	interface ReactFunctionalFiber<P = {}> extends ReactVNode<P> {
+		elementType: { render: (props: P) => ReactExtended.ReactVNode };
+		pendingProps: P;
 	}
 
 	interface ReactRuntimeElement extends React.ReactElement {
diff --git a/src/types/twitch.d.ts b/src/types/twitch.d.ts
index 628179567..0a2f4cc35 100644
--- a/src/types/twitch.d.ts
+++ b/src/types/twitch.d.ts
@@ -119,6 +119,11 @@ declare module Twitch {
 		};
 	};
 
+	export enum WarnUserPopoverPlacement {
+		CHAT = 0,
+		VIEWERS_LIST = 1,
+	}
+
 	export type ChatControllerComponent = ReactExtended.WritableComponent<{
 		authToken: string | undefined;
 		channelDisplayName: string;
@@ -161,6 +166,10 @@ declare module Twitch {
 		userDisplayName: string | undefined;
 		userID: string | undefined;
 		userLogin: string | undefined;
+		warnUserTargetLogin: string | undefined;
+		warnUserTargetID: string | undefined;
+		setWarnUserTarget: (target: { targetUserLogin: string; targetUserID: string }) => void;
+		setWarnUserPopoverPlacement: (placement: WarnUserPopoverPlacement | null) => void;
 	}> & {
 		pushMessage: (msg: Partial<ChatMessage>) => void;
 		sendMessage: (msg: string, n?: any) => void;
@@ -220,6 +229,10 @@ declare module Twitch {
 		onClearChatEvent: (e: { channel: string }) => void;
 	};
 
+	export type ChatListPresentationComponent = ReactExtended.WritableComponent<{
+		sharedChatDataByChannelID: Map<string, SharedChat>;
+	}>;
+
 	export interface MessageHandlerAPI {
 		addMessageHandler: (event: (msg: ChatMessage) => void) => void;
 		removeMessageHandler: (event: (msg: ChatMessage) => void) => void;
@@ -437,6 +450,10 @@ declare module Twitch {
 		determineGroup: (command: ChatCommand) => string;
 	};
 
+	export type ChatCommunityPointsButtonComponent = ReactExtended.WritableComponent<{}> & {
+		shouldShowBitsBalance: () => boolean;
+	};
+
 	export type ChatChannelPointsClaimComponent = ReactExtended.WritableComponent<{
 		hidden: boolean;
 	}> & {
@@ -476,6 +493,7 @@ declare module Twitch {
 		sendMessageHandler?: ChatTray.SendMessageHandler<H>;
 		messageHandler?: (v: string) => void;
 		placeholder?: string;
+		floating?: boolean;
 	}
 
 	export namespace ChatTray {
@@ -702,6 +720,17 @@ declare module Twitch {
 		userLogin: string;
 	}>;
 
+	export type SideBarComponent = ReactExtended.WritableComponent<{}> & {
+		collapseOnBreakpoint: () => void;
+	};
+
+	export type SideBarToggleComponent = ReactExtended.WritableComponent<{
+		collapsed: boolean;
+	}> & {
+		toggle: () => void;
+		handleToggleVisibility: () => void;
+	};
+
 	export enum Theme {
 		"Light",
 		"Dark",
@@ -833,6 +862,15 @@ declare module Twitch {
 		badges?: { id: string }[];
 	}
 
+	export interface SharedChat {
+		badges: BadgeSets;
+		displayName: string;
+		login: string;
+		primaryColorHex: string;
+		profileImageURL: string;
+		status: "ACTIVE" | "INACTIVE";
+	}
+
 	export interface TwitchEmote {
 		id: string;
 		modifiers?: any;
diff --git a/src/types/twitch.messages.d.ts b/src/types/twitch.messages.d.ts
index 853aecadf..2ae16180f 100644
--- a/src/types/twitch.messages.d.ts
+++ b/src/types/twitch.messages.d.ts
@@ -2,6 +2,9 @@ declare namespace Twitch {
 	export interface AnyMessage {
 		id: string;
 		type: number;
+		sourceRoomID?: string;
+		sourceData?: SharedChat;
+		sharedChat?: SharedChatMessage;
 		user?: ChatUser | null;
 		message?: ChatMessage;
 		badges?: Record<string, string>;
@@ -16,6 +19,12 @@ declare namespace Twitch {
 		notifySent?: () => void;
 	}
 
+	export interface SharedChatMessage extends AnyMessage {
+		sourceBadges: Record<string, string>;
+		sourceID: string;
+		sourceRoomID: string;
+	}
+
 	export interface DisplayableMessage extends AnyMessage {
 		messageParts?: ChatMessage.Part[];
 		messageBody?: string;
diff --git a/src/worker/worker.http.ts b/src/worker/worker.http.ts
index 418cc53a4..ee2a8ade4 100644
--- a/src/worker/worker.http.ts
+++ b/src/worker/worker.http.ts
@@ -25,7 +25,7 @@ enum ProviderPriority {
 }
 
 export class WorkerHttp {
-	private lastPresenceAt = 0;
+	private lastPresenceAt: Map<string, number> = new Map();
 	static imageFormat: SevenTV.ImageFormat = "WEBP";
 
 	constructor(private driver: WorkerDriver) {
@@ -53,11 +53,13 @@ export class WorkerHttp {
 		});
 		driver.addEventListener("set_channel_presence", (ev) => {
 			if (!ev.port || !ev.port.platform || !ev.port.user || !ev.detail) return;
-			if (this.lastPresenceAt && this.lastPresenceAt > Date.now() - 1e4) {
+
+			const lastPresenceAt = this.lastPresenceAt?.get(ev.detail.id);
+			if (lastPresenceAt && lastPresenceAt > Date.now() - 1e4) {
 				return;
 			}
 
-			this.lastPresenceAt = Date.now();
+			this.lastPresenceAt.set(ev.detail.id, Date.now());
 			this.writePresence(ev.port.platform, ev.port.user.id, ev.detail.id);
 		});
 		driver.addEventListener("imageformat_updated", async (ev) => {