diff --git a/apps/api-gql/internal/gql/resolvers/overlays.resolver.go b/apps/api-gql/internal/gql/resolvers/overlays.resolver.go
index 209a0c522..12e4beff0 100644
--- a/apps/api-gql/internal/gql/resolvers/overlays.resolver.go
+++ b/apps/api-gql/internal/gql/resolvers/overlays.resolver.go
@@ -14,11 +14,18 @@ import (
 )
 
 // ChatOverlayUpdate is the resolver for the chatOverlayUpdate field.
-func (r *mutationResolver) ChatOverlayUpdate(
-	ctx context.Context,
-	opts gqlmodel.ChatOverlayUpdateOpts,
-) (bool, error) {
-	return r.updateChatOverlay(ctx, opts)
+func (r *mutationResolver) ChatOverlayUpdate(ctx context.Context, id string, opts gqlmodel.ChatOverlayMutateOpts) (bool, error) {
+	return r.updateChatOverlay(ctx, id, opts)
+}
+
+// ChatOverlayCreate is the resolver for the chatOverlayCreate field.
+func (r *mutationResolver) ChatOverlayCreate(ctx context.Context, opts gqlmodel.ChatOverlayMutateOpts) (bool, error) {
+	panic(fmt.Errorf("not implemented: ChatOverlayCreate - chatOverlayCreate"))
+}
+
+// ChatOverlayDelete is the resolver for the chatOverlayDelete field.
+func (r *mutationResolver) ChatOverlayDelete(ctx context.Context, id string) (bool, error) {
+	panic(fmt.Errorf("not implemented: ChatOverlayDelete - chatOverlayDelete"))
 }
 
 // ChatOverlays is the resolver for the chatOverlays field.
@@ -32,10 +39,7 @@ func (r *queryResolver) ChatOverlays(ctx context.Context) ([]gqlmodel.ChatOverla
 }
 
 // ChatOverlaysByID is the resolver for the chatOverlaysById field.
-func (r *queryResolver) ChatOverlaysByID(ctx context.Context, id string) (
-	*gqlmodel.ChatOverlay,
-	error,
-) {
+func (r *queryResolver) ChatOverlaysByID(ctx context.Context, id string) (*gqlmodel.ChatOverlay, error) {
 	dashboardId, err := r.sessions.GetSelectedDashboard(ctx)
 	if err != nil {
 		return nil, err
@@ -45,11 +49,7 @@ func (r *queryResolver) ChatOverlaysByID(ctx context.Context, id string) (
 }
 
 // ChatOverlaySettings is the resolver for the chatOverlaySettings field.
-func (r *subscriptionResolver) ChatOverlaySettings(
-	ctx context.Context,
-	id string,
-	apiKey string,
-) (<-chan *gqlmodel.ChatOverlay, error) {
+func (r *subscriptionResolver) ChatOverlaySettings(ctx context.Context, id string, apiKey string) (<-chan *gqlmodel.ChatOverlay, error) {
 	user := model.Users{}
 	if err := r.gorm.Where(`"apiKey" = ?`, apiKey).First(&user).Error; err != nil {
 		return nil, fmt.Errorf("failed to get user: %w", err)
diff --git a/apps/api-gql/internal/gql/resolvers/overlays.resolver.service.go b/apps/api-gql/internal/gql/resolvers/overlays.resolver.service.go
index ecb9f4c93..da9cc596f 100644
--- a/apps/api-gql/internal/gql/resolvers/overlays.resolver.service.go
+++ b/apps/api-gql/internal/gql/resolvers/overlays.resolver.service.go
@@ -6,17 +6,11 @@ import (
 	"log/slog"
 
 	"github.com/google/uuid"
-	"github.com/samber/lo"
 	model "github.com/satont/twir/libs/gomodels"
 	"github.com/twirapp/twir/apps/api-gql/internal/gql/gqlmodel"
 )
 
 func chatOverlayDbToGql(entity *model.ChatOverlaySettings) *gqlmodel.ChatOverlay {
-	var animation *gqlmodel.ChatOverlayAnimation
-	if entity.Animation != nil {
-		animation = lo.ToPtr(gqlmodel.ChatOverlayAnimation(*entity.Animation))
-	}
-
 	return &gqlmodel.ChatOverlay{
 		ID:                  entity.ID.String(),
 		MessageHideTimeout:  int(entity.MessageHideTimeout),
@@ -35,7 +29,7 @@ func chatOverlayDbToGql(entity *model.ChatOverlaySettings) *gqlmodel.ChatOverlay
 		FontWeight:          int(entity.FontWeight),
 		FontStyle:           entity.FontStyle,
 		PaddingContainer:    int(entity.PaddingContainer),
-		Animation:           animation,
+		Animation:           gqlmodel.ChatOverlayAnimation(entity.Animation),
 	}
 }
 
@@ -83,7 +77,8 @@ func (r *Resolver) getChatOverlaySettings(
 
 func (r *mutationResolver) updateChatOverlay(
 	ctx context.Context,
-	opts gqlmodel.ChatOverlayUpdateOpts,
+	id string,
+	opts gqlmodel.ChatOverlayMutateOpts,
 ) (bool, error) {
 	dashboardId, err := r.sessions.GetSelectedDashboard(ctx)
 	if err != nil {
@@ -93,7 +88,7 @@ func (r *mutationResolver) updateChatOverlay(
 	entity := model.ChatOverlaySettings{}
 	if err := r.gorm.
 		WithContext(ctx).
-		Where("channel_id = ? AND id = ?", dashboardId, opts.ID).
+		Where("channel_id = ? AND id = ?", dashboardId, id).
 		First(&entity).Error; err != nil {
 		return false, fmt.Errorf("failed to get chat overlay settings: %w", err)
 	}
@@ -163,7 +158,7 @@ func (r *mutationResolver) updateChatOverlay(
 	}
 
 	if opts.Animation.IsSet() {
-		entity.Animation = lo.ToPtr(model.ChatOverlaySettingsAnimationType(*opts.Animation.Value()))
+		entity.Animation = model.ChatOverlaySettingsAnimationType(*opts.Animation.Value())
 	}
 
 	if err := r.gorm.
diff --git a/apps/api-gql/schema/overlays.graphqls b/apps/api-gql/schema/overlays.graphqls
index fc624e77b..184f515c5 100644
--- a/apps/api-gql/schema/overlays.graphqls
+++ b/apps/api-gql/schema/overlays.graphqls
@@ -4,7 +4,9 @@ extend type Query {
 }
 
 extend type Mutation {
-	chatOverlayUpdate(opts: ChatOverlayUpdateOpts!): Boolean! @isAuthenticated @hasChannelRolesDashboardPermission(permission: MANAGE_OVERLAYS)
+	chatOverlayUpdate(id: String!, opts: ChatOverlayMutateOpts!): Boolean! @isAuthenticated @hasChannelRolesDashboardPermission(permission: MANAGE_OVERLAYS)
+	chatOverlayCreate(opts: ChatOverlayMutateOpts!): Boolean! @isAuthenticated @hasChannelRolesDashboardPermission(permission: MANAGE_OVERLAYS)
+	chatOverlayDelete(id: String!): Boolean! @isAuthenticated @hasChannelRolesDashboardPermission(permission: MANAGE_OVERLAYS)
 }
 
 extend type Subscription {
@@ -13,6 +15,7 @@ extend type Subscription {
 
 enum ChatOverlayAnimation {
 	DISABLED
+	DEFAULT
 }
 
 type ChatOverlay {
@@ -33,11 +36,10 @@ type ChatOverlay {
 	fontWeight: Int!
 	fontStyle: String!
 	paddingContainer: Int!
-	animation: ChatOverlayAnimation
+	animation: ChatOverlayAnimation!
 }
 
-input ChatOverlayUpdateOpts {
-	id: String!
+input ChatOverlayMutateOpts {
 	messageHideTimeout: Int
 	messageShowDelay: Int
 	preset: String
diff --git a/frontend/dashboard/codegen.ts b/frontend/dashboard/codegen.ts
index 137b6b706..4e76120ac 100644
--- a/frontend/dashboard/codegen.ts
+++ b/frontend/dashboard/codegen.ts
@@ -1,8 +1,9 @@
-import { join, resolve } from 'path';
+import { join, resolve } from 'node:path'
+import process from 'node:process'
 
-import type { CodegenConfig } from '@graphql-codegen/cli';
+import type { CodegenConfig } from '@graphql-codegen/cli'
 
-const schemaDir = resolve(join(process.cwd(), '..', '..', 'apps', 'api-gql', 'schema', '*.graphqls'));
+const schemaDir = resolve(join(process.cwd(), '..', '..', 'apps', 'api-gql', 'schema', '*.graphqls'))
 
 const config: CodegenConfig = {
 	config: {
@@ -21,6 +22,6 @@ const config: CodegenConfig = {
 			},
 		},
 	},
-};
+}
 
-export default config;
+export default config
diff --git a/frontend/dashboard/src/api/overlays/chat.ts b/frontend/dashboard/src/api/overlays/chat.ts
index 3dcb7c1d9..c2f7604e3 100644
--- a/frontend/dashboard/src/api/overlays/chat.ts
+++ b/frontend/dashboard/src/api/overlays/chat.ts
@@ -1,71 +1,73 @@
-import { useQueryClient, useQuery, useMutation } from '@tanstack/vue-query';
-import type {
-	Settings,
-	UpdateRequest,
-	GetAllResponse,
-} from '@twir/api/messages/overlays_chat/overlays_chat';
-import { unref } from 'vue';
-import type { MaybeRef } from 'vue';
+import { useQuery } from '@urql/vue'
+import { createGlobalState } from '@vueuse/core'
 
-import { protectedApiClient } from '@/api/twirp.js';
+import { useMutation } from '@/composables/use-mutation'
+import { graphql } from '@/gql'
 
-export const useChatOverlayManager = () => {
-	const queryClient = useQueryClient();
-	const queryKey = 'chatOverlay';
+const cacheKey = ['chatOverlays']
 
-	return {
-		useGet: (id: MaybeRef<string>) => useQuery({
-			queryKey: [queryKey, id],
-			queryFn: async (): Promise<Settings | null> => {
-				try {
-					const call = await protectedApiClient.overlayChatGet({
-						id: unref(id),
-					});
-					return call.response;
-				} catch {
-					return null;
+export const useChatOverlayApi = createGlobalState(() => {
+	const useOverlaysQuery = () => useQuery({
+		query: graphql(`
+			query UseOverlaysData {
+				chatOverlays {
+					id
+					messageHideTimeout
+					messageShowDelay
+					preset
+					fontSize
+					hideCommands
+					hideBots
+					fontFamily
+					showBadges
+					showAnnounceBadge
+					textShadowColor
+					textShadowSize
+					chatBackgroundColor
+					direction
+					fontWeight
+					fontStyle
+					paddingContainer
+					animation
 				}
-			},
-		}),
-		useGetAll: () => useQuery({
-			queryKey: [queryKey],
-			queryFn: async (): Promise<GetAllResponse> => {
-				const call = await protectedApiClient.overlayChatGetAll({});
-				return call.response;
-			},
-		}),
-		useCreate: () => useMutation({
-			mutationKey: ['chatOverlayCreate'],
-			mutationFn: async (opts: MaybeRef<Settings>) => {
-				const data = unref(opts);
-				const call = await protectedApiClient.overlayChatCreate(data);
-				return call.response;
-			},
-			onSuccess: async () => {
-				await queryClient.invalidateQueries([queryKey]);
-			},
-		}),
-		useUpdate: () => useMutation({
-			mutationKey: ['chatOverlayUpdate'],
-			mutationFn: async (opts: MaybeRef<UpdateRequest>) => {
-				const data = unref(opts);
-				await protectedApiClient.overlayChatUpdate(data);
-			},
-			onSuccess: async (_, opts) => {
-				const data = unref(opts);
-				await queryClient.invalidateQueries([queryKey, data.id]);
-			},
-		}),
-		useDelete: () => useMutation({
-			mutationKey: ['chatOverlayDelete'],
-			mutationFn: async (id: MaybeRef<string>) => {
-				await protectedApiClient.overlayChatDelete({
-					id: unref(id),
-				});
-			},
-			onSuccess: async () => {
-				await queryClient.invalidateQueries([queryKey]);
-			},
-		}),
-	};
-};
+			}
+		`),
+		context: {
+			additionalTypenames: cacheKey,
+		},
+	})
+
+	const useOverlayDelete = () => useMutation(
+		graphql(`
+			mutation DeleteOverlay($id: String!) {
+				chatOverlayDelete(id: $id)
+			}
+		`),
+		cacheKey,
+	)
+
+	const useOverlayCreate = () => useMutation(
+		graphql(`
+			mutation CreateOverlay($input: ChatOverlayMutateOpts!) {
+				chatOverlayCreate(opts: $input)
+			}
+		`),
+		cacheKey,
+	)
+
+	const useOverlayUpdate = () => useMutation(
+		graphql(`
+			mutation UpdateOverlay($id: String!, $input: ChatOverlayMutateOpts!) {
+				chatOverlayUpdate(id: $id, opts: $input)
+			}
+		`),
+		cacheKey,
+	)
+
+	return {
+		useOverlaysQuery,
+		useOverlayDelete,
+		useOverlayCreate,
+		useOverlayUpdate,
+	}
+})
diff --git a/frontend/dashboard/src/components/overlays/chat.vue b/frontend/dashboard/src/components/overlays/chat.vue
index 973998106..20379c36d 100644
--- a/frontend/dashboard/src/components/overlays/chat.vue
+++ b/frontend/dashboard/src/components/overlays/chat.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { IconMessage } from '@tabler/icons-vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { IconMessage } from '@tabler/icons-vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 
-import Card from '@/components/overlays/card.vue';
+import Card from '@/components/overlays/card.vue'
 
-const { t } = useI18n();
+const { t } = useI18n()
 
-const router = useRouter();
+const router = useRouter()
 </script>
 
 <template>
-	<card
+	<Card
 		:icon="IconMessage"
 		:icon-stroke="1"
 		title="Chat"
@@ -20,5 +20,5 @@ const router = useRouter();
 		:show-copy="false"
 		@open-settings="router.push({ name: 'ChatOverlay' })"
 	>
-	</card>
+	</Card>
 </template>
diff --git a/frontend/dashboard/src/pages/overlays/chat/Chat.vue b/frontend/dashboard/src/pages/overlays/chat/Chat.vue
index 7f69bfd46..88469dde4 100644
--- a/frontend/dashboard/src/pages/overlays/chat/Chat.vue
+++ b/frontend/dashboard/src/pages/overlays/chat/Chat.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {
-	type BadgeVersion,
 	ChatBox,
 	type Settings as ChatBoxSettings,
 	type Message,
@@ -23,7 +22,7 @@ import { globalBadges } from './constants.js'
 import * as faker from './faker.js'
 
 import {
-	useChatOverlayManager,
+	useChatOverlayApi,
 	useUserAccessFlagChecker,
 } from '@/api/index.js'
 import { useNaiveDiscrete } from '@/composables/use-naive-discrete.js'
@@ -31,18 +30,14 @@ import { ChannelRolePermissionEnum } from '@/gql/graphql'
 
 const themeVars = useThemeVars()
 const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays)
-const chatManager = useChatOverlayManager()
-const creator = chatManager.useCreate()
-const deleter = chatManager.useDelete()
 
 const { t } = useI18n()
 const { dialog } = useNaiveDiscrete()
 
-const {
-	data: entities,
-} = chatManager.useGetAll()
-
-const globalBadgesObject = Object.fromEntries(globalBadges)
+const chatOverlaysManager = useChatOverlayApi()
+const deleter = chatOverlaysManager.useOverlayDelete()
+const creator = chatOverlaysManager.useOverlayCreate()
+const { data: chatOverlaysData } = chatOverlaysManager.useOverlaysQuery()
 
 const messagesMock = ref<Message[]>([])
 
@@ -69,7 +64,7 @@ useIntervalFn(() => {
 		senderColor: faker.rgb(),
 		announceColor: '',
 		badges: {
-			[faker.randomObjectKey(globalBadgesObject)]: '1',
+			[faker.randomArrayItem(globalBadges).set_id]: '1',
 		},
 		id: crypto.randomUUID(),
 		senderDisplayName: faker.firstName(),
@@ -89,20 +84,20 @@ useIntervalFn(() => {
 const openedTab = ref<string>()
 
 function resetTab() {
-	if (!entities.value?.settings.at(0)) {
+	if (!chatOverlaysData.value?.chatOverlays.at(0)) {
 		openedTab.value = undefined
 		return
 	}
 
-	openedTab.value = entities.value.settings.at(0)!.id
+	openedTab.value = chatOverlaysData.value.chatOverlays.at(0)!.id
 }
 
-watch(entities, () => {
+watch(() => chatOverlaysData.value?.chatOverlays, () => {
 	resetTab()
 }, { immediate: true })
 
 watch(openedTab, (v) => {
-	const entity = entities.value?.settings.find(s => s.id === v)
+	const entity = chatOverlaysData.value?.chatOverlays.find(s => s.id === v)
 	if (!entity) return
 
 	setData(entity)
@@ -118,7 +113,7 @@ const chatBoxSettings = computed<ChatBoxSettings>(() => {
 		channelName: '',
 		channelDisplayName: '',
 		globalBadges,
-		channelBadges: new Map<string, BadgeVersion>(),
+		channelBadges: [],
 		...formValue.value,
 	}
 })
@@ -131,21 +126,21 @@ async function handleClose(id: string) {
 		negativeText: 'Cancel',
 		showIcon: false,
 		onPositiveClick: async () => {
-			const entity = entities.value?.settings.find(s => s.id === id)
+			const entity = chatOverlaysData.value?.chatOverlays.find(s => s.id === id)
 			if (!entity?.id) return
 
-			await deleter.mutateAsync(entity.id)
+			await deleter.executeMutation(entity.id)
 			resetTab()
 		},
 	})
 }
 
 async function handleAdd() {
-	await creator.mutateAsync(getDefaultSettings())
+	await creator.executeMutation({ input: getDefaultSettings() })
 }
 
 const addable = computed(() => {
-	return userCanEditOverlays.value && (entities.value?.settings.length ?? 0) < 5
+	return userCanEditOverlays.value && (chatOverlaysData.value?.chatOverlays.length ?? 0) < 5
 })
 </script>
 
@@ -177,9 +172,9 @@ const addable = computed(() => {
 				<template #prefix>
 					{{ t('overlays.chat.presets') }}
 				</template>
-				<template v-if="entities?.settings.length">
+				<template v-if="chatOverlaysData?.chatOverlays.length">
 					<NTabPane
-						v-for="(entity, entityIndex) in entities?.settings"
+						v-for="(entity, entityIndex) in chatOverlaysData.chatOverlays"
 						:key="entity.id"
 						:tab="`#${entityIndex + 1}`"
 						:name="entity.id!"
@@ -190,7 +185,7 @@ const addable = computed(() => {
 					</NTabPane>
 				</template>
 			</NTabs>
-			<NAlert v-if="!entities?.settings.length" type="info" class="mt-2">
+			<NAlert v-if="!chatOverlaysData?.chatOverlays" type="info" class="mt-2">
 				Create new overlay for edit settings
 			</NAlert>
 		</div>
diff --git a/frontend/dashboard/src/pages/overlays/chat/components/Form.vue b/frontend/dashboard/src/pages/overlays/chat/components/Form.vue
index b88aa4b23..7ce160399 100644
--- a/frontend/dashboard/src/pages/overlays/chat/components/Form.vue
+++ b/frontend/dashboard/src/pages/overlays/chat/components/Form.vue
@@ -17,7 +17,11 @@ import { useI18n } from 'vue-i18n'
 import { defaultChatSettings } from './default-settings'
 import { useChatOverlayForm } from './form.js'
 
-import { useChatOverlayManager, useProfile, useUserAccessFlagChecker } from '@/api'
+import {
+	useChatOverlayApi,
+	useProfile,
+	useUserAccessFlagChecker,
+} from '@/api'
 import { useCopyOverlayLink } from '@/components/overlays/copyOverlayLink.js'
 import { useNaiveDiscrete } from '@/composables/use-naive-discrete'
 import { ChannelRolePermissionEnum } from '@/gql/graphql'
@@ -67,15 +71,19 @@ const sliderMarks = {
 	60: '60',
 }
 
-const manager = useChatOverlayManager()
-const updater = manager.useUpdate()
+const manager = useChatOverlayApi()
+const updater = manager.useOverlayUpdate()
 
 async function save() {
 	if (!formValue.value.id) return
 
-	await updater.mutateAsync({
-		id: formValue.value.id,
-		settings: formValue.value,
+	const input = { ...formValue.value }
+	const id = input.id!
+	delete input.id
+
+	await updater.executeMutation({
+		id,
+		input,
 	})
 
 	discrete.notification.success({
@@ -87,7 +95,7 @@ async function save() {
 
 <template>
 	<div v-if="formValue" class="card">
-		<div class="flex-wrap justify-start">
+		<div class="flex flex-wrap justify-start gap-2">
 			<NButton
 				secondary
 				type="error"
@@ -154,6 +162,19 @@ async function save() {
 					/>
 				</div>
 
+				<div class="flex flex-col gap-2">
+					<span>Animation</span>
+					<NSelect
+						v-model:value="formValue.animation"
+						clearable
+						:options="[
+							{ value: 'DEFAULT', label: 'Default' },
+							{ value: 'DISABLED', label: 'Disabled' },
+						]"
+						@on-clear="formValue.animation = null"
+					/>
+				</div>
+
 				<NDivider />
 				<div>
 					<span>{{ t('overlays.chat.fontFamily') }}</span>
diff --git a/frontend/dashboard/src/pages/overlays/chat/components/default-settings.ts b/frontend/dashboard/src/pages/overlays/chat/components/default-settings.ts
index 3793619f0..02a066187 100644
--- a/frontend/dashboard/src/pages/overlays/chat/components/default-settings.ts
+++ b/frontend/dashboard/src/pages/overlays/chat/components/default-settings.ts
@@ -1,6 +1,6 @@
-import type { Settings } from '@twir/api/messages/overlays_chat/overlays_chat';
+import type { ChatOverlay } from '@/gql/graphql'
 
-export type ChatSettingsWithOptionalId = Omit<Settings, 'id'> & { id?: string }
+export type ChatSettingsWithOptionalId = Omit<ChatOverlay, 'id'> & { id?: string }
 
 export const defaultChatSettings: ChatSettingsWithOptionalId = {
 	fontFamily: 'inter',
@@ -19,4 +19,4 @@ export const defaultChatSettings: ChatSettingsWithOptionalId = {
 	chatBackgroundColor: 'rgba(0, 0, 0, 0)',
 	direction: 'top',
 	paddingContainer: 0,
-};
+}
diff --git a/frontend/dashboard/src/pages/overlays/chat/constants.ts b/frontend/dashboard/src/pages/overlays/chat/constants.ts
index e6c6f0a75..e8f609002 100644
--- a/frontend/dashboard/src/pages/overlays/chat/constants.ts
+++ b/frontend/dashboard/src/pages/overlays/chat/constants.ts
@@ -1,49 +1,37 @@
-import { ChatBadge } from '@twir/frontend-chat';
+import type { ChatBadge } from '@twir/frontend-chat'
 
-
-export const globalBadges: Map<string, ChatBadge> = new Map([
-	['broadcaster', {
-		'set_id': 'broadcaster',
-		'versions': [
+export const globalBadges: ChatBadge[] = [
+	{
+		set_id: 'broadcaster',
+		versions: [
+			{
+				id: '1',
+				image_url_1x: 'https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/1',
+				image_url_2x: 'https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/2',
+				image_url_4x: 'https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/3',
+			},
+		],
+	},
+	{
+		set_id: 'moderator',
+		versions: [
+			{
+				id: '1',
+				image_url_1x: 'https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/1',
+				image_url_2x: 'https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/2',
+				image_url_4x: 'https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/3',
+			},
+		],
+	},
+	{
+		set_id: 'no_audio',
+		versions: [
 			{
-				'id': '1',
-				'image_url_1x': 'https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/1',
-				'image_url_2x': 'https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/2',
-				'image_url_4x': 'https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/3',
+				id: '1',
+				image_url_1x: 'https://static-cdn.jtvnw.net/badges/v1/aef2cd08-f29b-45a1-8c12-d44d7fd5e6f0/1',
+				image_url_2x: 'https://static-cdn.jtvnw.net/badges/v1/aef2cd08-f29b-45a1-8c12-d44d7fd5e6f0/2',
+				image_url_4x: 'https://static-cdn.jtvnw.net/badges/v1/aef2cd08-f29b-45a1-8c12-d44d7fd5e6f0/3',
 			},
 		],
-	}],
-	['moderator', {
-		'set_id': 'moderator',
-    'versions': [
-      {
-        'id': '1',
-        'image_url_1x': 'https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/1',
-        'image_url_2x': 'https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/2',
-        'image_url_4x': 'https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/3',
-      },
-    ],
-	}],
-	['no_audio', {
-    'set_id': 'no_audio',
-    'versions': [
-      {
-        'id': '1',
-        'image_url_1x': 'https://static-cdn.jtvnw.net/badges/v1/aef2cd08-f29b-45a1-8c12-d44d7fd5e6f0/1',
-        'image_url_2x': 'https://static-cdn.jtvnw.net/badges/v1/aef2cd08-f29b-45a1-8c12-d44d7fd5e6f0/2',
-        'image_url_4x': 'https://static-cdn.jtvnw.net/badges/v1/aef2cd08-f29b-45a1-8c12-d44d7fd5e6f0/3',
-      },
-    ],
-  }],
-	['vip', {
-    'set_id': 'vip',
-    'versions': [
-      {
-        'id': '1',
-        'image_url_1x': 'https://static-cdn.jtvnw.net/badges/v1/b817aba4-fad8-49e2-b88a-7cc744dfa6ec/1',
-        'image_url_2x': 'https://static-cdn.jtvnw.net/badges/v1/b817aba4-fad8-49e2-b88a-7cc744dfa6ec/2',
-        'image_url_4x': 'https://static-cdn.jtvnw.net/badges/v1/b817aba4-fad8-49e2-b88a-7cc744dfa6ec/3',
-      },
-    ],
-  }],
-]);
+	},
+]
diff --git a/frontend/dashboard/src/pages/overlays/chat/faker.ts b/frontend/dashboard/src/pages/overlays/chat/faker.ts
index 2fd28a6d1..7a224d45a 100644
--- a/frontend/dashboard/src/pages/overlays/chat/faker.ts
+++ b/frontend/dashboard/src/pages/overlays/chat/faker.ts
@@ -6,31 +6,34 @@ const firstNames = [
 	'Jon',
 	'Sasha',
 	'Denis',
-];
+]
 
-export const firstName = () => firstNames[Math.floor(Math.random() * firstNames.length)];
+export const firstName = () => firstNames[Math.floor(Math.random() * firstNames.length)]
 
-const loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
-const splittedLorem = loremText.split(' ');
+const loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+const splittedLorem = loremText.split(' ')
 
-export const lorem = () => splittedLorem.slice(Math.floor(Math.random() * splittedLorem.length)).join(' ');
-export const loremWithLen = (len: number) => splittedLorem.slice(Math.floor(Math.random() * splittedLorem.length)).slice(0, len).join(' ');
+export const lorem = () => splittedLorem.slice(Math.floor(Math.random() * splittedLorem.length)).join(' ')
+export const loremWithLen = (len: number) => splittedLorem.slice(Math.floor(Math.random() * splittedLorem.length)).slice(0, len).join(' ')
 
-export const boolean = () => Math.random() < 0.5;
+export const boolean = () => Math.random() < 0.5
 
-const randomBetween = (min: number, max: number) => min + Math.floor(Math.random() * (max - min + 1));
+const randomBetween = (min: number, max: number) => min + Math.floor(Math.random() * (max - min + 1))
 
-export const rgb = () => {
-	const r = randomBetween(0, 255);
-	const g = randomBetween(0, 255);
-	const b = randomBetween(0, 255);
-	const rgb = `rgb(${r},${g},${b})`;
-	return rgb;
-};
+export function rgb() {
+	const r = randomBetween(0, 255)
+	const g = randomBetween(0, 255)
+	const b = randomBetween(0, 255)
+	const rgb = `rgb(${r},${g},${b})`
+	return rgb
+}
 
+export function randomObjectKey(obj: Record<string, unknown>) {
+	const keys = Object.keys(obj)
 
-export const randomObjectKey = (obj: Record<string, unknown>) => {
-	const keys = Object.keys(obj);
+	return keys[Math.floor(Math.random() * keys.length)]
+}
 
-	return keys[Math.floor(Math.random() * keys.length)];
-};
+export function randomArrayItem<T>(arr: T[]) {
+	return arr[Math.floor(Math.random() * arr.length)]
+}
diff --git a/frontend/overlays/package.json b/frontend/overlays/package.json
index ba04210ea..649512186 100644
--- a/frontend/overlays/package.json
+++ b/frontend/overlays/package.json
@@ -22,6 +22,7 @@
     "@vueuse/core": "10.9.0",
     "@zero-dependency/utils": "1.7.7",
     "emoji-regex": "10.3.0",
+    "graphql": "16.8.1",
     "graphql-ws": "5.16.0",
     "nested-css-to-flat": "1.0.5",
     "obs-websocket-js": "5.0.5",
@@ -31,6 +32,8 @@
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.2",
+    "@graphql-codegen/client-preset": "4.2.5",
+    "@graphql-typed-document-node/core": "3.2.0",
     "@twir/types": "workspace:*",
     "@types/tmi.js": "1.8.6",
     "@vitejs/plugin-vue": "5.0.4",
diff --git a/frontend/overlays/src/composables/chat/use-chat-overlay-socket.ts b/frontend/overlays/src/composables/chat/use-chat-overlay-socket.ts
index f2db3be50..96e3fba4d 100644
--- a/frontend/overlays/src/composables/chat/use-chat-overlay-socket.ts
+++ b/frontend/overlays/src/composables/chat/use-chat-overlay-socket.ts
@@ -1,20 +1,20 @@
 import { useQuery, useSubscription } from '@urql/vue'
-import { createGlobalState, useWebSocket } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { createGlobalState } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
-import type { TwirWebSocketEvent } from '@/api.js'
-import type { BadgeVersion, ChatBadge, Settings } from '@twir/frontend-chat'
+import type { ChatOverlaySettingsSubscription } from '@/gql/graphql.js'
+import type { Settings } from '@twir/frontend-chat'
 
 import { graphql } from '@/gql'
-import { generateSocketUrlWithParams } from '@/helpers.js'
 
 export const useChatOverlaySocket = createGlobalState(() => {
 	const route = useRoute()
+	const overlaySettings = ref<ChatOverlaySettingsSubscription['chatOverlaySettings'] | null>(null)
 
-	useQuery({
+	const { data: neededData } = useQuery({
 		query: graphql(`
-			query ChatOverlayWithAdditionalData($overlayId: String!) {
+			query ChatOverlayWithAdditionalData {
 				authenticatedUser {
 					id
 					twitchProfile {
@@ -23,15 +23,14 @@ export const useChatOverlaySocket = createGlobalState(() => {
 						profileImageUrl
 					}
 				}
-				chatOverlaysById(id: $overlayId) {
-					id
-					messageHideTimeout
-				}
 				twitchGetGlobalBadges {
 					badges {
 						set_id
 						versions {
+							id
 							image_url_1x
+							image_url_2x
+							image_url_4x
 						}
 					}
 				}
@@ -39,15 +38,15 @@ export const useChatOverlaySocket = createGlobalState(() => {
 					badges {
 						set_id
 						versions {
+							id
 							image_url_1x
+							image_url_2x
+							image_url_4x
 						}
 					}
 				}
 			}
 		`),
-		variables: {
-			overlayId: route.query.id,
-		},
 	})
 
 	const sub = useSubscription({
@@ -55,103 +54,56 @@ export const useChatOverlaySocket = createGlobalState(() => {
 			subscription ChatOverlaySettings($id: String!, $apiKey: String!) {
 				chatOverlaySettings(id: $id, apiKey: $apiKey) {
 					id
-					animation
+					messageHideTimeout
+					messageShowDelay
+					preset
 					fontSize
+					hideCommands
+					hideBots
+					fontFamily
+					showBadges
+					showAnnounceBadge
+					textShadowColor
+					textShadowSize
+					chatBackgroundColor
+					direction
+					fontWeight
+					fontStyle
+					paddingContainer
+					animation
 				}
 			}
 		`),
 		variables: {
-			id: route.query.id,
-			apiKey: route.params.apiKey,
+			id: route.query.id as string,
+			apiKey: route.params.apiKey as string,
 		},
 	})
 
-	watch(sub.data, (n) => console.log(n))
+	watch(sub.data, (n) => {
+		if (!n?.chatOverlaySettings) return
 
-	const settings = ref<Settings>({
-		channelId: '',
-		channelName: '',
-		channelDisplayName: '',
-		globalBadges: new Map<string, ChatBadge>(),
-		channelBadges: new Map<string, BadgeVersion>(),
-		messageHideTimeout: 0,
-		messageShowDelay: 0,
-		preset: 'clean',
-		fontSize: 20,
-		hideBots: false,
-		hideCommands: false,
-		fontFamily: 'Roboto',
-		showAnnounceBadge: true,
-		showBadges: true,
-		textShadowColor: '',
-		textShadowSize: 0,
-		chatBackgroundColor: '',
-		direction: 'top',
-		fontStyle: 'normal',
-		fontWeight: 400,
-		paddingContainer: 0,
+		overlaySettings.value = {
+			...n.chatOverlaySettings,
+		}
 	})
 
-	const overlayId = ref<string | undefined>()
-	const socketUrl = ref('')
-
-	const { data, status, send, open, close } = useWebSocket(
-		socketUrl,
-		{
-			immediate: false,
-			autoReconnect: {
-				delay: 500,
-			},
-			onConnected() {
-				send(JSON.stringify({ eventName: 'getSettings' }))
-			},
-		},
-	)
-
-	watch(data, (d: string) => {
-		const event = JSON.parse(d) as TwirWebSocketEvent<Settings>
-		if (event.eventName === 'settings') {
-			if (overlayId.value && event.data.id !== overlayId.value) return
-
-			const data = event.data
+	const chatLibSettings = computed<Settings | null>(() => {
+		if (!overlaySettings.value || !neededData.value) return null
 
-			settings.value = {
-				...data,
-				globalBadges: new Map(),
-				channelBadges: new Map(),
-			}
-
-			for (const badge of Object.values(data.globalBadges)) {
-				settings.value.globalBadges.set(badge.set_id, badge)
-			}
-
-			for (const [setId, version] of Object.entries(data.channelBadges)) {
-				settings.value.channelBadges.set(setId, version)
-			}
+		return {
+			...overlaySettings.value,
+			channelBadges: neededData.value.twitchGetChannelBadges.badges,
+			globalBadges: neededData.value.twitchGetGlobalBadges.badges,
+			channelId: neededData.value.authenticatedUser.id ?? '',
+			channelName: neededData.value.authenticatedUser.twitchProfile.login ?? '',
+			channelDisplayName: neededData.value.authenticatedUser.twitchProfile.displayName ?? '',
 		}
 	})
 
-	function destroy(): void {
-		close()
-	}
-
-	function connect(apiKey: string, _overlayId?: string): void {
-		if (status.value === 'OPEN') return
-
-		const url = generateSocketUrlWithParams('/overlays/chat', {
-			apiKey,
-			id: _overlayId,
-		})
-
-		socketUrl.value = url
-		overlayId.value = _overlayId
-
-		open()
-	}
-
 	return {
-		settings,
-		connect,
-		destroy,
+		neededData,
+		overlaySettings,
+		chatLibSettings,
 	}
 })
diff --git a/frontend/overlays/src/composables/tmi/use-chat-tmi.ts b/frontend/overlays/src/composables/tmi/use-chat-tmi.ts
index 4577ec9d8..2bfeb582c 100644
--- a/frontend/overlays/src/composables/tmi/use-chat-tmi.ts
+++ b/frontend/overlays/src/composables/tmi/use-chat-tmi.ts
@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import type { Message } from '@twir/frontend-chat';
-import { Client, type ChatUserstate } from 'tmi.js';
-import { type Ref, unref, watch } from 'vue';
+import { type ChatUserstate, Client } from 'tmi.js'
+import { type Ref, unref, watch } from 'vue'
 
-import { useMessageHelpers } from './use-message-helpers.js';
-import { useThirdPartyEmotes } from './use-third-party-emotes.js';
+import { useMessageHelpers } from './use-message-helpers.js'
+import { useThirdPartyEmotes } from './use-third-party-emotes.js'
+
+import type { Message } from '@twir/frontend-chat'
 
 declare module 'tmi.js' {
 	export interface Events {
@@ -13,16 +14,16 @@ declare module 'tmi.js' {
 }
 
 type MakeOptional<Type, Key extends keyof Type> = Omit<Type, Key> &
-	Partial<Pick<Type, Key>>;
+  Partial<Pick<Type, Key>>
 
 export type ChatMessage = Omit<
 	MakeOptional<Message, 'isItalic' | 'isAnnounce'>,
 	'createdAt' | 'internalId'
 > & {
-	senderId?: string;
-	rawMessage?: string;
-	messageHideTimeout?: number;
-	messageShowDelay?: number;
+	senderId?: string
+	rawMessage?: string
+	messageHideTimeout?: number
+	messageShowDelay?: number
 }
 
 export const knownBots = new Set([
@@ -33,13 +34,13 @@ export const knownBots = new Set([
 	'nightbot',
 	'streamlabs',
 	'streamelements',
-]);
+])
 
 type MaybePromise = any | Promise<any>
 
-export type ChatSettings = {
-	channelName: string,
-	channelId: string,
+export interface ChatSettings {
+	channelName: string
+	channelId: string
 	emotes: ThirdPartyEmotesOptions
 	onMessage: (message: ChatMessage) => MaybePromise
 	onRemoveMessage?: (msgId: string) => MaybePromise
@@ -47,24 +48,24 @@ export type ChatSettings = {
 	onChatClear?: () => void
 }
 
-export type ThirdPartyEmotesOptions = {
+export interface ThirdPartyEmotesOptions {
 	/**
 	 * @default false
 	 */
-	isSmaller?: boolean;
-	sevenTv?: boolean;
-	bttv?: boolean;
-	ffz?: boolean;
-};
+	isSmaller?: boolean
+	sevenTv?: boolean
+	bttv?: boolean
+	ffz?: boolean
+}
 
-export const useChatTmi = (options: Ref<ChatSettings>) => {
-	const { destroy: destroyThirdPartyEmotes } = useThirdPartyEmotes(options);
-	const { makeMessageChunks } = useMessageHelpers();
+export function useChatTmi(options: Ref<ChatSettings>) {
+	const { destroy: destroyThirdPartyEmotes } = useThirdPartyEmotes(options)
+	const { makeMessageChunks } = useMessageHelpers()
 
-	let client: Client | null = null;
+	let client: Client | null = null
 
 	function createMessage(chatMessage: ChatMessage) {
-		const internalId = crypto.randomUUID();
+		const internalId = crypto.randomUUID()
 
 		return {
 			...chatMessage,
@@ -72,27 +73,27 @@ export const useChatTmi = (options: Ref<ChatSettings>) => {
 			createdAt: new Date(),
 			internalId,
 			isAnnounce: chatMessage.isAnnounce ?? false,
-		};
+		}
 	}
 
 	function messageChunks(message: string, tags: ChatUserstate) {
 		return makeMessageChunks(message, {
 			isSmaller: options.value.emotes.isSmaller ?? false,
 			emotesList: tags.emotes ?? {},
-		});
+		})
 	}
 
 	async function destroy() {
-		if (!client) return;
+		if (!client) return
 
-		await client.disconnect();
-		client.removeAllListeners();
-		client = null;
-		destroyThirdPartyEmotes();
+		await client.disconnect()
+		client.removeAllListeners()
+		client = null
+		destroyThirdPartyEmotes()
 	}
 
 	async function create(channel: string) {
-		await destroy();
+		await destroy()
 
 		client = new Client({
 			connection: {
@@ -100,7 +101,7 @@ export const useChatTmi = (options: Ref<ChatSettings>) => {
 				reconnect: true,
 			},
 			channels: [],
-		});
+		})
 
 		client.on('message', (_channel, tags, message) => {
 			options.value.onMessage(createMessage({
@@ -114,11 +115,11 @@ export const useChatTmi = (options: Ref<ChatSettings>) => {
 				senderDisplayName: tags['display-name'],
 				badges: tags.badges as Record<string, string> | undefined,
 				isItalic: tags['message-type'] === 'action',
-			}));
-		});
+			}))
+		})
 
 		client.on('usernotice', (msgId, _channel, tags, message) => {
-			if (msgId !== 'announcement') return;
+			if (msgId !== 'announcement') return
 
 			options.value.onMessage(createMessage({
 				id: msgId,
@@ -132,29 +133,29 @@ export const useChatTmi = (options: Ref<ChatSettings>) => {
 				badges: tags.badges as Record<string, string> | undefined,
 				isItalic: tags['message-type'] === 'action',
 				isAnnounce: true,
-			}));
-		});
+			}))
+		})
 
 		client.on('messagedeleted', (_channel, _username, _msgText, userState) => {
-			const msgId = userState['target-msg-id'];
+			const msgId = userState['target-msg-id']
 			if (msgId) {
-				options.value.onRemoveMessage?.(msgId);
+				options.value.onRemoveMessage?.(msgId)
 			}
-		});
+		})
 
 		client.on('timeout', (_channel, username) => {
-			options.value.onRemoveMessageByUser?.(username);
-		});
+			options.value.onRemoveMessageByUser?.(username)
+		})
 
 		client.on('ban', (_channel, username) => {
-			options.value.onRemoveMessageByUser?.(username);
-		});
+			options.value.onRemoveMessageByUser?.(username)
+		})
 
 		client.on('clearchat', () => {
 			if (options.value.onChatClear) {
-				options.value.onChatClear();
+				options.value.onChatClear()
 			}
-		});
+		})
 
 		client.on('connecting', () => {
 			options.value.onMessage(createMessage({
@@ -164,36 +165,36 @@ export const useChatTmi = (options: Ref<ChatSettings>) => {
 					value: 'Connecting to servers...',
 				}],
 				messageHideTimeout: 5,
-			}));
-		});
+			}))
+		})
 
 		client.on('connected', async () => {
 			options.value.onMessage(createMessage({
 				type: 'system',
 				chunks: [{ type: 'text', value: 'Connected' }],
 				messageHideTimeout: 6,
-			}));
+			}))
 
-			await client!.join(channel);
+			await client!.join(channel)
 
 			options.value.onMessage(createMessage({
 				type: 'system',
 				chunks: [{ type: 'text', value: `Joined channel ${channel}` }],
 				messageHideTimeout: 7,
-			}));
-		});
+			}))
+		})
 
-		await client.connect();
+		await client.connect()
 	}
 
 	watch(() => options.value.channelName, (v) => {
-		const name = unref(v);
-		if (!name) return;
+		const name = unref(v)
+		if (!name) return
 
-		create(name);
-	});
+		create(name)
+	})
 
 	return {
 		destroy,
-	};
-};
+	}
+}
diff --git a/frontend/overlays/src/gql/gql.ts b/frontend/overlays/src/gql/gql.ts
index 3f000fb3b..cfe2d49a6 100644
--- a/frontend/overlays/src/gql/gql.ts
+++ b/frontend/overlays/src/gql/gql.ts
@@ -13,8 +13,8 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-    "\n\t\t\tquery ChatOverlayWithAdditionalData($overlayId: String!) {\n\t\t\t\tauthenticatedUser {\n\t\t\t\t\tid\n\t\t\t\t\ttwitchProfile {\n\t\t\t\t\t\tlogin\n\t\t\t\t\t\tdisplayName\n\t\t\t\t\t\tprofileImageUrl\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tchatOverlaysById(id: $overlayId) {\n\t\t\t\t\tid\n\t\t\t\t\tmessageHideTimeout\n\t\t\t\t}\n\t\t\t\ttwitchGetGlobalBadges {\n\t\t\t\t\tbadges {\n\t\t\t\t\t\tset_id\n\t\t\t\t\t\tversions {\n\t\t\t\t\t\t\timage_url_1x\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\ttwitchGetChannelBadges {\n\t\t\t\t\tbadges {\n\t\t\t\t\t\tset_id\n\t\t\t\t\t\tversions {\n\t\t\t\t\t\t\timage_url_1x\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t": types.ChatOverlayWithAdditionalDataDocument,
-    "\n\t\t\tsubscription ChatOverlaySettings($id: String!, $apiKey: String!) {\n\t\t\t\tchatOverlaySettings(id: $id, apiKey: $apiKey) {\n\t\t\t\t\tid\n\t\t\t\t\tanimation\n\t\t\t\t\tfontSize\n\t\t\t\t}\n\t\t\t}\n\t\t": types.ChatOverlaySettingsDocument,
+    "\n\t\t\tquery ChatOverlayWithAdditionalData {\n\t\t\t\tauthenticatedUser {\n\t\t\t\t\tid\n\t\t\t\t\ttwitchProfile {\n\t\t\t\t\t\tlogin\n\t\t\t\t\t\tdisplayName\n\t\t\t\t\t\tprofileImageUrl\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\ttwitchGetGlobalBadges {\n\t\t\t\t\tbadges {\n\t\t\t\t\t\tset_id\n\t\t\t\t\t\tversions {\n\t\t\t\t\t\t\tid\n\t\t\t\t\t\t\timage_url_1x\n\t\t\t\t\t\t\timage_url_2x\n\t\t\t\t\t\t\timage_url_4x\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\ttwitchGetChannelBadges {\n\t\t\t\t\tbadges {\n\t\t\t\t\t\tset_id\n\t\t\t\t\t\tversions {\n\t\t\t\t\t\t\tid\n\t\t\t\t\t\t\timage_url_1x\n\t\t\t\t\t\t\timage_url_2x\n\t\t\t\t\t\t\timage_url_4x\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t": types.ChatOverlayWithAdditionalDataDocument,
+    "\n\t\t\tsubscription ChatOverlaySettings($id: String!, $apiKey: String!) {\n\t\t\t\tchatOverlaySettings(id: $id, apiKey: $apiKey) {\n\t\t\t\t\tid\n\t\t\t\t\tmessageHideTimeout\n\t\t\t\t\tmessageShowDelay\n\t\t\t\t\tpreset\n\t\t\t\t\tfontSize\n\t\t\t\t\thideCommands\n\t\t\t\t\thideBots\n\t\t\t\t\tfontFamily\n\t\t\t\t\tshowBadges\n\t\t\t\t\tshowAnnounceBadge\n\t\t\t\t\ttextShadowColor\n\t\t\t\t\ttextShadowSize\n\t\t\t\t\tchatBackgroundColor\n\t\t\t\t\tdirection\n\t\t\t\t\tfontWeight\n\t\t\t\t\tfontStyle\n\t\t\t\t\tpaddingContainer\n\t\t\t\t\tanimation\n\t\t\t\t}\n\t\t\t}\n\t\t": types.ChatOverlaySettingsDocument,
 };
 
 /**
@@ -34,11 +34,11 @@ export function graphql(source: string): unknown;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n\t\t\tquery ChatOverlayWithAdditionalData($overlayId: String!) {\n\t\t\t\tauthenticatedUser {\n\t\t\t\t\tid\n\t\t\t\t\ttwitchProfile {\n\t\t\t\t\t\tlogin\n\t\t\t\t\t\tdisplayName\n\t\t\t\t\t\tprofileImageUrl\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tchatOverlaysById(id: $overlayId) {\n\t\t\t\t\tid\n\t\t\t\t\tmessageHideTimeout\n\t\t\t\t}\n\t\t\t\ttwitchGetGlobalBadges {\n\t\t\t\t\tbadges {\n\t\t\t\t\t\tset_id\n\t\t\t\t\t\tversions {\n\t\t\t\t\t\t\timage_url_1x\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\ttwitchGetChannelBadges {\n\t\t\t\t\tbadges {\n\t\t\t\t\t\tset_id\n\t\t\t\t\t\tversions {\n\t\t\t\t\t\t\timage_url_1x\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t"): (typeof documents)["\n\t\t\tquery ChatOverlayWithAdditionalData($overlayId: String!) {\n\t\t\t\tauthenticatedUser {\n\t\t\t\t\tid\n\t\t\t\t\ttwitchProfile {\n\t\t\t\t\t\tlogin\n\t\t\t\t\t\tdisplayName\n\t\t\t\t\t\tprofileImageUrl\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tchatOverlaysById(id: $overlayId) {\n\t\t\t\t\tid\n\t\t\t\t\tmessageHideTimeout\n\t\t\t\t}\n\t\t\t\ttwitchGetGlobalBadges {\n\t\t\t\t\tbadges {\n\t\t\t\t\t\tset_id\n\t\t\t\t\t\tversions {\n\t\t\t\t\t\t\timage_url_1x\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\ttwitchGetChannelBadges {\n\t\t\t\t\tbadges {\n\t\t\t\t\t\tset_id\n\t\t\t\t\t\tversions {\n\t\t\t\t\t\t\timage_url_1x\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t"];
+export function graphql(source: "\n\t\t\tquery ChatOverlayWithAdditionalData {\n\t\t\t\tauthenticatedUser {\n\t\t\t\t\tid\n\t\t\t\t\ttwitchProfile {\n\t\t\t\t\t\tlogin\n\t\t\t\t\t\tdisplayName\n\t\t\t\t\t\tprofileImageUrl\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\ttwitchGetGlobalBadges {\n\t\t\t\t\tbadges {\n\t\t\t\t\t\tset_id\n\t\t\t\t\t\tversions {\n\t\t\t\t\t\t\tid\n\t\t\t\t\t\t\timage_url_1x\n\t\t\t\t\t\t\timage_url_2x\n\t\t\t\t\t\t\timage_url_4x\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\ttwitchGetChannelBadges {\n\t\t\t\t\tbadges {\n\t\t\t\t\t\tset_id\n\t\t\t\t\t\tversions {\n\t\t\t\t\t\t\tid\n\t\t\t\t\t\t\timage_url_1x\n\t\t\t\t\t\t\timage_url_2x\n\t\t\t\t\t\t\timage_url_4x\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t"): (typeof documents)["\n\t\t\tquery ChatOverlayWithAdditionalData {\n\t\t\t\tauthenticatedUser {\n\t\t\t\t\tid\n\t\t\t\t\ttwitchProfile {\n\t\t\t\t\t\tlogin\n\t\t\t\t\t\tdisplayName\n\t\t\t\t\t\tprofileImageUrl\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\ttwitchGetGlobalBadges {\n\t\t\t\t\tbadges {\n\t\t\t\t\t\tset_id\n\t\t\t\t\t\tversions {\n\t\t\t\t\t\t\tid\n\t\t\t\t\t\t\timage_url_1x\n\t\t\t\t\t\t\timage_url_2x\n\t\t\t\t\t\t\timage_url_4x\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\ttwitchGetChannelBadges {\n\t\t\t\t\tbadges {\n\t\t\t\t\t\tset_id\n\t\t\t\t\t\tversions {\n\t\t\t\t\t\t\tid\n\t\t\t\t\t\t\timage_url_1x\n\t\t\t\t\t\t\timage_url_2x\n\t\t\t\t\t\t\timage_url_4x\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n\t\t\tsubscription ChatOverlaySettings($id: String!, $apiKey: String!) {\n\t\t\t\tchatOverlaySettings(id: $id, apiKey: $apiKey) {\n\t\t\t\t\tid\n\t\t\t\t\tanimation\n\t\t\t\t\tfontSize\n\t\t\t\t}\n\t\t\t}\n\t\t"): (typeof documents)["\n\t\t\tsubscription ChatOverlaySettings($id: String!, $apiKey: String!) {\n\t\t\t\tchatOverlaySettings(id: $id, apiKey: $apiKey) {\n\t\t\t\t\tid\n\t\t\t\t\tanimation\n\t\t\t\t\tfontSize\n\t\t\t\t}\n\t\t\t}\n\t\t"];
+export function graphql(source: "\n\t\t\tsubscription ChatOverlaySettings($id: String!, $apiKey: String!) {\n\t\t\t\tchatOverlaySettings(id: $id, apiKey: $apiKey) {\n\t\t\t\t\tid\n\t\t\t\t\tmessageHideTimeout\n\t\t\t\t\tmessageShowDelay\n\t\t\t\t\tpreset\n\t\t\t\t\tfontSize\n\t\t\t\t\thideCommands\n\t\t\t\t\thideBots\n\t\t\t\t\tfontFamily\n\t\t\t\t\tshowBadges\n\t\t\t\t\tshowAnnounceBadge\n\t\t\t\t\ttextShadowColor\n\t\t\t\t\ttextShadowSize\n\t\t\t\t\tchatBackgroundColor\n\t\t\t\t\tdirection\n\t\t\t\t\tfontWeight\n\t\t\t\t\tfontStyle\n\t\t\t\t\tpaddingContainer\n\t\t\t\t\tanimation\n\t\t\t\t}\n\t\t\t}\n\t\t"): (typeof documents)["\n\t\t\tsubscription ChatOverlaySettings($id: String!, $apiKey: String!) {\n\t\t\t\tchatOverlaySettings(id: $id, apiKey: $apiKey) {\n\t\t\t\t\tid\n\t\t\t\t\tmessageHideTimeout\n\t\t\t\t\tmessageShowDelay\n\t\t\t\t\tpreset\n\t\t\t\t\tfontSize\n\t\t\t\t\thideCommands\n\t\t\t\t\thideBots\n\t\t\t\t\tfontFamily\n\t\t\t\t\tshowBadges\n\t\t\t\t\tshowAnnounceBadge\n\t\t\t\t\ttextShadowColor\n\t\t\t\t\ttextShadowSize\n\t\t\t\t\tchatBackgroundColor\n\t\t\t\t\tdirection\n\t\t\t\t\tfontWeight\n\t\t\t\t\tfontStyle\n\t\t\t\t\tpaddingContainer\n\t\t\t\t\tanimation\n\t\t\t\t}\n\t\t\t}\n\t\t"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
diff --git a/frontend/overlays/src/gql/graphql.ts b/frontend/overlays/src/gql/graphql.ts
index 234a6cf47..249a0bd30 100644
--- a/frontend/overlays/src/gql/graphql.ts
+++ b/frontend/overlays/src/gql/graphql.ts
@@ -1839,12 +1839,10 @@ export type VotebanGameOpts = {
   votingMode?: InputMaybe<VoteBanGameVotingMode>;
 };
 
-export type ChatOverlayWithAdditionalDataQueryVariables = Exact<{
-  overlayId: Scalars['String']['input'];
-}>;
+export type ChatOverlayWithAdditionalDataQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type ChatOverlayWithAdditionalDataQuery = { __typename?: 'Query', authenticatedUser: { __typename?: 'AuthenticatedUser', id: string, twitchProfile: { __typename?: 'TwirUserTwitchInfo', login: string, displayName: string, profileImageUrl: string } }, chatOverlaysById?: { __typename?: 'ChatOverlay', id: string, messageHideTimeout: number } | null, twitchGetGlobalBadges: { __typename?: 'TwirTwitchGlobalBadgeResponse', badges: Array<{ __typename?: 'TwitchBadge', set_id: string, versions: Array<{ __typename?: 'TwitchBadgeVersion', image_url_1x: string }> }> }, twitchGetChannelBadges: { __typename?: 'TwirTwitchChannelBadgeResponse', badges: Array<{ __typename?: 'TwitchBadge', set_id: string, versions: Array<{ __typename?: 'TwitchBadgeVersion', image_url_1x: string }> }> } };
+export type ChatOverlayWithAdditionalDataQuery = { __typename?: 'Query', authenticatedUser: { __typename?: 'AuthenticatedUser', id: string, twitchProfile: { __typename?: 'TwirUserTwitchInfo', login: string, displayName: string, profileImageUrl: string } }, twitchGetGlobalBadges: { __typename?: 'TwirTwitchGlobalBadgeResponse', badges: Array<{ __typename?: 'TwitchBadge', set_id: string, versions: Array<{ __typename?: 'TwitchBadgeVersion', id: string, image_url_1x: string, image_url_2x: string, image_url_4x: string }> }> }, twitchGetChannelBadges: { __typename?: 'TwirTwitchChannelBadgeResponse', badges: Array<{ __typename?: 'TwitchBadge', set_id: string, versions: Array<{ __typename?: 'TwitchBadgeVersion', id: string, image_url_1x: string, image_url_2x: string, image_url_4x: string }> }> } };
 
 export type ChatOverlaySettingsSubscriptionVariables = Exact<{
   id: Scalars['String']['input'];
@@ -1852,8 +1850,8 @@ export type ChatOverlaySettingsSubscriptionVariables = Exact<{
 }>;
 
 
-export type ChatOverlaySettingsSubscription = { __typename?: 'Subscription', chatOverlaySettings?: { __typename?: 'ChatOverlay', id: string, animation?: ChatOverlayAnimation | null, fontSize: number } | null };
+export type ChatOverlaySettingsSubscription = { __typename?: 'Subscription', chatOverlaySettings?: { __typename?: 'ChatOverlay', id: string, messageHideTimeout: number, messageShowDelay: number, preset: string, fontSize: number, hideCommands: boolean, hideBots: boolean, fontFamily: string, showBadges: boolean, showAnnounceBadge: boolean, textShadowColor: string, textShadowSize: number, chatBackgroundColor: string, direction: string, fontWeight: number, fontStyle: string, paddingContainer: number, animation?: ChatOverlayAnimation | null } | null };
 
 
-export const ChatOverlayWithAdditionalDataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ChatOverlayWithAdditionalData"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"overlayId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"authenticatedUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"twitchProfile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"login"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"profileImageUrl"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"chatOverlaysById"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"overlayId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"messageHideTimeout"}}]}},{"kind":"Field","name":{"kind":"Name","value":"twitchGetGlobalBadges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"badges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"set_id"}},{"kind":"Field","name":{"kind":"Name","value":"versions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"image_url_1x"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"twitchGetChannelBadges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"badges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"set_id"}},{"kind":"Field","name":{"kind":"Name","value":"versions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"image_url_1x"}}]}}]}}]}}]}}]} as unknown as DocumentNode<ChatOverlayWithAdditionalDataQuery, ChatOverlayWithAdditionalDataQueryVariables>;
-export const ChatOverlaySettingsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"ChatOverlaySettings"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"apiKey"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"chatOverlaySettings"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}},{"kind":"Argument","name":{"kind":"Name","value":"apiKey"},"value":{"kind":"Variable","name":{"kind":"Name","value":"apiKey"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"animation"}},{"kind":"Field","name":{"kind":"Name","value":"fontSize"}}]}}]}}]} as unknown as DocumentNode<ChatOverlaySettingsSubscription, ChatOverlaySettingsSubscriptionVariables>;
\ No newline at end of file
+export const ChatOverlayWithAdditionalDataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ChatOverlayWithAdditionalData"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"authenticatedUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"twitchProfile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"login"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"profileImageUrl"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"twitchGetGlobalBadges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"badges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"set_id"}},{"kind":"Field","name":{"kind":"Name","value":"versions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"image_url_1x"}},{"kind":"Field","name":{"kind":"Name","value":"image_url_2x"}},{"kind":"Field","name":{"kind":"Name","value":"image_url_4x"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"twitchGetChannelBadges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"badges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"set_id"}},{"kind":"Field","name":{"kind":"Name","value":"versions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"image_url_1x"}},{"kind":"Field","name":{"kind":"Name","value":"image_url_2x"}},{"kind":"Field","name":{"kind":"Name","value":"image_url_4x"}}]}}]}}]}}]}}]} as unknown as DocumentNode<ChatOverlayWithAdditionalDataQuery, ChatOverlayWithAdditionalDataQueryVariables>;
+export const ChatOverlaySettingsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"ChatOverlaySettings"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"apiKey"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"chatOverlaySettings"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}},{"kind":"Argument","name":{"kind":"Name","value":"apiKey"},"value":{"kind":"Variable","name":{"kind":"Name","value":"apiKey"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"messageHideTimeout"}},{"kind":"Field","name":{"kind":"Name","value":"messageShowDelay"}},{"kind":"Field","name":{"kind":"Name","value":"preset"}},{"kind":"Field","name":{"kind":"Name","value":"fontSize"}},{"kind":"Field","name":{"kind":"Name","value":"hideCommands"}},{"kind":"Field","name":{"kind":"Name","value":"hideBots"}},{"kind":"Field","name":{"kind":"Name","value":"fontFamily"}},{"kind":"Field","name":{"kind":"Name","value":"showBadges"}},{"kind":"Field","name":{"kind":"Name","value":"showAnnounceBadge"}},{"kind":"Field","name":{"kind":"Name","value":"textShadowColor"}},{"kind":"Field","name":{"kind":"Name","value":"textShadowSize"}},{"kind":"Field","name":{"kind":"Name","value":"chatBackgroundColor"}},{"kind":"Field","name":{"kind":"Name","value":"direction"}},{"kind":"Field","name":{"kind":"Name","value":"fontWeight"}},{"kind":"Field","name":{"kind":"Name","value":"fontStyle"}},{"kind":"Field","name":{"kind":"Name","value":"paddingContainer"}},{"kind":"Field","name":{"kind":"Name","value":"animation"}}]}}]}}]} as unknown as DocumentNode<ChatOverlaySettingsSubscription, ChatOverlaySettingsSubscriptionVariables>;
\ No newline at end of file
diff --git a/frontend/overlays/src/pages/overlays/chat.vue b/frontend/overlays/src/pages/overlays/chat.vue
index b0343e56a..22f360a55 100644
--- a/frontend/overlays/src/pages/overlays/chat.vue
+++ b/frontend/overlays/src/pages/overlays/chat.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ChatBox } from '@twir/frontend-chat'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
 
 import type { Message } from '@twir/frontend-chat'
 
@@ -13,12 +12,10 @@ import {
 	useChatTmi,
 } from '@/composables/tmi/use-chat-tmi.js'
 
-const route = useRoute()
-
 const messages = ref<Message[]>([])
 const maxMessages = ref(30)
 
-const { settings, connect, destroy } = useChatOverlaySocket()
+const { overlaySettings: settings, neededData, chatLibSettings } = useChatOverlaySocket()
 
 function removeMessageByInternalId(id: string) {
 	messages.value = messages.value.filter(m => m.internalId !== id)
@@ -33,17 +30,17 @@ function removeMessageByUserName(userName: string) {
 }
 
 function onMessage(m: ChatMessage) {
-	if (m.sender && settings.value.hideBots && knownBots.has(m.sender)) {
+	if (m.sender && settings.value?.hideBots && knownBots.has(m.sender)) {
 		return
 	}
 
-	if (settings.value.hideCommands && m.chunks.at(0)?.value.startsWith('!')) {
+	if (settings.value?.hideCommands && m.chunks.at(0)?.value.startsWith('!')) {
 		return
 	}
 
 	const internalId = crypto.randomUUID()
 
-	const showDelay = settings.value.messageShowDelay ?? settings.value.messageShowDelay
+	const showDelay = (settings.value?.messageShowDelay ?? settings.value?.messageShowDelay) || 0
 
 	if (messages.value.length >= maxMessages.value) {
 		messages.value = messages.value.slice(1)
@@ -59,7 +56,7 @@ function onMessage(m: ChatMessage) {
 		})
 	}, showDelay * 1000)
 
-	const hideTimeout = m.messageHideTimeout ?? settings.value.messageHideTimeout
+	const hideTimeout = m.messageHideTimeout ?? settings.value?.messageHideTimeout
 
 	if (hideTimeout) {
 		setTimeout(() => removeMessageByInternalId(internalId), hideTimeout * 1000)
@@ -68,8 +65,8 @@ function onMessage(m: ChatMessage) {
 
 const chatSettings = computed<ChatSettings>(() => {
 	return {
-		channelId: settings.value.channelId,
-		channelName: settings.value.channelName,
+		channelId: neededData.value?.authenticatedUser.id ?? '',
+		channelName: neededData.value?.authenticatedUser.twitchProfile.login ?? '',
 		emotes: {
 			ffz: true,
 			bttv: true,
@@ -89,17 +86,18 @@ const chatTmiStore = useChatTmi(chatSettings)
 onMounted(() => {
 	document.body.style.overflow = 'hidden'
 
-	const apiKey = route.params.apiKey as string
-	const overlayId = route.query.id as string
-	connect(apiKey, overlayId)
+	chatTmiStore.destroy()
 })
 
 onUnmounted(async () => {
-	destroy()
-	chatTmiStore.destroy()
+	await chatTmiStore.destroy()
 })
 </script>
 
 <template>
-	<ChatBox :messages="messages" :settings="settings" />
+	<ChatBox
+		v-if="chatLibSettings"
+		:messages
+		:settings="chatLibSettings"
+	/>
 </template>
diff --git a/libs/frontend-chat/src/components/chat-box.vue b/libs/frontend-chat/src/components/chat-box.vue
index 4c999abf6..0c48c06c0 100644
--- a/libs/frontend-chat/src/components/chat-box.vue
+++ b/libs/frontend-chat/src/components/chat-box.vue
@@ -1,23 +1,27 @@
 <script setup lang="ts">
-import { useFontSource } from '@twir/fontsource';
-import { useWindowSize } from '@vueuse/core';
-import { computed, nextTick, ref, toValue, watch } from 'vue';
+import { useFontSource } from '@twir/fontsource'
+import { useWindowSize } from '@vueuse/core'
+import { computed, nextTick, ref, toValue, watch } from 'vue'
 
-import { getChatDirection, getUserColor } from '../helpers.js';
-import MessageHorizontalBoxed from '../styles/boxed/message-horizontal.vue';
-import MessageVerticalBoxed from '../styles/boxed/message-vertical.vue';
-import MessageHorizontalClean from '../styles/clean/message-horizontal.vue';
-import MessageVerticalClean from '../styles/clean/message-vertical.vue';
-import type { Message, Settings } from '../types.js';
+import { useMappedBadges } from '../composables/mapped-badges.js'
+import { getChatDirection, getUserColor } from '../helpers.js'
+import MessageHorizontalBoxed from '../styles/boxed/message-horizontal.vue'
+import MessageVerticalBoxed from '../styles/boxed/message-vertical.vue'
+import MessageHorizontalClean from '../styles/clean/message-horizontal.vue'
+import MessageVerticalClean from '../styles/clean/message-vertical.vue'
+
+import type { Message, Settings } from '../types.js'
 
 const props = defineProps<{
 	messages: Message[]
 	settings: Settings
-}>();
+}>()
+
+const chatMessages = ref<HTMLDivElement>()
 
-const chatMessages = ref<HTMLDivElement>();
+const fontSource = useFontSource(false)
 
-const fontSource = useFontSource(false);
+const { setChannelBadges, setGlobalBadges } = useMappedBadges()
 
 watch(() => [
 	props.settings.fontFamily,
@@ -28,135 +32,155 @@ watch(() => [
 		props.settings.fontFamily,
 		props.settings.fontWeight,
 		props.settings.fontStyle,
-	);
-});
+	)
+})
+
+watch(() => props.settings.channelBadges, (channelBadges) => {
+	setChannelBadges(channelBadges)
+}, { immediate: true })
+
+watch(() => props.settings.globalBadges, (globalBadges) => {
+	setGlobalBadges(globalBadges)
+}, { immediate: true })
 
 watch(() => props.messages.length, async () => {
-	await nextTick();
-	scrollByDirection(props.settings.direction);
-});
+	await nextTick()
+	scrollByDirection(props.settings.direction)
+})
 
 watch(() => props.settings.direction, async (direction) => {
-	await nextTick();
-	scrollByDirection(direction);
-});
+	await nextTick()
+	scrollByDirection(direction)
+})
 
 function scrollToBottom() {
-	if (!chatMessages.value) return;
-	chatMessages.value.scrollIntoView(true);
+	if (!chatMessages.value) return
+	chatMessages.value.scrollIntoView(true)
 }
 
 function scrollToTop() {
-	if (!chatMessages.value) return;
-	chatMessages.value.scrollIntoView(false);
+	if (!chatMessages.value) return
+	chatMessages.value.scrollIntoView(false)
 }
 
 function scrollToLeft() {
-	if (!chatMessages.value) return;
-	chatMessages.value.scrollLeft += 999999;
+	if (!chatMessages.value) return
+	chatMessages.value.scrollLeft += 999999
 }
 
 function scrollToRight() {
-	if (!chatMessages.value) return;
-	chatMessages.value.scrollLeft -= 999999;
+	if (!chatMessages.value) return
+	chatMessages.value.scrollLeft -= 999999
 }
 
 function scrollByDirection(direction: string) {
 	if (direction === 'bottom') {
-		scrollToBottom();
+		scrollToBottom()
 	}
 
 	if (direction === 'top') {
-		scrollToTop();
+		scrollToTop()
 	}
 
 	if (direction === 'left') {
-		scrollToLeft();
+		scrollToLeft()
 	}
 
 	if (direction === 'right') {
-		scrollToRight();
+		scrollToRight()
 	}
 }
 
-const chatDirection = computed(() => getChatDirection(props.settings.direction));
+const chatDirection = computed(() => getChatDirection(props.settings.direction))
 
 const messagesFlexDirection = computed(() => {
 	switch (props.settings.direction) {
 		case 'top':
-			return 'column';
+			return 'column'
 		case 'bottom':
-			return 'column-reverse';
+			return 'column-reverse'
 		case 'left':
-			return 'row';
+			return 'row'
 		case 'right':
-			return 'row-reverse';
+			return 'row-reverse'
 		default:
-			return 'column';
+			return 'column'
 	}
-});
+})
 
 const chatMessageComponent = computed(() => {
 	switch (props.settings.preset) {
 		case 'boxed':
 			if (chatDirection.value === 'horizontal') {
-				return MessageHorizontalBoxed;
+				return MessageHorizontalBoxed
 			}
 
 			if (chatDirection.value === 'vertical') {
-				return MessageVerticalBoxed;
+				return MessageVerticalBoxed
 			}
 
-			return MessageVerticalBoxed;
+			return MessageVerticalBoxed
 		case 'clean':
 			if (chatDirection.value === 'horizontal') {
-				return MessageHorizontalClean;
+				return MessageHorizontalClean
 			}
 
 			if (chatDirection.value === 'vertical') {
-				return MessageVerticalClean;
+				return MessageVerticalClean
 			}
 
-			return MessageHorizontalClean;
+			return MessageHorizontalClean
 		default:
-			return MessageVerticalClean;
+			return MessageVerticalClean
 	}
-});
+})
 
-const { height } = useWindowSize();
+const { height } = useWindowSize()
 const windowHeight = computed(() => {
 	if (getChatDirection(props.settings.direction) === 'horizontal') {
-		return `${height.value}px`;
+		return `${height.value}px`
 	}
 
-	return 'auto';
-});
+	return 'auto'
+})
 
-const fontSize = computed(() => `${props.settings.fontSize}px`);
+const fontSize = computed(() => `${props.settings.fontSize}px`)
 const fontFamily = computed(() => {
-	return `"${props.settings.fontFamily}-${props.settings.fontWeight}-${props.settings.fontStyle}"`;
-});
+	return `"${props.settings.fontFamily}-${props.settings.fontWeight}-${props.settings.fontStyle}"`
+})
 
 const textShadow = computed(() => {
-	if (!props.settings.textShadowColor || !props.settings.textShadowSize) return '';
+	if (!props.settings.textShadowColor || !props.settings.textShadowSize) return ''
 
 	const array = Array.from({ length: 5 }).map((_, i) => {
-		const n = i + 1;
-		return `0px 0px ${props.settings.textShadowSize! + n}px ${props.settings.textShadowColor}`;
-	});
+		const n = i + 1
+		return `0px 0px ${props.settings.textShadowSize! + n}px ${props.settings.textShadowColor}`
+	})
 
-	return array.join(', ');
-});
+	return array.join(', ')
+})
 
 const paddingContainer = computed(() => {
-	return `${props.settings.paddingContainer}px`;
-});
+	return `${props.settings.paddingContainer}px`
+})
+
+const transitionName = computed(() => {
+	if (props.settings.animation === 'DEFAULT') {
+		return 'list'
+	}
+
+	if (props.settings.animation === 'DISABLED') {
+		return ''
+	}
+
+	return ''
+})
 </script>
 
 <template>
 	<div class="chat">
 		<div ref="chatMessages" class="messages">
-			<TransitionGroup name="list">
+			<TransitionGroup :name="transitionName">
 				<component
 					:is="chatMessageComponent"
 					v-for="msg of messages"
diff --git a/libs/frontend-chat/src/components/message-content.vue b/libs/frontend-chat/src/components/message-content.vue
index 78d962f6a..d85d0cede 100644
--- a/libs/frontend-chat/src/components/message-content.vue
+++ b/libs/frontend-chat/src/components/message-content.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { EmoteFlag, type MessageChunk } from '../types.js';
+import { EmoteFlag, type MessageChunk } from '../types.js'
 
 const props = defineProps<{
 	chunks: MessageChunk[]
@@ -7,32 +7,32 @@ const props = defineProps<{
 	textShadowColor?: string
 	textShadowSize?: number
 	userColor: string
-}>();
+}>()
 
-const getEmoteWidth = (isGrowX: boolean, width?: number) => {
+function getEmoteWidth(isGrowX: boolean, width?: number) {
 	if (isGrowX) {
-		return `${width ? `${width * 2}px` : 'auto'}`;
+		return `${width ? `${width * 2}px` : 'auto'}`
 	}
 
 	if (width) {
-		return `${width}px`;
+		return `${width}px`
 	}
-};
+}
 
 const mappedChunks = props.chunks.reduce((acc, chunk) => {
 	if (chunk.type === 'text') {
-		const lastChunk = acc[acc.length - 1];
+		const lastChunk = acc[acc.length - 1]
 		if (lastChunk && lastChunk.type === 'text') {
-			lastChunk.value += ' ' + chunk.value;
+			lastChunk.value += ` ${chunk.value}`
 		} else {
-			acc.push(chunk);
+			acc.push(chunk)
 		}
 	} else {
-		acc.push(chunk);
+		acc.push(chunk)
 	}
 
-	return acc;
-}, [] as MessageChunk[]);
+	return acc
+}, [] as MessageChunk[])
 </script>
 
 <template>
diff --git a/libs/frontend-chat/src/composables/mapped-badges.ts b/libs/frontend-chat/src/composables/mapped-badges.ts
new file mode 100644
index 000000000..a5d3957ea
--- /dev/null
+++ b/libs/frontend-chat/src/composables/mapped-badges.ts
@@ -0,0 +1,47 @@
+import { ref } from 'vue'
+
+import type { BadgeVersion, ChatBadge } from '../types'
+
+interface Badge {
+	id: string
+	versions: Record<string, BadgeVersion>
+}
+
+const globalMappedBadges = ref<Record<string, Badge>>({})
+const channelMappedBadges = ref<Record<string, Badge>>({})
+
+export function useMappedBadges() {
+	function setGlobalBadges(badges: ChatBadge[]) {
+		globalMappedBadges.value = badges.reduce((acc, badge) => {
+			acc[badge.set_id] = {
+				id: badge.set_id,
+				versions: badge.versions.reduce((acc, version) => {
+					acc[version.id] = version
+					return acc
+				}, {} as Record<string, BadgeVersion>),
+			}
+			return acc
+		}, {} as Record<string, Badge>)
+	}
+
+	function setChannelBadges(badges: ChatBadge[]) {
+		channelMappedBadges.value = badges.reduce((acc, badge) => {
+			acc[badge.set_id] = {
+				id: badge.set_id,
+				versions: badge.versions.reduce((acc, version) => {
+					acc[version.id] = version
+					return acc
+				}, {} as Record<string, BadgeVersion>),
+			}
+			return acc
+		}, {} as Record<string, Badge>)
+	}
+
+	return {
+		setGlobalBadges,
+		setChannelBadges,
+
+		globalMappedBadges,
+		channelMappedBadges,
+	}
+}
diff --git a/libs/frontend-chat/src/styles/boxed/message-horizontal.vue b/libs/frontend-chat/src/styles/boxed/message-horizontal.vue
index 82f99a1a6..ffcfd7bd1 100644
--- a/libs/frontend-chat/src/styles/boxed/message-horizontal.vue
+++ b/libs/frontend-chat/src/styles/boxed/message-horizontal.vue
@@ -1,10 +1,13 @@
 <script lang="ts" setup>
+import MessageContent from '../../components/message-content.vue'
+import { useMappedBadges } from '../../composables/mapped-badges.js'
+import { normalizeDisplayName } from '../../helpers.js'
 
-import MessageContent from '../../components/message-content.vue';
-import { normalizeDisplayName } from '../../helpers.js';
-import type { MessageComponentProps } from '../../types.js';
+import type { MessageComponentProps } from '../../types.js'
 
-defineProps<MessageComponentProps>();
+defineProps<MessageComponentProps>()
+
+const { globalMappedBadges, channelMappedBadges } = useMappedBadges()
 </script>
 
 <template>
@@ -21,23 +24,23 @@ defineProps<MessageComponentProps>();
 			<div v-if="settings.showBadges" class="badges">
 				<template
 					v-for="(badgeValue, badgeName) of msg.badges"
-					:key="badgeName+badgeValue"
+					:key="badgeName + badgeValue"
 				>
 					<img
-						v-if="settings.channelBadges.get(`${badgeName}-${badgeValue}`)"
-						:src="settings.channelBadges.get(`${badgeName}-${badgeValue}`)!.image_url_4x"
+						v-if="channelMappedBadges[badgeName]"
+						:src="channelMappedBadges[badgeName]!.versions[badgeValue].image_url_4x"
 						class="badge"
 					/>
 
 					<img
-						v-else-if="settings.globalBadges.get(badgeName)?.versions.length"
-						:src="settings.globalBadges.get(badgeName)!.versions.at(-1)!.image_url_4x"
+						v-if="globalMappedBadges[badgeName]"
+						:src="globalMappedBadges[badgeName]!.versions[badgeValue].image_url_4x"
 						class="badge"
 					/>
 				</template>
 			</div>
 		</div>
-		<message-content
+		<MessageContent
 			:chunks="msg.chunks"
 			:is-italic="msg.isItalic"
 			:text-shadow-color="settings.textShadowColor"
diff --git a/libs/frontend-chat/src/styles/boxed/message-vertical.vue b/libs/frontend-chat/src/styles/boxed/message-vertical.vue
index 17b410722..cbfaef80c 100644
--- a/libs/frontend-chat/src/styles/boxed/message-vertical.vue
+++ b/libs/frontend-chat/src/styles/boxed/message-vertical.vue
@@ -1,10 +1,13 @@
 <script lang="ts" setup>
+import MessageContent from '../../components/message-content.vue'
+import { useMappedBadges } from '../../composables/mapped-badges'
+import { normalizeDisplayName } from '../../helpers.js'
 
-import MessageContent from '../../components/message-content.vue';
-import { normalizeDisplayName } from '../../helpers.js';
-import type { MessageComponentProps } from '../../types.js';
+import type { MessageComponentProps } from '../../types.js'
 
-defineProps<MessageComponentProps>();
+defineProps<MessageComponentProps>()
+
+const { globalMappedBadges, channelMappedBadges } = useMappedBadges()
 </script>
 
 <template>
@@ -21,23 +24,23 @@ defineProps<MessageComponentProps>();
 			<div v-if="settings.showBadges" class="badges">
 				<template
 					v-for="(badgeValue, badgeName) of msg.badges"
-					:key="badgeName+badgeValue"
+					:key="badgeName + badgeValue"
 				>
 					<img
-						v-if="settings.channelBadges.get(`${badgeName}-${badgeValue}`)"
-						:src="settings.channelBadges.get(`${badgeName}-${badgeValue}`)!.image_url_4x"
+						v-if="channelMappedBadges[badgeName]"
+						:src="channelMappedBadges[badgeName]!.versions[badgeValue].image_url_4x"
 						class="badge"
 					/>
 
 					<img
-						v-else-if="settings.globalBadges.get(badgeName)?.versions.length"
-						:src="settings.globalBadges.get(badgeName)!.versions.at(-1)!.image_url_4x"
+						v-if="globalMappedBadges[badgeName]"
+						:src="globalMappedBadges[badgeName]!.versions[badgeValue].image_url_4x"
 						class="badge"
 					/>
 				</template>
 			</div>
 		</div>
-		<message-content
+		<MessageContent
 			:chunks="msg.chunks"
 			:is-italic="msg.isItalic"
 			:text-shadow-color="settings.textShadowColor"
diff --git a/libs/frontend-chat/src/styles/clean/message-horizontal.vue b/libs/frontend-chat/src/styles/clean/message-horizontal.vue
index f1a478e3d..6f5cc9b38 100644
--- a/libs/frontend-chat/src/styles/clean/message-horizontal.vue
+++ b/libs/frontend-chat/src/styles/clean/message-horizontal.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import MessageContent from '../../components/message-content.vue'
+import { useMappedBadges } from '../../composables/mapped-badges'
+import { normalizeDisplayName } from '../../helpers'
 
-import MessageContent from '../../components/message-content.vue';
-import { normalizeDisplayName } from '../../helpers';
-import type { MessageComponentProps } from '../../types';
+import type { MessageComponentProps } from '../../types'
 
-defineProps<MessageComponentProps>();
+defineProps<MessageComponentProps>()
+
+const { globalMappedBadges, channelMappedBadges } = useMappedBadges()
 </script>
 
 <template>
@@ -13,17 +16,17 @@ defineProps<MessageComponentProps>();
 			<div v-if="settings.showBadges && msg.badges" class="badges">
 				<template
 					v-for="(badgeValue, badgeName) of msg.badges"
-					:key="badgeName+badgeValue"
+					:key="badgeName + badgeValue"
 				>
 					<img
-						v-if="settings.channelBadges.get(`${badgeName}-${badgeValue}`)"
-						:src="settings.channelBadges.get(`${badgeName}-${badgeValue}`)!.image_url_4x"
+						v-if="channelMappedBadges[badgeName]"
+						:src="channelMappedBadges[badgeName]!.versions[badgeValue].image_url_4x"
 						class="badge"
 					/>
 
 					<img
-						v-else-if="settings.globalBadges.get(badgeName)?.versions.length"
-						:src="settings.globalBadges.get(badgeName)!.versions.at(-1)!.image_url_4x"
+						v-if="globalMappedBadges[badgeName]"
+						:src="globalMappedBadges[badgeName]!.versions[badgeValue].image_url_4x"
 						class="badge"
 					/>
 				</template>
@@ -35,7 +38,7 @@ defineProps<MessageComponentProps>();
 				{{ msg.isItalic ? '' : ':' }}
 			</span>
 		</div>
-		<message-content
+		<MessageContent
 			:chunks="msg.chunks"
 			:is-italic="msg.isItalic"
 			:text-shadow-color="settings.textShadowColor"
diff --git a/libs/frontend-chat/src/styles/clean/message-vertical.vue b/libs/frontend-chat/src/styles/clean/message-vertical.vue
index 453e24150..1871dc1c3 100644
--- a/libs/frontend-chat/src/styles/clean/message-vertical.vue
+++ b/libs/frontend-chat/src/styles/clean/message-vertical.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import MessageContent from '../../components/message-content.vue'
+import { useMappedBadges } from '../../composables/mapped-badges'
+import { normalizeDisplayName } from '../../helpers'
 
-import MessageContent from '../../components/message-content.vue';
-import { normalizeDisplayName } from '../../helpers';
-import type { MessageComponentProps } from '../../types';
+import type { MessageComponentProps } from '../../types'
 
-defineProps<MessageComponentProps>();
+defineProps<MessageComponentProps>()
+
+const { globalMappedBadges, channelMappedBadges } = useMappedBadges()
 </script>
 
 <template>
@@ -13,17 +16,17 @@ defineProps<MessageComponentProps>();
 			<div v-if="settings.showBadges && msg.badges" class="badges">
 				<template
 					v-for="(badgeValue, badgeName) of msg.badges"
-					:key="badgeName+badgeValue"
+					:key="badgeName + badgeValue"
 				>
 					<img
-						v-if="settings.channelBadges.get(`${badgeName}-${badgeValue}`)"
-						:src="settings.channelBadges.get(`${badgeName}-${badgeValue}`)!.image_url_4x"
+						v-if="channelMappedBadges[badgeName]"
+						:src="channelMappedBadges[badgeName]!.versions[badgeValue].image_url_4x"
 						class="badge"
 					/>
 
 					<img
-						v-else-if="settings.globalBadges.get(badgeName)?.versions.length"
-						:src="settings.globalBadges.get(badgeName)!.versions.at(-1)!.image_url_4x"
+						v-if="globalMappedBadges[badgeName]"
+						:src="globalMappedBadges[badgeName]!.versions[badgeValue].image_url_4x"
 						class="badge"
 					/>
 				</template>
@@ -35,7 +38,7 @@ defineProps<MessageComponentProps>();
 				{{ msg.isItalic ? '' : ':' }}
 			</span>
 		</div>
-		<message-content
+		<MessageContent
 			:chunks="msg.chunks"
 			:is-italic="msg.isItalic"
 			:text-shadow-color="settings.textShadowColor"
diff --git a/libs/frontend-chat/src/types.ts b/libs/frontend-chat/src/types.ts
index 98a82ca54..751ec5975 100644
--- a/libs/frontend-chat/src/types.ts
+++ b/libs/frontend-chat/src/types.ts
@@ -1,5 +1,3 @@
-import type { Settings as ChatSettings } from '@twir/api/messages/overlays_chat/overlays_chat';
-
 export enum EmoteFlag {
 	Hidden = 2,
 	FlipX = 3,
@@ -22,11 +20,11 @@ export const BttvZeroModifiers = [
 	'SantaHat',
 	'ReinDeer',
 	'CandyCane',
-];
+]
 
-export type MessageChunk = {
-	type: 'text' | 'emote' | '3rd_party_emote' | 'emoji';
-	value: string;
+export interface MessageChunk {
+	type: 'text' | 'emote' | '3rd_party_emote' | 'emoji'
+	value: string
 	flags?: EmoteFlag[]
 	modifier_flags?: number
 	zeroWidthModifiers?: string[]
@@ -35,44 +33,60 @@ export type MessageChunk = {
 	emoteName?: string
 }
 
-export type BadgeVersion = {
-	id: string,
-	image_url_1x: string,
-	image_url_2x: string,
-	image_url_4x: string,
+export interface BadgeVersion {
+	id: string
+	image_url_1x: string
+	image_url_2x: string
+	image_url_4x: string
 }
 
-export type ChatBadge = {
-	set_id: string,
+export interface ChatBadge {
+	set_id: string
 	versions: Array<BadgeVersion>
 }
 
-export type Message = {
-	internalId: string,
-	id?: string,
-	type: 'message' | 'system',
-	chunks: MessageChunk[],
-	sender?: string,
-	senderColor?: string,
+export interface Message {
+	internalId: string
+	id?: string
+	type: 'message' | 'system'
+	chunks: MessageChunk[]
+	sender?: string
+	senderColor?: string
 	senderDisplayName?: string
-	badges?: Record<string, string>,
-	isItalic: boolean;
-	createdAt: Date;
-	announceColor?: string;
-	isAnnounce: boolean;
-};
+	badges?: Record<string, string>
+	isItalic: boolean
+	createdAt: Date
+	announceColor?: string
+	isAnnounce: boolean
+}
 
-export type Settings = {
+export interface Settings {
 	channelId: string
 	channelName: string
 	channelDisplayName: string
-	globalBadges: Map<string, ChatBadge>
-	channelBadges: Map<string, BadgeVersion>
-} & ChatSettings;
-
+	animation: string
+	chatBackgroundColor: string
+	direction: string
+	fontFamily: string
+	fontSize: number
+	fontStyle: string
+	fontWeight: number
+	hideBots: boolean
+	hideCommands: boolean
+	messageHideTimeout: number
+	messageShowDelay: number
+	paddingContainer: number
+	preset: string
+	showAnnounceBadge: boolean
+	showBadges: boolean
+	textShadowColor: string
+	textShadowSize: number
+	globalBadges: ChatBadge[]
+	channelBadges: ChatBadge[]
+}
 
-export type MessageComponentProps = {
-	msg: Message,
-	settings: Settings,
-	userColor: string,
+export interface MessageComponentProps {
+	msg: Message
+	settings: Settings
+	userColor: string
 }
diff --git a/libs/gomodels/channel_overlays_chat.go b/libs/gomodels/channel_overlays_chat.go
index be6b0470f..3d226378d 100644
--- a/libs/gomodels/channel_overlays_chat.go
+++ b/libs/gomodels/channel_overlays_chat.go
@@ -7,25 +7,25 @@ import (
 )
 
 type ChatOverlaySettings struct {
-	ID                  uuid.UUID                         `gorm:"column:id;type:uuid;default:uuid_generate_v4()"        json:"id"`
-	MessageHideTimeout  uint32                            `gorm:"column:message_hide_timeout" json:"message_hide_timeout"`
-	MessageShowDelay    uint32                            `gorm:"column:message_show_delay" json:"message_show_delay"`
-	Preset              string                            `gorm:"column:preset" json:"preset"`
-	FontFamily          string                            `gorm:"column:font_family" json:"font_family"`
-	FontSize            uint32                            `gorm:"column:font_size" json:"font_size"`
-	FontWeight          uint32                            `gorm:"column:font_weight" json:"font_weight"`
-	FontStyle           string                            `gorm:"column:font_style" json:"font_style"`
-	HideCommands        bool                              `gorm:"column:hide_commands" json:"hide_commands"`
-	HideBots            bool                              `gorm:"column:hide_bots" json:"hide_bots"`
-	ShowBadges          bool                              `gorm:"column:show_badges" json:"show_badges"`
-	ShowAnnounceBadge   bool                              `gorm:"column:show_announce_badge" json:"show_announce_badge"`
-	TextShadowColor     string                            `gorm:"column:text_shadow_color" json:"text_shadow_color"`
-	TextShadowSize      uint32                            `gorm:"column:text_shadow_size" json:"text_shadow_size"`
-	ChatBackgroundColor string                            `gorm:"column:chat_background_color" json:"chat_background_color"`
-	Direction           string                            `gorm:"column:direction" json:"direction"`
-	PaddingContainer    uint32                            `gorm:"column:padding_container" json:"padding_container"`
-	CreatedAt           time.Time                         `gorm:"column:created_at" json:"created_at"`
-	Animation           *ChatOverlaySettingsAnimationType `gorm:"column:animation" json:"animation"`
+	ID                  uuid.UUID                        `gorm:"column:id;type:uuid;default:uuid_generate_v4()"        json:"id"`
+	MessageHideTimeout  uint32                           `gorm:"column:message_hide_timeout" json:"message_hide_timeout"`
+	MessageShowDelay    uint32                           `gorm:"column:message_show_delay" json:"message_show_delay"`
+	Preset              string                           `gorm:"column:preset" json:"preset"`
+	FontFamily          string                           `gorm:"column:font_family" json:"font_family"`
+	FontSize            uint32                           `gorm:"column:font_size" json:"font_size"`
+	FontWeight          uint32                           `gorm:"column:font_weight" json:"font_weight"`
+	FontStyle           string                           `gorm:"column:font_style" json:"font_style"`
+	HideCommands        bool                             `gorm:"column:hide_commands" json:"hide_commands"`
+	HideBots            bool                             `gorm:"column:hide_bots" json:"hide_bots"`
+	ShowBadges          bool                             `gorm:"column:show_badges" json:"show_badges"`
+	ShowAnnounceBadge   bool                             `gorm:"column:show_announce_badge" json:"show_announce_badge"`
+	TextShadowColor     string                           `gorm:"column:text_shadow_color" json:"text_shadow_color"`
+	TextShadowSize      uint32                           `gorm:"column:text_shadow_size" json:"text_shadow_size"`
+	ChatBackgroundColor string                           `gorm:"column:chat_background_color" json:"chat_background_color"`
+	Direction           string                           `gorm:"column:direction" json:"direction"`
+	PaddingContainer    uint32                           `gorm:"column:padding_container" json:"padding_container"`
+	CreatedAt           time.Time                        `gorm:"column:created_at" json:"created_at"`
+	Animation           ChatOverlaySettingsAnimationType `gorm:"column:animation" json:"animation"`
 
 	ChannelID string    `gorm:"column:channel_id;type:text" json:"channel_id"`
 	Channel   *Channels `gorm:"foreignkey:ChannelID;" json:"channel"`
@@ -39,4 +39,5 @@ type ChatOverlaySettingsAnimationType string
 
 const (
 	ChatOverlaySettingsAnimationTypeDisabled ChatOverlaySettingsAnimationType = "DISABLED"
+	ChatOverlaySettingsAnimationTypeDefault  ChatOverlaySettingsAnimationType = "DEFAULT"
 )
diff --git a/libs/migrations/migrations/20240606202927_chat_add_ability_to_disable_animations.sql b/libs/migrations/migrations/20240606202927_chat_add_ability_to_disable_animations.sql
index 07d26342b..5b407e16b 100644
--- a/libs/migrations/migrations/20240606202927_chat_add_ability_to_disable_animations.sql
+++ b/libs/migrations/migrations/20240606202927_chat_add_ability_to_disable_animations.sql
@@ -3,10 +3,11 @@
 SELECT 'up SQL query';
 
 CREATE TYPE channels_overlays_chat_animation AS ENUM (
-		'DISABLED'
+		'DISABLED',
+		'DEFAULT'
 );
 
-ALTER TABLE channels_overlays_chat ADD COLUMN animation channels_overlays_chat_animation DEFAULT 'DISABLED';
+ALTER TABLE channels_overlays_chat ADD COLUMN animation channels_overlays_chat_animation DEFAULT 'DEFAULT' NOT NULL;
 -- +goose StatementEnd
 
 -- +goose Down
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5fd1c1570..5c723b92d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -439,6 +439,9 @@ importers:
       emoji-regex:
         specifier: 10.3.0
         version: 10.3.0
+      graphql:
+        specifier: 16.8.1
+        version: 16.8.1
       graphql-ws:
         specifier: 5.16.0
         version: 5.16.0(graphql@16.8.1)
@@ -461,6 +464,12 @@ importers:
       '@graphql-codegen/cli':
         specifier: 5.0.2
         version: 5.0.2(@types/node@20.12.7)(graphql@16.8.1)(typescript@5.4.5)
+      '@graphql-codegen/client-preset':
+        specifier: 4.2.5
+        version: 4.2.5(graphql@16.8.1)
+      '@graphql-typed-document-node/core':
+        specifier: 3.2.0
+        version: 3.2.0(graphql@16.8.1)
       '@twir/types':
         specifier: workspace:*
         version: link:../../libs/types
@@ -5584,6 +5593,7 @@ packages:
 
   /buffer@5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+    requiresBuild: true
     dependencies:
       base64-js: 1.5.1
       ieee754: 1.2.1