diff --git a/frontend/dashboard/package.json b/frontend/dashboard/package.json
index de08bea3e..ee599d905 100644
--- a/frontend/dashboard/package.json
+++ b/frontend/dashboard/package.json
@@ -44,7 +44,6 @@
     "lucide-vue-next": "0.368.0",
     "naive-ui": "2.38.1",
     "nested-css-to-flat": "1.0.5",
-    "pinia": "2.1.7",
     "plyr": "3.7.8",
     "radix-vue": "1.7.0",
     "tailwind-merge": "2.2.2",
diff --git a/frontend/dashboard/src/api/auth.ts b/frontend/dashboard/src/api/auth.ts
index a05aa8b4c..6a44a227b 100644
--- a/frontend/dashboard/src/api/auth.ts
+++ b/frontend/dashboard/src/api/auth.ts
@@ -1,6 +1,6 @@
 import { useQueryClient } from '@tanstack/vue-query'
 import { createRequest, useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed } from 'vue'
 
 import { useMutation } from '@/composables/use-mutation.js'
@@ -46,15 +46,15 @@ export const profileQuery = createRequest(graphql(`
 
 export const userInvalidateQueryKey = 'UserInvalidateQueryKey'
 
-export const useProfile = defineStore('auth/profile', () => {
+export const useProfile = createGlobalState(() => {
 	const { data: response, executeQuery, fetching } = useQuery({
 		query: profileQuery.query,
 		variables: {
 		},
 		context: {
 			key: profileQuery.key,
-			additionalTypenames: [userInvalidateQueryKey]
-		}
+			additionalTypenames: [userInvalidateQueryKey],
+		},
 	})
 
 	const computedUser = computed(() => {
@@ -75,7 +75,7 @@ export const useProfile = defineStore('auth/profile', () => {
 			selectedDashboardId: user.selectedDashboardId,
 			selectedDashboardTwitchUser: user.selectedDashboardTwitchUser,
 			hideOnLandingPage: user.hideOnLandingPage,
-			availableDashboards: user.availableDashboards
+			availableDashboards: user.availableDashboards,
 		}
 	})
 
@@ -96,11 +96,11 @@ export function useLogout() {
 	}
 
 	return {
-		execute
+		execute,
 	}
 }
 
-export const useUserSettings = defineStore('userSettings', () => {
+export const useUserSettings = createGlobalState(() => {
 	const userPublicSettingsInvalidateKey = 'UserPublicSettingsInvalidateKey'
 
 	const usePublicQuery = () => useQuery({
@@ -117,8 +117,8 @@ export const useUserSettings = defineStore('userSettings', () => {
 		`),
 		variables: {},
 		context: {
-			additionalTypenames: [userPublicSettingsInvalidateKey]
-		}
+			additionalTypenames: [userPublicSettingsInvalidateKey],
+		},
 	})
 
 	const usePublicMutation = () => useMutation(graphql(`
@@ -143,11 +143,11 @@ export const useUserSettings = defineStore('userSettings', () => {
 		usePublicQuery,
 		usePublicMutation,
 		useApiKeyGenerateMutation,
-		useUserUpdateMutation
+		useUserUpdateMutation,
 	}
 })
 
-export const useDashboard = defineStore('auth/dashboard', () => {
+export const useDashboard = createGlobalState(() => {
 	const urqlClient = useUrqlClient()
 
 	const mutationSetDashboard = useMutation(graphql(`
@@ -166,7 +166,7 @@ export const useDashboard = defineStore('auth/dashboard', () => {
 	}
 
 	return {
-		setDashboard
+		setDashboard,
 	}
 })
 
@@ -215,23 +215,23 @@ export const PERMISSIONS_FLAGS: Flag[] = [
 	{ perm: ChannelRolePermissionEnum.ManageAlerts, description: 'Can manage alerts' },
 	'delimiter',
 	{ perm: ChannelRolePermissionEnum.ViewGames, description: 'Can view games' },
-	{ perm: ChannelRolePermissionEnum.ManageGames, description: 'Can manage games' }
+	{ perm: ChannelRolePermissionEnum.ManageGames, description: 'Can manage games' },
 ]
 
 export function useUserAccessFlagChecker(flag: ChannelRolePermissionEnum) {
-	const profile = useProfile()
+	const { data: profile } = useProfile()
 
 	return computed(() => {
-		if (!profile.data?.availableDashboards || !profile.data?.selectedDashboardId) return false
+		if (!profile.value?.availableDashboards || !profile.value?.selectedDashboardId) return false
 
-		if (profile.data.id === profile.data.selectedDashboardId) {
+		if (profile.value.id === profile.value.selectedDashboardId) {
 			return true
 		}
 
-		if (profile.data.isBotAdmin) return true
+		if (profile.value.isBotAdmin) return true
 
-		const dashboard = profile.data?.availableDashboards.find(dashboard => {
-			return dashboard.id === profile.data?.selectedDashboardId
+		const dashboard = profile.value?.availableDashboards.find(dashboard => {
+			return dashboard.id === profile.value?.selectedDashboardId
 		})
 		if (!dashboard) return false
 
diff --git a/frontend/dashboard/src/api/chat-alerts.ts b/frontend/dashboard/src/api/chat-alerts.ts
index d3e850829..efb57545b 100644
--- a/frontend/dashboard/src/api/chat-alerts.ts
+++ b/frontend/dashboard/src/api/chat-alerts.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed } from 'vue'
 
 import type { GetAllChatAlertsQuery } from '@/gql/graphql.js'
@@ -11,7 +11,7 @@ export type ChatAlerts = GetAllChatAlertsQuery['chatAlerts']
 
 const invalidationKey = 'ChatAlertsInvalidateKey'
 
-export const useChatAlertsApi = defineStore('api/chat-alerts', () => {
+export const useChatAlertsApi = createGlobalState(() => {
 	const { data } = useQuery({
 		variables: {},
 		context: { additionalTypenames: [invalidationKey] },
@@ -117,7 +117,7 @@ export const useChatAlertsApi = defineStore('api/chat-alerts', () => {
 					}
 				}
 			}
-		`)
+		`),
 	})
 
 	const chatAlerts = computed<ChatAlerts>(() => data.value?.chatAlerts)
@@ -132,6 +132,6 @@ export const useChatAlertsApi = defineStore('api/chat-alerts', () => {
 
 	return {
 		chatAlerts,
-		useMutationUpdateChatAlerts
+		useMutationUpdateChatAlerts,
 	}
 })
diff --git a/frontend/dashboard/src/api/commands/commands-groups.ts b/frontend/dashboard/src/api/commands/commands-groups.ts
index b43257b38..8c8b79508 100644
--- a/frontend/dashboard/src/api/commands/commands-groups.ts
+++ b/frontend/dashboard/src/api/commands/commands-groups.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 
 import { invalidationKey as commandsInvalidationKey } from './commands.js'
 
@@ -8,7 +8,7 @@ import { graphql } from '@/gql/gql.js'
 
 const invalidationKey = 'CommandsGroupsInvalidateKey'
 
-export const useCommandsGroupsApi = defineStore('api/commands-groups', () => {
+export const useCommandsGroupsApi = createGlobalState(() => {
 	const useQueryGroups = () => useQuery({
 		query: graphql(`
 			query GetAllCommandsGroups {
@@ -21,8 +21,8 @@ export const useCommandsGroupsApi = defineStore('api/commands-groups', () => {
 		`),
 		variables: {},
 		context: {
-			additionalTypenames: [invalidationKey]
-		}
+			additionalTypenames: [invalidationKey],
+		},
 	})
 
 	const useMutationDeleteGroup = () => useMutation(
@@ -31,7 +31,7 @@ export const useCommandsGroupsApi = defineStore('api/commands-groups', () => {
 				commandsGroupsRemove(id: $id)
 			}
 		`),
-		[invalidationKey, commandsInvalidationKey]
+		[invalidationKey, commandsInvalidationKey],
 	)
 
 	const useMutationCreateGroup = () => useMutation(
@@ -40,7 +40,7 @@ export const useCommandsGroupsApi = defineStore('api/commands-groups', () => {
 				commandsGroupsCreate(opts: $opts)
 			}
 		`),
-		[invalidationKey]
+		[invalidationKey],
 	)
 
 	const useMutationUpdateGroup = () => useMutation(
@@ -49,13 +49,13 @@ export const useCommandsGroupsApi = defineStore('api/commands-groups', () => {
 				commandsGroupsUpdate(id: $id,opts: $opts)
 			}
 		`),
-		[invalidationKey, commandsInvalidationKey]
+		[invalidationKey, commandsInvalidationKey],
 	)
 
 	return {
 		useQueryGroups,
 		useMutationDeleteGroup,
 		useMutationCreateGroup,
-		useMutationUpdateGroup
+		useMutationUpdateGroup,
 	}
 })
diff --git a/frontend/dashboard/src/api/commands/commands.ts b/frontend/dashboard/src/api/commands/commands.ts
index 04a4c0dfc..2400b45e8 100644
--- a/frontend/dashboard/src/api/commands/commands.ts
+++ b/frontend/dashboard/src/api/commands/commands.ts
@@ -1,12 +1,12 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 
 import { useMutation } from '@/composables/use-mutation.js'
 import { graphql } from '@/gql/gql.js'
 
 export const invalidationKey = 'CommandsInvalidateKey'
 
-export const useCommandsApi = defineStore('api/commands', () => {
+export const useCommandsApi = createGlobalState(() => {
 	const useQueryCommands = () => useQuery({
 		query: graphql(`
 			query GetAllCommands {
@@ -48,9 +48,9 @@ export const useCommandsApi = defineStore('api/commands', () => {
 			}
 		`),
 		context: {
-			additionalTypenames: [invalidationKey]
+			additionalTypenames: [invalidationKey],
 		},
-		variables: {}
+		variables: {},
 	})
 
 	const useMutationDeleteCommand = () => useMutation(
@@ -59,7 +59,7 @@ export const useCommandsApi = defineStore('api/commands', () => {
 				commandsRemove(id: $id)
 			}
 		`),
-		[invalidationKey]
+		[invalidationKey],
 	)
 
 	const useMutationCreateCommand = () => useMutation(
@@ -68,7 +68,7 @@ export const useCommandsApi = defineStore('api/commands', () => {
 				commandsCreate(opts: $opts)
 			}
 		`),
-		[invalidationKey]
+		[invalidationKey],
 	)
 
 	const useMutationUpdateCommand = () => useMutation(
@@ -77,13 +77,13 @@ export const useCommandsApi = defineStore('api/commands', () => {
 				commandsUpdate(id: $id, opts: $opts)
 			}
 		`),
-		[invalidationKey]
+		[invalidationKey],
 	)
 
 	return {
 		useQueryCommands,
 		useMutationDeleteCommand,
 		useMutationCreateCommand,
-		useMutationUpdateCommand
+		useMutationUpdateCommand,
 	}
 })
diff --git a/frontend/dashboard/src/api/community-users.ts b/frontend/dashboard/src/api/community-users.ts
index 77e6863a5..22e12647b 100644
--- a/frontend/dashboard/src/api/community-users.ts
+++ b/frontend/dashboard/src/api/community-users.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 
 import type { CommunityUsersOpts, GetAllCommunityUsersQuery } from '@/gql/graphql.js'
 import type { Ref } from 'vue'
@@ -11,14 +11,14 @@ export type CommunityUser = GetAllCommunityUsersQuery['communityUsers']['users']
 
 const invalidationKey = 'CommunityInvalidateKey'
 
-export const useCommunityUsersApi = defineStore('api/community-users', () => {
+export const useCommunityUsersApi = createGlobalState(() => {
 	const useCommunityUsers = (variables: Ref<CommunityUsersOpts>) => useQuery({
 		context: {
-			additionalTypenames: [invalidationKey]
+			additionalTypenames: [invalidationKey],
 		},
 		get variables() {
 			return {
-				opts: variables.value
+				opts: variables.value,
 			}
 		},
 		query: graphql(`
@@ -39,7 +39,7 @@ export const useCommunityUsersApi = defineStore('api/community-users', () => {
 					}
 				}
 			}
-		`)
+		`),
 	})
 
 	const useMutationCommunityReset = () => useMutation(graphql(`
@@ -50,6 +50,6 @@ export const useCommunityUsersApi = defineStore('api/community-users', () => {
 
 	return {
 		useCommunityUsers,
-		useMutationCommunityReset
+		useMutationCommunityReset,
 	}
 })
diff --git a/frontend/dashboard/src/api/games/games.ts b/frontend/dashboard/src/api/games/games.ts
index ca394e7ff..9834558fd 100644
--- a/frontend/dashboard/src/api/games/games.ts
+++ b/frontend/dashboard/src/api/games/games.ts
@@ -1,12 +1,12 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 
 import { useMutation } from '@/composables/use-mutation'
 import { graphql } from '@/gql'
 
 const gamesInvalidationKey = 'gamesInvalidationKey'
 
-export const useGamesApi = defineStore('games/8ball', () => {
+export const useGamesApi = createGlobalState(() => {
 	const useGamesQuery = () => useQuery({
 		query: graphql(`
 			query Games {
@@ -42,8 +42,8 @@ export const useGamesApi = defineStore('games/8ball', () => {
 		`),
 		variables: {},
 		context: {
-			additionalTypenames: [gamesInvalidationKey]
-		}
+			additionalTypenames: [gamesInvalidationKey],
+		},
 	})
 
 	const useEightBallMutation = () => useMutation(
@@ -55,7 +55,7 @@ export const useGamesApi = defineStore('games/8ball', () => {
 				}
 			}
 		`),
-		[gamesInvalidationKey]
+		[gamesInvalidationKey],
 	)
 
 	const useDuelMutation = () => useMutation(
@@ -66,7 +66,7 @@ export const useGamesApi = defineStore('games/8ball', () => {
 				}
 			}
 		`),
-		[gamesInvalidationKey]
+		[gamesInvalidationKey],
 	)
 
 	const useRussianRouletteMutation = () => useMutation(
@@ -77,13 +77,13 @@ export const useGamesApi = defineStore('games/8ball', () => {
 				}
 			}
 		`),
-		[gamesInvalidationKey]
+		[gamesInvalidationKey],
 	)
 
 	return {
 		useGamesQuery,
 		useEightBallMutation,
 		useDuelMutation,
-		useRussianRouletteMutation
+		useRussianRouletteMutation,
 	}
 })
diff --git a/frontend/dashboard/src/api/greetings.ts b/frontend/dashboard/src/api/greetings.ts
index 28b218520..eabccad7c 100644
--- a/frontend/dashboard/src/api/greetings.ts
+++ b/frontend/dashboard/src/api/greetings.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 
 import type { GetAllGreetingsQuery } from '@/gql/graphql.js'
 
@@ -10,7 +10,7 @@ export type Greetings = GetAllGreetingsQuery['greetings'][0]
 
 const invalidationKey = 'GreetingsInvalidateKey'
 
-export const useGreetingsApi = defineStore('api/greetings', () => {
+export const useGreetingsApi = createGlobalState(() => {
 	const useQueryGreetings = () => useQuery({
 		variables: {},
 		context: { additionalTypenames: [invalidationKey] },
diff --git a/frontend/dashboard/src/api/keywords.ts b/frontend/dashboard/src/api/keywords.ts
index d5bc7d1a2..decc6bba8 100644
--- a/frontend/dashboard/src/api/keywords.ts
+++ b/frontend/dashboard/src/api/keywords.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 
 import type { GetAllKeywordsQuery } from '@/gql/graphql.js'
 
@@ -14,7 +14,7 @@ export type Keyword = Omit<KeywordResponse, 'id' | 'response'> & {
 
 const invalidateKey = 'KeywordsInvalidateKey'
 
-export const useKeywordsApi = defineStore('api/keywords', () => {
+export const useKeywordsApi = createGlobalState(() => {
 	const useQueryKeywords = () => useQuery({
 		variables: {},
 		context: { additionalTypenames: [invalidateKey] },
@@ -31,7 +31,7 @@ export const useKeywordsApi = defineStore('api/keywords', () => {
 					usageCount
 				}
 			}
-		`)
+		`),
 	})
 
 	const useMutationCreateKeyword = () => useMutation(graphql(`
@@ -60,6 +60,6 @@ export const useKeywordsApi = defineStore('api/keywords', () => {
 		useQueryKeywords,
 		useMutationCreateKeyword,
 		useMutationUpdateKeyword,
-		useMutationRemoveKeyword
+		useMutationRemoveKeyword,
 	}
 })
diff --git a/frontend/dashboard/src/api/roles.ts b/frontend/dashboard/src/api/roles.ts
index 09e04b658..6ffda2c3d 100644
--- a/frontend/dashboard/src/api/roles.ts
+++ b/frontend/dashboard/src/api/roles.ts
@@ -1,12 +1,12 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 
 import { useMutation } from '@/composables/use-mutation'
 import { graphql } from '@/gql'
 
 const rolesInvalidateKey = 'rolesInvalidateKey'
 
-export const useRoles = defineStore('api/channelRoles', () => {
+export const useRoles = createGlobalState(() => {
 	const useRolesQuery = () => useQuery({
 		query: graphql(`
 			query ChannelRoles {
@@ -31,8 +31,8 @@ export const useRoles = defineStore('api/channelRoles', () => {
 		`),
 		variables: {},
 		context: {
-			additionalTypenames: [rolesInvalidateKey]
-		}
+			additionalTypenames: [rolesInvalidateKey],
+		},
 	})
 
 	const useRolesDeleteMutation = () => useMutation(
@@ -41,7 +41,7 @@ export const useRoles = defineStore('api/channelRoles', () => {
 				rolesRemove(id: $id)
 			}
 		`),
-		[rolesInvalidateKey]
+		[rolesInvalidateKey],
 	)
 
 	const useRolesCreateMutation = () => useMutation(
@@ -50,7 +50,7 @@ export const useRoles = defineStore('api/channelRoles', () => {
 				rolesCreate(opts: $opts)
 			}
 		`),
-		[rolesInvalidateKey]
+		[rolesInvalidateKey],
 	)
 
 	const useRolesUpdateMutation = () => useMutation(
@@ -59,13 +59,13 @@ export const useRoles = defineStore('api/channelRoles', () => {
 				rolesUpdate(id: $id, opts: $opts)
 			}
 		`),
-		[rolesInvalidateKey]
+		[rolesInvalidateKey],
 	)
 
 	return {
 		useRolesQuery,
 		useRolesDeleteMutation,
 		useRolesCreateMutation,
-		useRolesUpdateMutation
+		useRolesUpdateMutation,
 	}
 })
diff --git a/frontend/dashboard/src/api/timers.ts b/frontend/dashboard/src/api/timers.ts
index 377529969..625937269 100644
--- a/frontend/dashboard/src/api/timers.ts
+++ b/frontend/dashboard/src/api/timers.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 
 import type { GetAllTimersQuery, TimerCreateInput } from '@/gql/graphql.js'
 
@@ -11,7 +11,7 @@ export type EditableTimer = TimerCreateInput & { id?: string }
 
 const invalidationKey = 'TimersInvalidateKey'
 
-export const useTimersApi = defineStore('api/timers', () => {
+export const useTimersApi = createGlobalState(() => {
 	const useQueryTimers = () => useQuery({
 		variables: {},
 		context: { additionalTypenames: [invalidationKey] },
@@ -29,7 +29,7 @@ export const useTimersApi = defineStore('api/timers', () => {
 					}
 				}
 			}
-		`)
+		`),
 	})
 
 	const useMutationCreateTimer = () => useMutation(graphql(`
@@ -58,6 +58,6 @@ export const useTimersApi = defineStore('api/timers', () => {
 		useQueryTimers,
 		useMutationCreateTimer,
 		useMutationUpdateTimer,
-		useMutationRemoveTimer
+		useMutationRemoveTimer,
 	}
 })
diff --git a/frontend/dashboard/src/api/variables.ts b/frontend/dashboard/src/api/variables.ts
index a4c9eaf01..1e03df7b8 100644
--- a/frontend/dashboard/src/api/variables.ts
+++ b/frontend/dashboard/src/api/variables.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed } from 'vue'
 
 import type { GetCustomAndBuiltInVariablesQuery } from '@/gql/graphql.js'
@@ -14,7 +14,7 @@ const invalidationKey = 'VariablesInvalidateKey'
 export type CustomVariable = GetCustomAndBuiltInVariablesQuery['variables'][number]
 export type EditableCustomVariable = SetOptional<CustomVariable, 'id'>
 
-export const useVariablesApi = defineStore('api/variables', () => {
+export const useVariablesApi = createGlobalState(() => {
 	const variablesQuery = useQuery({
 		variables: {},
 		context: { additionalTypenames: [invalidationKey] },
@@ -36,7 +36,7 @@ export const useVariablesApi = defineStore('api/variables', () => {
 					canBeUsedInRegistry
 				}
 			}
-		`)
+		`),
 	})
 
 	const customVariables = computed(() => {
@@ -50,7 +50,7 @@ export const useVariablesApi = defineStore('api/variables', () => {
 			canBeUsedInRegistry: variable.type !== VariableType.Script,
 			type: variable.type,
 			response: variable.response,
-			evalValue: variable.evalValue
+			evalValue: variable.evalValue,
 		})) ?? []
 
 		return mapped
@@ -63,7 +63,7 @@ export const useVariablesApi = defineStore('api/variables', () => {
 			visible: variable.visible,
 			example: variable.example || `${variable.name}`,
 			isBuiltIn: true,
-			canBeUsedInRegistry: variable.canBeUsedInRegistry
+			canBeUsedInRegistry: variable.canBeUsedInRegistry,
 		})) ?? []
 
 		return mapped
@@ -72,7 +72,7 @@ export const useVariablesApi = defineStore('api/variables', () => {
 	const allVariables = computed(() => {
 		return [
 			...customVariables.value,
-			...builtInVariables.value
+			...builtInVariables.value,
 		]
 	})
 
@@ -109,6 +109,6 @@ export const useVariablesApi = defineStore('api/variables', () => {
 		isLoading,
 		useMutationCreateVariable,
 		useMutationUpdateVariable,
-		useMutationRemoveVariable
+		useMutationRemoveVariable,
 	}
 })
diff --git a/frontend/dashboard/src/components/alerts/modal.vue b/frontend/dashboard/src/components/alerts/modal.vue
index 259c90c03..3956a5628 100644
--- a/frontend/dashboard/src/components/alerts/modal.vue
+++ b/frontend/dashboard/src/components/alerts/modal.vue
@@ -12,9 +12,8 @@ import {
 	NModal,
 	NSelect,
 	NSlider,
-	NSpace
+	NSpace,
 } from 'naive-ui'
-import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, toRaw } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -26,7 +25,7 @@ import {
 	useAlertsManager,
 	useFiles,
 	useProfile,
-	useTwitchGetUsers
+	useTwitchGetUsers,
 } from '@/api'
 import { useCommandsApi } from '@/api/commands/commands'
 import { useGreetingsApi } from '@/api/greetings'
@@ -50,7 +49,7 @@ const formValue = ref<EditableAlert>({
 	commandIds: [],
 	rewardIds: [],
 	greetingsIds: [],
-	keywordsIds: []
+	keywordsIds: [],
 })
 
 onMounted(() => {
@@ -69,8 +68,8 @@ const rules: FormRules = {
 			}
 
 			return true
-		}
-	}
+		},
+	},
 }
 
 const manager = useAlertsManager()
@@ -86,7 +85,7 @@ async function save() {
 	if (data.id) {
 		await updater.mutateAsync({
 			...data,
-			id: data.id!
+			id: data.id!,
 		})
 	} else {
 		await creator.mutateAsync(data)
@@ -99,14 +98,14 @@ const { data: files } = useFiles()
 const selectedAudio = computed(() => files.value?.files.find(f => f.id === formValue.value.audioId))
 const showAudioModal = ref(false)
 
-const { data: profile } = storeToRefs(useProfile())
+const { data: profile } = useProfile()
 
 async function testAudio() {
 	if (!selectedAudio.value?.id || !profile.value) return
 
 	const query = new URLSearchParams({
 		channel_id: profile.value.selectedDashboardId,
-		file_id: selectedAudio.value.id
+		file_id: selectedAudio.value.id,
 	})
 
 	const req = await fetch(`${window.location.origin}/api-old/files/?${query}`)
@@ -121,7 +120,7 @@ async function testAudio() {
 const commandsManager = useCommandsApi()
 const { data: commands } = commandsManager.useQueryCommands()
 const commandsSelectOptions = computed(() => commands.value?.commands
-	.map((command) => ({ label: command.name, value: command.id }))
+	.map((command) => ({ label: command.name, value: command.id })),
 )
 
 const greetingsManager = useGreetingsApi()
@@ -139,7 +138,7 @@ const greetingsSelectOptions = computed(() => {
 const keywordsManager = useKeywordsApi()
 const { data: keywords } = keywordsManager.useQueryKeywords()
 const keywordsSelectOptions = computed(() => keywords.value?.keywords
-	.map(k => ({ label: k.text, value: k.id }))
+	.map(k => ({ label: k.text, value: k.id })),
 )
 </script>
 
diff --git a/frontend/dashboard/src/components/dashboard/chat.vue b/frontend/dashboard/src/components/dashboard/chat.vue
index b1b540cb9..f3451dc70 100644
--- a/frontend/dashboard/src/components/dashboard/chat.vue
+++ b/frontend/dashboard/src/components/dashboard/chat.vue
@@ -1,44 +1,42 @@
 <script lang="ts" setup>
-import { IconSun, IconMoon } from '@tabler/icons-vue';
-import { NButton } from 'naive-ui';
-import { computed } from 'vue';
+import { IconMoon, IconSun } from '@tabler/icons-vue'
+import { NButton } from 'naive-ui'
+import { computed } from 'vue'
 
-import Card from './card.vue';
+import Card from './card.vue'
 
+import { useProfile, useTwitchGetUsers } from '@/api/index.js'
+import { useTheme } from '@/composables/use-theme.js'
 
-import { useProfile, useTwitchGetUsers } from '@/api/index.js';
-import { useTheme } from '@/composables/use-theme.js';
-import { storeToRefs } from 'pinia';
+const { data: profile } = useProfile()
 
-const { data: profile } = storeToRefs(useProfile());
+const { theme: chatTheme, toggleTheme } = useTheme('twirTwitchChatTheme')
 
-const { theme: chatTheme, toggleTheme } = useTheme('twirTwitchChatTheme');
-
-const selectedTwitchId = computed(() => profile.value?.selectedDashboardId ?? '');
-const selectedDashboardTwitchUser = useTwitchGetUsers({ ids: selectedTwitchId });
+const selectedTwitchId = computed(() => profile.value?.selectedDashboardId ?? '')
+const selectedDashboardTwitchUser = useTwitchGetUsers({ ids: selectedTwitchId })
 
 const chatUrl = computed(() => {
-	if (!selectedDashboardTwitchUser.data.value?.users.length) return;
+	if (!selectedDashboardTwitchUser.data.value?.users.length) return
 
-	const user = selectedDashboardTwitchUser.data.value.users.at(0)!;
+	const user = selectedDashboardTwitchUser.data.value.users.at(0)!
 
-	let url = `https://www.twitch.tv/embed/${user.login}/chat?parent=${window.location.host}`;
+	let url = `https://www.twitch.tv/embed/${user.login}/chat?parent=${window.location.host}`
 
 	if (chatTheme.value === 'dark') {
-		url += '&darkpopout';
+		url += '&darkpopout'
 	}
 
-	return url;
-});
+	return url
+})
 </script>
 
 <template>
-	<card :content-style="{ 'margin-bottom': '10px', padding: '0px' }">
+	<Card :content-style="{ 'margin-bottom': '10px', 'padding': '0px' }">
 		<template #header-extra>
-			<n-button size="small" text @click="toggleTheme">
+			<NButton size="small" text @click="toggleTheme">
 				<IconSun v-if="chatTheme === 'dark'" color="orange" />
 				<IconMoon v-else />
-			</n-button>
+			</NButton>
 		</template>
 
 		<iframe
@@ -48,5 +46,5 @@ const chatUrl = computed(() => {
 			class="w-full h-full"
 		>
 		</iframe>
-	</card>
+	</Card>
 </template>
diff --git a/frontend/dashboard/src/components/dashboard/stream.vue b/frontend/dashboard/src/components/dashboard/stream.vue
index 193b7613f..e3a76878f 100644
--- a/frontend/dashboard/src/components/dashboard/stream.vue
+++ b/frontend/dashboard/src/components/dashboard/stream.vue
@@ -1,29 +1,27 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed } from 'vue'
 
-import Card from './card.vue';
+import Card from './card.vue'
 
-import { useProfile, useTwitchGetUsers } from '@/api/index.js';
-import { storeToRefs } from 'pinia';
+import { useProfile, useTwitchGetUsers } from '@/api/index.js'
 
-const { data: profile } = storeToRefs(useProfile());
+const { data: profile } = useProfile()
 
-const selectedTwitchId = computed(() => profile.value?.selectedDashboardId ?? '');
-const selectedDashboardTwitchUser = useTwitchGetUsers({ ids: selectedTwitchId });
+const selectedTwitchId = computed(() => profile.value?.selectedDashboardId ?? '')
+const selectedDashboardTwitchUser = useTwitchGetUsers({ ids: selectedTwitchId })
 
 const streamUrl = computed(() => {
-	if (!selectedDashboardTwitchUser.data.value?.users.length) return;
+	if (!selectedDashboardTwitchUser.data.value?.users.length) return
 
-	const user = selectedDashboardTwitchUser.data.value.users.at(0)!;
+	const user = selectedDashboardTwitchUser.data.value.users.at(0)!
+	const url = `https://player.twitch.tv/?channel=${user.login}&parent=${window.location.host}&autoplay=false`
 
-	const url = `https://player.twitch.tv/?channel=${user.login}&parent=${window.location.host}&autoplay=false`;
-
-	return url;
-});
+	return url
+})
 </script>
 
 <template>
-	<card>
+	<Card>
 		<iframe
 			v-if="streamUrl"
 			:src="streamUrl"
@@ -34,5 +32,5 @@ const streamUrl = computed(() => {
 			allowfullscreen="true"
 		>
 		</iframe>
-	</card>
+	</Card>
 </template>
diff --git a/frontend/dashboard/src/components/events/modal.vue b/frontend/dashboard/src/components/events/modal.vue
index af2909cc2..2491dab59 100644
--- a/frontend/dashboard/src/components/events/modal.vue
+++ b/frontend/dashboard/src/components/events/modal.vue
@@ -1,208 +1,205 @@
 <script setup lang="ts">
-import { dragAndDrop } from '@formkit/drag-and-drop/vue';
-import { IconTrash, IconGripVertical, IconPlus } from '@tabler/icons-vue';
-import { EventOperationFilterType } from '@twir/types/events';
-import { toRef } from '@vueuse/core';
+import { dragAndDrop } from '@formkit/drag-and-drop/vue'
+import { IconGripVertical, IconPlus, IconTrash } from '@tabler/icons-vue'
+import { EventOperationFilterType } from '@twir/types/events'
+import { toRef } from '@vueuse/core'
 import {
 	type FormInst,
 	type FormItemRule,
 	type FormRules,
-	NSpace,
-	NSelect,
+	NAlert,
+	NButton,
+	NDivider,
 	NForm,
 	NFormItem,
-	NInput,
-	NText,
 	NGrid,
 	NGridItem,
+	NInput,
 	NInputNumber,
-	NDivider,
+	NModal,
+	NSelect,
+	NSpace,
 	NSwitch,
-	NAlert,
-	NButton,
+	NText,
 	useThemeVars,
-	NModal,
-} from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { computed, onMounted, ref, watch, nextTick } from 'vue';
-import { useI18n } from 'vue-i18n';
+} from 'naive-ui'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import {
 	eventTypeSelectOptions,
-	operationTypeSelectOptions,
-	getOperation,
 	flatEvents,
-} from './helpers.js';
-import type { EditableEvent, EventOperation } from './types.js';
+	getOperation,
+	operationTypeSelectOptions,
+} from './helpers.js'
+
+import type { EditableEvent, EventOperation } from './types.js'
 
-import { useCommandsApi } from '@/api/commands/commands';
+import { useCommandsApi } from '@/api/commands/commands'
 import {
 	useAlertsManager,
 	useEventsManager,
 	useObsOverlayManager,
 	useProfile,
-} from '@/api/index.js';
-import { useKeywordsApi } from '@/api/keywords.js';
-import { useVariablesApi } from '@/api/variables.js';
-import AlertModal from '@/components/alerts/list.vue';
-import rewardsSelector from '@/components/rewardsSelector.vue';
-
-const themeVars = useThemeVars();
-const selectedTabBackground = computed(() => themeVars.value.cardColor);
+} from '@/api/index.js'
+import { useKeywordsApi } from '@/api/keywords.js'
+import { useVariablesApi } from '@/api/variables.js'
+import AlertModal from '@/components/alerts/list.vue'
+import rewardsSelector from '@/components/rewardsSelector.vue'
 
 const props = defineProps<{
 	event: EditableEvent | null
-}>();
+}>()
 const emits = defineEmits<{
 	saved: []
-}>();
+}>()
+const themeVars = useThemeVars()
+const selectedTabBackground = computed(() => themeVars.value.cardColor)
 
-const formRef = ref<FormInst | null>(null);
+const formRef = ref<FormInst | null>(null)
 const formValue = ref<EditableEvent>({
 	description: '',
 	enabled: true,
 	onlineOnly: false,
 	operations: [],
 	type: '',
-});
+})
 
-const selectedOperationsTab = ref(-1);
-const currentOperation = ref<EventOperation | null>(null);
+const selectedOperationsTab = ref(-1)
+const currentOperation = ref<EventOperation | null>(null)
 
 watch(selectedOperationsTab, (v) => {
-	currentOperation.value = formValue.value.operations[v];
-}, { immediate: true });
+	currentOperation.value = formValue.value.operations[v]
+}, { immediate: true })
 
 onMounted(() => {
 	if (props.event) {
-		formValue.value = props.event;
+		formValue.value = props.event
 
 		if (props.event.operations.length) {
-			selectedOperationsTab.value = 0;
+			selectedOperationsTab.value = 0
 		}
 	}
-});
+})
 
 watch(() => formValue.value.type, () => {
-	nextTick(formRef.value?.validate);
-});
+	nextTick(formRef.value?.validate)
+})
 
 const rules: FormRules = {
 	type: {
 		trigger: ['input', 'blur'],
 		validator: (_: FormItemRule, v: string) => {
-			if (!v) return new Error('Type required');
+			if (!v) return new Error('Type required')
 
-			return true;
+			return true
 		},
 	},
 	description: {
 		trigger: ['input', 'blur'],
 		validator: (_: FormItemRule, v: string) => {
-			if (!v) return new Error('Description required');
+			if (!v) return new Error('Description required')
 
-			return true;
+			return true
 		},
 	},
 	input: {
 		trigger: ['input', 'blur'],
 		validator: (_: FormItemRule, v: string) => {
-			if (!v) return new Error('Please type something');
-			if (v?.length > 100) return new Error('Too long input');
+			if (!v) return new Error('Please type something')
+			if (v?.length > 100) return new Error('Too long input')
 
-			return true;
+			return true
 		},
 	},
 	timeoutMessage: {
 		trigger: ['input', 'blur'],
 		validator: (_: FormItemRule, v: string) => {
-			if (v?.length > 100) return new Error('Too long message');
+			if (v?.length > 100) return new Error('Too long message')
 
-			return true;
+			return true
 		},
 	},
 	commandId: {
 		trigger: ['input', 'blur'],
 		validator: (_: FormItemRule, v: string) => {
-			if (formValue.value.type !== 'COMMAND_USED') return true;
-			if (!v) return new Error('Please select command');
+			if (formValue.value.type !== 'COMMAND_USED') return true
+			if (!v) return new Error('Please select command')
 
-			return true;
+			return true
 		},
 	},
 	rewardId: {
 		trigger: ['input', 'blur'],
 		validator: (_: FormItemRule, v: string) => {
-			if (formValue.value.type !== 'REDEMPTION_CREATED') return true;
-			if (!v) return new Error('Please select reward');
+			if (formValue.value.type !== 'REDEMPTION_CREATED') return true
+			if (!v) return new Error('Please select reward')
 
-			return true;
+			return true
 		},
 	},
 	keywordId: {
 		trigger: ['input', 'blur', 'focus'],
 		validator: (_: FormItemRule, v: string) => {
-			if (formValue.value.type !== 'KEYWORD_MATCHED') return true;
-			if (!v) return new Error('Please select keyword');
+			if (formValue.value.type !== 'KEYWORD_MATCHED') return true
+			if (!v) return new Error('Please select keyword')
 
-			return true;
+			return true
 		},
 	},
-};
+}
 
-const obsManager = useObsOverlayManager();
-const obsSettings = obsManager.getSettings();
+const obsManager = useObsOverlayManager()
+const obsSettings = obsManager.getSettings()
 
 const obsScenes = computed(() => {
 	return obsSettings.data.value?.scenes.map(s => ({
 		value: s,
 		label: s,
-	})) ?? [];
-});
+	})) ?? []
+})
 const obsSources = computed(() => {
 	return obsSettings.data.value?.sources.map(s => ({
 		value: s,
 		label: s,
-	})) ?? [];
-});
+	})) ?? []
+})
 const obsAudioSources = computed(() => {
 	return obsSettings.data.value?.audioSources.map(s => ({
 		value: s,
 		label: s,
-	})) ?? [];
-});
+	})) ?? []
+})
 
-const variablesManager = useVariablesApi();
-const { customVariables: variables } = storeToRefs(variablesManager);
+const { customVariables: variables } = useVariablesApi()
 const variablesSelectOptions = computed(() => {
 	return variables.value.map((v) => ({
 		label: v.name,
 		value: v.id,
-	})) ?? [];
-});
+	})) ?? []
+})
 
-const commandsManager = useCommandsApi();
-const { data: commandsData, fetching: isCommandsLoading } = commandsManager.useQueryCommands();
+const commandsManager = useCommandsApi()
+const { data: commandsData, fetching: isCommandsLoading } = commandsManager.useQueryCommands()
 const commandsSelectOptions = computed(() => {
 	return commandsData.value?.commands.map(c => ({
 		label: c.name,
 		value: c.id,
-	})) ?? [];
-});
+	})) ?? []
+})
 
-
-const keywordsManager = useKeywordsApi();
-const { data: keywordsData, fetching: isKeywordsLoading } = keywordsManager.useQueryKeywords();
+const keywordsManager = useKeywordsApi()
+const { data: keywordsData, fetching: isKeywordsLoading } = keywordsManager.useQueryKeywords()
 const keywordsSelectOptions = computed(() => {
 	return keywordsData.value?.keywords.map(k => ({
 		label: k.text,
 		value: k.id,
-	}));
-});
+	}))
+})
 
-const { t } = useI18n();
+const { t } = useI18n()
 
-const addOperation = () => {
+function addOperation() {
 	const newLength = formValue.value.operations.push({
 		delay: 0,
 		enabled: true,
@@ -214,62 +211,62 @@ const addOperation = () => {
 		input: '',
 		target: '',
 		timeoutMessage: '',
-	});
-	selectedOperationsTab.value = newLength - 1;
-};
+	})
+	selectedOperationsTab.value = newLength - 1
+}
 
-const removeOperation = (index: number) => {
+function removeOperation(index: number) {
 	if (index === selectedOperationsTab.value) {
-		selectedOperationsTab.value = 0;
+		selectedOperationsTab.value = 0
 	}
-	formValue.value.operations = formValue.value.operations.filter((_, i) => i != index);
+	formValue.value.operations = formValue.value.operations.filter((_, i) => i !== index)
 
 	if (!formValue.value.operations.length) {
-		currentOperation.value = null;
+		currentOperation.value = null
 	}
-};
+}
 
-const eventsManager = useEventsManager();
-const eventsUpdater = eventsManager.update;
-const eventsCreator = eventsManager.create;
+const eventsManager = useEventsManager()
+const eventsUpdater = eventsManager.update
+const eventsCreator = eventsManager.create
 
-const { data: profile } = storeToRefs(useProfile());
+const { data: profile } = useProfile()
 
 async function save() {
-	if (!formRef.value || !profile.value) return;
-	await formRef.value.validate();
+	if (!formRef.value || !profile.value) return
+	await formRef.value.validate()
 
 	const event = {
 		...formValue.value,
 		channelId: profile.value.selectedDashboardId,
 		id: formValue.value.id ?? '',
-	};
+	}
 
 	if (!formValue.value.id) {
 		await eventsCreator.mutateAsync({
 			event,
-		});
+		})
 	} else {
 		await eventsUpdater.mutateAsync({
 			id: formValue.value.id,
 			event,
-		});
+		})
 	}
 
-	emits('saved');
+	emits('saved')
 }
 
-const manager = useAlertsManager();
-const { data: alerts } = manager.getAll({});
+const manager = useAlertsManager()
+const { data: alerts } = manager.getAll({})
 
-const showAlertModal = ref(false);
+const showAlertModal = ref(false)
 
 function getOperationLabel(type: string): string {
 	switch (type) {
 		case 'SEND_MESSAGE':
-			return t('events.operations.inputs.message');
+			return t('events.operations.inputs.message')
 		case 'UNVIP_RANDOM_IF_NO_SLOTS':
-			return t('events.operations.inputs.vipSlots');
+			return t('events.operations.inputs.vipSlots')
 		case 'BAN':
 		case 'UNBAN':
 		case 'TIMEOUT':
@@ -281,130 +278,133 @@ function getOperationLabel(type: string): string {
 		case 'REMOVE_ALLOW_COMMAND_TO_USER':
 		case 'DENY_COMMAND_TO_USER':
 		case 'REMOVE_DENY_COMMAND_TO_USER':
-			return t('events.operations.inputs.username');
+			return t('events.operations.inputs.username')
 		case 'CHANGE_VARIABLE':
-			return t('events.operations.inputs.variableValue');
+			return t('events.operations.inputs.variableValue')
 		case 'INCREMENT_VARIABLE':
 		case 'DECREMENT_VARIABLE':
-			return t('events.operations.inputs.variableIncrementDecrement');
+			return t('events.operations.inputs.variableIncrementDecrement')
 		default:
-			return t('events.operations.inputs.default');
+			return t('events.operations.inputs.default')
 	}
 }
 
 const eventsOperationsFiltersTypes = Object.values(EventOperationFilterType).map((item) => ({
 	label: item.toLowerCase().split('_').join(' '),
 	value: item,
-}));
+}))
 
-const operations = toRef(formValue.value, 'operations');
-watch(operations, (v) => console.log(v));
+const operations = toRef(formValue.value, 'operations')
+watch(operations, (v) => console.log(v))
 
-const dragParentRef = ref<HTMLElement>();
+const dragParentRef = ref<HTMLElement>()
 dragAndDrop({
 	parent: dragParentRef,
 	values: operations,
 	dragHandle: '.drag-handle',
-});
+})
+
+function variableText(variable: string) {
+	return `{${variable}}`
+}
 </script>
 
 <template>
-	<n-form ref="formRef" :model="formValue" :rules="rules">
-		<n-space vertical>
-			<n-space justify="space-between" item-style="width: 49%">
-				<n-space vertical item-style="width: 100%">
-					<n-form-item :label="t('events.operations.name')" path="type" show-require-mark>
-						<n-select v-model:value="formValue.type" filterable :options="eventTypeSelectOptions" />
-					</n-form-item>
-
-					<n-form-item :label="t('events.description')" path="description" show-require-mark>
-						<n-input
+	<NForm ref="formRef" :model="formValue" :rules="rules">
+		<NSpace vertical>
+			<NSpace justify="space-between" item-style="width: 49%">
+				<NSpace vertical item-style="width: 100%">
+					<NFormItem :label="t('events.operations.name')" path="type" show-require-mark>
+						<NSelect v-model:value="formValue.type" filterable :options="eventTypeSelectOptions" />
+					</NFormItem>
+
+					<NFormItem :label="t('events.description')" path="description" show-require-mark>
+						<NInput
 							v-model:value="formValue.description"
 							type="textarea"
 							:autosize="{
 								minRows: 1,
-								maxRows: 5
+								maxRows: 5,
 							}"
 							:maxlength="500"
 						/>
-					</n-form-item>
+					</NFormItem>
 
-					<n-form-item
+					<NFormItem
 						v-if="formValue.type === 'COMMAND_USED'"
 						:label="t('events.targetCommand')"
 						required
 						path="commandId"
 					>
-						<n-select
+						<NSelect
 							v-model:value="formValue.commandId"
 							:options="commandsSelectOptions"
 							:placeholder="t('events.targetCommand')"
 							:loading="isCommandsLoading"
 							filterable
 						/>
-					</n-form-item>
+					</NFormItem>
 
-					<n-form-item
+					<NFormItem
 						v-if="formValue.type === 'REDEMPTION_CREATED'"
 						:label="t('events.targetTwitchReward')"
 						required
 						path="rewardId"
 					>
 						<rewards-selector v-model="formValue.rewardId" />
-					</n-form-item>
+					</NFormItem>
 
-					<n-form-item
+					<NFormItem
 						v-if="formValue.type === 'KEYWORD_MATCHED'"
 						:label="t('events.targetKeyword')"
 						required
 						path="keywordId"
 					>
-						<n-select
+						<NSelect
 							v-model:value="formValue.keywordId"
 							:options="keywordsSelectOptions"
 							:placeholder="t('events.targetKeyword')"
 							:loading="isKeywordsLoading"
 							filterable
 						/>
-					</n-form-item>
+					</NFormItem>
 
-					<n-form-item :label="t('events.onlineOnly')">
-						<n-switch v-model:value="formValue.onlineOnly" />
-					</n-form-item>
-				</n-space>
+					<NFormItem :label="t('events.onlineOnly')">
+						<NSwitch v-model:value="formValue.onlineOnly" />
+					</NFormItem>
+				</NSpace>
 
-				<n-space vertical>
-					<n-text
+				<NSpace vertical>
+					<NText
 						v-for="(variable, variableIndex) of flatEvents[formValue.type]?.variables"
 						:key="variableIndex"
 					>
-						{{ '{' + variable + '}' }} - {{ t(`events.variables.${variable}`) }}
-					</n-text>
-				</n-space>
-			</n-space>
+						{{ variableText(variable) }} - {{ t(`events.variables.${variable}`) }}
+					</NText>
+				</NSpace>
+			</NSpace>
 
-			<n-divider title-placement="center">
+			<NDivider title-placement="center">
 				{{ t('events.operations.divider') }}
-			</n-divider>
-		</n-space>
-
+			</NDivider>
+		</NSpace>
 
-		<n-space :wrap="false">
-			<n-space vertical class="h-full" :x-gap="5">
+		<NSpace :wrap="false">
+			<NSpace vertical class="h-full" :x-gap="5">
 				<div ref="dragParentRef">
 					<div
 						v-for="(operation, operationIndex) of formValue.operations"
-						:key="operation.type+operationIndex"
+						:key="operation.type + operationIndex"
 						style="display:flex; gap: 5px; margin-top: 5px; width: 100%; padding: 5px; border-radius: 11px;"
 						:style="{
 							'background-color': selectedOperationsTab === operationIndex ? selectedTabBackground : undefined,
 						}"
 					>
-						<n-button text class="drag-handle">
+						<NButton text class="drag-handle">
 							<IconGripVertical class="w-4" />
-						</n-button>
+						</NButton>
 
-						<n-button
+						<NButton
 							secondary
 							size="small"
 							style="flex-grow: 1;"
@@ -412,18 +412,18 @@ dragAndDrop({
 							@click="() => selectedOperationsTab = operationIndex"
 						>
 							{{ getOperation(operation.type)?.name.slice(0, 15) ?? '' }}
-						</n-button>
+						</NButton>
 
-						<n-button text>
+						<NButton text>
 							<IconTrash
 								class="w-[18px] flex"
 								@click="removeOperation(operationIndex)"
 							/>
-						</n-button>
+						</NButton>
 					</div>
 				</div>
 
-				<n-button
+				<NButton
 					block
 					size="small"
 					secondary
@@ -431,174 +431,174 @@ dragAndDrop({
 					@click="addOperation"
 				>
 					<IconPlus />
-				</n-button>
-			</n-space>
+				</NButton>
+			</NSpace>
 
-			<n-divider vertical class="h-full" />
+			<NDivider vertical class="h-full" />
 
 			<div v-if="currentOperation">
-				<n-space vertical class="gap-0">
-					<n-grid cols="3 s:1 m:3" :x-gap="5" :y-gap="5" responsive="screen">
-						<n-grid-item :span="2">
-							<n-form-item :label="t('events.operations.name')" required>
-								<n-select
+				<NSpace vertical class="gap-0">
+					<NGrid cols="3 s:1 m:3" :x-gap="5" :y-gap="5" responsive="screen">
+						<NGridItem :span="2">
+							<NFormItem :label="t('events.operations.name')" required>
+								<NSelect
 									v-model:value="currentOperation.type" filterable
 									:options="operationTypeSelectOptions"
 								/>
-							</n-form-item>
-						</n-grid-item>
-						<n-grid-item :span="1">
-							<n-form-item :label="t('sharedTexts.status')">
-								<n-switch v-model:value="currentOperation.enabled" />
-							</n-form-item>
-						</n-grid-item>
-						<n-grid-item :span="1">
-							<n-form-item :label="t('events.delay')">
-								<n-input-number v-model:value="currentOperation.delay" :min="0" :max="1800" />
-							</n-form-item>
-						</n-grid-item>
-						<n-grid-item :span="1">
-							<n-form-item :label="t('events.repeat')">
-								<n-input-number v-model:value="currentOperation.repeat" :min="0" :max="10" />
-							</n-form-item>
-						</n-grid-item>
-					</n-grid>
-
-					<n-divider title-placement="left" class="mt-0">
+							</NFormItem>
+						</NGridItem>
+						<NGridItem :span="1">
+							<NFormItem :label="t('sharedTexts.status')">
+								<NSwitch v-model:value="currentOperation.enabled" />
+							</NFormItem>
+						</NGridItem>
+						<NGridItem :span="1">
+							<NFormItem :label="t('events.delay')">
+								<NInputNumber v-model:value="currentOperation.delay" :min="0" :max="1800" />
+							</NFormItem>
+						</NGridItem>
+						<NGridItem :span="1">
+							<NFormItem :label="t('events.repeat')">
+								<NInputNumber v-model:value="currentOperation.repeat" :min="0" :max="10" />
+							</NFormItem>
+						</NGridItem>
+					</NGrid>
+
+					<NDivider title-placement="left" class="mt-0">
 						{{ t('events.operations.values') }}
-					</n-divider>
+					</NDivider>
 
-					<n-form-item
+					<NFormItem
 						v-if="getOperation(currentOperation.type)?.haveInput"
 						:label="getOperationLabel(currentOperation.type)"
 					>
-						<n-input v-model:value="currentOperation.input" :maxlength="500" />
-					</n-form-item>
+						<NInput v-model:value="currentOperation.input" :maxlength="500" />
+					</NFormItem>
 
-					<n-form-item v-if="currentOperation.type === 'SEND_MESSAGE'" label="Use announce">
-						<n-switch v-model:value="currentOperation.useAnnounce" />
-					</n-form-item>
+					<NFormItem v-if="currentOperation.type === 'SEND_MESSAGE'" label="Use announce">
+						<NSwitch v-model:value="currentOperation.useAnnounce" />
+					</NFormItem>
 
-					<n-grid cols="4 s:1 m:4" :x-gap="5" :y-gap="5" responsive="screen">
-						<n-grid-item :span="3">
-							<n-form-item
+					<NGrid cols="4 s:1 m:4" :x-gap="5" :y-gap="5" responsive="screen">
+						<NGridItem :span="3">
+							<NFormItem
 								v-if="['TIMEOUT', 'TIMEOUT_RANDOM', 'BAN', 'BAN_RANDOM'].some(v => currentOperation!.type === v)"
 								:label="t('events.operations.banMessage')"
 								:path="`operations[${selectedOperationsTab}].timeoutMessage`"
 								:rule="rules.timeoutMessage"
 							>
-								<n-input v-model:value="currentOperation.timeoutMessage" :maxlength="500" />
-							</n-form-item>
-						</n-grid-item>
+								<NInput v-model:value="currentOperation.timeoutMessage" :maxlength="500" />
+							</NFormItem>
+						</NGridItem>
 
-						<n-grid-item :span="1">
-							<n-form-item
+						<NGridItem :span="1">
+							<NFormItem
 								v-if="['TIMEOUT', 'TIMEOUT_RANDOM'].some(v => currentOperation!.type === v)"
 								:label="t('events.operations.banTime')"
 							>
-								<n-input-number v-model:value="currentOperation.timeoutTime" />
-							</n-form-item>
-						</n-grid-item>
+								<NInputNumber v-model:value="currentOperation.timeoutTime" />
+							</NFormItem>
+						</NGridItem>
 
-						<n-grid-item
+						<NGridItem
 							v-if="currentOperation.type.startsWith('OBS')
 								&& (!obsSettings.data.value?.isConnected || !obsSettings.data.value?.serverPassword)
 							"
 							:span="4"
 						>
-							<n-alert :title="t('events.operations.obs.warningTitle')" type="error">
+							<NAlert :title="t('events.operations.obs.warningTitle')" type="error">
 								{{ t('events.operations.obs.warningText') }}
-							</n-alert>
-						</n-grid-item>
+							</NAlert>
+						</NGridItem>
 
-						<n-grid-item v-if="currentOperation.type === 'OBS_SET_SCENE'" :span="2">
-							<n-form-item :label="t('events.operations.obs.scene')">
-								<n-select
+						<NGridItem v-if="currentOperation.type === 'OBS_SET_SCENE'" :span="2">
+							<NFormItem :label="t('events.operations.obs.scene')">
+								<NSelect
 									v-model:value="currentOperation.target"
 									:options="obsScenes"
 									:placeholder="t('events.operations.obs.scene')"
 									:disabled="!obsSettings.data.value?.isConnected"
 								/>
-							</n-form-item>
-						</n-grid-item>
+							</NFormItem>
+						</NGridItem>
 
-						<n-grid-item v-if="currentOperation.type === 'OBS_TOGGLE_SOURCE'" :span="2">
-							<n-form-item :label="t('events.operations.obs.source')">
-								<n-select
+						<NGridItem v-if="currentOperation.type === 'OBS_TOGGLE_SOURCE'" :span="2">
+							<NFormItem :label="t('events.operations.obs.source')">
+								<NSelect
 									v-model:value="currentOperation.target"
 									:options="obsSources"
 									:placeholder="t('events.operations.obs.source')"
 									:disabled="!obsSettings.data.value?.isConnected"
 								/>
-							</n-form-item>
-						</n-grid-item>
+							</NFormItem>
+						</NGridItem>
 
-						<n-grid-item
+						<NGridItem
 							v-if="[
 								'OBS_TOGGLE_AUDIO',
 								'OBS_AUDIO_SET_VOLUME',
 								'OBS_AUDIO_DECREASE_VOLUME',
 								'OBS_AUDIO_INCREASE_VOLUME',
 								'OBS_ENABLE_AUDIO',
-								'OBS_DISABLE_AUDIO'
+								'OBS_DISABLE_AUDIO',
 							].some(v => v === currentOperation!.type)"
 							:span="2"
 						>
-							<n-form-item :label="t('events.operations.obs.audioSource')">
-								<n-select
+							<NFormItem :label="t('events.operations.obs.audioSource')">
+								<NSelect
 									v-model:value="currentOperation.target"
 									:options="obsAudioSources"
 									:placeholder="t('events.operations.obs.audioSource')"
 									:disabled="!obsSettings.data.value?.isConnected"
 								/>
-							</n-form-item>
-						</n-grid-item>
+							</NFormItem>
+						</NGridItem>
 
-						<n-grid-item
+						<NGridItem
 							v-if="currentOperation.type === 'TRIGGER_ALERT'"
 							:span="2"
 						>
-							<n-form-item :label="t('events.operations.triggerAlert')">
+							<NFormItem :label="t('events.operations.triggerAlert')">
 								<div class="flex gap-2.5 w-[90%]">
-									<n-button block type="info" @click="showAlertModal = true">
+									<NButton block type="info" @click="showAlertModal = true">
 										{{
 											alerts?.alerts.find(a => a.id === currentOperation!.target)?.name ?? t('sharedButtons.select')
 										}}
-									</n-button>
-									<n-button
+									</NButton>
+									<NButton
 										:disabled="!currentOperation!.target"
 										text
 										type="error"
 										@click="currentOperation!.target = undefined"
 									>
 										<IconTrash />
-									</n-button>
+									</NButton>
 								</div>
-							</n-form-item>
-						</n-grid-item>
+							</NFormItem>
+						</NGridItem>
 
-						<n-grid-item
+						<NGridItem
 							v-if="currentOperation.type.endsWith('VARIABLE')"
 							:span="2"
 						>
-							<n-form-item :label="t('events.targetVariable')">
-								<n-select
+							<NFormItem :label="t('events.targetVariable')">
+								<NSelect
 									v-model:value="currentOperation.target"
 									:options="variablesSelectOptions"
 									:placeholder="t('events.targetVariable')"
 								/>
-							</n-form-item>
-						</n-grid-item>
-					</n-grid>
+							</NFormItem>
+						</NGridItem>
+					</NGrid>
 
-					<n-divider title-placement="left" class="mt-0">
+					<NDivider title-placement="left" class="mt-0">
 						{{ t('events.operations.filters.label') }}
-					</n-divider>
+					</NDivider>
 
 					<div class="flex flex-col gap-2">
-						<n-text :depth="3">
+						<NText :depth="3">
 							{{ t('events.operations.filters.description') }}
-						</n-text>
+						</NText>
 
 						<div
 							v-if="!currentOperation.filters.length"
@@ -612,56 +612,56 @@ dragAndDrop({
 							:key="index"
 							class="flex flex-col gap-0.5 border border-zinc-600 p-2 rounded"
 						>
-							<n-input
+							<NInput
 								v-model:value="currentOperation.filters[index].left"
 								:placeholder="t('events.operations.filters.placeholderLeft')"
 								:maxlength="50"
 							/>
-							<n-select
+							<NSelect
 								v-model:value="currentOperation.filters[index].type"
 								:options="eventsOperationsFiltersTypes"
 							/>
-							<n-input
+							<NInput
 								v-model:value="currentOperation.filters[index].right"
 								:placeholder="t('events.operations.filters.placeholderRight')"
 								:maxlength="50"
 							/>
 							<div class="flex justify-end mt-2">
-								<n-button
+								<NButton
 									type="error"
 									secondary
-									@click="currentOperation.filters.splice(index, 1)"
+									@click="currentOperation?.filters.splice(index, 1)"
 								>
 									<IconTrash />
 									{{ t('sharedButtons.delete') }}
-								</n-button>
+								</NButton>
 							</div>
 						</div>
 					</div>
-					<n-button
+					<NButton
 						secondary
 						type="info"
 						block
 						style="margin-top: 6px;"
 						:disabled="currentOperation.filters.length >= 5"
-						@click="currentOperation.filters.push({
+						@click="currentOperation?.filters.push({
 							left: '',
 							right: '',
 							type: EventOperationFilterType.EQUALS,
 						})"
 					>
 						{{ t('sharedButtons.create') }}
-					</n-button>
-				</n-space>
+					</NButton>
+				</NSpace>
 			</div>
-		</n-space>
+		</NSpace>
 
-		<n-button block secondary type="success" style="margin-top: 12px;" @click="save">
+		<NButton block secondary type="success" style="margin-top: 12px;" @click="save">
 			{{ t('sharedButtons.save') }}
-		</n-button>
-	</n-form>
+		</NButton>
+	</NForm>
 
-	<n-modal
+	<NModal
 		v-model:show="showAlertModal"
 		:mask-closable="false"
 		:segmented="true"
@@ -674,7 +674,7 @@ dragAndDrop({
 		}"
 		:on-close="() => showAlertModal = false"
 	>
-		<alert-modal
+		<AlertModal
 			:with-select="true"
 			@select="(id) => {
 				if (!currentOperation) return;
@@ -687,5 +687,5 @@ dragAndDrop({
 				}
 			}"
 		/>
-	</n-modal>
+	</NModal>
 </template>
diff --git a/frontend/dashboard/src/components/integrations/discord.vue b/frontend/dashboard/src/components/integrations/discord.vue
index 62d311943..0088e8f92 100644
--- a/frontend/dashboard/src/components/integrations/discord.vue
+++ b/frontend/dashboard/src/components/integrations/discord.vue
@@ -1,134 +1,134 @@
 <script setup lang='ts'>
-import '@discord-message-components/vue/dist/style.css';
+import '@discord-message-components/vue/dist/style.css'
 
 import {
-	DiscordMessages,
-	DiscordMessage,
 	DiscordEmbed,
-	DiscordEmbedFields,
 	DiscordEmbedField,
+	DiscordEmbedFields,
 	DiscordMention,
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore
-} from '@discord-message-components/vue';
-import { useQueries } from '@tanstack/vue-query';
+	DiscordMessage,
+	DiscordMessages,
+	// eslint-disable-next-line ts/ban-ts-comment
+	// @ts-expect-error
+} from '@discord-message-components/vue'
+import { useQueries } from '@tanstack/vue-query'
 import {
 	ChannelType,
 	type GetDataResponse,
-} from '@twir/api/messages/integrations_discord/integrations_discord';
+} from '@twir/api/messages/integrations_discord/integrations_discord'
 import {
-	NTabs,
-	NTabPane,
-	NButton,
+	NAlert,
 	NAvatar,
+	NButton,
 	NDivider,
+	NMention,
+	NPopconfirm,
 	NSelect,
+	NSpin,
 	NSwitch,
+	NTabPane,
+	NTabs,
 	useMessage,
-	NMention,
-	NPopconfirm,
-	NAlert,
 	useThemeVars,
-	NSpin,
-} from 'naive-ui';
-import type { SelectBaseOption, SelectOption } from 'naive-ui/es/select/src/interface';
-import { type VNode, computed, h, ref, toRaw, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+} from 'naive-ui'
+import { type VNode, computed, h, ref, toRaw, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import WithSettings from './variants/withSettings.vue'
+import TwitchMultipleUsersSelector from '../twitchUsers/multiple.vue'
 
-import WithSettings from './variants/withSettings.vue';
-import TwitchMultipleUsersSelector from '../twitchUsers/multiple.vue';
+import type { SelectBaseOption, SelectOption } from 'naive-ui/es/select/src/interface'
 
-import { useDiscordIntegration, getGuildChannelsFn, useProfile } from '@/api/index.js';
-import StreamStarting from '@/assets/images/streamStarting.jpeg?url';
-import IconDiscord from '@/assets/integrations/discord.svg?use';
-import { storeToRefs } from 'pinia';
+import { getGuildChannelsFn, useDiscordIntegration, useProfile } from '@/api/index.js'
+import StreamStarting from '@/assets/images/streamStarting.jpeg?url'
+import IconDiscord from '@/assets/integrations/discord.svg?use'
 
-const themeVars = useThemeVars();
+const themeVars = useThemeVars()
 
-const manager = useDiscordIntegration();
-const { data: authLink } = manager.getConnectLink();
+const manager = useDiscordIntegration()
+const { data: authLink } = manager.getConnectLink()
 const {
 	data: discordIntegrationData,
 	isLoading: isDataLoading,
-} = manager.useData();
-const guildDisconnect = manager.disconnectGuild();
-const updateSettings = manager.updateData();
+} = manager.useData()
+const guildDisconnect = manager.disconnectGuild()
+const updateSettings = manager.updateData()
 
 const formValue = ref<GetDataResponse>({
 	guilds: [],
-});
+})
 
-const message = useMessage();
-const { t } = useI18n();
+const message = useMessage()
+const { t } = useI18n()
 
 async function saveSettings() {
-	await updateSettings.mutateAsync(formValue.value);
-	message.success(t('sharedTexts.saved'));
+	await updateSettings.mutateAsync(formValue.value)
+	message.success(t('sharedTexts.saved'))
 }
 
 function connectGuild() {
-	if (!authLink.value?.link) return;
+	if (!authLink.value?.link) return
 
-	window.open(authLink.value.link, 'Twir connect discord', 'width=800,height=600');
+	window.open(authLink.value.link, 'Twir connect discord', 'width=800,height=600')
 
 	// window.location.replace(authLink.value.link);
 }
 
 const isConnectDisabled = computed(() => {
-	return (discordIntegrationData?.value?.guilds?.length || 0) >= 2;
-});
+	return (discordIntegrationData?.value?.guilds?.length || 0) >= 2
+})
 
-const currentTab = ref<string>();
+const currentTab = ref<string>()
 watch(discordIntegrationData, (v) => {
-	if (!v) return;
+	if (!v) return
 
-	if (!currentTab.value) currentTab.value = v.guilds?.at(0)?.name;
+	if (!currentTab.value) currentTab.value = v.guilds?.at(0)?.name
 	if (!v.guilds.some(g => g.name === currentTab.value)) {
-		currentTab.value = v.guilds?.at(0)?.name;
+		currentTab.value = v.guilds?.at(0)?.name
 	}
 
-	formValue.value = toRaw(v);
-}, { immediate: true });
+	formValue.value = toRaw(v)
+}, { immediate: true })
 
 async function disconnectGuildById(guildId: string) {
-	const guild = discordIntegrationData.value?.guilds?.find(g => g.id === guildId);
-	if (!guild) return;
+	const guild = discordIntegrationData.value?.guilds?.find(g => g.id === guildId)
+	if (!guild) return
 
-	await guildDisconnect.mutateAsync(guildId);
-	message.success('Disconnected');
+	await guildDisconnect.mutateAsync(guildId)
+	message.success('Disconnected')
 }
 
 const guildsChannelsQueries = computed(() => {
 	return discordIntegrationData.value?.guilds?.map((guild: any) => ({
 		queryKey: ['discord', 'guild', guild.id, 'channels'],
 		queryFn: () => getGuildChannelsFn(guild.id),
-	})) ?? [];
-});
+	})) ?? []
+})
 
 const guildsChannelsResults = useQueries({
 	queries: guildsChannelsQueries,
-});
+})
 
 const liveChannelSelectorOptions = computed(() => {
-	const result: Array<Array<SelectBaseOption>> = [];
+	const result: Array<Array<SelectBaseOption>> = []
 
 	for (let index = 0; index < guildsChannelsResults.length; index++) {
-		const channels = guildsChannelsResults.at(index)!;
+		const channels = guildsChannelsResults.at(index)!
 
-		const channelsData = channels.data?.channels.filter(c => c.type === ChannelType.TEXT) ?? [];
+		const channelsData = channels.data?.channels.filter(c => c.type === ChannelType.TEXT) ?? []
 
 		result.push(channelsData.map(c => ({
 			label: `#${c.name}`,
 			value: c.id,
 			disabled: !c.canSendMessages,
-		})));
+		})))
 	}
 
-	return result;
-});
+	return result
+})
 
-const liveChannelSelectorRenderOption = ({ node, option }: { node: VNode; option: SelectOption }): VNode => {
-	if (!option.disabled) return node;
+function liveChannelSelectorRenderOption({ node, option }: { node: VNode, option: SelectOption }): VNode {
+	if (!option.disabled) return node
 
 	return h(
 		'div',
@@ -139,35 +139,35 @@ const liveChannelSelectorRenderOption = ({ node, option }: { node: VNode; option
 				t('integrations.discord.cannotSendMessage'),
 			],
 		},
-	);
-};
+	)
+}
 
 function getRolesMentionsOptions(guildId: string) {
-	const guild = discordIntegrationData.value?.guilds?.find((g) => g.id === guildId);
-	if (!guild) return [];
+	const guild = discordIntegrationData.value?.guilds?.find((g) => g.id === guildId)
+	if (!guild) return []
 
 	return guild.roles.map((r) => ({
 		label: r.name,
 		value: r.name.replace('@', ''),
-	})) ?? [];
+	})) ?? []
 }
 
 function getGuildRoleColorByName(guildId: string, roleName: string) {
-	const guild = discordIntegrationData.value?.guilds.find(g => g.id === guildId);
-	if (!guild) return;
-	const role = guild.roles.find(r => r.name === roleName.replace('@', ''));
-	if (!role || role.color === '0') return null;
+	const guild = discordIntegrationData.value?.guilds.find(g => g.id === guildId)
+	if (!guild) return
+	const role = guild.roles.find(r => r.name === roleName.replace('@', ''))
+	if (!role || role.color === '0') return null
 
-	const hexColor = Number(role.color).toString(16);
+	const hexColor = Number(role.color).toString(16)
 
-	return `#${hexColor.padStart(6, '0')}`;
+	return `#${hexColor.padStart(6, '0')}`
 }
 
-const { data: currentUser } = storeToRefs(useProfile());
+const { data: currentUser } = useProfile()
 </script>
 
 <template>
-	<with-settings
+	<WithSettings
 		title="Discord"
 		:save="saveSettings"
 		:isLoading="isDataLoading"
@@ -179,18 +179,18 @@ const { data: currentUser } = storeToRefs(useProfile());
 			{{ t('integrations.discord.description') }}
 		</template>
 		<template #settings>
-			<n-tabs
+			<NTabs
 				v-model:value="currentTab"
 				closable
 				tab-style="min-width: 80px;"
 			>
-				<n-tab-pane
+				<NTabPane
 					v-for="(guild, guildIndex) in formValue.guilds" :key="guild.id"
 					:name="guild.name"
 				>
 					<template #tab>
 						<div class="flex gap-1 items-center justify-center">
-							<n-avatar
+							<NAvatar
 								round
 								:src="`https://cdn.discordapp.com/${guild.id}/${guild.icon}.png`"
 								class="flex items-center justify-center w-5 h-5"
@@ -208,41 +208,41 @@ const { data: currentUser } = storeToRefs(useProfile());
 								<span class="text-base">
 									{{ t('integrations.discord.alerts.label') }}
 								</span>
-								<n-divider class="m-0 mb-1" />
+								<NDivider class="m-0 mb-1" />
 
 								<div class="switch">
-									<n-switch v-model:value="guild.liveNotificationEnabled" />
+									<NSwitch v-model:value="guild.liveNotificationEnabled" />
 									<span>{{ t('sharedTexts.enabled') }}</span>
 								</div>
 
 								<div class="switch">
-									<n-switch v-model:value="guild.liveNotificationShowTitle" />
+									<NSwitch v-model:value="guild.liveNotificationShowTitle" />
 									<span>{{ t('integrations.discord.alerts.showTitle') }}</span>
 								</div>
 
 								<div class="switch">
-									<n-switch v-model:value="guild.liveNotificationShowCategory" />
+									<NSwitch v-model:value="guild.liveNotificationShowCategory" />
 									<span>{{ t('integrations.discord.alerts.showCategory') }}</span>
 								</div>
 
 								<div class="switch">
-									<n-switch v-model:value="guild.liveNotificationShowPreview" />
+									<NSwitch v-model:value="guild.liveNotificationShowPreview" />
 									<span>{{ t('integrations.discord.alerts.showPreview') }}</span>
 								</div>
 
 								<div class="switch">
-									<n-switch v-model:value="guild.liveNotificationShowProfileImage" />
+									<NSwitch v-model:value="guild.liveNotificationShowProfileImage" />
 									<span>{{ t('integrations.discord.alerts.showProfileImage') }}</span>
 								</div>
 
 								<div class="switch">
-									<n-switch v-model:value="guild.liveNotificationShowViewers" />
+									<NSwitch v-model:value="guild.liveNotificationShowViewers" />
 									<span>{{ t('integrations.discord.alerts.showViewers') }}</span>
 								</div>
 
 								<div class="form-item">
 									<span>{{ t('integrations.discord.alerts.channelsSelect') }}</span>
-									<n-select
+									<NSelect
 										v-model:value="guild.liveNotificationChannelsIds"
 										multiple
 										clearable
@@ -254,7 +254,7 @@ const { data: currentUser } = storeToRefs(useProfile());
 									/>
 								</div>
 
-								<n-divider class="m-1" />
+								<NDivider class="m-1" />
 
 								<div class="form-item">
 									<span>{{ t('integrations.discord.alerts.additionalUsersIdsForLiveCheck') }}</span>
@@ -269,7 +269,7 @@ const { data: currentUser } = storeToRefs(useProfile());
 
 								<div class="form-item">
 									<span>{{ t('integrations.discord.alerts.streamOnlineLabel') }}</span>
-									<n-mention
+									<NMention
 										v-model:value="guild.liveNotificationMessage"
 										type="textarea"
 										:options="getRolesMentionsOptions(guild.id)"
@@ -282,7 +282,7 @@ const { data: currentUser } = storeToRefs(useProfile());
 								<div class="flex flex-col gap-2">
 									<div class="form-item">
 										<span>{{ t('integrations.discord.alerts.streamOfflineLabel') }}</span>
-										<n-mention
+										<NMention
 											v-model:value="guild.offlineNotificationMessage"
 											type="textarea"
 											:disabled="guild.shouldDeleteMessageOnOffline"
@@ -292,18 +292,17 @@ const { data: currentUser } = storeToRefs(useProfile());
 										<span class="description">{userName}, {displayName} – supported variables</span>
 									</div>
 
-
 									<div class="switch">
-										<n-switch v-model:value="guild.shouldDeleteMessageOnOffline" />
+										<NSwitch v-model:value="guild.shouldDeleteMessageOnOffline" />
 										<span>{{ t('integrations.discord.alerts.shouldDeleteMessageOnOffline') }}</span>
 									</div>
 								</div>
 
-								<n-divider />
+								<NDivider />
 
-								<n-alert type="info">
+								<NAlert type="info">
 									{{ t('integrations.discord.alerts.updateAlert') }}
-								</n-alert>
+								</NAlert>
 							</div>
 
 							<div class="w-1/2">
@@ -372,30 +371,30 @@ const { data: currentUser } = storeToRefs(useProfile());
 							<span class="text-base">
 								{{ t('sharedTexts.dangerZone') }}
 							</span>
-							<n-divider class="m-0 mb-1" />
+							<NDivider class="m-0 mb-1" />
 
-							<n-popconfirm
+							<NPopconfirm
 								:positive-text="t('deleteConfirmation.confirm')"
 								:negative-text="t('deleteConfirmation.cancel')"
 								@positive-click="() => disconnectGuildById(guild.id)"
 							>
 								<template #trigger>
-									<n-button type="error" secondary>
+									<NButton type="error" secondary>
 										{{ t('integrations.discord.disconnectGuild') }}
-									</n-button>
+									</NButton>
 								</template>
 								{{ t('deleteConfirmation.text') }}
-							</n-popconfirm>
+							</NPopconfirm>
 						</div>
 					</div>
-				</n-tab-pane>
+				</NTabPane>
 
 				<template v-if="!discordIntegrationData?.guilds?.length" #prefix>
 					{{ t('integrations.discord.noGuilds') }}
 				</template>
 
 				<template #suffix>
-					<n-button
+					<NButton
 						:disabled="isConnectDisabled"
 						type="success"
 						size="small"
@@ -403,9 +402,9 @@ const { data: currentUser } = storeToRefs(useProfile());
 						@click="connectGuild"
 					>
 						{{ t('integrations.discord.connectGuild') }}
-					</n-button>
+					</NButton>
 				</template>
-			</n-tabs>
+			</NTabs>
 		</template>
 
 		<template #additionalFooter>
@@ -413,7 +412,7 @@ const { data: currentUser } = storeToRefs(useProfile());
 				class="flex items-center p-2.5 gap-2 rounded-[var(--n-border-radius)]"
 				:style="{ backgroundColor: themeVars.buttonColor2 }"
 			>
-				<n-spin v-if="isDataLoading" class="h-4" />
+				<NSpin v-if="isDataLoading" class="h-4" />
 
 				<template v-else>
 					{{
@@ -422,15 +421,15 @@ const { data: currentUser } = storeToRefs(useProfile());
 							{
 								guilds: t(
 									'integrations.discord.guildPluralization',
-									discordIntegrationData?.guilds?.length ?? 0
-								)
-							}
+									discordIntegrationData?.guilds?.length ?? 0,
+								),
+							},
 						)
 					}}
 				</template>
 			</div>
 		</template>
-	</with-settings>
+	</WithSettings>
 </template>
 
 <style scoped>
diff --git a/frontend/dashboard/src/components/integrations/seven-tv.vue b/frontend/dashboard/src/components/integrations/seven-tv.vue
index 5d6a7fab7..1b526a087 100644
--- a/frontend/dashboard/src/components/integrations/seven-tv.vue
+++ b/frontend/dashboard/src/components/integrations/seven-tv.vue
@@ -1,76 +1,80 @@
 <script setup lang="ts">
-import { IconCircleCheck, IconPlugOff } from '@tabler/icons-vue';
-import type {
-	UpdateDataRequest,
-} from '@twir/api/messages/integrations_seventv/integrations_seventv';
+import { IconCircleCheck, IconPlugOff } from '@tabler/icons-vue'
 import {
-	NTag,
-	NTimeline,
-	NTimelineItem,
 	NA,
-	NSpin,
 	NAlert,
 	NForm,
 	NFormItem,
 	NSpace,
-	NText,
+	NSpin,
 	NSwitch,
-} from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+	NTag,
+	NText,
+	NTimeline,
+	NTimelineItem,
+} from 'naive-ui'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import SevenTvButtonEditors from './seventv-button-editors.png'
 
-import SevenTvButtonEditors from './seventv-button-editors.png';
+import type {
+	UpdateDataRequest,
+} from '@twir/api/messages/integrations_seventv/integrations_seventv'
 
-import SevenTVSvg from '@/assets/integrations/seventv.svg?use';
-import { useSevenTv } from '@/components/integrations/use-seven-tv';
-import WithSettings from '@/components/integrations/variants/withSettings.vue';
-import RewardsSelector from '@/components/rewardsSelector.vue';
-import { useNaiveDiscrete } from '@/composables/use-naive-discrete';
+import SevenTVSvg from '@/assets/integrations/seventv.svg?use'
+import { useSevenTv } from '@/components/integrations/use-seven-tv'
+import WithSettings from '@/components/integrations/variants/withSettings.vue'
+import RewardsSelector from '@/components/rewardsSelector.vue'
+import { useNaiveDiscrete } from '@/composables/use-naive-discrete'
 
-const { t } = useI18n();
+const { t } = useI18n()
 
-const { notification } = useNaiveDiscrete();
-const sevenTvStore = useSevenTv();
-const { isNotRegistered, data: sevenTvData, sevenTvProfileLink } = storeToRefs(sevenTvStore);
+const { notification } = useNaiveDiscrete()
+const {
+	isNotRegistered,
+	data: sevenTvData,
+	sevenTvProfileLink,
+	save,
+} = useSevenTv()
 
 const form = ref<UpdateDataRequest>({
 	deleteEmotesOnlyAddedByApp: true,
-});
+})
 watch(sevenTvData, (data) => {
-	if (!data) return;
+	if (!data) return
 	form.value = {
 		rewardIdForAddEmote: data.rewardIdForAddEmote,
 		rewardIdForRemoveEmote: data.rewardIdForRemoveEmote,
 		deleteEmotesOnlyAddedByApp: data.deleteEmotesOnlyAddedByApp,
-	};
-});
+	}
+})
 
-const router = useRouter();
+const router = useRouter()
 
 function goToEvents() {
-	router.push('/dashboard/events/custom');
+	router.push('/dashboard/events/custom')
 }
 
 const isSameRewardsChoosed = computed(() => {
-	if (!form.value.rewardIdForAddEmote || !form.value.rewardIdForRemoveEmote) return false;
+	if (!form.value.rewardIdForAddEmote || !form.value.rewardIdForRemoveEmote) return false
 
-	return form.value.rewardIdForAddEmote === form.value.rewardIdForRemoveEmote;
-});
+	return form.value.rewardIdForAddEmote === form.value.rewardIdForRemoveEmote
+})
 
 async function saveSettings() {
 	try {
-		await sevenTvStore.save(form.value);
-		notification.success({ title: t('sharedTexts.saved'), duration: 2500 });
+		await save(form.value)
+		notification.success({ title: t('sharedTexts.saved'), duration: 2500 })
 	} catch (err) {
-		notification.error({ title: t('sharedTexts.errorOnSave'), duration: 2500 });
+		notification.error({ title: t('sharedTexts.errorOnSave'), duration: 2500 })
 	}
 }
 </script>
 
 <template>
-	<with-settings
+	<WithSettings
 		title="7TV"
 		:save="saveSettings"
 		:icon="SevenTVSvg"
@@ -83,91 +87,90 @@ async function saveSettings() {
 
 		<template #settings>
 			<template v-if="isNotRegistered || !sevenTvData?.emoteSetId">
-				<n-alert v-if="isNotRegistered" type="error">
+				<NAlert v-if="isNotRegistered" type="error">
 					<i18n-t keypath="integrations.sevenTv.notRegistered">
-						<n-a href="https://7tv.app" target="_blank">
+						<NA href="https://7tv.app" target="_blank">
 							7tv.app
-						</n-a>
+						</NA>
 					</i18n-t>
-				</n-alert>
-				<n-alert v-else type="error">
+				</NAlert>
+				<NAlert v-else type="error">
 					Emote set not created on 7tv, please create at least one set on
-					<n-a :href="sevenTvProfileLink" target="_blank">
+					<NA :href="sevenTvProfileLink" target="_blank">
 						7tv
-					</n-a>
-				</n-alert>
+					</NA>
+				</NAlert>
 			</template>
 
 			<template v-else>
-				<n-spin :show="!sevenTvData?.isEditor">
-					<n-form>
-						<n-form-item :label="t('integrations.sevenTv.rewardForAddEmote')">
-							<n-space vertical>
-								<rewards-selector v-model="form.rewardIdForAddEmote" only-with-input clearable />
-								<n-text :depth="3" class="text-xs">
+				<NSpin :show="!sevenTvData?.isEditor">
+					<NForm>
+						<NFormItem :label="t('integrations.sevenTv.rewardForAddEmote')">
+							<NSpace vertical>
+								<RewardsSelector v-model="form.rewardIdForAddEmote" only-with-input clearable />
+								<NText :depth="3" class="text-xs">
 									{{ t('integrations.sevenTv.rewardSelectorDescription') }}
-								</n-text>
-							</n-space>
-						</n-form-item>
-
-						<n-form-item :label="t('integrations.sevenTv.rewardForRemoveEmote')">
-							<n-space vertical>
-								<rewards-selector v-model="form.rewardIdForRemoveEmote" only-with-input clearable />
-								<n-text :depth="3" class="text-xs">
+								</NText>
+							</NSpace>
+						</NFormItem>
+
+						<NFormItem :label="t('integrations.sevenTv.rewardForRemoveEmote')">
+							<NSpace vertical>
+								<RewardsSelector v-model="form.rewardIdForRemoveEmote" only-with-input clearable />
+								<NText :depth="3" class="text-xs">
 									{{ t('integrations.sevenTv.rewardSelectorDescription') }}
-								</n-text>
+								</NText>
 
 								<div class="flex gap-1">
 									<span>{{ t('integrations.sevenTv.deleteOnlyAddedByApp') }}</span>
-									<n-switch v-model:value="form.deleteEmotesOnlyAddedByApp" />
+									<NSwitch v-model:value="form.deleteEmotesOnlyAddedByApp" />
 								</div>
-							</n-space>
-						</n-form-item>
-					</n-form>
-
+							</NSpace>
+						</NFormItem>
+					</NForm>
 
 					<div class="flex flex-col gap-1">
-						<n-alert v-if="isSameRewardsChoosed" type="error">
+						<NAlert v-if="isSameRewardsChoosed" type="error">
 							{{ t('integrations.sevenTv.errorSameReward') }}
-						</n-alert>
+						</NAlert>
 
-						<n-alert type="info" class="mb-2.5">
+						<NAlert type="info" class="mb-2.5">
 							<i18n-t keypath="integrations.sevenTv.alert">
-								<n-a @click="goToEvents">
+								<NA @click="goToEvents">
 									{{ t('sidebar.events').toLocaleLowerCase() }}
-								</n-a>
+								</NA>
 							</i18n-t>
-						</n-alert>
+						</NAlert>
 					</div>
 
 					<template #description>
-						<n-timeline>
-							<n-timeline-item>
+						<NTimeline>
+							<NTimelineItem>
 								<i18n-t keypath="integrations.sevenTv.connectSteps.step1">
-									<n-a :href="sevenTvProfileLink" target="_blank">
+									<NA :href="sevenTvProfileLink" target="_blank">
 										7tv
-									</n-a>
+									</NA>
 								</i18n-t>
-							</n-timeline-item>
-							<n-timeline-item>
+							</NTimelineItem>
+							<NTimelineItem>
 								<div class="flex flex-col">
 									<span>{{ t('integrations.sevenTv.connectSteps.step2') }}</span>
 									<img :src="SevenTvButtonEditors" height="50" width="100" />
 								</div>
-							</n-timeline-item>
-							<n-timeline-item>
+							</NTimelineItem>
+							<NTimelineItem>
 								<i18n-t keypath="integrations.sevenTv.connectSteps.step3">
 									<b classs="text-[color:var(--n-color-target)]">{{ sevenTvData?.botSeventvProfile?.username }}</b>
 								</i18n-t>
-							</n-timeline-item>
-						</n-timeline>
+							</NTimelineItem>
+						</NTimeline>
 					</template>
-				</n-spin>
+				</NSpin>
 			</template>
 		</template>
 
 		<template #additionalFooter>
-			<n-tag
+			<NTag
 				class="!p-5"
 				:bordered="false"
 				:type="sevenTvData?.isEditor ? 'success' : 'error'"
@@ -182,7 +185,7 @@ async function saveSettings() {
 				<template v-else>
 					{{ t('integrations.sevenTv.notConnected') }}
 				</template>
-			</n-tag>
+			</NTag>
 		</template>
-	</with-settings>
+	</WithSettings>
 </template>
diff --git a/frontend/dashboard/src/components/integrations/use-seven-tv.ts b/frontend/dashboard/src/components/integrations/use-seven-tv.ts
index b8c33f10a..06ef7bd58 100644
--- a/frontend/dashboard/src/components/integrations/use-seven-tv.ts
+++ b/frontend/dashboard/src/components/integrations/use-seven-tv.ts
@@ -1,48 +1,50 @@
-import { RpcError } from '@protobuf-ts/runtime-rpc';
+import { RpcError } from '@protobuf-ts/runtime-rpc'
+import { createGlobalState } from '@vueuse/core'
+import { computed, ref, unref, watch } from 'vue'
+
 import type {
 	GetDataResponse,
 	UpdateDataRequest,
-} from '@twir/api/messages/integrations_seventv/integrations_seventv';
-import { defineStore } from 'pinia';
-import { computed, MaybeRef, ref, unref, watch } from 'vue';
+} from '@twir/api/messages/integrations_seventv/integrations_seventv'
+import type { MaybeRef } from 'vue'
 
-import { useSevenTvIntegration } from '@/api/integrations/seventv.js';
+import { useSevenTvIntegration } from '@/api/integrations/seventv.js'
 
-export const useSevenTv = defineStore('sevenTvIntegration', () => {
-	const data = ref<GetDataResponse>();
-	const error = ref<unknown | null>(null);
+export const useSevenTv = createGlobalState(() => {
+	const data = ref<GetDataResponse>()
+	const error = ref<unknown | null>(null)
 
-	const manager = useSevenTvIntegration();
-	const updater = manager.useUpdate();
-	const { data: sevenTvData, error: sevenTvError } = manager.useData();
+	const manager = useSevenTvIntegration()
+	const updater = manager.useUpdate()
+	const { data: sevenTvData, error: sevenTvError } = manager.useData()
 
 	const sevenTvProfileLink = computed(() => {
-		return `https://7tv.app/users/${data?.value?.userSeventvProfile?.id}`;
-	});
+		return `https://7tv.app/users/${data?.value?.userSeventvProfile?.id}`
+	})
 
 	watch(sevenTvData, (value) => {
-		data.value = value;
-	});
+		data.value = value
+	})
 
 	watch(sevenTvError, (value) => {
-		error.value = value;
-	});
+		error.value = value
+	})
 
 	const isNotRegistered = computed(() => {
 		if (error.value && error.value instanceof RpcError) {
-			return error.value.message === 'profile_not_found';
+			return error.value.message === 'profile_not_found'
 		}
 
-		return false;
-	});
+		return false
+	})
 
 	async function save(data: MaybeRef<UpdateDataRequest>) {
-		const raw = unref(data);
+		const raw = unref(data)
 		await updater.mutateAsync({
 			rewardIdForAddEmote: raw.rewardIdForAddEmote ?? undefined,
 			rewardIdForRemoveEmote: raw.rewardIdForRemoveEmote ?? undefined,
 			deleteEmotesOnlyAddedByApp: raw.deleteEmotesOnlyAddedByApp,
-		});
+		})
 	}
 
 	return {
@@ -51,5 +53,5 @@ export const useSevenTv = defineStore('sevenTvIntegration', () => {
 		sevenTvProfileLink,
 		isNotRegistered,
 		save,
-	};
-});
+	}
+})
diff --git a/frontend/dashboard/src/components/moderation/card.vue b/frontend/dashboard/src/components/moderation/card.vue
index fa1afdd6a..7e1b019da 100644
--- a/frontend/dashboard/src/components/moderation/card.vue
+++ b/frontend/dashboard/src/components/moderation/card.vue
@@ -1,66 +1,66 @@
 <script setup lang="ts">
-import { IconSettings, IconTrash } from '@tabler/icons-vue';
-import { type ItemWithId } from '@twir/api/messages/moderation/moderation';
-import { NSwitch, NButton, NPopconfirm, useNotification } from 'naive-ui';
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { IconSettings, IconTrash } from '@tabler/icons-vue'
+import { NButton, NPopconfirm, NSwitch, useNotification } from 'naive-ui'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { Icons } from './helpers.js';
+import { Icons } from './helpers.js'
 
-import { useModerationManager, useUserAccessFlagChecker } from '@/api/index.js';
-import Card from '@/components/card/card.vue';
-import { ChannelRolePermissionEnum } from '@/gql/graphql';
+import type { ItemWithId } from '@twir/api/messages/moderation/moderation'
+
+import { useModerationManager, useUserAccessFlagChecker } from '@/api/index.js'
+import Card from '@/components/card/card.vue'
+import { ChannelRolePermissionEnum } from '@/gql/graphql'
 
 const props = defineProps<{
 	item: ItemWithId
-}>();
-
-const manager = useModerationManager();
-const patcher = manager.patch!;
-const deleter = manager.deleteOne;
-
-const patchExecuting = ref(false);
+}>()
 
 defineEmits<{
 	showSettings: []
-}>();
+}>()
 
-const { t } = useI18n();
+const manager = useModerationManager()
+const patcher = manager.patch!
+const deleter = manager.deleteOne
 
-const userCanManageModeration = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageModeration);
+const patchExecuting = ref(false)
 
-const message = useNotification();
+const { t } = useI18n()
 
-const switchState = async (id: string, v: boolean) => {
-	patchExecuting.value = true;
+const userCanManageModeration = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageModeration)
+
+const message = useNotification()
+
+async function switchState(id: string, v: boolean) {
+	patchExecuting.value = true
 
 	try {
-		await patcher.mutateAsync({ id, enabled: v });
-		props.item.data!.enabled = v;
+		await patcher.mutateAsync({ id, enabled: v })
 	} catch (error) {
-		console.error(error);
+		console.error(error)
 	} finally {
-		patchExecuting.value = false;
+		patchExecuting.value = false
 	}
-};
+}
 
 async function removeItem() {
-	await deleter.mutateAsync({ id: props.item.id });
+	await deleter.mutateAsync({ id: props.item.id })
 	message.success({
 		title: t('sharedTexts.deleted'),
 		duration: 2000,
-	});
+	})
 }
 </script>
 
 <template>
-	<card
+	<Card
 		:title="t(`moderation.types.${item.data!.type}.name`)"
 		:icon="Icons[item.data!.type]"
 		style="height:100%"
 	>
 		<template #headerExtra>
-			<n-switch
+			<NSwitch
 				:disabled="!userCanManageModeration"
 				:value="item.data!.enabled"
 				:loading="patchExecuting"
@@ -74,7 +74,7 @@ async function removeItem() {
 
 		<template #footer>
 			<div class="flex gap-2">
-				<n-button
+				<NButton
 					:disabled="!userCanManageModeration"
 					secondary
 					size="large"
@@ -84,14 +84,14 @@ async function removeItem() {
 						<span>{{ t('sharedButtons.settings') }}</span>
 						<IconSettings />
 					</div>
-				</n-button>
-				<n-popconfirm
+				</NButton>
+				<NPopconfirm
 					:positive-text="t('deleteConfirmation.confirm')"
 					:negative-text="t('deleteConfirmation.cancel')"
 					@positive-click="removeItem"
 				>
 					<template #trigger>
-						<n-button
+						<NButton
 							:disabled="!userCanManageModeration"
 							secondary
 							size="large"
@@ -101,11 +101,11 @@ async function removeItem() {
 								<span>{{ t('sharedButtons.delete') }}</span>
 								<IconTrash />
 							</div>
-						</n-button>
+						</NButton>
 					</template>
 					{{ t('deleteConfirmation.text') }}
-				</n-popconfirm>
+				</NPopconfirm>
 			</div>
 		</template>
-	</card>
+	</Card>
 </template>
diff --git a/frontend/dashboard/src/components/overlays/brb/settings.vue b/frontend/dashboard/src/components/overlays/brb/settings.vue
index 91851c0fa..bcf3d1267 100644
--- a/frontend/dashboard/src/components/overlays/brb/settings.vue
+++ b/frontend/dashboard/src/components/overlays/brb/settings.vue
@@ -1,36 +1,36 @@
 <script setup lang="ts">
-import type { Settings } from '@twir/api/messages/overlays_be_right_back/overlays_be_right_back';
 import {
+	NAlert,
 	NButton,
 	NColorPicker,
 	NDivider,
-	NInputNumber,
 	NInput,
-	NSwitch,
+	NInputNumber,
 	NModal,
+	NSwitch,
 	useNotification,
-	NAlert,
-} from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { ref, computed, toRaw, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+} from 'naive-ui'
+import { computed, ref, toRaw, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useCopyOverlayLink } from '../copyOverlayLink'
 
-import { useCopyOverlayLink } from '../copyOverlayLink';
+import type { Settings } from '@twir/api/messages/overlays_be_right_back/overlays_be_right_back'
 
-import { useBeRightBackOverlayManager, useProfile } from '@/api';
-import commandButton from '@/features/commands/components/command-button.vue';
+import { useBeRightBackOverlayManager, useProfile } from '@/api'
+import commandButton from '@/features/commands/components/command-button.vue'
 
 defineProps<{
 	showSettings: boolean
-}>();
+}>()
 
 defineEmits<{
 	close: []
-}>();
+}>()
 
-const { t } = useI18n();
+const { t } = useI18n()
 
-const { data: profile } = storeToRefs(useProfile());
+const { data: profile } = useProfile()
 
 const defaultSettings = {
 	backgroundColor: 'rgba(9, 8, 8, 0.50)',
@@ -44,82 +44,82 @@ const defaultSettings = {
 		enabled: true,
 	},
 	opacity: 50,
-};
+}
 
-const formValue = ref<Settings>(defaultSettings);
+const formValue = ref<Settings>(defaultSettings)
 
-const manager = useBeRightBackOverlayManager();
+const manager = useBeRightBackOverlayManager()
 const {
 	data: settings,
 	isError: isSettingsError,
 	isLoading: isSettingsLoading,
-} = manager.getSettings();
-const updater = manager.updateSettings();
+} = manager.getSettings()
+const updater = manager.updateSettings()
 
 watch(settings, (v) => {
-	if (!v) return;
+	if (!v) return
 
-	formValue.value = toRaw(v);
-}, { immediate: true });
+	formValue.value = toRaw(v)
+}, { immediate: true })
 
-const brbIframeRef = ref<HTMLIFrameElement | null>(null);
+const brbIframeRef = ref<HTMLIFrameElement | null>(null)
 const brbIframeUrl = computed(() => {
-	if (!profile.value) return null;
+	if (!profile.value) return null
 
-	return `${window.location.origin}/overlays/${profile.value.apiKey}/brb`;
-});
+	return `${window.location.origin}/overlays/${profile.value.apiKey}/brb`
+})
 
-const sendIframeMessage = (key: string, data?: any) => {
-	if (!brbIframeRef.value) return;
-	const win = brbIframeRef.value;
+function sendIframeMessage(key: string, data?: any) {
+	if (!brbIframeRef.value) return
+	const win = brbIframeRef.value
 
 	win.contentWindow?.postMessage(JSON.stringify({
 		key,
 		data: toRaw(data),
-	}));
-};
+	}))
+}
 
-const sendSettings = () => {
+function sendSettings() {
 	sendIframeMessage('settings', {
 		...toRaw(formValue.value),
 		channelName: profile.value?.login,
 		channelId: profile.value?.id,
-	});
-};
+	})
+}
 
 watch(brbIframeRef, (v) => {
-	if (!v) return;
+	if (!v) return
 
 	v.contentWindow?.addEventListener('message', (e) => {
-		const parsed = JSON.parse(e.data);
-		if (parsed.key !== 'getSettings') return;
+		const parsed = JSON.parse(e.data)
+		if (parsed.key !== 'getSettings') return
 
-		sendSettings();
-	});
-});
+		sendSettings()
+	})
+})
 
 watch(() => formValue, () => {
-	if (!brbIframeRef.value) return;
+	if (!brbIframeRef.value) return
 
-	sendSettings();
-}, { deep: true });
+	sendSettings()
+}, { deep: true })
 
-const { copyOverlayLink } = useCopyOverlayLink('brb');
+const { copyOverlayLink } = useCopyOverlayLink('brb')
 
-const message = useNotification();
+const message = useNotification()
 
 async function save() {
-	await updater.mutateAsync(formValue.value);
+	await updater.mutateAsync(formValue.value)
 
 	message.success({
 		title: t('sharedTexts.saved'),
 		duration: 5000,
-	});
+	})
 }
 </script>
 
 <template>
-	<n-modal
+	<NModal
 		:show="showSettings"
 		:mask-closable="false"
 		:segmented="true"
@@ -133,9 +133,9 @@ async function save() {
 		<div class="flex gap-4 w-full">
 			<div class="flex gap-2 p-2 bg-[color:var(--n-card-color)] rounded-lg">
 				<div class="flex flex-col gap-3 w-1/2">
-					<n-divider class="m-0">
+					<NDivider class="m-0">
 						{{ t('overlays.brb.settings.main.label') }}
-					</n-divider>
+					</NDivider>
 
 					<div class="form-item">
 						<div class="flex flex-col gap-1">
@@ -143,9 +143,9 @@ async function save() {
 								name="brb"
 								:title="t('overlays.brb.settings.main.startCommand.description')"
 							/>
-							<n-alert type="info" :show-icon="false">
+							<NAlert type="info" :show-icon="false">
 								<span v-html="t('overlays.brb.settings.main.startCommand.example')" />
-							</n-alert>
+							</NAlert>
 						</div>
 
 						<command-button
@@ -156,12 +156,12 @@ async function save() {
 
 					<div class="form-item">
 						<span>{{ t('overlays.brb.settings.main.text') }}</span>
-						<n-input v-model:value="formValue.text" :maxlength="500" />
+						<NInput v-model:value="formValue.text" :maxlength="500" />
 					</div>
 
 					<div class="form-item">
 						<span>{{ t('overlays.brb.settings.main.background') }}</span>
-						<n-color-picker
+						<NColorPicker
 							v-model:value="formValue.backgroundColor" :modes="['rgb']"
 							show-preview
 						/>
@@ -169,7 +169,7 @@ async function save() {
 
 					<div class="form-item">
 						<span>{{ t('overlays.brb.settings.main.font.color') }}</span>
-						<n-color-picker
+						<NColorPicker
 							v-model:value="formValue.fontColor" :modes="['hex', 'rgb']"
 							:show-alpha="false"
 						/>
@@ -177,27 +177,27 @@ async function save() {
 
 					<div class="form-item">
 						<span>{{ t('overlays.brb.settings.main.font.size') }}</span>
-						<n-input-number v-model:value="formValue.fontSize" :min="1" :max="500" />
+						<NInputNumber v-model:value="formValue.fontSize" :min="1" :max="500" />
 					</div>
 				</div>
 
 				<div class="flex flex-col gap-3 w-1/2">
-					<n-divider class="m-0">
+					<NDivider class="m-0">
 						{{ t('overlays.brb.settings.late.label') }}
-					</n-divider>
+					</NDivider>
 
 					<div class="form-item">
 						<span>{{ t('overlays.brb.settings.late.text') }}</span>
-						<n-input v-model:value="formValue.late!.text" :maxlength="500" />
+						<NInput v-model:value="formValue.late!.text" :maxlength="500" />
 					</div>
 
 					<div class="flex gap-2">
-						<n-switch v-model:value="formValue.late!.enabled" />
+						<NSwitch v-model:value="formValue.late!.enabled" />
 						<span>{{ t('sharedTexts.enabled') }}</span>
 					</div>
 
 					<div class="flex gap-2">
-						<n-switch v-model:value="formValue.late!.displayBrbTime" />
+						<NSwitch v-model:value="formValue.late!.displayBrbTime" />
 						<span>{{ t('overlays.brb.settings.late.displayBrb') }}</span>
 					</div>
 				</div>
@@ -205,10 +205,10 @@ async function save() {
 			<div>
 				<div class="absolute top-[85px] right-[20px] font-medium">
 					<div class="flex gap-2">
-						<n-button secondary size="small" type="warning" @click="sendIframeMessage('stop')">
+						<NButton secondary size="small" type="warning" @click="sendIframeMessage('stop')">
 							{{ t('overlays.brb.preview.stop') }}
-						</n-button>
-						<n-button
+						</NButton>
+						<NButton
 							secondary
 							size="small"
 							type="success"
@@ -218,7 +218,7 @@ async function save() {
 							}"
 						>
 							{{ t('overlays.brb.preview.start') }}
-						</n-button>
+						</NButton>
 					</div>
 				</div>
 				<iframe
@@ -231,34 +231,34 @@ async function save() {
 		</div>
 		<template #footer>
 			<div class="flex justify-between gap-2">
-				<n-button
+				<NButton
 					secondary
 					type="error"
 					@click="formValue = defaultSettings"
 				>
 					{{ t('sharedButtons.setDefaultSettings') }}
-				</n-button>
+				</NButton>
 
 				<div class="flex gap-2">
-					<n-button
+					<NButton
 						secondary
 						type="info"
 						:disabled="isSettingsError || isSettingsLoading"
 						@click="copyOverlayLink()"
 					>
 						{{ t('overlays.copyOverlayLink') }}
-					</n-button>
-					<n-button
+					</NButton>
+					<NButton
 						secondary
 						type="success"
 						@click="save"
 					>
 						{{ t('sharedButtons.save') }}
-					</n-button>
+					</NButton>
 				</div>
 			</div>
 		</template>
-	</n-modal>
+	</NModal>
 </template>
 
 <style scoped>
diff --git a/frontend/dashboard/src/components/overlays/card.vue b/frontend/dashboard/src/components/overlays/card.vue
index a6a03e3c6..dab6186c4 100644
--- a/frontend/dashboard/src/components/overlays/card.vue
+++ b/frontend/dashboard/src/components/overlays/card.vue
@@ -1,53 +1,53 @@
 <script setup lang="ts">
-import { IconSettings, IconCopy } from '@tabler/icons-vue';
-import { NButton, NTooltip } from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { FunctionalComponent } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { IconCopy, IconSettings } from '@tabler/icons-vue'
+import { NButton, NTooltip } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
 
-import { useCopyOverlayLink } from './copyOverlayLink.js';
+import { useCopyOverlayLink } from './copyOverlayLink.js'
 
-import { useProfile, useUserAccessFlagChecker } from '@/api/index.js';
-import Card from '@/components/card/card.vue';
-import { ChannelRolePermissionEnum } from '@/gql/graphql';
+import type { FunctionalComponent } from 'vue'
+
+import { useProfile, useUserAccessFlagChecker } from '@/api/index.js'
+import Card from '@/components/card/card.vue'
+import { ChannelRolePermissionEnum } from '@/gql/graphql'
 
 const props = withDefaults(defineProps<{
-	description: string;
-	title: string;
-	overlayPath?: string;
-	icon: FunctionalComponent;
-	iconStroke?: number;
-	showSettings?: boolean;
-	copyDisabled?: boolean;
-	showCopy?: boolean;
+	description: string
+	title: string
+	overlayPath?: string
+	icon: FunctionalComponent
+	iconStroke?: number
+	showSettings?: boolean
+	copyDisabled?: boolean
+	showCopy?: boolean
 }>(), {
 	showSettings: true,
 	copyDisabled: false,
 	showCopy: true,
 	iconStroke: 1,
 	overlayPath: '',
-});
+})
 
 defineEmits<{
-	openSettings: [];
-}>();
+	openSettings: []
+}>()
 
-const { t } = useI18n();
-const { data: profile } = storeToRefs(useProfile());
+const { t } = useI18n()
+const { data: profile } = useProfile()
 
-const { copyOverlayLink } = useCopyOverlayLink(props.overlayPath);
+const { copyOverlayLink } = useCopyOverlayLink(props.overlayPath)
 
-const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays);
+const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays)
 </script>
 
 <template>
-	<card :title="title" :icon="icon" :icon-stroke="iconStroke" class="h-full">
+	<Card :title="title" :icon="icon" :icon-stroke="iconStroke" class="h-full">
 		<template #content>
 			{{ description }}
 		</template>
 
 		<template #footer>
-			<n-button
+			<NButton
 				v-if="showSettings" :disabled="!userCanEditOverlays" secondary size="large"
 				@click="$emit('openSettings')"
 			>
@@ -55,23 +55,23 @@ const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.M
 					<span>{{ t('sharedButtons.settings') }}</span>
 					<IconSettings />
 				</div>
-			</n-button>
-			<n-tooltip v-if="showCopy" :disabled="profile?.id !== profile?.selectedDashboardId">
+			</NButton>
+			<NTooltip v-if="showCopy" :disabled="profile?.id !== profile?.selectedDashboardId">
 				<template #trigger>
-					<n-button
+					<NButton
 						size="large"
-						:disabled="copyDisabled || profile?.id != profile?.selectedDashboardId"
+						:disabled="copyDisabled || profile?.id !== profile?.selectedDashboardId"
 						@click="copyOverlayLink()"
 					>
 						<div class="flex gap-1">
 							<span>{{ t('overlays.copyOverlayLink') }}</span>
 							<IconCopy />
 						</div>
-					</n-button>
+					</NButton>
 				</template>
-				<span v-if="profile?.id != profile?.selectedDashboardId">{{ t('overlays.noAccess') }}</span>
+				<span v-if="profile?.id !== profile?.selectedDashboardId">{{ t('overlays.noAccess') }}</span>
 				<span v-else>{{ t('overlays.uncongirured') }}</span>
-			</n-tooltip>
+			</NTooltip>
 		</template>
-	</card>
+	</Card>
 </template>
diff --git a/frontend/dashboard/src/components/overlays/copyOverlayLink.ts b/frontend/dashboard/src/components/overlays/copyOverlayLink.ts
index 0893d8ec7..647d37aa9 100644
--- a/frontend/dashboard/src/components/overlays/copyOverlayLink.ts
+++ b/frontend/dashboard/src/components/overlays/copyOverlayLink.ts
@@ -1,36 +1,35 @@
-import { useNotification } from 'naive-ui';
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { useNotification } from 'naive-ui'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { useProfile } from '@/api';
-import { storeToRefs } from 'pinia';
+import { useProfile } from '@/api/auth.js'
 
-export const useCopyOverlayLink = (overlayPath: string) => {
-	const { data: profile } = storeToRefs(useProfile());
-	const { t } = useI18n();
-	const messages = useNotification();
+export function useCopyOverlayLink(overlayPath: string) {
+	const { data: profile } = useProfile()
+	const { t } = useI18n()
+	const messages = useNotification()
 
 	const overlayLink = computed(() => {
-		return `${window.location.origin}/overlays/${profile.value?.apiKey}/${overlayPath}`;
-	});
+		return `${window.location.origin}/overlays/${profile.value?.apiKey}/${overlayPath}`
+	})
 
 	const copyOverlayLink = (query?: Record<string, string>) => {
-		const url = new URL(overlayLink.value);
+		const url = new URL(overlayLink.value)
 		if (query) {
 			for (const [key, value] of Object.entries(query)) {
-				url.searchParams.set(key, value);
+				url.searchParams.set(key, value)
 			}
 		}
 
-		navigator.clipboard.writeText(url.toString());
+		navigator.clipboard.writeText(url.toString())
 		messages.success({
 			title: t('overlays.copied'),
 			duration: 5000,
-		});
-	};
+		})
+	}
 
 	return {
 		overlayLink,
 		copyOverlayLink,
-	};
-};
+	}
+}
diff --git a/frontend/dashboard/src/components/overlays/obs/settings.vue b/frontend/dashboard/src/components/overlays/obs/settings.vue
index 9be94a2ed..c298d59c9 100644
--- a/frontend/dashboard/src/components/overlays/obs/settings.vue
+++ b/frontend/dashboard/src/components/overlays/obs/settings.vue
@@ -1,40 +1,34 @@
 <script setup lang="ts">
-import type {
-	GetResponse as OBSSettings,
-} from '@twir/api/messages/modules_obs_websocket/modules_obs_websocket';
 import {
 	type FormInst,
-	type FormRules,
 	type FormItemRule,
+	type FormRules,
+	NAlert,
+	NButton,
 	NForm,
 	NFormItem,
 	NInput,
 	NInputNumber,
-	NButton,
-	NAlert,
 	NSpace,
 	useMessage,
-} from 'naive-ui';
-import { ref, toRaw, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
+} from 'naive-ui'
+import { onMounted, ref, toRaw } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { useObsOverlayManager, useProfile } from '@/api/index.js';
-import { useCopyOverlayLink } from '@/components/overlays/copyOverlayLink';
-import { storeToRefs } from 'pinia';
+import type {
+	GetResponse as OBSSettings,
+} from '@twir/api/messages/modules_obs_websocket/modules_obs_websocket'
 
-const obsSettingsManager = useObsOverlayManager();
-const { refetch, data: settings } = obsSettingsManager.getSettings();
-const obsSettingsUpdater = obsSettingsManager.updateSettings();
+import { useObsOverlayManager, useProfile } from '@/api/index.js'
+import { useCopyOverlayLink } from '@/components/overlays/copyOverlayLink'
 
-onMounted(async () => {
-	const settings = await refetch();
-	if (!settings.data) return;
-	formValue.value = toRaw(settings.data);
-});
+const { t } = useI18n()
 
-const { t } = useI18n();
+const obsSettingsManager = useObsOverlayManager()
+const { refetch, data: settings } = obsSettingsManager.getSettings()
+const obsSettingsUpdater = obsSettingsManager.updateSettings()
 
-const formRef = ref<FormInst | null>(null);
+const formRef = ref<FormInst | null>(null)
 const formValue = ref<Omit<OBSSettings, 'isConnected'>>({
 	audioSources: [],
 	scenes: [],
@@ -42,107 +36,114 @@ const formValue = ref<Omit<OBSSettings, 'isConnected'>>({
 	serverAddress: 'localhost',
 	serverPassword: '',
 	serverPort: 4455,
-});
+})
+
+onMounted(async () => {
+	const settings = await refetch()
+	if (!settings.data) return
+	formValue.value = toRaw(settings.data)
+})
+
 const rules: FormRules = {
 	serverAddress: {
 		trigger: ['input', 'blur'],
 		validator: (_: FormItemRule, value: string) => {
 			if (!value || !value.length) {
-				return new Error('Address is required');
+				return new Error('Address is required')
 			}
 
-			return true;
+			return true
 		},
 	},
 	serverPort: {
 		trigger: ['input', 'blur'],
 		validator: (_: FormItemRule, value: number) => {
 			if (!value) {
-				return new Error('Port is required');
+				return new Error('Port is required')
 			}
 
-			return true;
+			return true
 		},
 	},
 	serverPassword: {
 		trigger: ['input', 'blur'],
 		validator: (_: FormItemRule, value: string) => {
 			if (!value || !value.length) {
-				return new Error('Password is required');
+				return new Error('Password is required')
 			}
 
-			return true;
+			return true
 		},
 	},
-};
+}
 
-const message = useMessage();
+const message = useMessage()
 
 async function save() {
-	if (!formRef.value || !formValue.value) return;
-	await formRef.value.validate();
+	if (!formRef.value || !formValue.value) return
+	await formRef.value.validate()
 
-	await obsSettingsUpdater.mutateAsync(formValue.value);
+	await obsSettingsUpdater.mutateAsync(formValue.value)
 	message.success('Settings updated, now you can paste overlay link into obs', {
 		duration: 2500,
-	});
+	})
 }
 
-const { copyOverlayLink } = useCopyOverlayLink('obs');
-const { data: profile } = storeToRefs(useProfile());
+const { copyOverlayLink } = useCopyOverlayLink('obs')
+const { data: profile } = useProfile()
 </script>
 
 <template>
-	<n-alert type="info">
+	<NAlert type="info">
 		{{ t('overlays.obs.description') }}
-	</n-alert>
+	</NAlert>
 
-	<n-form
+	<NForm
 		ref="formRef"
 		:model="formValue"
 		:rules="rules"
 		style="margin-top:15px"
 	>
-		<n-form-item
+		<NFormItem
 			:label="t('overlays.obs.address')"
 			required
 			path="serverAddress"
 		>
-			<n-input v-model:value="formValue.serverAddress" placeholder="Usually it's localhost" />
-		</n-form-item>
+			<NInput v-model:value="formValue.serverAddress" placeholder="Usually it's localhost" />
+		</NFormItem>
 
-		<n-form-item :label="t('overlays.obs.port')" required path="serverPort">
-			<n-input-number
+		<NFormItem :label="t('overlays.obs.port')" required path="serverPort">
+			<NInputNumber
 				v-model:value="formValue.serverPort"
 				:min="1"
 				:max="66000"
 				placeholder="Socket port"
 			/>
-		</n-form-item>
+		</NFormItem>
 
-		<n-form-item label="Password" required path="serverPassword">
-			<n-input
+		<NFormItem label="Password" required path="serverPassword">
+			<NInput
 				v-model:value="formValue.serverPassword"
 				type="password"
 				show-password-on="click"
 				placeholder="Socket password"
 			/>
-		</n-form-item>
+		</NFormItem>
 
-		<n-alert :type="settings?.isConnected ? 'success' : 'error'" :bordered="false">
+		<NAlert :type="settings?.isConnected ? 'success' : 'error'" :bordered="false">
 			{{
 				settings?.isConnected ? t('overlays.obs.connected') : t('overlays.obs.notConnected')
 			}}
-		</n-alert>
+		</NAlert>
 
-		<n-space vertical class="mt-2.5">
-			<n-button :disabled="profile?.id !== profile?.selectedDashboardId" block secondary type="info" @click="copyOverlayLink()">
+		<NSpace vertical class="mt-2.5">
+			<NButton :disabled="profile?.id !== profile?.selectedDashboardId" block secondary type="info" @click="copyOverlayLink()">
 				{{ t('overlays.copyOverlayLink') }}
-			</n-button>
+			</NButton>
 
-			<n-button block secondary type="success" @click="save">
+			<NButton block secondary type="success" @click="save">
 				{{ t('sharedButtons.save') }}
-			</n-button>
-		</n-space>
-	</n-form>
+			</NButton>
+		</NSpace>
+	</NForm>
 </template>
diff --git a/frontend/dashboard/src/components/registry/overlays/edit.vue b/frontend/dashboard/src/components/registry/overlays/edit.vue
index a1a1b95ee..f7a0b80ff 100644
--- a/frontend/dashboard/src/components/registry/overlays/edit.vue
+++ b/frontend/dashboard/src/components/registry/overlays/edit.vue
@@ -1,48 +1,48 @@
 <script setup lang="ts">
-import { IconCopy } from '@tabler/icons-vue';
-import { IconDeviceFloppy } from '@tabler/icons-vue';
-import { OverlayLayerType, type Overlay } from '@twir/api/messages/overlays/overlays';
-import { NInput, NFormItem, NButton, NDivider, NInputNumber, NModal, useMessage } from 'naive-ui';
-import { computed, ref, toRaw, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import Moveable from 'vue3-moveable';
-import type { OnDrag, OnResize } from 'vue3-moveable';
-
-import HtmlLayer from './layers/html.vue';
-import HtmlLayerForm from './layers/htmlForm.vue';
+import { IconCopy , IconDeviceFloppy } from '@tabler/icons-vue'
+import { type Overlay, OverlayLayerType } from '@twir/api/messages/overlays/overlays'
+import { NButton, NDivider, NFormItem, NInput, NInputNumber, NModal, useMessage } from 'naive-ui'
+import { computed, ref, toRaw, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import Moveable from 'vue3-moveable'
+
+import HtmlLayer from './layers/html.vue'
+import HtmlLayerForm from './layers/htmlForm.vue'
+
+import type { OnDrag, OnResize } from 'vue3-moveable'
 
 import {
-	useOverlaysRegistry, useProfile,
-} from '@/api/index.js';
-import NewSelector from '@/components/registry/overlays/newSelector.vue';
-import { copyToClipBoard } from '@/helpers';
-import { storeToRefs } from 'pinia';
+	useOverlaysRegistry,
+	useProfile,
+} from '@/api/index.js'
+import NewSelector from '@/components/registry/overlays/newSelector.vue'
+import { copyToClipBoard } from '@/helpers'
 
-const { t } = useI18n();
+const { t } = useI18n()
 
-const route = useRoute();
+const route = useRoute()
 const overlayId = computed(() => {
-	const id = route.params.id;
+	const id = route.params.id
 	if (typeof id !== 'string' || id === 'new') {
-		return '';
+		return ''
 	}
 
-	return id;
-});
+	return id
+})
 
-const overlaysManager = useOverlaysRegistry();
-const creator = overlaysManager.create;
-const updater = overlaysManager.update!;
+const overlaysManager = useOverlaysRegistry()
+const creator = overlaysManager.create
+const updater = overlaysManager.update!
 const { data: overlay, refetch } = overlaysManager.getOne!({
 	id: overlayId.value,
 	isQueryDisabled: true,
-});
+})
 
 watch(overlayId, (v) => {
-	if (!v) return;
-	refetch();
-}, { immediate: true });
+	if (!v) return
+	refetch()
+}, { immediate: true })
 
 type OverlayForm = Omit<Overlay, 'updatedAt' | 'channelId' | 'createdAt'>
 
@@ -52,95 +52,97 @@ const formValue = ref<OverlayForm>({
 	layers: [],
 	width: 1920,
 	height: 1080,
-});
+})
 
 watch(overlay, (v) => {
-	if (!v) return;
+	if (!v) return
 
-	const raw = toRaw(v);
+	const raw = toRaw(v)
 
-	formValue.value.id = raw.id;
-	formValue.value.name = raw.name;
-	formValue.value.layers = raw.layers;
-	formValue.value.width = raw.width;
-	formValue.value.height = raw.height;
-});
+	formValue.value.id = raw.id
+	formValue.value.name = raw.name
+	formValue.value.layers = raw.layers
+	formValue.value.width = raw.width
+	formValue.value.height = raw.height
+})
 
-const messages = useMessage();
+const messages = useMessage()
 
 async function save() {
-	const data = toRaw(formValue.value);
+	const data = toRaw(formValue.value)
 
 	if (!data.name || data.name.length > 30) {
-		messages.error(t('overlaysRegistry.validations.name'));
-		return;
+		messages.error(t('overlaysRegistry.validations.name'))
+		return
 	}
 
 	if (!data.layers.length || data.layers.length > 15) {
-		messages.error(t('overlaysRegistry.validations.layers'));
-		return;
+		messages.error(t('overlaysRegistry.validations.layers'))
+		return
 	}
 
 	if (data.id) {
 		await updater.mutateAsync({
 			...data,
 			id: data.id,
-		});
+		})
 	} else {
-		const newOverlayData = await creator.mutateAsync(data);
+		const newOverlayData = await creator.mutateAsync(data)
 
-		const raw = toRaw(newOverlayData);
+		const raw = toRaw(newOverlayData)
 
-		formValue.value.id = raw.id;
-		formValue.value.name = raw.name;
-		formValue.value.layers = raw.layers;
-		formValue.value.width = raw.width;
-		formValue.value.height = raw.height;
+		formValue.value.id = raw.id
+		formValue.value.name = raw.name
+		formValue.value.layers = raw.layers
+		formValue.value.width = raw.width
+		formValue.value.height = raw.height
 	}
 
-	messages.success(t('sharedTexts.saved'));
+	messages.success(t('sharedTexts.saved'))
 }
 
-const currentlyFocused = ref(0);
-const focus = (index: number) => {
-	currentlyFocused.value = index;
-};
+const currentlyFocused = ref(0)
+function focus(index: number) {
+	currentlyFocused.value = index
+}
 
-type EventWithLayerIndex = { index: number }
+interface EventWithLayerIndex {
+	index: number
+}
 
 function onDrag({ target, transform, index }: OnDrag & EventWithLayerIndex) {
-	focus(index);
-	target.style.transform = transform;
-	const [x, y] = transform.match(/(\d+\.\d+|\d+)px/g)!;
+	focus(index)
+	target.style.transform = transform
+	const [x, y] = transform.match(/(\d+\.\d+|\d+)px/g)!
 
-	formValue.value.layers[index].posX = parseInt(x);
-	formValue.value.layers[index].posY = parseInt(y);
+	formValue.value.layers[index].posX = Number.parseInt(x)
+	formValue.value.layers[index].posY = Number.parseInt(y)
 }
 
 function onResize({ target, width, height, transform, index }: OnResize & EventWithLayerIndex) {
-	focus(index);
+	focus(index)
 
-	target.style.width = `${width}px`;
-	target.style.height = `${height}px`;
-	target.style.transform = transform;
+	target.style.width = `${width}px`
+	target.style.height = `${height}px`
+	target.style.transform = transform
 
-	formValue.value.layers[index].height = height;
-	formValue.value.layers[index].width = width;
+	formValue.value.layers[index].height = height
+	formValue.value.layers[index].width = width
 }
 
-const removeLayer = (index: number) => {
-	formValue.value.layers = formValue.value.layers.filter((_, i) => i != index);
-	focus(-1);
-};
+function removeLayer(index: number) {
+	formValue.value.layers = formValue.value.layers.filter((_, i) => i !== index)
+	focus(-1)
+}
 
-const isOverlayNewModalOpened = ref(false);
+const isOverlayNewModalOpened = ref(false)
 
-const userProfile = storeToRefs(useProfile());
-const copyUrl = async (id: string) => {
-	await copyToClipBoard(`${window.location.origin}/overlays/${userProfile.data.value?.apiKey}/registry/overlays/${id}`);
-};
+const userProfile = useProfile()
+async function copyUrl(id: string) {
+	await copyToClipBoard(`${window.location.origin}/overlays/${userProfile.data.value?.apiKey}/registry/overlays/${id}`)
+}
 
-const innerWidth = computed(() => window.innerWidth);
+const innerWidth = computed(() => window.innerWidth)
 </script>
 
 <template>
@@ -151,7 +153,7 @@ const innerWidth = computed(() => window.innerWidth);
 				:style="{
 					width: `${formValue.width}px`,
 					height: `${formValue.height}px`,
-					transform: `scale(${(innerWidth / formValue.width) * 0.7})`
+					transform: `scale(${(innerWidth / formValue.width) * 0.7})`,
 				}"
 			>
 				<div v-for="(layer, index) of formValue.layers" :key="index">
@@ -170,7 +172,7 @@ const innerWidth = computed(() => window.innerWidth);
 
 					<Moveable
 						className="moveable"
-						:target="'#layer-' + index"
+						:target="`#layer-${index}`"
 						:draggable="true"
 						:resizable="true"
 						:rotatable="false"
@@ -180,7 +182,7 @@ const innerWidth = computed(() => window.innerWidth);
 							height: layer.height,
 							width: layer.width,
 							left: layer.posX,
-							top: layer.posY
+							top: layer.posY,
 						})"
 						:origin="false"
 						:renderDirections="currentlyFocused === index ? ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'] : []"
@@ -193,55 +195,55 @@ const innerWidth = computed(() => window.innerWidth);
 			</div>
 		</div>
 		<div class="flex flex-col gap-1">
-			<n-button
+			<NButton
 				:disabled="!formValue.name || !formValue.layers.length" block secondary
 				type="success" @click="save"
 			>
 				<IconDeviceFloppy />
 				{{ t('sharedButtons.save') }}
-			</n-button>
-			<n-button
+			</NButton>
+			<NButton
 				block secondary type="info" :disabled="!formValue.id"
 				@click="copyUrl(formValue.id)"
 			>
 				<IconCopy />
 				{{ t('overlays.copyOverlayLink') }}
-			</n-button>
+			</NButton>
 
-			<n-form-item :label="t('overlaysRegistry.name')">
-				<n-input
+			<NFormItem :label="t('overlaysRegistry.name')">
+				<NInput
 					v-model:value="formValue.name" :placeholder="t('overlaysRegistry.name')"
 					:maxlength="30"
 				/>
-			</n-form-item>
+			</NFormItem>
 
-			<n-form-item :label="t('overlaysRegistry.customWidth')">
-				<n-input-number
+			<NFormItem :label="t('overlaysRegistry.customWidth')">
+				<NInputNumber
 					v-model:value="formValue.width" :min="50"
 					:placeholder="t('overlaysRegistry.customWidth')"
 				/>
-			</n-form-item>
+			</NFormItem>
 
-			<n-form-item :label="t('overlaysRegistry.customHeight')">
-				<n-input-number
+			<NFormItem :label="t('overlaysRegistry.customHeight')">
+				<NInputNumber
 					v-model:value="formValue.height" :min="50"
 					:placeholder="t('overlaysRegistry.customHeight')"
 				/>
-			</n-form-item>
+			</NFormItem>
 
-			<n-divider />
+			<NDivider />
 
-			<n-button
+			<NButton
 				secondary
 				type="success"
 				@click="isOverlayNewModalOpened = true"
 			>
 				{{ t('overlaysRegistry.createNewLayer') }}
-			</n-button>
+			</NButton>
 
 			<div class="flex flex-col gap-3 w-full">
 				<template v-for="(layer, index) of formValue.layers">
-					<html-layer-form
+					<HtmlLayerForm
 						v-if="layer.type === OverlayLayerType.HTML"
 						:key="index"
 						v-model:html="formValue.layers[index].settings!.htmlOverlayHtml"
@@ -260,17 +262,17 @@ const innerWidth = computed(() => window.innerWidth);
 		</div>
 	</div>
 
-	<n-modal
+	<NModal
 		v-model:show="isOverlayNewModalOpened" class="w-[50vw]" preset="card"
 		:title="t('sharedButtons.create')"
 	>
-		<new-selector
+		<NewSelector
 			@select="v => {
 				formValue.layers.push(v)
 				isOverlayNewModalOpened = false
 			}"
 		/>
-	</n-modal>
+	</NModal>
 </template>
 
 <style scoped>
diff --git a/frontend/dashboard/src/components/registry/overlays/layers/htmlForm.vue b/frontend/dashboard/src/components/registry/overlays/layers/htmlForm.vue
index 22fc3a10d..9bf655ee6 100644
--- a/frontend/dashboard/src/components/registry/overlays/layers/htmlForm.vue
+++ b/frontend/dashboard/src/components/registry/overlays/layers/htmlForm.vue
@@ -1,68 +1,66 @@
-<!-- eslint-disable no-undef -->
 <script lang="ts" setup>
 import {
-	NModal,
-	NInputNumber,
-	NFormItem,
 	NAlert,
+	NFormItem,
+	NInputNumber,
+	NModal,
 	NSelect,
-	useMessage,
 	NSwitch,
-	NTabs,
 	NTabPane,
-} from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+	NTabs,
+	useMessage,
+} from 'naive-ui'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import BaseLayer, { type LayerProps } from './layer.vue';
+import BaseLayer, { type LayerProps } from './layer.vue'
 
-import { useCommandsApi } from '@/api/commands/commands';
-import { useKeywordsApi } from '@/api/keywords';
-import { useVariablesApi } from '@/api/variables';
-import { copyToClipBoard } from '@/helpers/index.js';
+import { useCommandsApi } from '@/api/commands/commands'
+import { useKeywordsApi } from '@/api/keywords'
+import { useVariablesApi } from '@/api/variables'
+import { copyToClipBoard } from '@/helpers/index.js'
 
-defineProps<LayerProps>();
+defineProps<LayerProps>()
 
 defineEmits<{
 	focus: [index: number]
 	remove: [index: number]
-}>();
+}>()
 
-const html = defineModel('html');
-const css = defineModel('css');
-const js = defineModel('js');
-const pollInterval = defineModel('pollInterval', { default: 5 });
-const periodicallyRefetchData = defineModel<boolean>('periodicallyRefetchData');
+const html = defineModel('html')
+const css = defineModel('css')
+const js = defineModel('js')
+const pollInterval = defineModel('pollInterval', { default: 5 })
+const periodicallyRefetchData = defineModel<boolean>('periodicallyRefetchData')
 
-const showModal = ref(false);
+const showModal = ref(false)
 
-const { allVariables } = storeToRefs(useVariablesApi());
-const keywordsManager = useKeywordsApi();
-const { data: keywords } = keywordsManager.useQueryKeywords();
+const { allVariables } = useVariablesApi()
+const keywordsManager = useKeywordsApi()
+const { data: keywords } = keywordsManager.useQueryKeywords()
 
-const commandsManager = useCommandsApi();
-const { data: commands } = commandsManager.useQueryCommands();
+const commandsManager = useCommandsApi()
+const { data: commands } = commandsManager.useQueryCommands()
 
-const messages = useMessage();
-const copyVariable = async (v: string) => {
-	await copyToClipBoard(v);
-	messages.success('Copied');
-};
+const messages = useMessage()
+async function copyVariable(v: string) {
+	await copyToClipBoard(v)
+	messages.success('Copied')
+}
 
 const variables = computed(() => {
-	const k = keywords.value?.keywords ?? [];
-	const cmds = commands.value?.commands ?? [];
+	const k = keywords.value?.keywords ?? []
+	const cmds = commands.value?.commands ?? []
 
 	return [
 		...allVariables.value
 			.filter(v => v.canBeUsedInRegistry)
 			.map(v => {
-				const name = `$(${v.isBuiltIn ? v.name : `customvar|${v.name}`})`;
+				const name = `$(${v.isBuiltIn ? v.name : `customvar|${v.name}`})`
 				return {
 					label: `${name} - ${v.description || 'Your custom variable'}`,
 					value: name,
-				};
+				}
 			}),
 		...k
 			.map(k => ({
@@ -74,14 +72,14 @@ const variables = computed(() => {
 				label: `$(command.counter.fromother|${c.name}) - How many times "${c.name}" was used`,
 				value: `$(command.counter.fromother|${c.name})`,
 			})),
-	];
-});
+	]
+})
 
-const { t } = useI18n();
+const { t } = useI18n()
 </script>
 
 <template>
-	<base-layer
+	<BaseLayer
 		:is-focused="isFocused"
 		:layer-index="layerIndex"
 		:type="type"
@@ -90,57 +88,57 @@ const { t } = useI18n();
 		@remove="$emit('remove', layerIndex)"
 	/>
 
-	<n-modal
+	<NModal
 		v-model:show="showModal"
 		preset="card"
 		title="Settings"
 		style="width: 50vw"
 	>
 		<div class="flex flex-col gap-5">
-			<n-form-item :label="t('overlaysRegistry.html.periodicallyRefetchData')">
-				<n-switch v-model:value="periodicallyRefetchData" />
-			</n-form-item>
+			<NFormItem :label="t('overlaysRegistry.html.periodicallyRefetchData')">
+				<NSwitch v-model:value="periodicallyRefetchData" />
+			</NFormItem>
 
-			<n-form-item :label="t('overlaysRegistry.html.updateInterval')">
-				<n-input-number v-model:value="pollInterval" :min="5" :max="300" />
-			</n-form-item>
+			<NFormItem :label="t('overlaysRegistry.html.updateInterval')">
+				<NInputNumber v-model:value="pollInterval" :min="5" :max="300" />
+			</NFormItem>
 
-			<n-alert type="info" :title="t('overlaysRegistry.html.variablesAlert.title')">
+			<NAlert type="info" :title="t('overlaysRegistry.html.variablesAlert.title')">
 				{{ t('overlaysRegistry.html.variablesAlert.selectToCopy') }}
-				<n-select filterable :options="variables" @update:value="(v) => copyVariable(v)" />
-			</n-alert>
+				<NSelect filterable :options="variables" @update:value="(v) => copyVariable(v)" />
+			</NAlert>
 
-			<n-tabs type="segment">
-				<n-tab-pane name="HTML">
+			<NTabs type="segment">
+				<NTabPane name="HTML">
 					<vue-monaco-editor
 						v-model:value="html"
 						theme="vs-dark"
 						height="500px"
 						language="html"
 						:options="{
-							readOnlyMessage: 'test'
+							readOnlyMessage: 'test',
 						}"
 					/>
-				</n-tab-pane>
+				</NTabPane>
 
-				<n-tab-pane name="CSS">
+				<NTabPane name="CSS">
 					<vue-monaco-editor
 						v-model:value="css"
 						theme="vs-dark"
 						height="500px"
 						language="css"
 					/>
-				</n-tab-pane>
+				</NTabPane>
 
-				<n-tab-pane name="JS">
+				<NTabPane name="JS">
 					<vue-monaco-editor
 						v-model:value="js"
 						theme="vs-dark"
 						height="500px"
 						language="javascript"
 					/>
-				</n-tab-pane>
-			</n-tabs>
+				</NTabPane>
+			</NTabs>
 		</div>
-	</n-modal>
+	</NModal>
 </template>
diff --git a/frontend/dashboard/src/components/songRequests/hook.ts b/frontend/dashboard/src/components/songRequests/hook.ts
index 57439687e..b8135a7bf 100644
--- a/frontend/dashboard/src/components/songRequests/hook.ts
+++ b/frontend/dashboard/src/components/songRequests/hook.ts
@@ -1,10 +1,9 @@
-import { useWebSocket } from '@vueuse/core';
-import { defineStore, storeToRefs } from 'pinia';
-import { computed, onMounted, ref, watch } from 'vue';
+import { createGlobalState, useWebSocket } from '@vueuse/core'
+import { computed, onMounted, ref, watch } from 'vue'
 
-import { useProfile, useYoutubeModuleSettings } from '@/api/index.js';
+import { useProfile, useYoutubeModuleSettings } from '@/api/index.js'
 
-export type Video = {
+export interface Video {
 	id: string
 	channelId: string
 	createdAt: string
@@ -19,15 +18,39 @@ export type Video = {
 	videoId: string
 }
 
-export const useYoutubeSocket = defineStore('youtubeSocket', () => {
-	const youtubeModuleManager = useYoutubeModuleSettings();
-	const { data: youtubeSettings } = youtubeModuleManager.getAll();
-	const youtubeModuleUpdater = youtubeModuleManager.update();
+export const useYoutubeSocket = createGlobalState(() => {
+	const youtubeModuleManager = useYoutubeModuleSettings()
+	const { data: youtubeSettings } = youtubeModuleManager.getAll()
+	const youtubeModuleUpdater = youtubeModuleManager.update()
 
-	const videos = ref<Video[]>([]);
-	const currentVideo = computed(() => videos.value[0]);
+	const videos = ref<Video[]>([])
+	const currentVideo = computed(() => videos.value[0])
 
-	const { data: userProfile } = storeToRefs(useProfile());
+	const { data: userProfile } = useProfile()
+
+	const socketUrl = computed(() => {
+		if (!userProfile?.value) return
+
+		const host = window.location.host
+		const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
+		return `${protocol}://${host}/socket/youtube?apiKey=${userProfile.value.apiKey}`
+	})
+
+	const websocket = useWebSocket(socketUrl, {
+		immediate: false,
+		autoReconnect: {
+			delay: 1000,
+		},
+	})
+
+	function callWsSkip(ids: string | string[]) {
+		const request = JSON.stringify({
+			eventName: 'skip',
+			data: Array.isArray(ids) ? ids : [ids],
+		})
+
+		websocket.send(request)
+	}
 
 	async function banUser(userId: string) {
 		await youtubeModuleUpdater.mutateAsync({
@@ -41,10 +64,10 @@ export const useYoutubeSocket = defineStore('youtubeSocket', () => {
 					],
 				},
 			},
-		});
+		})
 
-		callWsSkip(videos.value.filter(video => video.orderedById === userId).map(video => video.id));
-		videos.value = videos.value.filter(video => video.orderedById !== userId);
+		callWsSkip(videos.value.filter(video => video.orderedById === userId).map(video => video.id))
+		videos.value = videos.value.filter(video => video.orderedById !== userId)
 	}
 
 	async function banSong(videoId: string) {
@@ -59,99 +82,75 @@ export const useYoutubeSocket = defineStore('youtubeSocket', () => {
 					],
 				},
 			},
-		});
+		})
 
-		const video = videos.value.find(video => video.videoId === videoId);
+		const video = videos.value.find(video => video.videoId === videoId)
 
-		callWsSkip(video!.id);
-		videos.value = videos.value.filter(video => video.videoId !== videoId);
+		callWsSkip(video!.id)
+		videos.value = videos.value.filter(video => video.videoId !== videoId)
 	}
 
-	const socketUrl = computed(() => {
-		if (!userProfile?.value) return;
-
-		const host = window.location.host;
-		const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
-		return `${protocol}://${host}/socket/youtube?apiKey=${userProfile.value.apiKey}`;
-	});
-
-	const websocket = useWebSocket(socketUrl, {
-		immediate: false,
-		autoReconnect: {
-			delay: 1000,
-		},
-	});
-
 	watch(websocket.data, (data) => {
-		const parsedData = JSON.parse(data);
+		const parsedData = JSON.parse(data)
 		if (parsedData.eventName === 'currentQueue') {
-			const incomingVideos = parsedData.data;
+			const incomingVideos = parsedData.data
 
-			videos.value = incomingVideos;
+			videos.value = incomingVideos
 		}
 
 		if (parsedData.eventName === 'newTrack') {
-			videos.value.push(parsedData.data);
+			videos.value.push(parsedData.data)
 		}
 
 		if (parsedData.eventName === 'removeTrack') {
-			videos.value = videos.value.filter(video => video.id !== parsedData.data.id);
+			videos.value = videos.value.filter(video => video.id !== parsedData.data.id)
 		}
-	});
+	})
 
 	watch(socketUrl, (v) => {
-		if (!v) return;
-		websocket.open();
-	});
+		if (!v) return
+		websocket.open()
+	})
 
 	onMounted(() => {
 		if (websocket.status.value !== 'OPEN' && socketUrl.value) {
-			websocket.open();
+			websocket.open()
 		}
-	});
+	})
 
-	const callWsSkip = (ids: string | string[]) => {
-		const request = JSON.stringify({
-			eventName: 'skip',
-			data: Array.isArray(ids) ? ids : [ids],
-		});
-
-		websocket.send(request);
-	};
-
-	const nextVideo = () => {
-		callWsSkip(currentVideo.value.id);
-		videos.value = videos.value.slice(1);
-	};
+	function nextVideo() {
+		callWsSkip(currentVideo.value.id)
+		videos.value = videos.value.slice(1)
+	}
 
-	const deleteVideo = (id: string) => {
-		callWsSkip(id);
-		videos.value = videos.value.filter(video => video.id !== id);
-	};
+	function deleteVideo(id: string) {
+		callWsSkip(id)
+		videos.value = videos.value.filter(video => video.id !== id)
+	}
 
-	const deleteAllVideos = () => {
-		callWsSkip(videos.value.map(video => video.id));
-		videos.value = [];
-	};
+	function deleteAllVideos() {
+		callWsSkip(videos.value.map(video => video.id))
+		videos.value = []
+	}
 
-	const moveVideo = (id: string, newPosition: number) => {
-		const currentIndex = videos.value.findIndex(video => video.id === id);
-		const itemToMove = videos.value.splice(currentIndex, 1)[0];
-		videos.value.splice(newPosition, 0, itemToMove);
+	function moveVideo(id: string, newPosition: number) {
+		const currentIndex = videos.value.findIndex(video => video.id === id)
+		const itemToMove = videos.value.splice(currentIndex, 1)[0]
+		videos.value.splice(newPosition, 0, itemToMove)
 
 		videos.value.forEach((video, index) => {
-			video.queuePosition = index + 1;
-		});
+			video.queuePosition = index + 1
+		})
 
 		const request = JSON.stringify({
 			eventName: 'reorder',
 			data: videos.value,
-		});
-		websocket.send(request);
-	};
+		})
+		websocket.send(request)
+	}
 
-	const sendPlaying = () => {
-		if (!currentVideo.value) return;
+	function sendPlaying() {
+		if (!currentVideo.value) return
 
 		const request = JSON.stringify({
 			eventName: 'play',
@@ -159,9 +158,9 @@ export const useYoutubeSocket = defineStore('youtubeSocket', () => {
 				id: currentVideo.value.id,
 				duration: currentVideo.value.duration,
 			},
-		});
-		websocket.send(request);
-	};
+		})
+		websocket.send(request)
+	}
 
 	return {
 		videos,
@@ -173,5 +172,5 @@ export const useYoutubeSocket = defineStore('youtubeSocket', () => {
 		sendPlaying,
 		banUser,
 		banSong,
-	};
-});
+	}
+})
diff --git a/frontend/dashboard/src/components/songRequests/player.vue b/frontend/dashboard/src/components/songRequests/player.vue
index f61da5eda..a7afde41a 100644
--- a/frontend/dashboard/src/components/songRequests/player.vue
+++ b/frontend/dashboard/src/components/songRequests/player.vue
@@ -1,68 +1,77 @@
 <script lang="ts" setup>
-import 'plyr/dist/plyr.css';
+import 'plyr/dist/plyr.css'
 import {
-	IconEyeOff,
+	IconBan,
 	IconEye,
-	IconSettings,
+	IconEyeOff,
+	IconLink,
+	IconPlayerPauseFilled,
+	IconPlayerPlayFilled,
+	IconPlayerSkipForwardFilled,
 	IconPlaylist,
+	IconSettings,
 	IconUser,
-	IconLink,
 	IconVolume,
 	IconVolume3,
-	IconPlayerPlayFilled,
-	IconPlayerSkipForwardFilled,
-	IconPlayerPauseFilled,
-	IconBan,
-} from '@tabler/icons-vue';
-import { useLocalStorage } from '@vueuse/core';
+} from '@tabler/icons-vue'
+import { useLocalStorage } from '@vueuse/core'
 import {
 	NCard,
-	NButton,
-	NSpace,
+	NEmpty,
 	NList,
 	NListItem,
+	NPopconfirm,
+	NResult,
 	NSlider,
-	NGrid,
-	NGridItem,
-	NEmpty,
 	NSpin,
-	NResult,
-	NPopconfirm,
-} from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import Plyr from 'plyr';
-import { ref, onMounted, watch, onUnmounted, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+} from 'naive-ui'
+import Plyr from 'plyr'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { useProfile } from '@/api/index.js';
-import { useYoutubeSocket } from '@/components/songRequests/hook.js';
-import { convertMillisToTime } from '@/helpers/convertMillisToTime.js';
+import { useProfile } from '@/api/index.js'
+import { useYoutubeSocket } from '@/components/songRequests/hook.js'
+import { Button } from '@/components/ui/button'
+import { convertMillisToTime } from '@/helpers/convertMillisToTime.js'
 
 const props = defineProps<{
 	noCookie: boolean
 	openSettingsModal: () => void
-}>();
+}>()
 
-const socket = useYoutubeSocket();
-const { currentVideo } = storeToRefs(socket);
+const {
+	currentVideo,
+	nextVideo,
+	sendPlaying,
+	banSong,
+	banUser,
+} = useYoutubeSocket()
 
-const player = ref<HTMLVideoElement>();
-const plyr = ref<Plyr>();
+const player = ref<HTMLVideoElement>()
+const plyr = ref<Plyr>()
 
-const playNext = () => {
-	socket.nextVideo();
+function playNext() {
+	nextVideo()
 
 	plyr.value!.once('ready', () => {
-		plyr.value!.play();
-	});
-};
+		plyr.value!.play()
+	})
+}
+
+const isPlaying = ref(false)
+const sliderTime = ref(0)
 
-const isPlaying = ref(false);
-const sliderTime = ref(0);
-const volume = useLocalStorage('twirPlayerVolume', 10);
+const volume = useLocalStorage('twirPlayerVolume', 10)
+const playerDisplay = useLocalStorage('twirPlayerIsHidden', 'block')
+const isMuted = useLocalStorage('twirPlayerIsMuted', false)
+
+watch(isMuted, (v) => {
+	if (!plyr.value) return
+	plyr.value.muted = v
+})
 
 onMounted(() => {
-	if (!player.value) return;
+	if (!player.value) return
 
 	plyr.value = new Plyr(player.value, {
 		controls: ['fullscreen', 'settings'],
@@ -70,44 +79,45 @@ onMounted(() => {
 		hideControls: true,
 		clickToPlay: false,
 		youtube: { noCookie: props.noCookie },
-	});
+	})
 
 	plyr.value.on('play', () => {
-		isPlaying.value = true;
-		plyr.value!.volume = volume.value / 100;
-		socket.sendPlaying();
-	});
+		isPlaying.value = true
+		plyr.value!.volume = volume.value / 100
+		plyr.value!.muted = isMuted.value
+		sendPlaying()
+	})
 
 	plyr.value.on('pause', () => {
-		isPlaying.value = false;
-	});
+		isPlaying.value = false
+	})
 
 	plyr.value.on('timeupdate', () => {
-		sliderTime.value = plyr.value!.currentTime;
-	});
+		sliderTime.value = plyr.value!.currentTime
+	})
 
 	plyr.value.on('ended', () => {
 		// if (!props.nextVideo) return;
-		playNext();
-	});
-});
+		playNext()
+	})
+})
 
-const isFirstLoad = ref(true);
+const isFirstLoad = ref(true)
 watch(currentVideo, (video) => {
-	if (!plyr.value) return;
+	if (!plyr.value) return
 	if (!video) {
 		plyr.value.source = {
 			type: 'video',
 			sources: [],
-		};
-		plyr.value.stop();
-		return;
+		}
+		plyr.value.stop()
+		return
 	}
 
 	if (!isFirstLoad.value) {
 		plyr.value!.once('ready', () => {
-			plyr.value!.play();
-		});
+			plyr.value!.play()
+		})
 	}
 
 	plyr.value.source = {
@@ -119,62 +129,54 @@ watch(currentVideo, (video) => {
 			},
 		],
 		title: '',
-	};
-	isFirstLoad.value = false;
-});
+	}
+	isFirstLoad.value = false
+})
 
 onUnmounted(() => {
-	if (!plyr.value) return;
-	plyr.value.destroy();
-});
-
-const playerDisplay = useLocalStorage<string>('twirPlayerIsHidden', 'block');
-const isMuted = useLocalStorage('twirPlayerIsMuted', false);
+	if (!plyr.value) return
+	plyr.value.destroy()
+})
 
 watch(volume, (value) => {
-	if (!plyr.value) return;
+	if (!plyr.value) return
 
 	if (value === 0) {
-		isMuted.value = true;
-		plyr.value.muted = true;
+		isMuted.value = true
+		plyr.value.muted = true
 	} else {
-		isMuted.value = false;
-		plyr.value!.volume = value / 100;
+		isMuted.value = false
+		plyr.value!.volume = value / 100
 	}
-});
-
-watch(isMuted, (v) => {
-	if (!plyr.value) return;
-	plyr.value.muted = v;
-});
+})
 
 const sliderVolume = computed(() => {
-	if (isMuted.value) return 0;
-	return volume.value;
-});
-const formatLabelTime = (v: number) => {
-	return `${convertMillisToTime(v * 1000)}/${convertMillisToTime((plyr.value?.duration ?? 0) * 1000)}`;
-};
+	if (isMuted.value) return 0
+	return volume.value
+})
 
-const { data: profile } = storeToRefs(useProfile());
+function formatLabelTime(v: number) {
+	return `${convertMillisToTime(v * 1000)}/${convertMillisToTime((plyr.value?.duration ?? 0) * 1000)}`
+}
 
-const { t } = useI18n();
+const { data: profile } = useProfile()
+const { t } = useI18n()
 </script>
 
 <template>
-	<n-card
+	<NCard
 		:title="t('songRequests.player.title')"
 		content-style="padding: 0;"
 		header-style="padding: 10px;"
 		segmented
 	>
-		<div v-if="profile?.id != profile?.selectedDashboardId" class="p-2.5">
-			<n-result
+		<div v-if="profile?.id !== profile?.selectedDashboardId" class="p-2.5">
+			<NResult
 				status="404"
 				:title="t('songRequests.player.noAccess')"
 				size="small"
 			>
-			</n-result>
+			</NResult>
 		</div>
 
 		<div v-else>
@@ -186,165 +188,154 @@ const { t } = useI18n();
 				class="plyr"
 			></video>
 
-			<n-space vertical class="px-3.5">
-				<n-grid
-					cols="1 s:1 m:1 l:1 xl:5"
-					responsive="screen"
-					:x-gap="10"
-					:y-gap="10"
-					class="items-center my-2.5"
-				>
-					<n-grid-item :span="1" class="w-full">
-						<n-space align="center" justify="center">
-							<n-button
-								size="tiny"
-								text
-								round
-								:disabled="currentVideo == null"
-								class="flex"
-								@click="isPlaying ? plyr?.pause() : plyr?.play()"
-							>
-								<IconPlayerPlayFilled v-if="!isPlaying" />
-								<IconPlayerPauseFilled v-else />
-							</n-button>
-							<n-button
-								class="flex"
-								size="tiny"
-								text
-								round
-								:disabled="currentVideo == null"
-								@click="playNext"
-							>
-								<IconPlayerSkipForwardFilled />
-							</n-button>
-						</n-space>
-					</n-grid-item>
-
-					<n-grid-item :span="2">
-						<n-slider
-							v-model:value="sliderTime"
-							:format-tooltip="formatLabelTime"
-							:step="1"
-							:max="plyr?.duration ?? 0"
-							placement="bottom"
-							:disabled="!currentVideo"
-							@update-value="(v) => {
-								plyr!.currentTime = v
-							}"
-						/>
-					</n-grid-item>
-
-					<n-grid-item :span="2">
-						<n-space :wrap-item="false" :wrap="false" align="center">
-							<n-button size="tiny" text round>
-								<IconVolume v-if="!isMuted" @click="isMuted = true" />
-								<IconVolume3 v-else @click="isMuted = false" />
-							</n-button>
-							<n-slider :value="sliderVolume" :step="1" @update-value="(v) => volume = v" />
-						</n-space>
-					</n-grid-item>
-				</n-grid>
-			</n-space>
+			<div class="flex flex-col gap-4 py-5 px-6">
+				<div class="flex gap-2 items-center">
+					<Button
+						size="icon"
+						class="flex size-8 min-w-8"
+						variant="secondary"
+						:disabled="currentVideo == null"
+						@click="isPlaying ? plyr?.pause() : plyr?.play()"
+					>
+						<IconPlayerPlayFilled v-if="!isPlaying" class="size-4" />
+						<IconPlayerPauseFilled v-else class="size-4" />
+					</Button>
+
+					<Button
+						size="icon"
+						class="flex size-8 min-w-8"
+						variant="secondary"
+						:disabled="currentVideo == null"
+						@click="playNext"
+					>
+						<IconPlayerSkipForwardFilled class="size-4" />
+					</Button>
+
+					<NSlider
+						v-model:value="sliderTime"
+						:format-tooltip="formatLabelTime"
+						:step="1"
+						:max="plyr?.duration ?? 0"
+						placement="bottom"
+						:disabled="!currentVideo"
+						@update-value="(v) => {
+							plyr!.currentTime = v
+						}"
+					/>
+				</div>
+
+				<div class="flex items-center gap-2">
+					<Button
+						size="icon"
+						variant="secondary"
+						class="size-8 min-w-8"
+						@click="isMuted = !isMuted"
+					>
+						<IconVolume v-if="!isMuted" class="size-4" />
+						<IconVolume3 v-else class="size-4" />
+					</Button>
+					<NSlider :value="sliderVolume" :step="1" @update-value="(v) => volume = v" />
+				</div>
+			</div>
 		</div>
 
 		<template #header-extra>
-			<n-space :wrap="false" :wrap-item="false">
-				<n-button
-					tertiary size="small"
+			<div class="flex gap-2">
+				<Button
+					variant="secondary"
+					size="icon"
+					class="size-8"
 					@click="playerDisplay = playerDisplay === 'block' ? 'none' : 'block'"
 				>
-					<IconEyeOff v-if="playerDisplay === 'block'" />
-					<IconEye v-else />
-				</n-button>
-				<n-button tertiary size="small" @click="openSettingsModal">
-					<IconSettings />
-				</n-button>
-			</n-space>
+					<IconEyeOff v-if="playerDisplay === 'block'" class="size-4" />
+					<IconEye v-else class="size-4" />
+				</Button>
+				<Button
+					variant="secondary"
+					size="icon"
+					class="size-8"
+					@click="openSettingsModal"
+				>
+					<IconSettings class="size-4" />
+				</Button>
+			</div>
 		</template>
 		<template #footer>
 			<template v-if="currentVideo">
-				<n-list :show-divider="false">
-					<n-list-item>
+				<NList :show-divider="false">
+					<NListItem>
 						<template #prefix>
 							<IconPlaylist class="flex" />
 						</template>
 
 						{{ currentVideo?.title }}
-					</n-list-item>
+					</NListItem>
 
-					<n-list-item>
+					<NListItem>
 						<template #prefix>
 							<IconUser class="card-icon" />
 						</template>
 
 						{{ currentVideo?.orderedByDisplayName || currentVideo?.orderedByName }}
-					</n-list-item>
+					</NListItem>
 
-					<n-list-item>
+					<NListItem>
 						<template #prefix>
 							<IconLink class="card-icon" />
 						</template>
 
-						<n-button
-							tag="a"
-							type="primary"
-							text
+						<a
+							class="underline"
 							:href="currentVideo.songLink ?? `https://youtu.be/${currentVideo?.videoId}`"
 							target="_blank"
 						>
 							{{ currentVideo.songLink || `youtu.be/${currentVideo?.videoId}` }}
-						</n-button>
-					</n-list-item>
-				</n-list>
-				<n-space justify="end">
-					<n-popconfirm
+						</a>
+					</NListItem>
+				</NList>
+				<div class="flex gap-2 justify-end">
+					<NPopconfirm
 						:positive-text="t('deleteConfirmation.confirm')"
 						:negative-text="t('deleteConfirmation.cancel')"
-						@positive-click="() => socket.banSong(currentVideo.videoId)"
+						@positive-click="() => banSong(currentVideo.videoId)"
 					>
 						<template #trigger>
-							<n-button
-								secondary
-								type="warning"
-							>
+							<Button size="sm" variant="destructive">
 								<div class="flex gap-1 items-center">
 									<IconBan />
 									{{ t('songRequests.ban.song') }}
 								</div>
-							</n-button>
+							</Button>
 						</template>
 
 						{{ t('songRequests.ban.songConfirm') }}
-					</n-popconfirm>
-					<n-popconfirm
+					</NPopconfirm>
+					<NPopconfirm
 						:positive-text="t('deleteConfirmation.confirm')"
 						:negative-text="t('deleteConfirmation.cancel')"
-						@positive-click="() => socket.banUser(currentVideo.orderedById)
+						@positive-click="() => banUser(currentVideo.orderedById)
 						"
 					>
 						<template #trigger>
-							<n-button
-								secondary
-								type="error"
-							>
+							<Button size="sm" variant="destructive">
 								<div class="flex gap-1 items-center">
 									<IconBan />
 									{{ t('songRequests.ban.user') }}
 								</div>
-							</n-button>
+							</Button>
 						</template>
 
 						{{ t('songRequests.ban.userConfirm') }}
-					</n-popconfirm>
-				</n-space>
+					</NPopconfirm>
+				</div>
 			</template>
-			<n-empty v-else :description="t('songRequests.waiting')">
+			<NEmpty v-else :description="t('songRequests.waiting')">
 				<template #icon>
-					<n-spin size="small" stroke="#959596" />
+					<NSpin size="small" stroke="#959596" />
 				</template>
-			</n-empty>
+			</NEmpty>
 		</template>
-	</n-card>
+	</NCard>
 </template>
 
 <style>
diff --git a/frontend/dashboard/src/components/songRequests/queue.vue b/frontend/dashboard/src/components/songRequests/queue.vue
index 6706fa0b1..aad414334 100644
--- a/frontend/dashboard/src/components/songRequests/queue.vue
+++ b/frontend/dashboard/src/components/songRequests/queue.vue
@@ -1,21 +1,24 @@
 <script setup lang="ts">
-import { dragAndDrop } from '@formkit/drag-and-drop/vue';
+import { dragAndDrop } from '@formkit/drag-and-drop/vue'
 import {
-	IconTrash,
 	IconBan,
 	IconGripVertical,
-} from '@tabler/icons-vue';
+	IconTrash,
+} from '@tabler/icons-vue'
 import {
 	NCard,
-	NButton,
-	NTime,
 	NPopconfirm,
-} from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+	NTime,
+} from 'naive-ui'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { useYoutubeSocket, Video } from '@/components/songRequests/hook.js';
+import ActionConfirm from '../ui/action-confirm.vue'
+
+import type { Video } from '@/components/songRequests/hook.js'
+
+import { useYoutubeSocket } from '@/components/songRequests/hook.js'
+import { Button } from '@/components/ui/button'
 import {
 	Table,
 	TableBody,
@@ -23,44 +26,58 @@ import {
 	TableHead,
 	TableHeader,
 	TableRow,
-} from '@/components/ui/table';
-import { convertMillisToTime } from '@/helpers/convertMillisToTime.js';
+} from '@/components/ui/table'
+import { convertMillisToTime } from '@/helpers/convertMillisToTime.js'
 
-const socket = useYoutubeSocket();
-const { videos } = storeToRefs(socket);
+const {
+	videos,
+	moveVideo,
+	banSong,
+	banUser,
+	deleteVideo,
+	deleteAllVideos,
+} = useYoutubeSocket()
 
-const { t } = useI18n();
+const { t } = useI18n()
 
 const totalSongsLength = computed(() => {
-	return convertMillisToTime(videos.value.reduce((acc, cur) => acc + cur.duration * 1000, 0));
-});
+	return convertMillisToTime(videos.value.reduce((acc, cur) => acc + cur.duration * 1000, 0))
+})
 
-const parentRef = ref<HTMLElement>();
+const parentRef = ref<HTMLElement>()
 dragAndDrop({
 	parent: parentRef,
 	values: videos,
 	dragHandle: '.drag-handle',
 	draggable(child) {
-		return !child.classList.contains('no-drag');
+		return !child.classList.contains('no-drag')
 	},
 	handleEnd(data) {
-		const item = data.targetData.node.data.value as Video;
-		socket.moveVideo(item.id, data.targetData.node.data.index);
+		const item = data.targetData.node.data.value as Video
+		moveVideo(item.id, data.targetData.node.data.index)
 	},
-});
+})
+
+const showConfirmClear = ref(false)
 </script>
 
 <template>
-	<n-card
+	<NCard
 		:title="t('songRequests.table.title')"
 		content-style="padding: 0;"
 		header-style="padding: 10px;"
 		segmented
 	>
 		<template #header-extra>
-			<n-button tertiary size="small" @click="$emit('deleteAllVideos')">
-				<IconTrash />
-			</n-button>
+			<Button
+				size="icon"
+				class="size-8"
+				variant="secondary"
+				:disabled="!videos.length"
+				@click="showConfirmClear = true"
+			>
+				<IconTrash class="size-4" />
+			</Button>
 		</template>
 		<Table class="w-full">
 			<TableHeader>
@@ -92,47 +109,47 @@ dragAndDrop({
 						<div class="flex items-center gap-2">
 							<span>{{ video.title }}</span>
 
-							<n-popconfirm
+							<NPopconfirm
 								:positive-text="t('deleteConfirmation.confirm')"
 								:negative-text="t('deleteConfirmation.cancel')"
-								@positive-click="socket.banSong(video.videoId)"
+								@positive-click="banSong(video.videoId)"
 							>
 								<template #trigger>
-									<n-button size="tiny" text>
-										<IconBan />
-									</n-button>
+									<Button class="min-w-5" size="icon" variant="ghost">
+										<IconBan class="size-5" />
+									</Button>
 								</template>
 								{{ t('songRequests.ban.songConfirm') }}
-							</n-popconfirm>
+							</NPopconfirm>
 						</div>
 					</TableCell>
 					<TableCell>
 						<div class="flex items-center gap-2">
 							<span>{{ video.orderedByDisplayName || video.orderedByName }}</span>
-							<n-popconfirm
+							<NPopconfirm
 								:positive-text="t('deleteConfirmation.confirm')"
 								:negative-text="t('deleteConfirmation.cancel')"
-								@positive-click="socket.banUser(video.orderedById)"
+								@positive-click="banUser(video.orderedById)"
 							>
 								<template #trigger>
-									<n-button size="tiny" text>
-										<IconBan />
-									</n-button>
+									<Button class="min-w-5" size="icon" variant="ghost">
+										<IconBan class="size-5" />
+									</Button>
 								</template>
 								{{ t('songRequests.ban.userConfirm') }}
-							</n-popconfirm>
+							</NPopconfirm>
 						</div>
 					</TableCell>
 					<TableCell>
-						<n-time type="relative" :time="0" :to="Date.now() - new Date(video.createdAt).getTime()" />
+						<NTime type="relative" :time="0" :to="Date.now() - new Date(video.createdAt).getTime()" />
 					</TableCell>
 					<TableCell>
 						{{ convertMillisToTime(video.duration * 1000) }}
 					</TableCell>
 					<TableCell>
-						<n-button size="tiny" type="error" text @click="socket.deleteVideo(video.id)">
-							<IconTrash />
-						</n-button>
+						<Button class="min-w-5" size="icon" variant="destructive" @click="deleteVideo(video.id)">
+							<IconTrash class="size-5" />
+						</Button>
 					</TableCell>
 				</TableRow>
 				<TableRow class="no-drag">
@@ -150,5 +167,11 @@ dragAndDrop({
 				</TableRow>
 			</TableBody>
 		</Table>
-	</n-card>
+	</NCard>
+
+	<ActionConfirm
+		v-model:open="showConfirmClear"
+		:confirm-text="t('songRequests.settings.confirmClearQueue')"
+		@confirm="deleteAllVideos"
+	/>
 </template>
diff --git a/frontend/dashboard/src/components/variable-input.vue b/frontend/dashboard/src/components/variable-input.vue
index dbe42455c..75f550333 100644
--- a/frontend/dashboard/src/components/variable-input.vue
+++ b/frontend/dashboard/src/components/variable-input.vue
@@ -1,6 +1,5 @@
 <script setup lang='ts'>
 import { NMention, NText } from 'naive-ui'
-import { storeToRefs } from 'pinia'
 import { computed, h } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -24,7 +23,7 @@ defineSlots<{
 const text = defineModel<string>({ default: '' })
 const { t } = useI18n()
 
-const { allVariables } = storeToRefs(useVariablesApi())
+const { allVariables } = useVariablesApi()
 
 const selectVariables = computed<MentionOption[]>(() => {
 	return allVariables.value.map((variable) => ({
diff --git a/frontend/dashboard/src/composables/use-layout.ts b/frontend/dashboard/src/composables/use-layout.ts
index e6aeed3b0..8a0780153 100644
--- a/frontend/dashboard/src/composables/use-layout.ts
+++ b/frontend/dashboard/src/composables/use-layout.ts
@@ -1,7 +1,7 @@
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { ref } from 'vue'
 
-export const useLayout = defineStore('layout', () => {
+export const useLayout = createGlobalState(() => {
 	const layoutRef = ref<HTMLElement | null>(null)
 
 	function scrollToTop() {
@@ -17,6 +17,6 @@ export const useLayout = defineStore('layout', () => {
 	return {
 		layoutRef,
 		scrollToTop,
-		scrollToBottom
+		scrollToBottom,
 	}
 })
diff --git a/frontend/dashboard/src/composables/use-notifications.ts b/frontend/dashboard/src/composables/use-notifications.ts
index 46b751372..1b3737a50 100644
--- a/frontend/dashboard/src/composables/use-notifications.ts
+++ b/frontend/dashboard/src/composables/use-notifications.ts
@@ -1,12 +1,11 @@
-import { useLocalStorage } from '@vueuse/core'
-import { defineStore } from 'pinia'
+import { createGlobalState, useLocalStorage } from '@vueuse/core'
 import { computed } from 'vue'
 
 import { useQueryNotifications } from '@/api/admin/notifications.js'
 
 const NOTIFICATIONS_STORAGE_KEY = 'twirNotificationsCounter'
 
-export const useNotifications = defineStore('notifications', () => {
+export const useNotifications = createGlobalState(() => {
 	const notifications = useQueryNotifications()
 
 	const notificationsStorage = useLocalStorage<string[]>(NOTIFICATIONS_STORAGE_KEY, [])
@@ -25,12 +24,12 @@ export const useNotifications = defineStore('notifications', () => {
 			onRead: (state: boolean) => {
 				if (state) return
 				notificationsStorage.value = notificationsIds
-			}
+			},
 		}
 	})
 
 	return {
 		notifications,
-		notificationsCounter
+		notificationsCounter,
 	}
 })
diff --git a/frontend/dashboard/src/features/admin-panel/manage-badges/components/badges-form.vue b/frontend/dashboard/src/features/admin-panel/manage-badges/components/badges-form.vue
index 23972fec7..f9aa21bdf 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-badges/components/badges-form.vue
+++ b/frontend/dashboard/src/features/admin-panel/manage-badges/components/badges-form.vue
@@ -24,7 +24,7 @@ const badgesForm = useBadgesForm()
 					{{ t('adminPanel.manageBadges.name') }}
 				</Label>
 				<Input
-					v-model="badgesForm.nameField.fieldModel"
+					v-model="badgesForm.nameField.fieldModel.value"
 					name="name"
 					type="text"
 					placeholder=""
@@ -37,7 +37,7 @@ const badgesForm = useBadgesForm()
 					{{ t('adminPanel.manageBadges.slot') }}
 				</Label>
 				<Input
-					v-model="badgesForm.slotField.fieldModel"
+					v-model="badgesForm.slotField.fieldModel.value"
 					name="slot"
 					type="text"
 					inputmode="numeric"
@@ -61,11 +61,11 @@ const badgesForm = useBadgesForm()
 				</div>
 			</div>
 
-			<div v-if="badgesForm.isImageFile">
+			<div v-if="badgesForm.isImageFile.value">
 				<Label>
 					{{ t('adminPanel.manageBadges.preview') }}
 				</Label>
-				<BadgesPreview class="mt-2" :image="badgesForm.formValues.image!" />
+				<BadgesPreview class="mt-2" :image="badgesForm.formValues.value.image!" />
 			</div>
 
 			<div class="flex justify-end gap-4">
diff --git a/frontend/dashboard/src/features/admin-panel/manage-badges/components/badges-list.vue b/frontend/dashboard/src/features/admin-panel/manage-badges/components/badges-list.vue
index 0e6c11578..b5837a679 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-badges/components/badges-list.vue
+++ b/frontend/dashboard/src/features/admin-panel/manage-badges/components/badges-list.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { EditIcon, MoreVerticalIcon, ToggleLeftIcon, ToggleRightIcon, TrashIcon, UserIcon } from 'lucide-vue-next'
 import { NCard, NTime } from 'naive-ui'
-import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
 import BadgesPreview from './badges-preview.vue'
@@ -16,12 +15,12 @@ import {
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuSeparator,
-	DropdownMenuTrigger
+	DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 
 const { t } = useI18n()
 
-const { badges } = storeToRefs(useBadges())
+const { badges } = useBadges()
 const badgesActions = useBadgesActions()
 </script>
 
@@ -102,7 +101,7 @@ const badgesActions = useBadgesActions()
 	</div>
 
 	<ActionConfirm
-		v-model:open="badgesActions.isShowModalDelete"
+		v-model:open="badgesActions.isShowModalDelete.value"
 		@confirm="badgesActions.deleteBadge()"
 	/>
 </template>
diff --git a/frontend/dashboard/src/features/admin-panel/manage-badges/composables/use-badges-actions.ts b/frontend/dashboard/src/features/admin-panel/manage-badges/composables/use-badges-actions.ts
index 7e35396af..11ef43743 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-badges/composables/use-badges-actions.ts
+++ b/frontend/dashboard/src/features/admin-panel/manage-badges/composables/use-badges-actions.ts
@@ -1,4 +1,4 @@
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -10,7 +10,7 @@ import type { Badge } from '@/gql/graphql'
 
 import { useLayout } from '@/composables/use-layout.js'
 
-export const useBadgesActions = defineStore('manage-badges/badges-actions', () => {
+export const useBadgesActions = createGlobalState(() => {
 	const layout = useLayout()
 	const badgesForm = useBadgesForm()
 	const { badgesDelete, badgesUpdate } = useBadges()
@@ -29,17 +29,17 @@ export const useBadgesActions = defineStore('manage-badges/badges-actions', () =
 	}
 
 	function editBadge(badge: Badge) {
-		badgesForm.editableBadgeId = badge.id
-		badgesForm.nameField.fieldModel = badge.name
-		badgesForm.fileField.fieldModel = badge.fileUrl
-		badgesForm.slotField.fieldModel = badge.ffzSlot
+		badgesForm.editableBadgeId.value = badge.id
+		badgesForm.nameField.fieldModel.value = badge.name
+		badgesForm.fileField.fieldModel.value = badge.fileUrl
+		badgesForm.slotField.fieldModel.value = badge.ffzSlot
 		layout.scrollToTop()
 	}
 
 	function toggleBadgeEnabled(badge: Badge) {
 		badgesUpdate.executeMutation({
 			id: badge.id,
-			opts: { enabled: !badge.enabled }
+			opts: { enabled: !badge.enabled },
 		})
 	}
 
@@ -50,7 +50,7 @@ export const useBadgesActions = defineStore('manage-badges/badges-actions', () =
 
 	function applyUserSearchBadgeFilter(badge: Badge): void {
 		userFilters.clearFilters()
-		userFilters.selectedBadges.push(badge.id)
+		userFilters.selectedBadges.value.push(badge.id)
 		router.push({ query: { tab: 'users' } })
 	}
 
@@ -60,6 +60,6 @@ export const useBadgesActions = defineStore('manage-badges/badges-actions', () =
 		deleteBadge,
 		toggleBadgeEnabled,
 		showModalDeleteBadge,
-		applyUserSearchBadgeFilter
+		applyUserSearchBadgeFilter,
 	}
 })
diff --git a/frontend/dashboard/src/features/admin-panel/manage-badges/composables/use-badges-form.ts b/frontend/dashboard/src/features/admin-panel/manage-badges/composables/use-badges-form.ts
index 65d596bf1..df309760b 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-badges/composables/use-badges-form.ts
+++ b/frontend/dashboard/src/features/admin-panel/manage-badges/composables/use-badges-form.ts
@@ -1,5 +1,5 @@
 import { toTypedSchema } from '@vee-validate/zod'
-import { defineStore, storeToRefs } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import * as z from 'zod'
 
@@ -10,12 +10,11 @@ import { useFormField } from '@/composables/use-form-field.js'
 const formSchema = toTypedSchema(z.object({
 	name: z.string(),
 	slot: z.number(),
-	image: z.any()
+	image: z.any(),
 }))
 
-export const useBadgesForm = defineStore('admin-panel/badges-form', () => {
-	const badgesApi = useBadges()
-	const { badges } = storeToRefs(badgesApi)
+export const useBadgesForm = createGlobalState(() => {
+	const { badges, badgesUpdate, badgesCreate } = useBadges()
 
 	const editableBadgeId = ref<string | null>(null)
 	const isEditableForm = computed(() => Boolean(editableBadgeId.value))
@@ -29,7 +28,7 @@ export const useBadgesForm = defineStore('admin-panel/badges-form', () => {
 		},
 		set(el: any) {
 			fileField.fieldRef.value = el?.$el
-		}
+		},
 	})
 
 	watch(badges, (badges) => {
@@ -43,7 +42,7 @@ export const useBadgesForm = defineStore('admin-panel/badges-form', () => {
 		return {
 			name: nameField.fieldModel.value,
 			image: fileField.fieldModel.value,
-			slot: slotField.fieldModel.value
+			slot: slotField.fieldModel.value,
 		}
 	})
 	const isFormDirty = computed(() => Boolean(formValues.value.name || formValues.value.image))
@@ -58,21 +57,21 @@ export const useBadgesForm = defineStore('admin-panel/badges-form', () => {
 				return
 
 			if (editableBadgeId.value) {
-				await badgesApi.badgesUpdate.executeMutation({
+				await badgesUpdate.executeMutation({
 					id: editableBadgeId.value,
 					opts: {
 						name: value.name,
 						ffzSlot: value.slot,
-						file: value.image instanceof File ? value.image : undefined
-					}
+						file: value.image instanceof File ? value.image : undefined,
+					},
 				})
 			} else {
-				await badgesApi.badgesCreate.executeMutation({
+				await badgesCreate.executeMutation({
 					opts: {
 						name: value.name,
 						file: value.image,
-						ffzSlot: value.slot
-					}
+						ffzSlot: value.slot,
+					},
 				})
 			}
 		} catch (err) {
@@ -111,6 +110,6 @@ export const useBadgesForm = defineStore('admin-panel/badges-form', () => {
 
 		onSubmit,
 		onReset,
-		setImageField
+		setImageField,
 	}
 })
diff --git a/frontend/dashboard/src/features/admin-panel/manage-badges/composables/use-badges.ts b/frontend/dashboard/src/features/admin-panel/manage-badges/composables/use-badges.ts
index e4e11de4b..84ddcd02d 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-badges/composables/use-badges.ts
+++ b/frontend/dashboard/src/features/admin-panel/manage-badges/composables/use-badges.ts
@@ -1,9 +1,9 @@
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed } from 'vue'
 
 import { useAdminBadges, useQueryBadges } from '@/api/admin/badges'
 
-export const useBadges = defineStore('admin-panel/badges', () => {
+export const useBadges = createGlobalState(() => {
 	const badgesApi = useAdminBadges()
 	const badgesCreate = badgesApi.useMutationCreateBadge()
 	const badgesDelete = badgesApi.useMutationDeleteBadge()
@@ -20,6 +20,6 @@ export const useBadges = defineStore('admin-panel/badges', () => {
 		badgesDelete,
 		badgesUpdate,
 		badgesAddUser,
-		badgesRemoveUser
+		badgesRemoveUser,
 	}
 })
diff --git a/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-form.vue b/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-form.vue
index edc20f8ce..272ed3037 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-form.vue
+++ b/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-form.vue
@@ -27,7 +27,7 @@ const { textareaRef, applyModifier } = useTextarea()
 				<Label for="userId">
 					{{ t('adminPanel.notifications.userLabel') }}
 				</Label>
-				<TwitchUserSingle v-model="notificationsForm.userIdField.fieldModel" twir-only />
+				<TwitchUserSingle v-model="notificationsForm.userIdField.fieldModel.value" twir-only />
 			</div>
 
 			<div class="space-y-2">
@@ -58,20 +58,20 @@ const { textareaRef, applyModifier } = useTextarea()
 
 					<Textarea
 						ref="textareaRef"
-						v-model="notificationsForm.messageField.fieldModel"
+						v-model="notificationsForm.messageField.fieldModel.value"
 						rows="8"
 					/>
 				</div>
 			</div>
 
-			<template v-if="notificationsForm.formValues.message">
+			<template v-if="notificationsForm.formValues.value.message">
 				<Label>{{ t('adminPanel.notifications.messagePreview') }}</Label>
-				<div class="border rounded-md p-2" v-html="notificationsForm.formValues.message"></div>
+				<div class="border rounded-md p-2" v-html="notificationsForm.formValues.value.message"></div>
 			</template>
 
 			<div class="flex justify-end gap-4">
 				<Button
-					:disabled="!notificationsForm.formValues.message && !notificationsForm.editableMessageId"
+					:disabled="!notificationsForm.formValues.value.message && !notificationsForm.editableMessageId"
 					type="button"
 					variant="secondary"
 					@click="notificationsForm.onReset"
diff --git a/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-list.vue b/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-list.vue
index 4b96ba5b0..c126de462 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-list.vue
+++ b/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-list.vue
@@ -11,11 +11,11 @@ const notifications = useNotificationsTable()
 	<NotificationsTable>
 		<template #pagination>
 			<Pagination
-				:total="notifications.totalNotifications"
+				:total="notifications.totalNotifications.value"
 				:table="notifications.table"
-				:pagination="notifications.pagination"
-				@update:page="(page) => notifications.pagination.pageIndex = page"
-				@update:page-size="(pageSize) => notifications.pagination.pageSize = pageSize"
+				:pagination="notifications.pagination.value"
+				@update:page="(page) => notifications.pagination.value.pageIndex = page"
+				@update:page-size="(pageSize) => notifications.pagination.value.pageSize = pageSize"
 			/>
 		</template>
 	</NotificationsTable>
diff --git a/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-table-search.vue b/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-table-search.vue
index beb9a7034..89296895a 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-table-search.vue
+++ b/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-table-search.vue
@@ -10,7 +10,7 @@ import {
 	SelectGroup,
 	SelectItem,
 	SelectTrigger,
-	SelectValue
+	SelectValue,
 } from '@/components/ui/select'
 import { NotificationType } from '@/gql/graphql.js'
 
@@ -21,8 +21,8 @@ const filters = useNotificationsFilters()
 
 <template>
 	<div class="flex gap-2 max-sm:w-full">
-		<SearchBar v-model="filters.searchInput" />
-		<Select v-model="filters.filterInput">
+		<SearchBar v-model="filters.searchInput.value" />
+		<Select v-model="filters.filterInput.value">
 			<SelectTrigger class="h-9 w-[120px]">
 				<SelectValue />
 			</SelectTrigger>
diff --git a/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-table.vue b/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-table.vue
index 83a2fb87e..6ea35cc69 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-table.vue
+++ b/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-table.vue
@@ -16,7 +16,7 @@ const notificationsTable = useNotificationsTable()
 	<slot name="pagination" />
 
 	<TooltipProvider :delay-duration="100">
-		<Table :table="notificationsTable.table" :is-loading="notificationsTable.isLoading">
+		<Table :table="notificationsTable.table" :is-loading="notificationsTable.isLoading.value">
 			<template #empty-message>
 				{{ t('adminPanel.notifications.emptyNotifications') }}
 			</template>
diff --git a/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-filters.ts b/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-filters.ts
index 7e3cb5e8f..5cd363e0e 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-filters.ts
+++ b/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-filters.ts
@@ -1,10 +1,9 @@
-import { refDebounced } from '@vueuse/core'
-import { defineStore } from 'pinia'
+import { createGlobalState, refDebounced } from '@vueuse/core'
 import { ref } from 'vue'
 
 import { NotificationType } from '@/gql/graphql'
 
-export const useNotificationsFilters = defineStore('admin-panel/notifications-filters', () => {
+export const useNotificationsFilters = createGlobalState(() => {
 	const searchInput = ref('')
 	const debounceSearchInput = refDebounced<string>(searchInput, 500)
 
@@ -13,6 +12,6 @@ export const useNotificationsFilters = defineStore('admin-panel/notifications-fi
 	return {
 		searchInput,
 		debounceSearchInput,
-		filterInput
+		filterInput,
 	}
 })
diff --git a/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-form.ts b/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-form.ts
index c3371f474..b028e3937 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-form.ts
+++ b/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-form.ts
@@ -1,5 +1,5 @@
 import { toTypedSchema } from '@vee-validate/zod'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import * as z from 'zod'
 
@@ -8,17 +8,17 @@ import { useFormField } from '@/composables/use-form-field'
 
 const formSchema = toTypedSchema(z.object({
 	userId: z.string().nullable(),
-	message: z.string()
+	message: z.string(),
 }))
 
-export const useNotificationsForm = defineStore('admin-panel/notifications-form', () => {
+export const useNotificationsForm = createGlobalState(() => {
 	const userIdField = useFormField<string | null>('userId', null)
 	const messageField = useFormField<string>('message', '')
 
 	const formValues = computed(() => {
 		return {
 			userId: userIdField.fieldModel.value,
-			message: messageField.fieldModel.value
+			message: messageField.fieldModel.value,
 		}
 	})
 
@@ -40,12 +40,12 @@ export const useNotificationsForm = defineStore('admin-panel/notifications-form'
 			if (editableMessageId.value) {
 				await updateNotification({
 					id: editableMessageId.value,
-					opts: { text: value.message }
+					opts: { text: value.message },
 				})
 			} else {
 				await createNotification({
 					text: value.message,
-					userId: value.userId
+					userId: value.userId,
 				})
 			}
 
@@ -74,6 +74,6 @@ export const useNotificationsForm = defineStore('admin-panel/notifications-form'
 		editableMessageId,
 		onSubmit,
 		onReset,
-		resetFieldUserId
+		resetFieldUserId,
 	}
 })
diff --git a/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-table.ts b/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-table.ts
index 3cba9c4cf..94847901e 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-table.ts
+++ b/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-table.ts
@@ -1,5 +1,5 @@
 import { type ColumnDef, getCoreRowModel, useVueTable } from '@tanstack/vue-table'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed, h } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -17,20 +17,20 @@ import { valueUpdater } from '@/helpers/value-updater.js'
 
 type Notifications = NotificationsByAdminQuery['notificationsByAdmin']['notifications']
 
-export const useNotificationsTable = defineStore('admin-panel/notifications-table', () => {
+export const useNotificationsTable = createGlobalState(() => {
 	const layout = useLayout()
 	const { t } = useI18n()
 
 	const form = useNotificationsForm()
 
 	const { pagination } = usePagination()
-	const filters = useNotificationsFilters()
+	const { filterInput, debounceSearchInput } = useNotificationsFilters()
 
 	const params = computed<AdminNotificationsParams>(() => ({
 		perPage: pagination.value.pageSize,
 		page: pagination.value.pageIndex,
-		type: filters.filterInput,
-		search: filters.debounceSearchInput,
+		type: filterInput.value,
+		search: debounceSearchInput.value,
 	}))
 
 	const notificationsApi = useAdminNotifications()
@@ -73,7 +73,7 @@ export const useNotificationsTable = defineStore('admin-panel/notifications-tabl
 			},
 		]
 
-		if (filters.filterInput === NotificationType.User) {
+		if (filterInput.value === NotificationType.User) {
 			columns.unshift({
 				accessorKey: 'id',
 				size: 10,
@@ -122,7 +122,7 @@ export const useNotificationsTable = defineStore('admin-panel/notifications-tabl
 	})
 
 	async function onDeleteNotification(notificationId: string) {
-		if (form.editableMessageId === notificationId) {
+		if (form.editableMessageId.value === notificationId) {
 			form.onReset()
 		}
 
@@ -132,16 +132,16 @@ export const useNotificationsTable = defineStore('admin-panel/notifications-tabl
 	async function onEditNotification(notification: Notifications[0]) {
 		let isConfirmed = true
 
-		if (form.formValues.message || form.isEditableForm) {
+		if (form.formValues.value.message || form.isEditableForm) {
 			// TODO: use confirm dialog from shadcn
 			// eslint-disable-next-line no-alert
 			isConfirmed = confirm(t('adminPanel.notifications.confirmResetForm'))
 		}
 
 		if (isConfirmed) {
-			form.editableMessageId = notification.id
-			form.userIdField.fieldModel = notification.userId ?? null
-			form.messageField.fieldModel = notification.text
+			form.editableMessageId.value = notification.id
+			form.userIdField.fieldModel.value = notification.userId ?? null
+			form.messageField.fieldModel.value = notification.text
 			layout.scrollToTop()
 		}
 	}
diff --git a/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-streamers.ts b/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-streamers.ts
index 449e16963..b5ee8e428 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-streamers.ts
+++ b/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-streamers.ts
@@ -1,9 +1,9 @@
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed } from 'vue'
 
 import { useStreamers as useStreamersApi } from '@/api/admin/streamers'
 
-export const useStreamers = defineStore('admin-panel/streamers', () => {
+export const useStreamers = createGlobalState(() => {
 	const { data } = useStreamersApi()
 
 	const streamers = computed(() => {
@@ -12,6 +12,6 @@ export const useStreamers = defineStore('admin-panel/streamers', () => {
 	})
 
 	return {
-		streamers
+		streamers,
 	}
 })
diff --git a/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-textarea.ts b/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-textarea.ts
index ebed2a703..a315977d5 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-textarea.ts
+++ b/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-textarea.ts
@@ -15,7 +15,7 @@ const TEXTAREA_MODIFIERS = {
 	img: '<img src="#">',
 	blockquote: '<blockquote id="bq">|</blockquote>',
 	list: '<ul id="ul"><li>|</li></ul>',
-	spoiler: '<details><summary>|</summary> </details>'
+	spoiler: '<details><summary>|</summary> </details>',
 } as const
 
 interface TextareaButton {
@@ -28,63 +28,63 @@ export const textareaButtons: TextareaButton[] = [
 	{
 		name: 'h1',
 		title: 'Heading 1',
-		icon: Heading1Icon
+		icon: Heading1Icon,
 	},
 	{
 		name: 'h2',
 		title: 'Heading 2',
-		icon: Heading2Icon
+		icon: Heading2Icon,
 	},
 	{
 		name: 'br',
 		title: 'Break',
-		icon: WrapTextIcon
+		icon: WrapTextIcon,
 	},
 	{
 		name: 'bold',
 		title: 'Bold',
-		icon: BoldIcon
+		icon: BoldIcon,
 	},
 	{
 		name: 'italic',
 		title: 'Italic',
-		icon: ItalicIcon
+		icon: ItalicIcon,
 	},
 	{
 		name: 'strikethrough',
 		title: 'Strikethrough',
-		icon: StrikethroughIcon
+		icon: StrikethroughIcon,
 	},
 	{
 		name: 'underline',
 		title: 'Underline',
-		icon: UnderlineIcon
+		icon: UnderlineIcon,
 	},
 	{
 		name: 'link',
 		title: 'Link',
-		icon: LinkIcon
+		icon: LinkIcon,
 	},
 	{
 		name: 'img',
 		title: 'Image',
-		icon: ImageIcon
+		icon: ImageIcon,
 	},
 	{
 		name: 'blockquote',
 		title: 'Blockquote',
-		icon: QuoteIcon
+		icon: QuoteIcon,
 	},
 	{
 		name: 'list',
 		title: 'List',
-		icon: ListIcon
+		icon: ListIcon,
 	},
 	{
 		name: 'spoiler',
 		title: 'Spoiler',
-		icon: ListCollapseIcon
-	}
+		icon: ListCollapseIcon,
+	},
 ]
 
 export function useTextarea() {
@@ -95,16 +95,17 @@ export function useTextarea() {
 		},
 		set(el: any) {
 			notificationForm.messageField.fieldRef = el?.$el
-		}
+		},
 	})
 
 	function getCursorPosition() {
 		const el = notificationForm.messageField.fieldRef!
-		return { start: el.selectionStart ?? 0, end: el.selectionEnd ?? 0 }
+		if (!el.value) return { start: 0, end: 0 }
+		return { start: el.value.selectionStart!, end: el.value.selectionEnd! }
 	}
 
 	function updateTextarea(newValue: string) {
-		notificationForm.messageField.fieldModel = newValue
+		notificationForm.messageField.fieldModel.value = newValue
 	}
 
 	function applyModifier(modifier: keyof typeof TEXTAREA_MODIFIERS) {
@@ -114,13 +115,13 @@ export function useTextarea() {
 		}
 
 		const { start, end } = getCursorPosition()
-		const msg = notificationForm.formValues.message ?? ''
+		const msg = notificationForm.formValues.value.message ?? ''
 		const selection = msg.slice(start, end)
 		updateTextarea(`${msg.slice(0, start)}${mod.replace('|', selection ?? '')}${msg.slice(end)}`)
 	}
 
 	return {
 		textareaRef,
-		applyModifier
+		applyModifier,
 	}
 }
diff --git a/frontend/dashboard/src/features/admin-panel/manage-users/components/users-badge-selector.vue b/frontend/dashboard/src/features/admin-panel/manage-users/components/users-badge-selector.vue
index f03f00d3f..9645c15bc 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-users/components/users-badge-selector.vue
+++ b/frontend/dashboard/src/features/admin-panel/manage-users/components/users-badge-selector.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { AwardIcon, CheckIcon } from 'lucide-vue-next'
-import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 
 import { useBadges } from '../../manage-badges/composables/use-badges'
@@ -10,19 +9,18 @@ import {
 	Command,
 	CommandGroup,
 	CommandItem,
-	CommandList
+	CommandList,
 } from '@/components/ui/command'
 import {
 	Popover,
 	PopoverContent,
-	PopoverTrigger
+	PopoverTrigger,
 } from '@/components/ui/popover'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{ userId: string }>()
 
-const badgesStore = useBadges()
-const { badges } = storeToRefs(badgesStore)
+const { badges, badgesRemoveUser, badgesAddUser } = useBadges()
 
 const userBadgesIds = computed(() => {
 	return badges.value
@@ -32,9 +30,9 @@ const userBadgesIds = computed(() => {
 
 async function toggleBadge(badgeId: string) {
 	if (userBadgesIds.value.includes(badgeId)) {
-		await badgesStore.badgesRemoveUser.executeMutation({ id: badgeId, userId: props.userId })
+		await badgesRemoveUser.executeMutation({ id: badgeId, userId: props.userId })
 	} else {
-		await badgesStore.badgesAddUser.executeMutation({ id: badgeId, userId: props.userId })
+		await badgesAddUser.executeMutation({ id: badgeId, userId: props.userId })
 	}
 }
 </script>
diff --git a/frontend/dashboard/src/features/admin-panel/manage-users/components/users-table-search.vue b/frontend/dashboard/src/features/admin-panel/manage-users/components/users-table-search.vue
index 62a4a7087..6e1a99a7e 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-users/components/users-table-search.vue
+++ b/frontend/dashboard/src/features/admin-panel/manage-users/components/users-table-search.vue
@@ -15,12 +15,12 @@ import {
 	CommandGroup,
 	CommandItem,
 	CommandList,
-	CommandSeparator
+	CommandSeparator,
 } from '@/components/ui/command'
 import {
 	Popover,
 	PopoverContent,
-	PopoverTrigger
+	PopoverTrigger,
 } from '@/components/ui/popover'
 import { Separator } from '@/components/ui/separator'
 
@@ -36,7 +36,7 @@ function applyFilter(filterKey: string, type: FilterType): void {
 
 <template>
 	<div class="flex gap-2">
-		<SearchBar v-model="usersTableFilters.searchInput" />
+		<SearchBar v-model="usersTableFilters.searchInput.value" />
 		<Popover>
 			<PopoverTrigger as-child>
 				<Button variant="outline" size="sm" class="h-9">
@@ -58,7 +58,7 @@ function applyFilter(filterKey: string, type: FilterType): void {
 				<Command>
 					<CommandList>
 						<CommandGroup
-							v-for="filters of usersTableFilters.filtersList"
+							v-for="filters of usersTableFilters.filtersList.value"
 							:key="filters.group"
 							:heading="filters.group"
 						>
diff --git a/frontend/dashboard/src/features/admin-panel/manage-users/components/users-table.vue b/frontend/dashboard/src/features/admin-panel/manage-users/components/users-table.vue
index b7333bc0c..2a7fd0a3c 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-users/components/users-table.vue
+++ b/frontend/dashboard/src/features/admin-panel/manage-users/components/users-table.vue
@@ -12,7 +12,7 @@ const usersTable = useUsersTable()
 <template>
 	<Table
 		:table="usersTable.table"
-		:is-loading="usersTable.isLoading"
+		:is-loading="usersTable.isLoading.value"
 	>
 		<template #empty-message>
 			{{ t('adminPanel.manageUsers.noUsers') }}
diff --git a/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users-table-filters.ts b/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users-table-filters.ts
index eec8c368d..dc0bd204e 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users-table-filters.ts
+++ b/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users-table-filters.ts
@@ -1,5 +1,4 @@
-import { refDebounced } from '@vueuse/core'
-import { defineStore, storeToRefs } from 'pinia'
+import { createGlobalState, refDebounced } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -17,13 +16,13 @@ interface Filter {
 	}[]
 }
 
-export const useUsersTableFilters = defineStore('manage-users/users-table-filters', () => {
+export const useUsersTableFilters = createGlobalState(() => {
 	const { t } = useI18n()
 
 	const searchInput = ref('')
 	const debounceSearchInput = refDebounced(searchInput, 500)
 
-	const { badges } = storeToRefs(useBadges())
+	const { badges } = useBadges()
 
 	const selectedStatuses = ref<Record<string, true | undefined>>({})
 	const selectedBadges = ref<string[]>([])
@@ -39,17 +38,17 @@ export const useUsersTableFilters = defineStore('manage-users/users-table-filter
 			list: [
 				{
 					label: t('adminPanel.manageUsers.isAdmin'),
-					key: 'isBotAdmin'
+					key: 'isBotAdmin',
 				},
 				{
 					label: t('adminPanel.manageUsers.isBanned'),
-					key: 'isBanned'
+					key: 'isBanned',
 				},
 				{
 					label: t('adminPanel.manageUsers.isBotEnabled'),
-					key: 'isBotEnabled'
-				}
-			]
+					key: 'isBotEnabled',
+				},
+			],
 		},
 		{
 			group: t('adminPanel.manageUsers.badgesGroup'),
@@ -57,9 +56,9 @@ export const useUsersTableFilters = defineStore('manage-users/users-table-filter
 			list: badges.value.map((badge) => ({
 				label: badge.name,
 				key: badge.id,
-				image: badge.fileUrl
-			}))
-		}
+				image: badge.fileUrl,
+			})),
+		},
 	])
 
 	function clearFilters() {
@@ -108,6 +107,6 @@ export const useUsersTableFilters = defineStore('manage-users/users-table-filter
 		setFilterValue,
 		isFilterApplied,
 		clearFilters,
-		selectedBadges
+		selectedBadges,
 	}
 })
diff --git a/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users-table.ts b/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users-table.ts
index 4fea4ca0b..c40d3d717 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users-table.ts
+++ b/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users-table.ts
@@ -4,7 +4,7 @@ import {
 	getPaginationRowModel,
 	useVueTable,
 } from '@tanstack/vue-table'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed, h } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -20,7 +20,7 @@ import type { TwirUsersSearchParams } from '@/gql/graphql'
 import { usePagination } from '@/composables/use-pagination.js'
 import { valueUpdater } from '@/helpers/value-updater.js'
 
-export const useUsersTable = defineStore('manage-users/users-table', () => {
+export const useUsersTable = createGlobalState(() => {
 	const { t } = useI18n()
 
 	const { pagination } = usePagination()
@@ -29,16 +29,16 @@ export const useUsersTable = defineStore('manage-users/users-table', () => {
 
 	const tableParams = computed<TwirUsersSearchParams>((prevParams) => {
 		// reset pagination on search change
-		if (prevParams?.search !== tableFilters.debounceSearchInput) {
+		if (prevParams?.search !== tableFilters.debounceSearchInput.value) {
 			pagination.value.pageIndex = 0
 		}
 
 		return {
-			...tableFilters.selectedStatuses,
-			search: tableFilters.debounceSearchInput,
+			...tableFilters.selectedStatuses.value,
+			search: tableFilters.debounceSearchInput.value,
 			page: pagination.value.pageIndex,
 			perPage: pagination.value.pageSize,
-			badges: tableFilters.selectedBadges,
+			badges: tableFilters.selectedBadges.value,
 		}
 	})
 
diff --git a/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users.ts b/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users.ts
index 132936d62..3dfb18ec8 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users.ts
+++ b/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users.ts
@@ -1,8 +1,8 @@
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 
 import { useAdminUsers } from '@/api/admin/users.js'
 
-export const useUsers = defineStore('admin-panel/users', () => {
+export const useUsers = createGlobalState(() => {
 	const usersApi = useAdminUsers()
 	const switchBan = usersApi.useMutationUserSwitchBan()
 	const switchAdmin = usersApi.useMutationUserSwitchAdmin()
@@ -10,6 +10,6 @@ export const useUsers = defineStore('admin-panel/users', () => {
 	return {
 		usersApi,
 		switchBan,
-		switchAdmin
+		switchAdmin,
 	}
 })
diff --git a/frontend/dashboard/src/features/admin-panel/manage-users/manage-users.vue b/frontend/dashboard/src/features/admin-panel/manage-users/manage-users.vue
index bc91ee337..a48db17d2 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-users/manage-users.vue
+++ b/frontend/dashboard/src/features/admin-panel/manage-users/manage-users.vue
@@ -11,11 +11,11 @@ const usersTable = useUsersTable()
 	<UsersPage>
 		<template #pagination>
 			<Pagination
-				:total="usersTable.totalUsers"
+				:total="usersTable.totalUsers.value"
 				:table="usersTable.table"
-				:pagination="usersTable.pagination"
-				@update:page="(page) => usersTable.pagination.pageIndex = page"
-				@update:page-size="(pageSize) => usersTable.pagination.pageSize = pageSize"
+				:pagination="usersTable.pagination.value"
+				@update:page="(page) => usersTable.pagination.value.pageIndex = page"
+				@update:page-size="(pageSize) => usersTable.pagination.value.pageSize = pageSize"
 			/>
 		</template>
 	</UsersPage>
diff --git a/frontend/dashboard/src/features/chat-alerts/components/ban-settings.vue b/frontend/dashboard/src/features/chat-alerts/components/ban-settings.vue
index 88f6027ce..d7aef6fbb 100644
--- a/frontend/dashboard/src/features/chat-alerts/components/ban-settings.vue
+++ b/frontend/dashboard/src/features/chat-alerts/components/ban-settings.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
 import { Label } from '@/components/ui/label'
 import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/components/ui/tags-input'
 import { useForm } from '@/features/chat-alerts/composables/use-form.js'
 
-const { formValue } = storeToRefs(useForm())
+const { formValue } = useForm()
 const { t } = useI18n()
 </script>
 
diff --git a/frontend/dashboard/src/features/chat-alerts/components/settings.vue b/frontend/dashboard/src/features/chat-alerts/components/settings.vue
index 25d66624a..66af86c1b 100644
--- a/frontend/dashboard/src/features/chat-alerts/components/settings.vue
+++ b/frontend/dashboard/src/features/chat-alerts/components/settings.vue
@@ -2,9 +2,8 @@
 import { TrashIcon } from 'lucide-vue-next'
 import {
 	NAlert,
-	NCard
+	NCard,
 } from 'naive-ui'
-import { storeToRefs } from 'pinia'
 import { type VNode, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -32,9 +31,8 @@ const props = defineProps<{
 defineSlots<{
 	additionalSettings: VNode
 }>()
-const form = useForm()
-const { formValue, formInited, formRef } = storeToRefs(form)
 
+const { formValue, formInited, formRef } = useForm()
 const hasAccessToManageAlerts = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageAlerts)
 
 watch(formInited, (v) => {
@@ -54,7 +52,7 @@ function createMessage() {
 
 		formValue?.value?.[props.formKey]?.messages.push({
 			count: countForSet,
-			text: props.defaultMessageText
+			text: props.defaultMessageText,
 		})
 	} else {
 		formValue?.value?.[props.formKey]?.messages.push({ text: props.defaultMessageText } as any)
diff --git a/frontend/dashboard/src/features/chat-alerts/composables/use-form.ts b/frontend/dashboard/src/features/chat-alerts/composables/use-form.ts
index d85060ecd..aad310a81 100644
--- a/frontend/dashboard/src/features/chat-alerts/composables/use-form.ts
+++ b/frontend/dashboard/src/features/chat-alerts/composables/use-form.ts
@@ -1,6 +1,5 @@
-import { useDebounceFn, watchDebounced } from '@vueuse/core'
+import { createGlobalState, useDebounceFn, watchDebounced } from '@vueuse/core'
 import { useNotification } from 'naive-ui'
-import { defineStore, storeToRefs } from 'pinia'
 import { ref, toRaw, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -13,87 +12,86 @@ import { useChatAlertsApi } from '@/api/chat-alerts.js'
 export type FormKey = Exclude<KeysOfUnion<RequiredDeep<SetNonNullable<ChatAlerts>>>, '__typename'>
 type Form = Record<FormKey, ChatAlertsSettings>
 
-export const useForm = defineStore('chat-alerts/form', () => {
+export const useForm = createGlobalState(() => {
 	const message = useNotification()
 	const { t } = useI18n()
 	const formRef = ref<HTMLFormElement>()
 
-	const chatAlertsApi = useChatAlertsApi()
-	const updateChatAlerts = chatAlertsApi.useMutationUpdateChatAlerts()
-	const { chatAlerts: data } = storeToRefs(chatAlertsApi)
+	const { chatAlerts, useMutationUpdateChatAlerts } = useChatAlertsApi()
+	const updateChatAlerts = useMutationUpdateChatAlerts()
 
 	const formValue = ref<Form>({
 		chatCleared: {
 			enabled: false,
 			messages: [],
-			cooldown: 2
+			cooldown: 2,
 		},
 		cheers: {
 			enabled: false,
 			messages: [],
-			cooldown: 0
+			cooldown: 0,
 		},
 		donations: {
 			enabled: false,
 			messages: [],
-			cooldown: 0
+			cooldown: 0,
 		},
 		firstUserMessage: {
 			enabled: false,
 			messages: [],
-			cooldown: 2
+			cooldown: 2,
 		},
 		followers: {
 			enabled: false,
 			messages: [],
-			cooldown: 3
+			cooldown: 3,
 		},
 		raids: {
 			enabled: false,
 			messages: [],
-			cooldown: 0
+			cooldown: 0,
 		},
 		redemptions: {
 			enabled: false,
 			messages: [],
-			cooldown: 0
+			cooldown: 0,
 		},
 		streamOffline: {
 			enabled: false,
 			messages: [],
-			cooldown: 0
+			cooldown: 0,
 		},
 		streamOnline: {
 			enabled: false,
 			messages: [],
-			cooldown: 0
+			cooldown: 0,
 		},
 		subscribers: {
 			enabled: false,
 			messages: [],
-			cooldown: 0
+			cooldown: 0,
 		},
 		ban: {
 			enabled: false,
 			messages: [],
 			cooldown: 2,
-			ignoreTimeoutFrom: []
+			ignoreTimeoutFrom: [],
 		},
 		unbanRequestCreate: {
 			enabled: false,
 			messages: [],
-			cooldown: 0
+			cooldown: 0,
 		},
 		unbanRequestResolve: {
 			enabled: false,
 			messages: [],
-			cooldown: 0
-		}
+			cooldown: 0,
+		},
 	})
 
 	const formInited = ref(false)
 
-	watch(data, (v) => {
+	watch(chatAlerts, (v) => {
 		if (!v || formInited.value) return
 		formInited.value = false
 
@@ -127,12 +125,17 @@ export const useForm = defineStore('chat-alerts/form', () => {
 		} catch (error) {
 			message.error({
 				title: t('sharedTexts.errorOnSave'),
-				duration: 2500
+				duration: 2500,
 			})
 		}
 	}
 
 	const debouncedSave = useDebounceFn(save, 500)
 
-	return { formValue, formInited, save: debouncedSave, formRef }
+	return {
+		formValue,
+		formInited,
+		save: debouncedSave,
+		formRef,
+	}
 })
diff --git a/frontend/dashboard/src/features/commands/components/edit-modal.vue b/frontend/dashboard/src/features/commands/components/edit-modal.vue
index 4a53c6a94..6b7bb8d5a 100644
--- a/frontend/dashboard/src/features/commands/components/edit-modal.vue
+++ b/frontend/dashboard/src/features/commands/components/edit-modal.vue
@@ -5,7 +5,7 @@ import {
 	IconPlus,
 	IconSquare,
 	IconSquareCheck,
-	IconTrash
+	IconTrash,
 } from '@tabler/icons-vue'
 import chunk from 'lodash.chunk'
 import {
@@ -33,9 +33,8 @@ import {
 	NTabPane,
 	NTabs,
 	NTag,
-	NText
+	NText,
 } from 'naive-ui'
-import { storeToRefs } from 'pinia'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -49,8 +48,12 @@ import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInpu
 import VariableInput from '@/components/variable-input.vue'
 
 const { t } = useI18n()
-const commandEdit = useCommandEdit()
-const { formValue, isOpened: isEditOpened } = storeToRefs(commandEdit)
+const {
+	formValue,
+	isOpened: isEditOpened,
+	close,
+	save,
+} = useCommandEdit()
 
 const formRef = ref<FormInst | null>(null)
 
@@ -61,7 +64,7 @@ const rolesSelectOptions = computed(() => {
 	if (!roles.value?.roles) return []
 	return roles.value.roles.map((role) => ({
 		label: role.name,
-		value: role.id
+		value: role.id,
 	}))
 })
 
@@ -71,7 +74,7 @@ const commandsGroupsOptions = computed(() => {
 	if (!commandsGroups.data?.value) return []
 	return commandsGroups.data.value.commandsGroups.map((group) => ({
 		label: group.name,
-		value: group.id
+		value: group.id,
 	}))
 })
 
@@ -90,7 +93,7 @@ function nameValidator(_: FormItemRule, value: string) {
 const rules: FormRules = {
 	name: [{
 		trigger: ['input', 'blur'],
-		validator: nameValidator
+		validator: nameValidator,
 	}],
 	description: {
 		trigger: ['input', 'blur'],
@@ -99,7 +102,7 @@ const rules: FormRules = {
 				return new Error('Description cannot be longer than 500 characters')
 			}
 			return true
-		}
+		},
 	},
 	responses: {
 		trigger: ['input', 'blur'],
@@ -111,8 +114,8 @@ const rules: FormRules = {
 				return new Error(t('commands.modal.responses.validations.len'))
 			}
 			return true
-		}
-	}
+		},
+	},
 }
 
 const createButtonProps = { class: 'create-button' } as any
@@ -130,7 +133,7 @@ const createButtonProps = { class: 'create-button' } as any
 			width: '800px',
 			height: '90dvh',
 		}"
-		:on-close="commandEdit.close"
+		:on-close="close"
 		content-style="padding: 5px;"
 	>
 		<div v-if="formValue" class="flex flex-col justify-between h-full">
@@ -495,7 +498,7 @@ const createButtonProps = { class: 'create-button' } as any
 				</NTabs>
 			</NForm>
 
-			<NButton class="mt-2" secondary type="success" block @click="commandEdit.save">
+			<NButton class="mt-2" secondary type="success" block @click="save">
 				{{ t('sharedButtons.save') }}
 			</NButton>
 		</div>
diff --git a/frontend/dashboard/src/features/commands/composables/use-command-edit.ts b/frontend/dashboard/src/features/commands/composables/use-command-edit.ts
index a39ddc6c9..e847c7604 100644
--- a/frontend/dashboard/src/features/commands/composables/use-command-edit.ts
+++ b/frontend/dashboard/src/features/commands/composables/use-command-edit.ts
@@ -1,4 +1,4 @@
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { ref, toRaw } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -15,8 +15,8 @@ const defaultFormValue: EditableCommand = {
 	responses: [
 		{
 			text: '',
-			order: 0
-		}
+			order: 0,
+		},
 	],
 	description: '',
 	rolesIds: [],
@@ -35,10 +35,10 @@ const defaultFormValue: EditableCommand = {
 	groupId: null,
 	cooldownRolesIds: [],
 	enabledCategories: [],
-	module: 'CUSTOM'
+	module: 'CUSTOM',
 }
 
-export const useCommandEdit = defineStore('commands-edit', () => {
+export const useCommandEdit = createGlobalState(() => {
 	const commandsManager = useCommandsApi()
 	const { toast } = useToast()
 	const { t } = useI18n()
@@ -86,18 +86,18 @@ export const useCommandEdit = defineStore('commands-edit', () => {
 			module: undefined,
 			responses: formValue.value.responses.map((response, i) => ({
 				text: response.text,
-				order: i
-			}))
+				order: i,
+			})),
 		}
 
 		if (formValue.value.id) {
 			await update.executeMutation({
 				id: formValue.value.id,
-				opts: transformedOpts
+				opts: transformedOpts,
 			})
 		} else {
 			await create.executeMutation({
-				opts: transformedOpts
+				opts: transformedOpts,
 			})
 		}
 
@@ -106,7 +106,7 @@ export const useCommandEdit = defineStore('commands-edit', () => {
 		toast({
 			title: t('sharedTexts.saved'),
 			variant: 'success',
-			duration: 1500
+			duration: 1500,
 		})
 	}
 
@@ -116,6 +116,6 @@ export const useCommandEdit = defineStore('commands-edit', () => {
 		editCommand,
 		createCommand,
 		close,
-		save
+		save,
 	}
 })
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/community-emotes-statistic.vue b/frontend/dashboard/src/features/community-emotes-statistic/community-emotes-statistic.vue
index 2fa9a6bde..eb1470400 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/community-emotes-statistic.vue
+++ b/frontend/dashboard/src/features/community-emotes-statistic/community-emotes-statistic.vue
@@ -11,11 +11,11 @@ const emotesTable = useCommunityEmotesStatisticTable()
 	<Table>
 		<template #pagination>
 			<Pagination
-				:total="emotesTable.totalEmotes"
+				:total="emotesTable.totalEmotes.value"
 				:table="emotesTable.table"
-				:pagination="emotesTable.pagination"
-				@update:page="(page) => emotesTable.pagination.pageIndex = page"
-				@update:page-size="(pageSize) => emotesTable.pagination.pageSize = pageSize"
+				:pagination="emotesTable.pagination.value"
+				@update:page="(page) => emotesTable.pagination.value.pageIndex = page"
+				@update:page-size="(pageSize) => emotesTable.pagination.value.pageSize = pageSize"
 			/>
 		</template>
 	</Table>
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content-users-history.vue b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content-users-history.vue
index a83133f1e..8ca924151 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content-users-history.vue
+++ b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content-users-history.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { NScrollbar } from 'naive-ui'
-import { storeToRefs } from 'pinia'
 
 import Pagination from '@/components/pagination.vue'
 import Table from '@/components/table.vue'
@@ -11,22 +10,22 @@ import {
 	useCommunityEmotesDetailsUsersHistory,
 } from '@/features/community-emotes-statistic/composables/use-community-emotes-details-users-history'
 
-const { isLoading, usagesPagination } = storeToRefs(useCommunityEmotesDetails())
-const users = useCommunityEmotesDetailsUsersHistory()
+const { isLoading, usagesPagination } = useCommunityEmotesDetails()
+const { total, table } = useCommunityEmotesDetailsUsersHistory()
 </script>
 
 <template>
 	<div class="flex flex-col w-full gap-4">
 		<Pagination
-			:total="users.total"
-			:table="users.table"
+			:total="total"
+			:table="table"
 			:pagination="usagesPagination"
 			@update:page="(page) => usagesPagination.pageIndex = page"
 			@update:page-size="(pageSize) => usagesPagination.pageSize = pageSize"
 		/>
 
 		<NScrollbar style="max-height: 400px;" trigger="none">
-			<Table :table="users.table" :is-loading="isLoading" hide-header>
+			<Table :table="table" :is-loading="isLoading" hide-header>
 				<template #empty-message>
 					Empty
 				</template>
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content-users-top.vue b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content-users-top.vue
index 2c0bed18c..0e8924839 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content-users-top.vue
+++ b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content-users-top.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { NScrollbar } from 'naive-ui'
-import { storeToRefs } from 'pinia'
 
 import Pagination from '@/components/pagination.vue'
 import Table from '@/components/table.vue'
@@ -11,22 +10,22 @@ import {
 	useCommunityEmotesDetailsUsersTop,
 } from '@/features/community-emotes-statistic/composables/use-community-emotes-details-users-top'
 
-const { isLoading, topPagination } = storeToRefs(useCommunityEmotesDetails())
-const users = useCommunityEmotesDetailsUsersTop()
+const { isLoading, topPagination } = useCommunityEmotesDetails()
+const { total, table } = useCommunityEmotesDetailsUsersTop()
 </script>
 
 <template>
 	<div class="flex flex-col w-full gap-4">
 		<Pagination
-			:total="users.total"
-			:table="users.table"
+			:total="total"
+			:table="table"
 			:pagination="topPagination"
 			@update:page="(page) => topPagination.pageIndex = page"
 			@update:page-size="(pageSize) => topPagination.pageSize = pageSize"
 		/>
 
 		<NScrollbar style="max-height: 400px;" trigger="none">
-			<Table :table="users.table" :is-loading="isLoading" hide-header>
+			<Table :table="table" :is-loading="isLoading" hide-header>
 				<template #empty-message>
 					Empty
 				</template>
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content.vue b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content.vue
index 84eb2f358..c160740c4 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content.vue
+++ b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ColorType, createChart } from 'lightweight-charts'
-import { storeToRefs } from 'pinia'
 import { RadioGroupItem, RadioGroupRoot } from 'radix-vue'
 import { onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -20,10 +19,9 @@ import {
 } from '@/features/community-emotes-statistic/composables/use-translated-ranges'
 
 const { t } = useI18n()
-const { ranges } = storeToRefs(useTranslatedRanges())
-const detailsStore = useCommunityEmotesDetails()
-const { emoteName } = storeToRefs(useCommunityEmotesDetailsName())
-const { details, range } = storeToRefs(detailsStore)
+const { ranges } = useTranslatedRanges()
+const { details, range } = useCommunityEmotesDetails()
+const { emoteName } = useCommunityEmotesDetailsName()
 
 const chartContainer = ref<HTMLElement>()
 
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details.vue b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details.vue
index 8d0986c0b..3ef82edf4 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details.vue
+++ b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details.vue
@@ -29,7 +29,3 @@ defineEmits<{
 		</DialogOrSheet>
 	</Dialog>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-chart-range.vue b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-chart-range.vue
index 0f139fb87..de866fad9 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-chart-range.vue
+++ b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-chart-range.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { CheckIcon, GanttChartIcon } from 'lucide-vue-next'
-import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
 import { useCommunityEmotesStatisticFilters } from '../composables/use-community-emotes-statistic-filters.js'
@@ -20,7 +19,7 @@ import {
 
 const { t } = useI18n()
 
-const { ranges } = storeToRefs(useTranslatedRanges())
+const { ranges } = useTranslatedRanges()
 
 const emotesStatisticFilter = useCommunityEmotesStatisticFilters()
 </script>
@@ -45,7 +44,7 @@ const emotesStatisticFilter = useCommunityEmotesStatisticFilters()
 					@click="emotesStatisticFilter.changeTableRange(type as EmoteStatisticRange)"
 				>
 					<CheckIcon
-						v-if="emotesStatisticFilter.tableRange === type"
+						v-if="emotesStatisticFilter.tableRange.value === type"
 						class="mr-2 h-3.5 w-3.5"
 					/>
 					{{ text }}
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-chart.vue b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-chart.vue
index ef40a40f4..a25d4bd3f 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-chart.vue
+++ b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-chart.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ColorType, createChart } from 'lightweight-charts'
-import { storeToRefs } from 'pinia'
 import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
 
 import { useCommunityChartSize } from '../composables/use-community-chart-size.js'
@@ -20,7 +19,7 @@ const chart = shallowRef<IChartApi | null>(null)
 const chartContainer = ref<HTMLElement | null>(null)
 
 const { chartSizes, setChartSize } = useCommunityChartSize()
-const { chartStyles } = storeToRefs(useCommunityChartStyles())
+const { chartStyles } = useCommunityChartStyles()
 
 const chartOptions = computed<DeepPartial<TimeChartOptions>>(() => ({
 	layout: {
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table.vue b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table.vue
index 20f780d63..e4f538feb 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table.vue
+++ b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table.vue
@@ -14,9 +14,9 @@ const emotesStatisticFilter = useCommunityEmotesStatisticFilters()
 
 <template>
 	<div class="flex flex-col w-full gap-4">
-		<SearchBar v-model="emotesStatisticFilter.searchInput" />
+		<SearchBar v-model="emotesStatisticFilter.searchInput.value" />
 		<slot name="pagination" />
-		<Table :table="emotesStatisticTable.table" :is-loading="emotesStatisticTable.isLoading">
+		<Table :table="emotesStatisticTable.table" :is-loading="emotesStatisticTable.isLoading.value">
 			<template #empty-message>
 				{{ t('community.users.table.empty') }}
 			</template>
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-chart-styles.ts b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-chart-styles.ts
index 073d0bdf9..0873aebf0 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-chart-styles.ts
+++ b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-chart-styles.ts
@@ -1,9 +1,9 @@
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed } from 'vue'
 
 import { useTheme } from '@/composables/use-theme.js'
 
-export const useCommunityChartStyles = defineStore('features/community-chart-styles', () => {
+export const useCommunityChartStyles = createGlobalState(() => {
 	const { theme } = useTheme()
 
 	const chartStyles = computed(() => {
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-history.ts b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-history.ts
index 60b012ea0..be37bf9ec 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-history.ts
+++ b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-history.ts
@@ -5,8 +5,8 @@ import {
 	getPaginationRowModel,
 	useVueTable,
 } from '@tanstack/vue-table'
+import { createGlobalState } from '@vueuse/core'
 import { NTime } from 'naive-ui'
-import { defineStore, storeToRefs } from 'pinia'
 import { computed, h } from 'vue'
 
 import { useCommunityEmotesDetails } from './use-community-emotes-details'
@@ -20,75 +20,73 @@ import { valueUpdater } from '@/helpers/value-updater'
 
 type UserUsage = NonNullable<EmotesStatisticsDetail['emotesStatisticEmoteDetailedInformation']>['usagesHistory'][number]
 
-export const useCommunityEmotesDetailsUsersHistory = defineStore(
-	'features/community-emotes-statistic-table/details-users-history',
-	() => {
-		const { details, usagesPagination } = storeToRefs(useCommunityEmotesDetails())
+export const useCommunityEmotesDetailsUsersHistory = createGlobalState(() => {
+	const { details, usagesPagination } = useCommunityEmotesDetails()
 
-		const data = computed<UserUsage[]>(() => {
-			return details.value?.emotesStatisticEmoteDetailedInformation?.usagesHistory ?? []
-		})
-		const total = computed(() => details.value?.emotesStatisticEmoteDetailedInformation?.usagesByUsersTotal ?? 0)
-		const pageCount = computed(() => {
-			return Math.ceil(total.value / usagesPagination.value.pageSize)
-		})
+	const data = computed<UserUsage[]>(() => {
+		return details.value?.emotesStatisticEmoteDetailedInformation?.usagesHistory ?? []
+	})
+	const total = computed(() => details.value?.emotesStatisticEmoteDetailedInformation?.usagesByUsersTotal ?? 0)
+	const pageCount = computed(() => {
+		return Math.ceil(total.value / usagesPagination.value.pageSize)
+	})
 
-		const columns = computed<ColumnDef<UserUsage>[]>(() => [
-			{
-				accessorKey: 'user',
-				size: 50,
-				header: () => '',
-				cell: ({ row }) => {
-					return h('a', {
-						class: 'flex flex-col',
-						href: `https://twitch.tv/${row.original.twitchProfile.login}`,
-						target: '_blank',
-					}, h(UsersTableCellUser, {
-						avatar: row.original.twitchProfile.profileImageUrl,
-						name: row.original.twitchProfile.login,
-						displayName: row.original.twitchProfile.displayName,
-					}))
-				},
+	const columns = computed<ColumnDef<UserUsage>[]>(() => [
+		{
+			accessorKey: 'user',
+			size: 50,
+			header: () => '',
+			cell: ({ row }) => {
+				return h('a', {
+					class: 'flex flex-col',
+					href: `https://twitch.tv/${row.original.twitchProfile.login}`,
+					target: '_blank',
+				}, h(UsersTableCellUser, {
+					avatar: row.original.twitchProfile.profileImageUrl,
+					name: row.original.twitchProfile.login,
+					displayName: row.original.twitchProfile.displayName,
+				}))
 			},
-			{
-				accessorKey: 'time',
-				header: '',
-				cell: ({ row }) => {
-					const date = new Date(row.original.date)
-					const diff = Date.now() - date.getTime()
-					return h(NTime, { type: 'relative', time: 0, to: diff })
-				},
+		},
+		{
+			accessorKey: 'time',
+			header: '',
+			cell: ({ row }) => {
+				const date = new Date(row.original.date)
+				const diff = Date.now() - date.getTime()
+				return h(NTime, { type: 'relative', time: 0, to: diff })
 			},
-		])
+		},
+	])
 
-		const table = useVueTable({
-			get pageCount() {
-				return pageCount.value
+	const table = useVueTable({
+		get pageCount() {
+			return pageCount.value
+		},
+		get data() {
+			return data.value
+		},
+		get columns() {
+			return columns.value
+		},
+		state: {
+			get pagination() {
+				return usagesPagination.value
 			},
-			get data() {
-				return data.value
-			},
-			get columns() {
-				return columns.value
-			},
-			state: {
-				get pagination() {
-					return usagesPagination.value
-				},
-			},
-			manualPagination: true,
-			onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, usagesPagination),
-			getCoreRowModel: getCoreRowModel(),
-			getPaginationRowModel: getPaginationRowModel(),
-			getFacetedRowModel: getFacetedRowModel(),
-			getFacetedUniqueValues: getFacetedUniqueValues(),
-		})
+		},
+		manualPagination: true,
+		onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, usagesPagination),
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getFacetedRowModel: getFacetedRowModel(),
+		getFacetedUniqueValues: getFacetedUniqueValues(),
+	})
 
-		return {
-			table,
-			usagesPagination,
-			total,
-			pageCount,
-		}
-	},
+	return {
+		table,
+		usagesPagination,
+		total,
+		pageCount,
+	}
+},
 )
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-top.ts b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-top.ts
index 28bb24ab8..e28189a15 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-top.ts
+++ b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-top.ts
@@ -5,7 +5,7 @@ import {
 	getPaginationRowModel,
 	useVueTable,
 } from '@tanstack/vue-table'
-import { defineStore, storeToRefs } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed, h } from 'vue'
 
 import { useCommunityEmotesDetails } from './use-community-emotes-details'
@@ -19,73 +19,71 @@ import { valueUpdater } from '@/helpers/value-updater'
 
 type User = NonNullable<EmotesStatisticsDetail['emotesStatisticEmoteDetailedInformation']>['topUsers'][number]
 
-export const useCommunityEmotesDetailsUsersTop = defineStore(
-	'features/community-emotes-statistic-table/details-users-top',
-	() => {
-		const { details, topPagination } = storeToRefs(useCommunityEmotesDetails())
+export const useCommunityEmotesDetailsUsersTop = createGlobalState(() => {
+	const { details, topPagination } = useCommunityEmotesDetails()
 
-		const data = computed<User[]>(() => {
-			return details.value?.emotesStatisticEmoteDetailedInformation?.topUsers ?? []
-		})
-		const total = computed(() => details.value?.emotesStatisticEmoteDetailedInformation?.topUsersTotal ?? 0)
-		const pageCount = computed(() => {
-			return Math.ceil(total.value / topPagination.value.pageSize)
-		})
+	const data = computed<User[]>(() => {
+		return details.value?.emotesStatisticEmoteDetailedInformation?.topUsers ?? []
+	})
+	const total = computed(() => details.value?.emotesStatisticEmoteDetailedInformation?.topUsersTotal ?? 0)
+	const pageCount = computed(() => {
+		return Math.ceil(total.value / topPagination.value.pageSize)
+	})
 
-		const columns = computed<ColumnDef<User>[]>(() => [
-			{
-				accessorKey: 'user',
-				size: 50,
-				header: () => '',
-				cell: ({ row }) => {
-					return h('a', {
-						class: 'flex flex-col',
-						href: `https://twitch.tv/${row.original.twitchProfile.login}`,
-						target: '_blank',
-					}, h(UsersTableCellUser, {
-						avatar: row.original.twitchProfile.profileImageUrl,
-						name: row.original.twitchProfile.login,
-						displayName: row.original.twitchProfile.displayName,
-					}))
-				},
+	const columns = computed<ColumnDef<User>[]>(() => [
+		{
+			accessorKey: 'user',
+			size: 50,
+			header: () => '',
+			cell: ({ row }) => {
+				return h('a', {
+					class: 'flex flex-col',
+					href: `https://twitch.tv/${row.original.twitchProfile.login}`,
+					target: '_blank',
+				}, h(UsersTableCellUser, {
+					avatar: row.original.twitchProfile.profileImageUrl,
+					name: row.original.twitchProfile.login,
+					displayName: row.original.twitchProfile.displayName,
+				}))
 			},
-			{
-				accessorKey: 'count',
-				header: '',
-				cell: ({ row }) => {
-					return h('span', null, row.original.count)
-				},
+		},
+		{
+			accessorKey: 'count',
+			header: '',
+			cell: ({ row }) => {
+				return h('span', null, row.original.count)
 			},
-		])
+		},
+	])
 
-		const table = useVueTable({
-			get pageCount() {
-				return pageCount.value
+	const table = useVueTable({
+		get pageCount() {
+			return pageCount.value
+		},
+		get data() {
+			return data.value
+		},
+		get columns() {
+			return columns.value
+		},
+		state: {
+			get pagination() {
+				return topPagination.value
 			},
-			get data() {
-				return data.value
-			},
-			get columns() {
-				return columns.value
-			},
-			state: {
-				get pagination() {
-					return topPagination.value
-				},
-			},
-			manualPagination: true,
-			onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, topPagination),
-			getCoreRowModel: getCoreRowModel(),
-			getPaginationRowModel: getPaginationRowModel(),
-			getFacetedRowModel: getFacetedRowModel(),
-			getFacetedUniqueValues: getFacetedUniqueValues(),
-		})
+		},
+		manualPagination: true,
+		onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, topPagination),
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getFacetedRowModel: getFacetedRowModel(),
+		getFacetedUniqueValues: getFacetedUniqueValues(),
+	})
 
-		return {
-			table,
-			topPagination,
-			total,
-			pageCount,
-		}
-	},
+	return {
+		table,
+		topPagination,
+		total,
+		pageCount,
+	}
+},
 )
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details.ts b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details.ts
index f0b9329ec..bc5d36975 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details.ts
+++ b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details.ts
@@ -1,4 +1,4 @@
-import { defineStore, storeToRefs } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
 import type { EmotesStatisticEmoteDetailedOpts } from '@/gql/graphql'
@@ -7,49 +7,43 @@ import { useEmotesStatisticDetailsQuery } from '@/api/emotes-statistic'
 import { usePagination } from '@/composables/use-pagination'
 import { EmoteStatisticRange } from '@/gql/graphql'
 
-export const useCommunityEmotesDetailsName = defineStore(
-	'features/community-emotes-statistic-table/details-name',
-	() => {
-		const emoteName = ref<string>()
+export const useCommunityEmotesDetailsName = createGlobalState(() => {
+	const emoteName = ref<string>()
 
-		function setEmoteName(name: string) {
-			emoteName.value = name
-		}
+	function setEmoteName(name: string) {
+		emoteName.value = name
+	}
 
-		return {
-			emoteName,
-			setEmoteName,
-		}
-	},
-)
-
-export const useCommunityEmotesDetails = defineStore(
-	'features/community-emotes-statistic-table/details',
-	() => {
-		const { emoteName } = storeToRefs(useCommunityEmotesDetailsName())
-		const { pagination: usagesPagination } = usePagination()
-		const { pagination: topPagination } = usePagination()
-		const range = ref(EmoteStatisticRange.LastDay)
-
-		const opts = computed<EmotesStatisticEmoteDetailedOpts>(() => {
-			return {
-				emoteName: emoteName.value!,
-				range: range.value,
-				usagesByUsersPage: usagesPagination.value.pageIndex,
-				usagesByUsersPerPage: usagesPagination.value.pageSize,
-				topUsersPage: topPagination.value.pageIndex,
-				topUsersPerPage: topPagination.value.pageSize,
-			}
-		})
-
-		const { data: details, fetching: isLoading } = useEmotesStatisticDetailsQuery(opts)
+	return {
+		emoteName,
+		setEmoteName,
+	}
+})
+
+export const useCommunityEmotesDetails = createGlobalState(() => {
+	const { emoteName } = useCommunityEmotesDetailsName()
+	const { pagination: usagesPagination } = usePagination()
+	const { pagination: topPagination } = usePagination()
+	const range = ref(EmoteStatisticRange.LastDay)
 
+	const opts = computed<EmotesStatisticEmoteDetailedOpts>(() => {
 		return {
-			range,
-			details,
-			isLoading,
-			usagesPagination,
-			topPagination,
+			emoteName: emoteName.value!,
+			range: range.value,
+			usagesByUsersPage: usagesPagination.value.pageIndex,
+			usagesByUsersPerPage: usagesPagination.value.pageSize,
+			topUsersPage: topPagination.value.pageIndex,
+			topUsersPerPage: topPagination.value.pageSize,
 		}
-	},
-)
+	})
+
+	const { data: details, fetching: isLoading } = useEmotesStatisticDetailsQuery(opts)
+
+	return {
+		range,
+		details,
+		isLoading,
+		usagesPagination,
+		topPagination,
+	}
+})
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-statistic-filters.ts b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-statistic-filters.ts
index 01efcee5c..08a31e1b5 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-statistic-filters.ts
+++ b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-statistic-filters.ts
@@ -1,12 +1,11 @@
-import { refDebounced } from '@vueuse/core'
-import { defineStore } from 'pinia'
+import { createGlobalState, refDebounced } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
 import type { SortingState } from '@tanstack/vue-table'
 
 import { EmoteStatisticRange, EmotesStatisticsOptsOrder } from '@/gql/graphql.js'
 
-export const useCommunityEmotesStatisticFilters = defineStore('features/community-emotes-statistic-filters', () => {
+export const useCommunityEmotesStatisticFilters = createGlobalState(() => {
 	const searchInput = ref('')
 	const debouncedSearchInput = refDebounced(searchInput, 500)
 
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-statistic-table.ts b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-statistic-table.ts
index 458a812b2..902786290 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-statistic-table.ts
+++ b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-statistic-table.ts
@@ -7,7 +7,7 @@ import {
 	getSortedRowModel,
 	useVueTable,
 } from '@tanstack/vue-table'
-import { defineStore, storeToRefs } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed, h } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -24,7 +24,7 @@ import CommunityEmotesTableColumnEmote
 import { EmoteStatisticRange, type EmotesStatisticsOpts } from '@/gql/graphql'
 import { valueUpdater } from '@/helpers/value-updater.js'
 
-export const useCommunityEmotesStatisticTable = defineStore('features/community-emotes-statistic-table', () => {
+export const useCommunityEmotesStatisticTable = createGlobalState(() => {
 	const { t } = useI18n()
 	const { pagination } = usePagination()
 	const {
@@ -32,7 +32,7 @@ export const useCommunityEmotesStatisticTable = defineStore('features/community-
 		tableRange,
 		sortingState,
 		tableOrder,
-	} = storeToRefs(useCommunityEmotesStatisticFilters())
+	} = useCommunityEmotesStatisticFilters()
 
 	const emotesQueryOptions = computed<EmotesStatisticsOpts>((prevParams) => {
 		if (prevParams?.search !== debouncedSearchInput.value) {
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-translated-ranges.ts b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-translated-ranges.ts
index 00291c16c..d8a81ac2e 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-translated-ranges.ts
+++ b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-translated-ranges.ts
@@ -1,10 +1,10 @@
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { EmoteStatisticRange } from '@/gql/graphql'
 
-export const useTranslatedRanges = defineStore('features/community-emotes-statistic-table/ranges', () => {
+export const useTranslatedRanges = createGlobalState(() => {
 	const { t } = useI18n()
 
 	const ranges = computed(() => ({
diff --git a/frontend/dashboard/src/features/community-users/community-users.vue b/frontend/dashboard/src/features/community-users/community-users.vue
index ba6268f68..f159d8080 100644
--- a/frontend/dashboard/src/features/community-users/community-users.vue
+++ b/frontend/dashboard/src/features/community-users/community-users.vue
@@ -11,11 +11,11 @@ const communityUsersTable = useCommunityUsersTable()
 	<CommunityUsersPage>
 		<template #pagination>
 			<Pagination
-				:total="communityUsersTable.totalUsers"
+				:total="communityUsersTable.totalUsers.value"
 				:table="communityUsersTable.table"
-				:pagination="communityUsersTable.pagination"
-				@update:page="(page) => communityUsersTable.pagination.pageIndex = page"
-				@update:page-size="(pageSize) => communityUsersTable.pagination.pageSize = pageSize"
+				:pagination="communityUsersTable.pagination.value"
+				@update:page="(page) => communityUsersTable.pagination.value.pageIndex = page"
+				@update:page-size="(pageSize) => communityUsersTable.pagination.value.pageSize = pageSize"
 			/>
 		</template>
 	</CommunityUsersPage>
diff --git a/frontend/dashboard/src/features/community-users/components/community-users-table-search.vue b/frontend/dashboard/src/features/community-users/components/community-users-table-search.vue
index 9929d8f7a..c8fa94782 100644
--- a/frontend/dashboard/src/features/community-users/components/community-users-table-search.vue
+++ b/frontend/dashboard/src/features/community-users/components/community-users-table-search.vue
@@ -14,7 +14,7 @@ import {
 	DropdownMenuContent,
 	DropdownMenuLabel,
 	DropdownMenuSeparator,
-	DropdownMenuTrigger
+	DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 
 const { t } = useI18n()
@@ -38,7 +38,7 @@ const columns = computed(() => {
 <template>
 	<div class="flex gap-2">
 		<SearchBar
-			v-model="communityTableActions.searchInput"
+			v-model="communityTableActions.searchInput.value"
 			:placeholder="t('community.users.searchPlaceholder')"
 		/>
 		<DropdownMenu>
diff --git a/frontend/dashboard/src/features/community-users/components/community-users-table.vue b/frontend/dashboard/src/features/community-users/components/community-users-table.vue
index 3447b4a60..288f5a776 100644
--- a/frontend/dashboard/src/features/community-users/components/community-users-table.vue
+++ b/frontend/dashboard/src/features/community-users/components/community-users-table.vue
@@ -10,7 +10,7 @@ const communityUsersTable = useCommunityUsersTable()
 </script>
 
 <template>
-	<Table :table="communityUsersTable.table" :is-loading="communityUsersTable.isLoading">
+	<Table :table="communityUsersTable.table" :is-loading="communityUsersTable.isLoading.value">
 		<template #empty-message>
 			{{ t('community.users.table.empty') }}
 		</template>
diff --git a/frontend/dashboard/src/features/community-users/composables/use-community-table-actions.ts b/frontend/dashboard/src/features/community-users/composables/use-community-table-actions.ts
index 1825950d1..4f7e01154 100644
--- a/frontend/dashboard/src/features/community-users/composables/use-community-table-actions.ts
+++ b/frontend/dashboard/src/features/community-users/composables/use-community-table-actions.ts
@@ -1,5 +1,4 @@
-import { refDebounced, useLocalStorage } from '@vueuse/core'
-import { defineStore } from 'pinia'
+import { createGlobalState, refDebounced, useLocalStorage } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
 import { TABLE_ACCESSOR_KEYS } from './use-community-users-table.js'
@@ -10,15 +9,15 @@ import { CommunityUsersOrder, CommunityUsersSortBy } from '@/gql/graphql.js'
 
 const COLUMN_VISIBLE_STORAGE_KEY = 'twirCommunityUsersColumnVisibility'
 
-export const useCommunityTableActions = defineStore('features/community-table-actions', () => {
+export const useCommunityTableActions = createGlobalState(() => {
 	const searchInput = ref('')
 	const debouncedSearchInput = refDebounced<string>(searchInput, 500)
 
 	const sorting = ref<SortingState>([
 		{
 			desc: true,
-			id: TABLE_ACCESSOR_KEYS.watchedMs // accessorKey
-		}
+			id: TABLE_ACCESSOR_KEYS.watchedMs, // accessorKey
+		},
 	])
 	const columnFilters = ref<ColumnFiltersState>([])
 	const columnVisibility = useLocalStorage<VisibilityState>(COLUMN_VISIBLE_STORAGE_KEY, {})
@@ -55,6 +54,6 @@ export const useCommunityTableActions = defineStore('features/community-table-ac
 		sorting,
 		columnFilters,
 		columnVisibility,
-		rowSelection
+		rowSelection,
 	}
 })
diff --git a/frontend/dashboard/src/features/community-users/composables/use-community-users-table.ts b/frontend/dashboard/src/features/community-users/composables/use-community-users-table.ts
index f26db2503..403cd6ded 100644
--- a/frontend/dashboard/src/features/community-users/composables/use-community-users-table.ts
+++ b/frontend/dashboard/src/features/community-users/composables/use-community-users-table.ts
@@ -8,7 +8,7 @@ import {
 	getSortedRowModel,
 	useVueTable,
 } from '@tanstack/vue-table'
-import { defineStore, storeToRefs } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed, h } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -32,10 +32,10 @@ export const TABLE_ACCESSOR_KEYS = {
 	usedChannelPoints: 'usedChannelPoints',
 }
 
-export const useCommunityUsersTable = defineStore('features/community-users-table', () => {
+export const useCommunityUsersTable = createGlobalState(() => {
 	const { t } = useI18n()
 
-	const { data: profile } = storeToRefs(useProfile())
+	const { data: profile } = useProfile()
 	const communityUsersApi = useCommunityUsersApi()
 
 	const {
@@ -46,7 +46,7 @@ export const useCommunityUsersTable = defineStore('features/community-users-tabl
 		tableOrder,
 		tableSortBy,
 		debouncedSearchInput,
-	} = storeToRefs(useCommunityTableActions())
+	} = useCommunityTableActions()
 
 	const { pagination, setPagination } = usePagination()
 	const params = computed<CommunityUsersOpts>((prevParams) => {
diff --git a/frontend/dashboard/src/features/greetings/composables/use-greetings-table.ts b/frontend/dashboard/src/features/greetings/composables/use-greetings-table.ts
index cba0322a4..b197b42b1 100644
--- a/frontend/dashboard/src/features/greetings/composables/use-greetings-table.ts
+++ b/frontend/dashboard/src/features/greetings/composables/use-greetings-table.ts
@@ -1,5 +1,5 @@
 import { type ColumnDef, getCoreRowModel, getPaginationRowModel, useVueTable } from '@tanstack/vue-table'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed, h } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -10,7 +10,7 @@ import { usePagination } from '@/composables/use-pagination.js'
 import UsersTableCellUser from '@/features/admin-panel/manage-users/components/users-table-cell-user.vue'
 import { valueUpdater } from '@/helpers/value-updater.js'
 
-export const useGreetingsTable = defineStore('features/greetings-table', () => {
+export const useGreetingsTable = createGlobalState(() => {
 	const { t } = useI18n()
 	const greetingsApi = useGreetingsApi()
 	const { pagination } = usePagination()
diff --git a/frontend/dashboard/src/features/greetings/greetings.vue b/frontend/dashboard/src/features/greetings/greetings.vue
index a126de43a..b987ca6e4 100644
--- a/frontend/dashboard/src/features/greetings/greetings.vue
+++ b/frontend/dashboard/src/features/greetings/greetings.vue
@@ -10,6 +10,6 @@ const greetingsTable = useGreetingsTable()
 <template>
 	<div class="flex flex-col w-full gap-4">
 		<GreetingsInformation />
-		<Table :table="greetingsTable.table" :is-loading="greetingsTable.isLoading" />
+		<Table :table="greetingsTable.table" :is-loading="greetingsTable.isLoading.value" />
 	</div>
 </template>
diff --git a/frontend/dashboard/src/layout/buttons/button-notifications.vue b/frontend/dashboard/src/layout/buttons/button-notifications.vue
index 43904b746..a35d8ea32 100644
--- a/frontend/dashboard/src/layout/buttons/button-notifications.vue
+++ b/frontend/dashboard/src/layout/buttons/button-notifications.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { IconBell } from '@tabler/icons-vue';
-import { NButton, NBadge, NDropdown, type DropdownOption } from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { h } from 'vue';
+import { IconBell } from '@tabler/icons-vue'
+import { type DropdownOption, NBadge, NButton, NDropdown } from 'naive-ui'
+import { h } from 'vue'
 
-import NotificationsDropdown from './notifications-dropdown.vue';
+import NotificationsDropdown from './notifications-dropdown.vue'
 
-import { useNotifications } from '@/composables/use-notifications';
+import { useNotifications } from '@/composables/use-notifications'
 
-const { notificationsCounter } = storeToRefs(useNotifications());
+const { notificationsCounter } = useNotifications()
 
 const profileOptions: DropdownOption[] = [
 	{
@@ -16,21 +15,21 @@ const profileOptions: DropdownOption[] = [
 		type: 'render',
 		render: () => h(NotificationsDropdown),
 	},
-];
+]
 </script>
 
 <template>
-	<n-dropdown
+	<NDropdown
 		trigger="click"
 		:options="profileOptions"
 		:on-update-show="notificationsCounter.onRead"
 		size="large"
 		style="top: 10px; left: 14px; width: 400px;"
 	>
-		<n-badge :value="notificationsCounter.counter">
-			<n-button circle quaternary>
+		<NBadge :value="notificationsCounter.counter">
+			<NButton circle quaternary>
 				<IconBell />
-			</n-button>
-		</n-badge>
-	</n-dropdown>
+			</NButton>
+		</NBadge>
+	</NDropdown>
 </template>
diff --git a/frontend/dashboard/src/layout/buttons/buttonLogout.vue b/frontend/dashboard/src/layout/buttons/buttonLogout.vue
index fd3e7dc53..b48ec4ec8 100644
--- a/frontend/dashboard/src/layout/buttons/buttonLogout.vue
+++ b/frontend/dashboard/src/layout/buttons/buttonLogout.vue
@@ -1,28 +1,27 @@
 <script setup lang="ts">
-import { IconLogout } from '@tabler/icons-vue';
-import { NButton, NSpin } from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
+import { IconLogout } from '@tabler/icons-vue'
+import { NButton, NSpin } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
 
-import { useLogout, useProfile } from '@/api';
+import { useLogout, useProfile } from '@/api'
 
-const { t } = useI18n();
-const { isLoading: isProfileLoading } = storeToRefs(useProfile());
-const logout = useLogout();
+const { t } = useI18n()
+const { isLoading: isProfileLoading } = useProfile()
+const logout = useLogout()
 </script>
 
 <template>
-	<n-button
+	<NButton
 		secondary
 		block
 		type="error"
 		:disabled="isProfileLoading"
 		@click="logout.execute"
 	>
-		<n-spin v-if="isProfileLoading" size="small" />
+		<NSpin v-if="isProfileLoading" size="small" />
 		<template v-else>
 			<IconLogout class="w-5 h-5" />
 			<span class="inline-block ml-1">{{ t('navbar.logout') }}</span>
 		</template>
-	</n-button>
+	</NButton>
 </template>
diff --git a/frontend/dashboard/src/layout/buttons/buttonPublicPage.vue b/frontend/dashboard/src/layout/buttons/buttonPublicPage.vue
index 176228882..404ec0155 100644
--- a/frontend/dashboard/src/layout/buttons/buttonPublicPage.vue
+++ b/frontend/dashboard/src/layout/buttons/buttonPublicPage.vue
@@ -1,30 +1,29 @@
 <script setup lang="ts">
-import { IconExternalLink } from '@tabler/icons-vue';
-import { NButton, NTooltip } from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { IconExternalLink } from '@tabler/icons-vue'
+import { NButton, NTooltip } from 'naive-ui'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { useProfile } from '@/api';
+import { useProfile } from '@/api'
 
-const { data: profileData } = storeToRefs(useProfile());
-const { t } = useI18n();
+const { data: profileData } = useProfile()
+const { t } = useI18n()
 
 const publicPageHref = computed(() => {
-	const selectedDashboardLogin = profileData.value?.selectedDashboardTwitchUser?.login;
-	if (!selectedDashboardLogin) return null;
+	const selectedDashboardLogin = profileData.value?.selectedDashboardTwitchUser?.login
+	if (!selectedDashboardLogin) return null
 
-	return `${window.location.origin}/p/${selectedDashboardLogin}`;
-});
+	return `${window.location.origin}/p/${selectedDashboardLogin}`
+})
 </script>
 
 <template>
-	<n-tooltip v-if="publicPageHref">
+	<NTooltip v-if="publicPageHref">
 		<template #trigger>
-			<n-button tag="a" circle quaternary target="_blank" :href="publicPageHref">
+			<NButton tag="a" circle quaternary target="_blank" :href="publicPageHref">
 				<IconExternalLink />
-			</n-button>
+			</NButton>
 		</template>
 		{{ t('navbar.publicPage') }}
-	</n-tooltip>
+	</NTooltip>
 </template>
diff --git a/frontend/dashboard/src/layout/buttons/import-commands-button.vue b/frontend/dashboard/src/layout/buttons/import-commands-button.vue
index 1de8f6474..be0ef7602 100644
--- a/frontend/dashboard/src/layout/buttons/import-commands-button.vue
+++ b/frontend/dashboard/src/layout/buttons/import-commands-button.vue
@@ -1,33 +1,31 @@
 <script setup lang="ts">
-import { IconDownload } from '@tabler/icons-vue';
-import { NButton, NA } from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
+import { IconDownload } from '@tabler/icons-vue'
+import { NA, NButton } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
 
-import { useSidebarCollapseStore } from '../use-sidebar-collapse';
+import { useSidebarCollapseStore } from '../use-sidebar-collapse'
 
 withDefaults(defineProps<{ isDrawer?: boolean }>(), {
 	isDrawer: false,
-});
+})
 
-const { t } = useI18n();
-const collapsedStore = useSidebarCollapseStore();
-const { isCollapsed } = storeToRefs(collapsedStore);
+const { t } = useI18n()
+const { isCollapsed } = useSidebarCollapseStore()
 </script>
 
 <template>
 	<div class="flex px-2 mb-2">
-		<router-link :to="{ name: 'Import'}" #="{ navigate, href }" custom>
-			<n-a :href="href" type="info" secondary block class="w-full" @click="navigate">
-				<n-button type="info" secondary block>
+		<router-link :to="{ name: 'Import' }" #="{ navigate, href }" custom>
+			<NA :href="href" type="info" secondary block class="w-full" @click="navigate">
+				<NButton type="info" secondary block>
 					<template #icon>
 						<IconDownload />
 					</template>
 					<template v-if="isDrawer || !isCollapsed">
 						{{ t('sidebar.import') }}
 					</template>
-				</n-button>
-			</n-a>
+				</NButton>
+			</NA>
 		</router-link>
 	</div>
 </template>
diff --git a/frontend/dashboard/src/layout/buttons/notifications-dropdown.vue b/frontend/dashboard/src/layout/buttons/notifications-dropdown.vue
index 132b04b18..3513c08dd 100644
--- a/frontend/dashboard/src/layout/buttons/notifications-dropdown.vue
+++ b/frontend/dashboard/src/layout/buttons/notifications-dropdown.vue
@@ -1,30 +1,29 @@
 <script setup lang="ts">
-import { NTime, NText, NScrollbar } from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
+import { NScrollbar, NText, NTime } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
 
-import { useNotifications } from '@/composables/use-notifications';
+import { useNotifications } from '@/composables/use-notifications'
 
-const { t } = useI18n();
+const { t } = useI18n()
 
-const { notifications } = storeToRefs(useNotifications());
+const { notifications } = useNotifications()
 </script>
 
 <template>
 	<div class="flex flex-col pl-3 py-2">
-		<n-scrollbar style="max-height: 400px" trigger="none">
+		<NScrollbar style="max-height: 400px" trigger="none">
 			<div class="flex flex-col gap-6 mr-4">
 				<div v-if="notifications.length === 0">
-					<n-text>{{ t('adminPanel.notifications.emptyNotifications') }}</n-text>
+					<NText>{{ t('adminPanel.notifications.emptyNotifications') }}</NText>
 				</div>
 				<div v-for="notification of notifications" :key="notification.id" class="flex flex-col gap-2">
-					<n-text class="w-full break-words" v-html="notification.text" />
-					<n-text :title="new Date(notification.createdAt).toLocaleString()" class="flex text-xs justify-end" :depth="3">
-						<n-time type="relative" :time="new Date(notification.createdAt)" />
-					</n-text>
+					<NText class="w-full break-words" v-html="notification.text" />
+					<NText :title="new Date(notification.createdAt).toLocaleString()" class="flex text-xs justify-end" :depth="3">
+						<NTime type="relative" :time="new Date(notification.createdAt)" />
+					</NText>
 				</div>
 			</div>
-		</n-scrollbar>
+		</NScrollbar>
 
 		<!-- <n-button>{{ t('navbar.seeAll') }}</n-button> -->
 	</div>
diff --git a/frontend/dashboard/src/layout/dashboardsMenu.vue b/frontend/dashboard/src/layout/dashboardsMenu.vue
index 28dea6c3f..3713da92b 100644
--- a/frontend/dashboard/src/layout/dashboardsMenu.vue
+++ b/frontend/dashboard/src/layout/dashboardsMenu.vue
@@ -1,123 +1,121 @@
 <script lang="ts" setup>
-import { IconChevronRight } from '@tabler/icons-vue';
-import { onClickOutside, onKeyStroke } from '@vueuse/core';
+import { IconChevronRight } from '@tabler/icons-vue'
+import { onClickOutside, onKeyStroke } from '@vueuse/core'
 import {
 	NAvatar,
 	NInput,
+	NPopover,
 	NSpin,
+	NText,
 	NVirtualList,
 	useThemeVars,
-	NText,
-	NPopover,
-} from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+} from 'naive-ui'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { useProfile, useDashboard } from '@/api/index.js';
-import { resolveUserName } from '@/helpers/resolveUserName.js';
-import { useSidebarCollapseStore } from '@/layout/use-sidebar-collapse';
+import { useDashboard, useProfile } from '@/api/index.js'
+import { resolveUserName } from '@/helpers/resolveUserName.js'
+import { useSidebarCollapseStore } from '@/layout/use-sidebar-collapse'
 
 const props = withDefaults(defineProps<{ isDrawer?: boolean }>(), {
 	isDrawer: false,
-});
+})
 
 const emits = defineEmits<{
 	dashboardSelected: []
-}>();
+}>()
 
-const { t } = useI18n();
-const themeVars = useThemeVars();
-const blockColor = computed(() => themeVars.value.buttonColor2);
-const blockColor2 = computed(() => themeVars.value.buttonColor2Hover);
+const { t } = useI18n()
+const themeVars = useThemeVars()
+const blockColor = computed(() => themeVars.value.buttonColor2)
+const blockColor2 = computed(() => themeVars.value.buttonColor2Hover)
 
-const { data: profile, isLoading: isProfileLoading } = storeToRefs(useProfile());
-const { setDashboard } = useDashboard();
+const { data: profile, isLoading: isProfileLoading } = useProfile()
+const { setDashboard } = useDashboard()
 
 const currentDashboard = computed(() => {
-	const dashboard = profile.value?.availableDashboards.find(dashboard => dashboard.id === profile.value?.selectedDashboardId);
-	if (!dashboard) return null;
+	const dashboard = profile.value?.availableDashboards.find(dashboard => dashboard.id === profile.value?.selectedDashboardId)
+	if (!dashboard) return null
 
-	return dashboard;
-});
+	return dashboard
+})
 
-const activeDashboard = ref('');
+const activeDashboard = ref('')
 watch(currentDashboard, (v) => {
-	if (!v) return;
-	activeDashboard.value = v.id;
-}, { immediate: true });
+	if (!v) return
+	activeDashboard.value = v.id
+}, { immediate: true })
 
 watch(activeDashboard, async (dashboardId) => {
-	if (dashboardId === profile.value?.selectedDashboardId) return;
+	if (dashboardId === profile.value?.selectedDashboardId) return
 
-	await setDashboard(dashboardId);
-	emits('dashboardSelected');
-});
+	await setDashboard(dashboardId)
+	emits('dashboardSelected')
+})
 
-const filterValue = ref('');
+const filterValue = ref('')
 
 const menuOptions = computed(() => {
 	return profile.value?.availableDashboards
 		.filter(dashboard => {
 			return dashboard.twitchProfile.displayName.includes(filterValue.value)
-				|| dashboard.twitchProfile.login.includes(filterValue.value);
+			  || dashboard.twitchProfile.login.includes(filterValue.value)
 		})
 		.map((u) => {
 			return {
 				key: u.id,
 				label: resolveUserName(u.twitchProfile.login, u.twitchProfile.displayName),
 				icon: u.twitchProfile.profileImageUrl,
-			};
-		}) ?? [];
-});
+			}
+		}) ?? []
+})
 
-const isSelectDashboardPopoverOpened = ref(false);
+const isSelectDashboardPopoverOpened = ref(false)
 
 function togglePopover(value?: boolean) {
-	isSelectDashboardPopoverOpened.value = value ?? !isSelectDashboardPopoverOpened.value;
+	isSelectDashboardPopoverOpened.value = value ?? !isSelectDashboardPopoverOpened.value
 }
 
 function onSelectDashboard(key: string) {
-	activeDashboard.value = key;
-	togglePopover(false);
+	activeDashboard.value = key
+	togglePopover(false)
 }
 
 onKeyStroke('k', (event) => {
 	if (event.ctrlKey || event.metaKey) {
-		event.preventDefault();
-		togglePopover();
+		event.preventDefault()
+		togglePopover()
 	}
-});
+})
 
-const refPopoverList = ref<HTMLElement | null>();
-const refPopover = ref<HTMLElement | null>();
+const refPopoverList = ref<HTMLElement | null>()
+const refPopover = ref<HTMLElement | null>()
 onClickOutside(refPopover, (event) => {
 	if (isSelectDashboardPopoverOpened.value) {
-		event.stopPropagation();
-		togglePopover(false);
+		event.stopPropagation()
+		togglePopover(false)
 	}
-}, { ignore: [refPopoverList] });
+}, { ignore: [refPopoverList] })
 
-const collapsedStore = useSidebarCollapseStore();
-const { isCollapsed } = storeToRefs(collapsedStore);
+const { isCollapsed } = useSidebarCollapseStore()
 
 const displayNameLength = computed(() => {
-	if (!currentDashboard.value) return 0;
-	return currentDashboard.value.twitchProfile.displayName.length;
-});
+	if (!currentDashboard.value) return 0
+	return currentDashboard.value.twitchProfile.displayName.length
+})
 
 const isDrawerCollapsed = computed(() => {
-	return props.isDrawer || !isCollapsed.value;
-});
+	return props.isDrawer || !isCollapsed.value
+})
 
 const popoverPlacement = computed(() => {
-	if (props.isDrawer) return 'bottom';
-	return isCollapsed.value ? 'right-start' : 'bottom-start';
-});
+	if (props.isDrawer) return 'bottom'
+	return isCollapsed.value ? 'right-start' : 'bottom-start'
+})
 </script>
 
 <template>
-	<n-popover
+	<NPopover
 		ref="refPopover"
 		:placement="popoverPlacement"
 		trigger="manual"
@@ -132,7 +130,7 @@ const popoverPlacement = computed(() => {
 			>
 				<div class="flex items-center justify-between w-full py-3 px-3.5 ">
 					<div class="flex gap-3">
-						<n-avatar
+						<NAvatar
 							round
 							class="flex self-center"
 							:src="currentDashboard?.twitchProfile.profileImageUrl"
@@ -141,12 +139,12 @@ const popoverPlacement = computed(() => {
 							v-if="isDrawerCollapsed"
 							class="flex flex-col whitespace-nowrap overflow-hidden overflow-ellipsis"
 						>
-							<n-text :depth="3" class="whitespace-nowrap text-xs">
+							<NText :depth="3" class="whitespace-nowrap text-xs">
 								{{ t(`dashboard.header.managingUser`) }}
-							</n-text>
-							<n-text :class="[displayNameLength > 16 ? 'text-xs' : 'text-sm']">
+							</NText>
+							<NText :class="[displayNameLength > 16 ? 'text-xs' : 'text-sm']">
 								{{ currentDashboard?.twitchProfile.displayName }}
-							</n-text>
+							</NText>
 						</div>
 					</div>
 
@@ -154,18 +152,18 @@ const popoverPlacement = computed(() => {
 						v-if="isDrawerCollapsed"
 						:style="{
 							transition: '0.2s transform ease',
-							transform: `rotate(${!isSelectDashboardPopoverOpened ? 90 : -90}deg)`
+							transform: `rotate(${!isSelectDashboardPopoverOpened ? 90 : -90}deg)`,
 						}"
 					/>
 				</div>
 			</div>
 		</template>
-		<n-spin v-if="isProfileLoading"></n-spin>
+		<NSpin v-if="isProfileLoading"></NSpin>
 		<div v-else ref="refPopoverList" class="dashboards-container">
-			<n-text :depth="3" class="text-xs">
+			<NText :depth="3" class="text-xs">
 				{{ t(`dashboard.header.channelsAccess`) }}
-			</n-text>
-			<n-virtual-list
+			</NText>
+			<NVirtualList
 				class="max-h-[400px]"
 				:item-size="42"
 				trigger="none"
@@ -178,16 +176,16 @@ const popoverPlacement = computed(() => {
 						class="item h-10"
 						@click="onSelectDashboard(item.key)"
 					>
-						<n-avatar :src="item.icon" round size="small" />
+						<NAvatar :src="item.icon" round size="small" />
 						<span> {{ item.label }}</span>
 					</div>
 				</template>
-			</n-virtual-list>
+			</NVirtualList>
 			<template v-if="(profile?.availableDashboards.length ?? 0) > 10">
-				<n-input v-model:value="filterValue" placeholder="Search" />
+				<NInput v-model:value="filterValue" placeholder="Search" />
 			</template>
 		</div>
-	</n-popover>
+	</NPopover>
 </template>
 
 <style scoped>
diff --git a/frontend/dashboard/src/layout/dropdowns/dropdownProfile.vue b/frontend/dashboard/src/layout/dropdowns/dropdownProfile.vue
index e45da4ee0..2edf04333 100644
--- a/frontend/dashboard/src/layout/dropdowns/dropdownProfile.vue
+++ b/frontend/dashboard/src/layout/dropdowns/dropdownProfile.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { type DropdownOption, NAvatar, NButton, NDropdown, NSpin } from 'naive-ui';
-import { h } from 'vue';
+import { type DropdownOption, NAvatar, NButton, NDropdown, NSpin } from 'naive-ui'
+import { h } from 'vue'
 
-import DropdownFooter from './profile/footer.vue';
-import DropdownHeader from './profile/header.vue';
+import DropdownFooter from './profile/footer.vue'
+import DropdownHeader from './profile/header.vue'
 
-import { useProfile } from '@/api';
-import { storeToRefs } from 'pinia';
+import { useProfile } from '@/api/auth.js'
 
-const { data: profileData, isLoading: isProfileLoading } = storeToRefs(useProfile());
+const { data: profileData, isLoading: isProfileLoading } = useProfile()
 
 const profileOptions: DropdownOption[] = [
 	{
@@ -25,25 +24,25 @@ const profileOptions: DropdownOption[] = [
 		type: 'render',
 		render: () => h(DropdownFooter),
 	},
-];
+]
 </script>
 
 <template>
-	<n-dropdown
+	<NDropdown
 		trigger="click"
 		:options="profileOptions"
 		size="large"
 		style="top: 12px; left: 14px; width: 400px;"
 	>
-		<n-button text>
-			<n-spin v-if="isProfileLoading" size="small" />
+		<NButton text>
+			<NSpin v-if="isProfileLoading" size="small" />
 			<div v-else class="flex gap-1 items-center">
-				<n-avatar
+				<NAvatar
 					size="small"
 					:src="profileData?.avatar"
 					round
 				/>
 			</div>
-		</n-button>
-	</n-dropdown>
+		</NButton>
+	</NDropdown>
 </template>
diff --git a/frontend/dashboard/src/layout/dropdowns/profile/footer.vue b/frontend/dashboard/src/layout/dropdowns/profile/footer.vue
index 6fe9e7b56..01510b8cd 100644
--- a/frontend/dashboard/src/layout/dropdowns/profile/footer.vue
+++ b/frontend/dashboard/src/layout/dropdowns/profile/footer.vue
@@ -1,21 +1,20 @@
 <script setup lang="ts">
-import { IconSettings, IconUser } from '@tabler/icons-vue';
-import { NButton } from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { computed } from 'vue';
-import { RouterLink } from 'vue-router';
+import { IconSettings, IconUser } from '@tabler/icons-vue'
+import { NButton } from 'naive-ui'
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
 
-import { useProfile } from '@/api';
-import ButtonLogout from '@/layout/buttons/buttonLogout.vue';
+import { useProfile } from '@/api'
+import ButtonLogout from '@/layout/buttons/buttonLogout.vue'
 
-const profile = storeToRefs(useProfile());
-const isAdmin = computed(() => profile.data.value?.isBotAdmin);
+const profile = useProfile()
+const isAdmin = computed(() => profile.data.value?.isBotAdmin)
 </script>
 
 <template>
 	<div class="flex flex-col gap-1 p-2">
-		<router-link :to="{ name: 'Settings' }" #="{ navigate, href }" custom>
-			<n-button
+		<RouterLink :to="{ name: 'Settings' }" #="{ navigate, href }" custom>
+			<NButton
 				:href="href"
 				secondary
 				block
@@ -28,11 +27,11 @@ const isAdmin = computed(() => profile.data.value?.isBotAdmin);
 				</template>
 
 				Settings
-			</n-button>
-		</router-link>
+			</NButton>
+		</RouterLink>
 
-		<router-link v-if="isAdmin" :to="{ name: 'AdminPanel' }" #="{ navigate, href }" custom>
-			<n-button
+		<RouterLink v-if="isAdmin" :to="{ name: 'AdminPanel' }" #="{ navigate, href }" custom>
+			<NButton
 				:href="href"
 				secondary
 				block
@@ -45,9 +44,9 @@ const isAdmin = computed(() => profile.data.value?.isBotAdmin);
 				</template>
 
 				Admin Panel
-			</n-button>
-		</router-link>
+			</NButton>
+		</RouterLink>
 
-		<button-logout />
+		<ButtonLogout />
 	</div>
 </template>
diff --git a/frontend/dashboard/src/layout/dropdowns/profile/header.vue b/frontend/dashboard/src/layout/dropdowns/profile/header.vue
index 008424855..61670f8e8 100644
--- a/frontend/dashboard/src/layout/dropdowns/profile/header.vue
+++ b/frontend/dashboard/src/layout/dropdowns/profile/header.vue
@@ -1,24 +1,23 @@
 <script setup lang="ts">
-import { NAvatar, NText } from 'naive-ui';
+import { NAvatar, NText } from 'naive-ui'
 
-import { useProfile } from '@/api';
-import { resolveUserName } from '@/helpers';
-import { storeToRefs } from 'pinia';
+import { useProfile } from '@/api/auth.js'
+import { resolveUserName } from '@/helpers/resolveUserName.js'
 
-const { data: profileData } = storeToRefs(useProfile());
+const { data: profile } = useProfile()
 </script>
 
 <template>
 	<div class="flex items-center px-3 py-2">
-		<div v-if="profileData" class="flex gap-3 items-center">
-			<n-avatar :src="profileData?.avatar" round />
+		<div v-if="profile" class="flex gap-3 items-center">
+			<NAvatar :src="profile?.avatar" round />
 			<div class="flex flex-col">
-				<n-text :depth="3" class="text-xs">
+				<NText :depth="3" class="text-xs">
 					Logged as
-				</n-text>
-				<n-text>
-					{{ resolveUserName(profileData.login, profileData.displayName) }}
-				</n-text>
+				</NText>
+				<NText>
+					{{ resolveUserName(profile.login, profile.displayName) }}
+				</NText>
 			</div>
 		</div>
 	</div>
diff --git a/frontend/dashboard/src/layout/feedback/feedback-button.vue b/frontend/dashboard/src/layout/feedback/feedback-button.vue
index 81668a1e7..13ace021f 100644
--- a/frontend/dashboard/src/layout/feedback/feedback-button.vue
+++ b/frontend/dashboard/src/layout/feedback/feedback-button.vue
@@ -1,31 +1,28 @@
 <script setup lang="ts">
+import { IconMessageShare } from '@tabler/icons-vue'
+import { NButton } from 'naive-ui'
+import { computed, h } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { IconMessageShare } from '@tabler/icons-vue';
-import { NButton } from 'naive-ui';
-import { type ButtonProps } from 'naive-ui/es/button/src/Button';
-import { storeToRefs } from 'pinia';
-import { computed, h } from 'vue';
-import { useI18n } from 'vue-i18n';
+import FeedbackModal from './feedback-modal.vue'
 
-import FeedbackModal from './feedback-modal.vue';
+import type { ButtonProps } from 'naive-ui/es/button/src/Button'
 
-import { useNaiveDiscrete } from '@/composables/use-naive-discrete';
-import { useFeedbackForm } from '@/layout/feedback/feedback';
-import { useSidebarCollapseStore } from '@/layout/use-sidebar-collapse';
+import { useNaiveDiscrete } from '@/composables/use-naive-discrete'
+import { useFeedbackForm } from '@/layout/feedback/feedback'
+import { useSidebarCollapseStore } from '@/layout/use-sidebar-collapse'
 
 withDefaults(defineProps<{ isDrawer?: boolean }>(), {
 	isDrawer: false,
-});
+})
 
-const discrete = useNaiveDiscrete();
-const feedbackFormStore = useFeedbackForm();
-const { t } = useI18n();
-
-const { form } = storeToRefs(feedbackFormStore);
+const discrete = useNaiveDiscrete()
+const { form, submitForm, clearForm } = useFeedbackForm()
+const { t } = useI18n()
 
 const positiveButtonProps = computed<ButtonProps>(() => ({
 	disabled: !form.value.message.length,
-}));
+}))
 
 function openFeedbackModal() {
 	discrete.dialog.create({
@@ -36,29 +33,28 @@ function openFeedbackModal() {
 		// this works, but typings saying it not. Feel free to provide better and safe solution
 		positiveButtonProps: positiveButtonProps as ButtonProps,
 		async onPositiveClick() {
-			await feedbackFormStore.$submit();
+			await submitForm()
 			discrete.notification.success({
 				title: t('feedback.notification'),
 				duration: 2500,
-			});
-			feedbackFormStore.$clearForm();
+			})
+			clearForm()
 		},
-	});
+	})
 }
 
-const collapsedStore = useSidebarCollapseStore();
-const { isCollapsed } = storeToRefs(collapsedStore);
+const { isCollapsed } = useSidebarCollapseStore()
 </script>
 
 <template>
 	<div class="flex px-2 mb-2">
-		<n-button block secondary type="success" size="medium" @click="openFeedbackModal">
+		<NButton block secondary type="success" size="medium" @click="openFeedbackModal">
 			<template #icon>
 				<IconMessageShare />
 			</template>
 			<template v-if="isDrawer || !isCollapsed">
 				{{ t('feedback.button') }}
 			</template>
-		</n-button>
+		</NButton>
 	</div>
 </template>
diff --git a/frontend/dashboard/src/layout/feedback/feedback-modal.vue b/frontend/dashboard/src/layout/feedback/feedback-modal.vue
index b5b1903cc..fd7b28957 100644
--- a/frontend/dashboard/src/layout/feedback/feedback-modal.vue
+++ b/frontend/dashboard/src/layout/feedback/feedback-modal.vue
@@ -1,33 +1,31 @@
 <script setup lang="ts">
-import { NForm, NFormItem, NInput, NAlert } from 'naive-ui';
-import type { FormInst, FormRules } from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { NAlert, NForm, NFormItem, NInput } from 'naive-ui'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { useFeedbackForm } from './feedback.js';
+import { useFeedbackForm } from './feedback.js'
 
-const messageMaxLength = 1000;
+import type { FormInst, FormRules } from 'naive-ui'
 
-const feedbackFormStore = useFeedbackForm();
-const { t } = useI18n();
+const messageMaxLength = 1000
 
-const { form, error } = storeToRefs(feedbackFormStore);
+const { form, error } = useFeedbackForm()
+const { t } = useI18n()
 
-const formRef = ref<FormInst | null>(null);
+const formRef = ref<FormInst | null>(null)
 const rules: FormRules = {
 	message: {
 		required: true,
 		message: t('feedback.validation.emptyMessage'),
 		trigger: ['input', 'blur'],
 	},
-};
+}
 </script>
 
 <template>
-	<n-form ref="formRef" :rules="rules" :model="form">
-		<n-form-item :label="t('feedback.messageLabel')" path="message">
-			<n-input
+	<NForm ref="formRef" :rules="rules" :model="form">
+		<NFormItem :label="t('feedback.messageLabel')" path="message">
+			<NInput
 				v-model:value="form.message"
 				:maxlength="messageMaxLength"
 				type="textarea"
@@ -37,9 +35,9 @@ const rules: FormRules = {
 					minRows: 3,
 				}"
 			/>
-		</n-form-item>
-	</n-form>
-	<n-alert v-if="error" type="error">
+		</NFormItem>
+	</NForm>
+	<NAlert v-if="error" type="error">
 		{{ error }}
-	</n-alert>
+	</NAlert>
 </template>
diff --git a/frontend/dashboard/src/layout/feedback/feedback.ts b/frontend/dashboard/src/layout/feedback/feedback.ts
index ecfba651e..9f4ecea28 100644
--- a/frontend/dashboard/src/layout/feedback/feedback.ts
+++ b/frontend/dashboard/src/layout/feedback/feedback.ts
@@ -1,39 +1,39 @@
-import { RpcError } from '@protobuf-ts/runtime-rpc';
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { RpcError } from '@protobuf-ts/runtime-rpc'
+import { createGlobalState } from '@vueuse/core'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { useLeaveFeedback } from '@/api/feedback.js';
+import { useLeaveFeedback } from '@/api/feedback.js'
 
-export const useFeedbackForm = defineStore('feedback', () => {
-	const formApi = useLeaveFeedback();
-	const { t } = useI18n();
+export const useFeedbackForm = createGlobalState(() => {
+	const formApi = useLeaveFeedback()
+	const { t } = useI18n()
 
-	const error = ref<string | null>(null);
+	const error = ref<string | null>(null)
 	const form = ref({
 		message: '',
-	});
+	})
 
-	function $clearForm() {
-		form.value.message = '';
-		error.value = '';
+	function clearForm() {
+		form.value.message = ''
+		error.value = ''
 	}
 
-	async function $submit() {
+	async function submitForm() {
 		try {
-			await formApi.mutateAsync(form.value.message);
+			await formApi.mutateAsync(form.value.message)
 		} catch (e) {
 			if (e instanceof RpcError) {
 				if (e.code === 'resource_exhausted') {
-					error.value = t('feedback.rateLimited', { time: e.meta.retry_after });
+					error.value = t('feedback.rateLimited', { time: e.meta.retry_after })
 				} else {
-					error.value = e.message;
+					error.value = e.message
 				}
 
-				throw e;
+				throw e
 			} else {
-				error.value = 'Unexpected error happened, shared this into our discord';
-				throw e;
+				error.value = 'Unexpected error happened, shared this into our discord'
+				throw e
 			}
 		}
 	}
@@ -41,7 +41,7 @@ export const useFeedbackForm = defineStore('feedback', () => {
 	return {
 		form,
 		error,
-		$submit,
-		$clearForm,
-	};
-});
+		submitForm,
+		clearForm,
+	}
+})
diff --git a/frontend/dashboard/src/layout/layout.vue b/frontend/dashboard/src/layout/layout.vue
index 6bbecaf2c..509d1bfeb 100644
--- a/frontend/dashboard/src/layout/layout.vue
+++ b/frontend/dashboard/src/layout/layout.vue
@@ -1,70 +1,68 @@
 <script setup lang="ts">
-import { useBreakpoints, breakpointsTailwind } from '@vueuse/core';
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import {
-	darkTheme,
-	lightTheme,
+	NConfigProvider,
+	NDialogProvider,
 	NLayout,
-	NLayoutHeader,
 	NLayoutContent,
+	NLayoutHeader,
 	NLayoutSider,
-	NConfigProvider,
 	NMessageProvider,
 	NNotificationProvider,
-	NSpin,
-	NDialogProvider,
 	NScrollbar,
-} from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { computed, ref, watch } from 'vue';
-import { RouterView, useRouter } from 'vue-router';
+	NSpin,
+	darkTheme,
+	lightTheme,
+} from 'naive-ui'
+import { computed, ref, watch } from 'vue'
+import { RouterView, useRouter } from 'vue-router'
 
-import { Toaster as Sonner } from '@/components/ui/sonner';
-import { Toaster } from '@/components/ui/toast';
-import { useLayout } from '@/composables/use-layout';
-import { useTheme } from '@/composables/use-theme.js';
-import Header from '@/layout/header.vue';
-import Sidebar from '@/layout/sidebar.vue';
-import { useSidebarCollapseStore } from '@/layout/use-sidebar-collapse';
+import { Toaster as Sonner } from '@/components/ui/sonner'
+import { Toaster } from '@/components/ui/toast'
+import { useLayout } from '@/composables/use-layout'
+import { useTheme } from '@/composables/use-theme.js'
+import Header from '@/layout/header.vue'
+import Sidebar from '@/layout/sidebar.vue'
+import { useSidebarCollapseStore } from '@/layout/use-sidebar-collapse'
 
-const { theme } = useTheme();
-const themeStyles = computed(() => theme.value === 'dark' ? darkTheme : lightTheme);
+const { theme } = useTheme()
+const themeStyles = computed(() => theme.value === 'dark' ? darkTheme : lightTheme)
 
-const { layoutRef } = storeToRefs(useLayout());
-const isRouterReady = ref(false);
-const router = useRouter();
+const { layoutRef } = useLayout()
+const isRouterReady = ref(false)
+const router = useRouter()
 
-router.isReady().finally(() => isRouterReady.value = true);
+router.isReady().finally(() => isRouterReady.value = true)
 
-const breakPoints = useBreakpoints(breakpointsTailwind);
+const breakPoints = useBreakpoints(breakpointsTailwind)
 // If we are on a smaller than or equal to lg, we want the sidebar to collapse.
-const smallerOrEqualLg = breakPoints.smallerOrEqual('lg');
+const smallerOrEqualLg = breakPoints.smallerOrEqual('lg')
 // If we are on a smaller than or equal to md, we want the sidebar to hide and show hamburger menu with drawer.
-const smallerOrEqualMd = breakPoints.smallerOrEqual('md');
+const smallerOrEqualMd = breakPoints.smallerOrEqual('md')
 
-const collapsedStore = useSidebarCollapseStore();
-const { isCollapsed } = storeToRefs(collapsedStore);
+const { isCollapsed, set: setIsCollapsed, toggle: toggleSidebar } = useSidebarCollapseStore()
 
 watch(smallerOrEqualLg, (v) => {
-	collapsedStore.set(v);
-});
+	setIsCollapsed(v)
+})
 </script>
 
 <template>
-	<n-config-provider
+	<NConfigProvider
 		:theme="themeStyles"
 		class="h-full"
-		:breakpoints="{ xs: 0, s: 640, m: 1024, l: 1280, xl: 1536, xxl: 1920, '2xl': 2560 }"
+		:breakpoints="{ 'xs': 0, 's': 640, 'm': 1024, 'l': 1280, 'xl': 1536, 'xxl': 1920, '2xl': 2560 }"
 	>
-		<n-notification-provider :max="5">
-			<n-message-provider :duration="2500" :closable="true">
-				<n-dialog-provider>
-					<n-layout class="h-full">
-						<n-layout-header bordered class="w-full" style="height: var(--layout-header-height)">
+		<NNotificationProvider :max="5">
+			<NMessageProvider :duration="2500" :closable="true">
+				<NDialogProvider>
+					<NLayout class="h-full">
+						<NLayoutHeader bordered class="w-full" style="height: var(--layout-header-height)">
 							<Header />
-						</n-layout-header>
+						</NLayoutHeader>
 
-						<n-layout has-sider style="height: calc(100vh - var(--layout-header-height))">
-							<n-layout-sider
+						<NLayout has-sider style="height: calc(100vh - var(--layout-header-height))">
+							<NLayoutSider
 								v-if="!smallerOrEqualMd"
 								bordered
 								collapse-mode="width"
@@ -74,39 +72,39 @@ watch(smallerOrEqualLg, (v) => {
 								:native-scrollbar="false"
 								:collapsed="isCollapsed"
 								:show-collapsed-content="false"
-								@update-collapsed="collapsedStore.toggle"
+								@update-collapsed="toggleSidebar"
 							>
 								<Sidebar />
-							</n-layout-sider>
-							<n-layout-content ref="layoutRef">
+							</NLayoutSider>
+							<NLayoutContent ref="layoutRef">
 								<div v-if="!isRouterReady" class="app-loader">
-									<n-spin size="large" />
+									<NSpin size="large" />
 								</div>
-								<router-view v-else v-slot="{ Component, route }">
-									<n-scrollbar trigger="none">
+								<RouterView v-else v-slot="{ Component, route }">
+									<NScrollbar trigger="none">
 										<transition :name="route.meta.transition as string || 'router'" mode="out-in">
 											<div
 												:key="route.path"
 												:style="{
-													padding: route.meta?.noPadding ? undefined: '24px',
-													height: route.meta?.fullScreen ? 'calc(100% - var(--layout-header-height))' : 'auto'
+													padding: route.meta?.noPadding ? undefined : '24px',
+													height: route.meta?.fullScreen ? 'calc(100% - var(--layout-header-height))' : 'auto',
 												}"
 											>
 												<component :is="Component" />
 											</div>
 										</transition>
-									</n-scrollbar>
-								</router-view>
+									</NScrollbar>
+								</RouterView>
 
 								<Toaster />
 								<Sonner />
-							</n-layout-content>
-						</n-layout>
-					</n-layout>
-				</n-dialog-provider>
-			</n-message-provider>
-		</n-notification-provider>
-	</n-config-provider>
+							</NLayoutContent>
+						</NLayout>
+					</NLayout>
+				</NDialogProvider>
+			</NMessageProvider>
+		</NNotificationProvider>
+	</NConfigProvider>
 </template>
 
 <style>
diff --git a/frontend/dashboard/src/layout/use-sidebar-collapse.ts b/frontend/dashboard/src/layout/use-sidebar-collapse.ts
index c8ba2d79a..e8183696e 100644
--- a/frontend/dashboard/src/layout/use-sidebar-collapse.ts
+++ b/frontend/dashboard/src/layout/use-sidebar-collapse.ts
@@ -1,20 +1,19 @@
-import { useLocalStorage } from '@vueuse/core';
-import { defineStore } from 'pinia';
+import { createGlobalState, useLocalStorage } from '@vueuse/core'
 
-export const useSidebarCollapseStore = defineStore('isSidebarCollapsed', () => {
-	const isCollapsed = useLocalStorage('twirSidebarIsCollapsed', false);
+export const useSidebarCollapseStore = createGlobalState(() => {
+	const isCollapsed = useLocalStorage('twirSidebarIsCollapsed', false)
 
 	function set(v: boolean) {
-		isCollapsed.value = v;
+		isCollapsed.value = v
 	}
 
 	function toggle() {
-		isCollapsed.value = !isCollapsed.value;
+		isCollapsed.value = !isCollapsed.value
 	}
 
 	return {
 		isCollapsed,
 		set,
 		toggle,
-	};
-});
+	}
+})
diff --git a/frontend/dashboard/src/locales/en.json b/frontend/dashboard/src/locales/en.json
index 6569cdda5..fe607845e 100644
--- a/frontend/dashboard/src/locales/en.json
+++ b/frontend/dashboard/src/locales/en.json
@@ -587,6 +587,7 @@
       "deniedUsers": "Banned Users",
       "deniedSongs": "Banned Songs List",
       "takeSongFromDonationMessage": "Attempt to get song links from donation messages?",
+			"confirmClearQueue": "Are you sure you want to clear the queue?",
       "users": {
         "maxRequests": "Maximum Request Per-User Amount",
         "minimalWatchTime": "Minimal Watch Time (in minutes)",
@@ -605,12 +606,12 @@
       "users": "Users",
       "songs": "Songs"
     },
-	"ban": {
-		"user": "Ban user",
-		"song": "Ban song",
-		"userConfirm": "Are you sure you want to ban this user?",
-		"songConfirm": "Are you sure you want to ban this song?"
-	}
+    "ban": {
+      "user": "Ban user",
+      "song": "Ban song",
+      "userConfirm": "Are you sure you want to ban this user?",
+      "songConfirm": "Are you sure you want to ban this song?"
+    }
   },
   "timers": {
     "table": {
diff --git a/frontend/dashboard/src/main.ts b/frontend/dashboard/src/main.ts
index 1664b9a13..b236e80a2 100644
--- a/frontend/dashboard/src/main.ts
+++ b/frontend/dashboard/src/main.ts
@@ -3,7 +3,6 @@ import './assets/index.css'
 import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'
 import { broadcastQueryClient } from '@tanstack/query-broadcast-client-experimental'
 import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
-import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 
 import { i18n } from './plugins/i18n.js'
@@ -11,7 +10,6 @@ import { newRouter } from './plugins/router.js'
 
 import App from '@/App.vue'
 
-const pinia = createPinia()
 const app = createApp(App)
 
 const queryClient = new QueryClient({
@@ -20,18 +18,18 @@ const queryClient = new QueryClient({
 			refetchOnWindowFocus: false,
 			refetchOnMount: false,
 			refetchOnReconnect: false,
-			retry: false
-		}
-	}
+			retry: false,
+		},
+	},
 })
 
 broadcastQueryClient({
 	queryClient,
-	broadcastChannel: 'twir-dashboard'
+	broadcastChannel: 'twir-dashboard',
 })
 
 VueQueryPlugin.install(app, {
-	queryClient
+	queryClient,
 })
 
 const meta = document.createElement('meta')
@@ -39,7 +37,6 @@ meta.name = 'naive-ui-style'
 document.head.appendChild(meta)
 
 app
-	.use(pinia)
 	.use(i18n)
 	.use(newRouter())
 	.use(VueMonacoEditorPlugin)
diff --git a/frontend/dashboard/src/pages/Alerts.vue b/frontend/dashboard/src/pages/Alerts.vue
index efc1593e7..a349441c8 100644
--- a/frontend/dashboard/src/pages/Alerts.vue
+++ b/frontend/dashboard/src/pages/Alerts.vue
@@ -1,25 +1,24 @@
 <script setup lang="ts">
-import { NAlert } from 'naive-ui';
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { NAlert } from 'naive-ui'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { useProfile } from '@/api/index.js';
-import List from '@/components/alerts/list.vue';
-import copyInput from '@/components/copyInput.vue';
-import { storeToRefs } from 'pinia';
+import { useProfile } from '@/api/index.js'
+import List from '@/components/alerts/list.vue'
+import copyInput from '@/components/copyInput.vue'
 
-const { t } = useI18n();
-const userProfile = storeToRefs(useProfile());
+const { t } = useI18n()
+const { data: profile } = useProfile()
 const overlayLink = computed(() => {
-	return `${window.location.origin}/overlays/${userProfile.data?.value?.apiKey}/alerts`;
-});
+	return `${window.location.origin}/overlays/${profile.value?.apiKey}/alerts`
+})
 </script>
 
 <template>
-	<n-alert type="info" :title="t('alerts.info')">
+	<NAlert type="info" :title="t('alerts.info')">
 		<span>{{ t('alerts.overlayLabel') }}</span>
 		<copy-input type="password" :text="overlayLink" size="medium" />
-	</n-alert>
+	</NAlert>
 
-	<list />
+	<List />
 </template>
diff --git a/frontend/dashboard/src/pages/Overlays.vue b/frontend/dashboard/src/pages/Overlays.vue
index 3f5bffef0..5ac35ebde 100644
--- a/frontend/dashboard/src/pages/Overlays.vue
+++ b/frontend/dashboard/src/pages/Overlays.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { IconPlus, IconSettings, IconTrash } from '@tabler/icons-vue';
+import { IconPlus, IconSettings, IconTrash } from '@tabler/icons-vue'
 import {
 	NAlert,
 	NButton,
@@ -9,99 +9,98 @@ import {
 	NPopconfirm,
 	NTag,
 	useNotification,
-} from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+} from 'naive-ui'
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 
-import { useOverlaysRegistry, useProfile, useUserAccessFlagChecker } from '@/api/index.js';
-import Card from '@/components/card/card.vue';
-import { responsiveCols } from '@/components/consants.js';
-import Brb from '@/components/overlays/brb.vue';
-import Chat from '@/components/overlays/chat.vue';
-import Dudes from '@/components/overlays/dudes.vue';
-import Kappagen from '@/components/overlays/kappagen.vue';
-import NowPlaying from '@/components/overlays/now-playing.vue';
-import OBS from '@/components/overlays/obs.vue';
-import TTS from '@/components/overlays/tts.vue';
-import { convertOverlayLayerTypeToText } from '@/components/registry/overlays/helpers.js';
-import { ChannelRolePermissionEnum } from '@/gql/graphql';
-import { copyToClipBoard } from '@/helpers/index.js';
+import { useOverlaysRegistry, useProfile, useUserAccessFlagChecker } from '@/api/index.js'
+import Card from '@/components/card/card.vue'
+import { responsiveCols } from '@/components/consants.js'
+import Brb from '@/components/overlays/brb.vue'
+import Chat from '@/components/overlays/chat.vue'
+import Dudes from '@/components/overlays/dudes.vue'
+import Kappagen from '@/components/overlays/kappagen.vue'
+import NowPlaying from '@/components/overlays/now-playing.vue'
+import OBS from '@/components/overlays/obs.vue'
+import TTS from '@/components/overlays/tts.vue'
+import { convertOverlayLayerTypeToText } from '@/components/registry/overlays/helpers.js'
+import { ChannelRolePermissionEnum } from '@/gql/graphql'
+import { copyToClipBoard } from '@/helpers/index.js'
 
+const { t } = useI18n()
+const userCanManageOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays)
+const { data: profile } = useProfile()
 
-const { t } = useI18n();
-const userCanManageOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays);
-const userProfile = storeToRefs(useProfile());
-
-const message = useNotification();
-const copyUrl = async (id: string) => {
-	await copyToClipBoard(`${window.location.origin}/overlays/${userProfile.data.value?.apiKey}/registry/overlays/${id}`);
+const message = useNotification()
+async function copyUrl(id: string) {
+	await copyToClipBoard(`${window.location.origin}/overlays/${profile.value?.apiKey}/registry/overlays/${id}`)
 	message.success({
 		title: t('overlays.copied'),
 		duration: 2500,
-	});
-};
-const overlaysManager = useOverlaysRegistry();
-const deleter = overlaysManager.deleteOne;
-const { data: customOverlays, refetch } = overlaysManager.getAll({});
-onMounted(refetch);
-
+	})
+}
+const overlaysManager = useOverlaysRegistry()
+const deleter = overlaysManager.deleteOne
+const { data: customOverlays, refetch } = overlaysManager.getAll({})
+onMounted(refetch)
 
-const router = useRouter();
+const router = useRouter()
 
-const editCustomOverlay = (id?: string) => router.push({
-	name: 'RegistryOverlayEdit',
-	params: {
-		id: id ?? 'new',
-	},
-});
+function editCustomOverlay(id?: string) {
+	return router.push({
+		name: 'RegistryOverlayEdit',
+		params: {
+			id: id ?? 'new',
+		},
+	})
+}
 </script>
 
 <template>
 	<div class="flex items-center justify-center max-w-[60vw] mx-auto my-0">
-		<n-grid :cols="responsiveCols" :x-gap="16" :y-gap="16" responsive="screen">
-			<n-grid-item :span="1">
-				<now-playing />
-			</n-grid-item>
-			<n-grid-item :span="1">
+		<NGrid :cols="responsiveCols" :x-gap="16" :y-gap="16" responsive="screen">
+			<NGridItem :span="1">
+				<NowPlaying />
+			</NGridItem>
+			<NGridItem :span="1">
 				<TTS />
-			</n-grid-item>
-			<n-grid-item :span="1">
+			</NGridItem>
+			<NGridItem :span="1">
 				<OBS />
-			</n-grid-item>
-			<n-grid-item :span="1">
+			</NGridItem>
+			<NGridItem :span="1">
 				<Chat />
-			</n-grid-item>
-			<n-grid-item :span="1">
+			</NGridItem>
+			<NGridItem :span="1">
 				<Kappagen />
-			</n-grid-item>
-			<n-grid-item :span="1">
+			</NGridItem>
+			<NGridItem :span="1">
 				<Dudes />
-			</n-grid-item>
-			<n-grid-item :span="1">
+			</NGridItem>
+			<NGridItem :span="1">
 				<Brb />
-			</n-grid-item>
+			</NGridItem>
 
-			<n-grid-item v-for="overlay of customOverlays?.overlays" :key="overlay.id" :span="1">
-				<card
+			<NGridItem v-for="overlay of customOverlays?.overlays" :key="overlay.id" :span="1">
+				<Card
 					:title="overlay.name"
 					style="height: 100%;"
 				>
 					<template #content>
 						<div v-if="overlay.layers.length" class="flex gap-1 flex-wrap">
-							<n-tag v-for="layer of overlay.layers" :key="layer.id" type="success">
+							<NTag v-for="layer of overlay.layers" :key="layer.id" type="success">
 								{{ convertOverlayLayerTypeToText(layer.type) }}
-							</n-tag>
+							</NTag>
 						</div>
-						<n-alert v-else type="warning" :title="t('overlaysRegistry.noLayersCreated.title')">
+						<NAlert v-else type="warning" :title="t('overlaysRegistry.noLayersCreated.title')">
 							{{ t('overlaysRegistry.noLayersCreated.description') }}
-						</n-alert>
+						</NAlert>
 					</template>
 
 					<template #footer>
 						<div class="flex gap-2 flex-wrap">
-							<n-button
+							<NButton
 								secondary
 								size="large"
 								:disabled="!userCanManageOverlays"
@@ -109,47 +108,47 @@ const editCustomOverlay = (id?: string) => router.push({
 							>
 								<span>{{ t('sharedButtons.settings') }}</span>
 								<IconSettings />
-							</n-button>
+							</NButton>
 
-							<n-button
+							<NButton
 								secondary
 								type="info"
 								size="large"
-								:disabled="!userCanManageOverlays || userProfile.data.value?.selectedDashboardId != userProfile.data.value?.id"
+								:disabled="!userCanManageOverlays || profile?.selectedDashboardId !== profile?.id"
 								@click="copyUrl(overlay.id)"
 							>
 								<span>{{ t('overlays.copyOverlayLink') }}</span>
 								<IconSettings />
-							</n-button>
+							</NButton>
 
-							<n-popconfirm
+							<NPopconfirm
 								:positive-text="t('deleteConfirmation.confirm')"
 								:negative-text="t('deleteConfirmation.cancel')"
 								@positive-click="() => deleter.mutate({ id: overlay.id })"
 							>
 								{{ t('deleteConfirmation.text') }}
 								<template #trigger>
-									<n-button secondary size="large" type="error" :disabled="!userCanManageOverlays">
+									<NButton secondary size="large" type="error" :disabled="!userCanManageOverlays">
 										<span>{{ t('sharedButtons.delete') }}</span>
 										<IconTrash />
-									</n-button>
+									</NButton>
 								</template>
-							</n-popconfirm>
+							</NPopconfirm>
 						</div>
 					</template>
-				</card>
-			</n-grid-item>
+				</Card>
+			</NGridItem>
 
-			<n-grid-item :span="1">
-				<n-card
+			<NGridItem :span="1">
+				<NCard
 					class="flex items-center justify-center h-full"
 					:style="{ cursor: userCanManageOverlays ? 'pointer' : 'not-allowed' }"
 					embedded
 					@click="() => editCustomOverlay()"
 				>
 					<IconPlus class="h-20 w-20" />
-				</n-card>
-			</n-grid-item>
-		</n-grid>
+				</NCard>
+			</NGridItem>
+		</NGrid>
 	</div>
 </template>
diff --git a/frontend/dashboard/src/pages/SongRequests.vue b/frontend/dashboard/src/pages/SongRequests.vue
index 48106fa16..a2c0eed1b 100644
--- a/frontend/dashboard/src/pages/SongRequests.vue
+++ b/frontend/dashboard/src/pages/SongRequests.vue
@@ -3,52 +3,52 @@ import {
 	NGrid,
 	NGridItem,
 	NModal,
-} from 'naive-ui';
-import { computed, ref } from 'vue';
+} from 'naive-ui'
+import { computed, ref } from 'vue'
 
-import { useYoutubeModuleSettings } from '@/api/modules/ytsr.js';
-import { useYoutubeSocket } from '@/components/songRequests/hook.js';
-import Player from '@/components/songRequests/player.vue';
-import VideosQueue from '@/components/songRequests/queue.vue';
-import SettingsModal from '@/components/songRequests/settings.vue';
+import { useYoutubeModuleSettings } from '@/api/modules/ytsr.js'
+import { useYoutubeSocket } from '@/components/songRequests/hook.js'
+import Player from '@/components/songRequests/player.vue'
+import VideosQueue from '@/components/songRequests/queue.vue'
+import SettingsModal from '@/components/songRequests/settings.vue'
 
-const isSettingsModalOpened = ref(false);
-const openSettingsModal = () => isSettingsModalOpened.value = true;
+const isSettingsModalOpened = ref(false)
+const openSettingsModal = () => isSettingsModalOpened.value = true
 
-useYoutubeSocket();
+useYoutubeSocket()
 
-const youtubeModuleManager = useYoutubeModuleSettings();
-const youtubeModuleData = youtubeModuleManager.getAll();
+const youtubeModuleManager = useYoutubeModuleSettings()
+const youtubeModuleData = youtubeModuleManager.getAll()
 
 const noCookie = computed(() => {
-	return youtubeModuleData.data.value?.data?.playerNoCookieMode ?? false;
-});
+	return youtubeModuleData.data.value?.data?.playerNoCookieMode ?? false
+})
 </script>
 
 <template>
-	<n-grid cols="1 s:1 m:1 l:3" responsive="screen" :y-gap="15" :x-gap="15">
-		<n-grid-item :span="1">
-			<player
+	<NGrid cols="1 s:1 m:1 l:3" responsive="screen" :y-gap="15" :x-gap="15">
+		<NGridItem :span="1">
+			<Player
 				v-if="!youtubeModuleData.isLoading.value"
 				:no-cookie="noCookie"
 				:open-settings-modal="openSettingsModal"
 			/>
-		</n-grid-item>
+		</NGridItem>
 
-		<n-grid-item :span="2">
-			<videos-queue />
-		</n-grid-item>
-	</n-grid>
+		<NGridItem :span="2">
+			<VideosQueue />
+		</NGridItem>
+	</NGrid>
 
-	<n-modal
+	<NModal
 		v-model:show="isSettingsModalOpened"
 		:span="10"
 		:mask-closable="false"
 		:segmented="true"
 		preset="card"
 		title="Settings"
-		:style="{ width: '70%',top: '50px' }"
+		:style="{ width: '70%', top: '50px' }"
 	>
-		<settings-modal />
-	</n-modal>
+		<SettingsModal />
+	</NModal>
 </template>
diff --git a/frontend/dashboard/src/pages/Variables.vue b/frontend/dashboard/src/pages/Variables.vue
index 879596ca2..37041c3af 100644
--- a/frontend/dashboard/src/pages/Variables.vue
+++ b/frontend/dashboard/src/pages/Variables.vue
@@ -1,42 +1,41 @@
 <script setup lang="ts">
-import { IconPencil, IconTrash } from '@tabler/icons-vue';
+import { IconPencil, IconTrash } from '@tabler/icons-vue'
 import {
 	type DataTableColumns,
-	NDataTable,
-	NSpace,
-	NTag,
 	NAlert,
 	NButton,
-	NPopconfirm,
+	NDataTable,
 	NModal,
-} from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { computed, h, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+	NPopconfirm,
+	NSpace,
+	NTag,
+} from 'naive-ui'
+import { computed, h, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { CustomVariable, EditableCustomVariable } from '@/api/variables'
 
-import { useUserAccessFlagChecker } from '@/api/index.js';
-import { useVariablesApi } from '@/api/variables';
-import { type CustomVariable, type EditableCustomVariable } from '@/api/variables';
-import Modal from '@/components/variables/modal.vue';
-import { ChannelRolePermissionEnum, VariableType } from '@/gql/graphql';
-import { renderIcon } from '@/helpers/index.js';
+import { useUserAccessFlagChecker } from '@/api/index.js'
+import { useVariablesApi } from '@/api/variables'
+import Modal from '@/components/variables/modal.vue'
+import { ChannelRolePermissionEnum, VariableType } from '@/gql/graphql'
+import { renderIcon } from '@/helpers/index.js'
 
-const variablesApi = useVariablesApi();
-const { customVariables, isLoading } = storeToRefs(variablesApi);
-const deleter = variablesApi.useMutationRemoveVariable();
+const { customVariables, isLoading, useMutationRemoveVariable } = useVariablesApi()
+const removeVariableMutation = useMutationRemoveVariable()
 
-const showModal = ref(false);
+const showModal = ref(false)
 
-const userCanManageVariables = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageVariables);
+const userCanManageVariables = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageVariables)
 
-const { t } = useI18n();
+const { t } = useI18n()
 
 const columns = computed<DataTableColumns<CustomVariable>>(() => [
 	{
 		title: t('sharedTexts.name'),
 		key: 'name',
 		render(row) {
-			return row.name;
+			return row.name
 		},
 	},
 	{
@@ -45,7 +44,7 @@ const columns = computed<DataTableColumns<CustomVariable>>(() => [
 		render(row) {
 			return h(NTag, { type: 'info', bordered: true }, {
 				default: () => row.type,
-			});
+			})
 		},
 	},
 	{
@@ -54,7 +53,7 @@ const columns = computed<DataTableColumns<CustomVariable>>(() => [
 		render(row) {
 			return h(NTag, { type: 'info', bordered: true }, {
 				default: () => row.type === VariableType.Script ? 'Script' : row.response,
-			});
+			})
 		},
 	},
 	{
@@ -70,14 +69,16 @@ const columns = computed<DataTableColumns<CustomVariable>>(() => [
 					onClick: () => openModal(row),
 					quaternary: true,
 					disabled: !userCanManageVariables.value,
-				}, {
+				},
+				{
 					icon: renderIcon(IconPencil),
-				});
+				},
+			)
 
 			const deleteButton = h(
 				NPopconfirm,
 				{
-					onPositiveClick: () => deleter.executeMutation({ id: row.id! }),
+					onPositiveClick: () => removeVariableMutation.executeMutation({ id: row.id! }),
 					positiveText: t('deleteConfirmation.confirm'),
 					negativeText: t('deleteConfirmation.cancel'),
 				},
@@ -92,43 +93,43 @@ const columns = computed<DataTableColumns<CustomVariable>>(() => [
 					}),
 					default: () => t('deleteConfirmation.text'),
 				},
-			);
+			)
 
-			return h(NSpace, {}, { default: () => [editButton, deleteButton] });
+			return h(NSpace, {}, { default: () => [editButton, deleteButton] })
 		},
 	},
-]);
+])
 
-const editableVariable = ref<EditableCustomVariable | null>(null);
+const editableVariable = ref<EditableCustomVariable | null>(null)
 
 function openModal(t: EditableCustomVariable | null) {
-	editableVariable.value = t;
-	showModal.value = true;
+	editableVariable.value = t
+	showModal.value = true
 }
 
 function closeModal() {
-	showModal.value = false;
+	showModal.value = false
 }
 </script>
 
 <template>
-	<n-space justify="space-between" align="center">
+	<NSpace justify="space-between" align="center">
 		<h2>{{ t('variables.title') }}</h2>
-		<n-button :disabled="!userCanManageVariables" secondary type="success" @click="openModal(null)">
+		<NButton :disabled="!userCanManageVariables" secondary type="success" @click="openModal(null)">
 			{{ t('sharedButtons.create') }}
-		</n-button>
-	</n-space>
-	<n-alert type="info">
+		</NButton>
+	</NSpace>
+	<NAlert type="info">
 		{{ t('variables.info') }}
-	</n-alert>
-	<n-data-table
+	</NAlert>
+	<NDataTable
 		:isLoading="isLoading"
 		:columns="columns"
 		:data="customVariables"
 		style="margin-top: 20px;"
 	/>
 
-	<n-modal
+	<NModal
 		v-model:show="showModal"
 		:mask-closable="false"
 		:segmented="true"
@@ -141,6 +142,6 @@ function closeModal() {
 		}"
 		:on-close="closeModal"
 	>
-		<modal :variable="editableVariable" @close="closeModal" />
-	</n-modal>
+		<Modal :variable="editableVariable" @close="closeModal" />
+	</NModal>
 </template>
diff --git a/frontend/dashboard/src/pages/overlays/brb/Brb.vue b/frontend/dashboard/src/pages/overlays/brb/Brb.vue
index 106720844..fcda103c0 100644
--- a/frontend/dashboard/src/pages/overlays/brb/Brb.vue
+++ b/frontend/dashboard/src/pages/overlays/brb/Brb.vue
@@ -1,31 +1,31 @@
 <script setup lang="ts">
-import type { Settings } from '@twir/api/messages/overlays_be_right_back/overlays_be_right_back';
-import { Font, FontSelector } from '@twir/fontsource';
+import { FontSelector } from '@twir/fontsource'
 import {
-	useThemeVars,
+	NAlert,
 	NButton,
 	NColorPicker,
 	NDivider,
-	NInputNumber,
 	NInput,
+	NInputNumber,
 	NSwitch,
 	useNotification,
-	NAlert,
-} from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { ref, computed, toRaw, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+	useThemeVars,
+} from 'naive-ui'
+import { computed, ref, toRaw, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import type { Settings } from '@twir/api/messages/overlays_be_right_back/overlays_be_right_back'
+import type { Font } from '@twir/fontsource'
 
-import { useBeRightBackOverlayManager, useProfile, useUserAccessFlagChecker } from '@/api';
-import { useCopyOverlayLink } from '@/components/overlays/copyOverlayLink.js';
-import commandButton from '@/features/commands/components/command-button.vue';
-import { ChannelRolePermissionEnum } from '@/gql/graphql';
+import { useBeRightBackOverlayManager, useProfile, useUserAccessFlagChecker } from '@/api'
+import { useCopyOverlayLink } from '@/components/overlays/copyOverlayLink.js'
+import commandButton from '@/features/commands/components/command-button.vue'
+import { ChannelRolePermissionEnum } from '@/gql/graphql'
 
-const themeVars = useThemeVars();
-const { t } = useI18n();
+const themeVars = useThemeVars()
+const { t } = useI18n()
 
-const { data: profile } = storeToRefs(useProfile());
+const { data: profile } = useProfile()
 
 const defaultSettings = {
 	backgroundColor: 'rgba(9, 8, 8, 0.50)',
@@ -39,129 +39,129 @@ const defaultSettings = {
 		enabled: true,
 	},
 	opacity: 50,
-};
+}
 
-const formValue = ref<Settings>(structuredClone(defaultSettings));
+const formValue = ref<Settings>(structuredClone(defaultSettings))
 
-const manager = useBeRightBackOverlayManager();
+const manager = useBeRightBackOverlayManager()
 const {
 	data: settings,
 	isError: isSettingsError,
 	isLoading: isSettingsLoading,
-} = manager.getSettings();
-const updater = manager.updateSettings();
+} = manager.getSettings()
+const updater = manager.updateSettings()
 
 watch(settings, (v) => {
-	if (!v) return;
-	formValue.value = toRaw(v);
-}, { immediate: true });
+	if (!v) return
+	formValue.value = toRaw(v)
+}, { immediate: true })
 
-const brbIframeRef = ref<HTMLIFrameElement | null>(null);
+const brbIframeRef = ref<HTMLIFrameElement | null>(null)
 const brbIframeUrl = computed(() => {
-	if (!profile.value) return null;
+	if (!profile.value) return null
 
-	return `${window.location.origin}/overlays/${profile.value.apiKey}/brb`;
-});
+	return `${window.location.origin}/overlays/${profile.value.apiKey}/brb`
+})
 
-const sendIframeMessage = (key: string, data?: any) => {
-	if (!brbIframeRef.value) return;
-	const win = brbIframeRef.value;
+function sendIframeMessage(key: string, data?: any) {
+	if (!brbIframeRef.value) return
+	const win = brbIframeRef.value
 
 	win.contentWindow?.postMessage(JSON.stringify({
 		key,
 		data: toRaw(data),
-	}));
-};
+	}))
+}
 
-const sendSettings = () => {
+function sendSettings() {
 	sendIframeMessage('settings', {
 		...toRaw(formValue.value),
 		channelName: profile.value?.login,
 		channelId: profile.value?.id,
-	});
-};
+	})
+}
 
 watch(brbIframeRef, (v) => {
-	if (!v) return;
+	if (!v) return
 
 	v.contentWindow?.addEventListener('message', (e) => {
-		const parsed = JSON.parse(e.data);
-		if (parsed.key !== 'getSettings') return;
+		const parsed = JSON.parse(e.data)
+		if (parsed.key !== 'getSettings') return
 
-		sendSettings();
-	});
-});
+		sendSettings()
+	})
+})
 
 watch(() => formValue, () => {
-	if (!brbIframeRef.value) return;
+	if (!brbIframeRef.value) return
 
-	sendSettings();
-}, { deep: true });
+	sendSettings()
+}, { deep: true })
 
-const { copyOverlayLink } = useCopyOverlayLink('brb');
+const { copyOverlayLink } = useCopyOverlayLink('brb')
 
-const message = useNotification();
+const message = useNotification()
 
 async function save() {
-	await updater.mutateAsync(formValue.value);
+	await updater.mutateAsync(formValue.value)
 
 	message.success({
 		title: t('sharedTexts.saved'),
 		duration: 5000,
-	});
+	})
 }
 
-const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays);
+const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays)
 
 const canCopyLink = computed(() => {
-	return profile?.value?.selectedDashboardId === profile.value?.id && userCanEditOverlays;
-});
+	return profile?.value?.selectedDashboardId === profile.value?.id && userCanEditOverlays
+})
 
 function setDefaultSettings() {
-	formValue.value = structuredClone(defaultSettings);
+	formValue.value = structuredClone(defaultSettings)
 }
 
 // TODO: fontWeight and fontStyle should be a select
-const fontData = ref<Font | null>(null);
+const fontData = ref<Font | null>(null)
 watch(() => fontData.value, (font) => {
-	if (!font) return;
-	formValue.value.fontFamily = font.id;
-});
+	if (!font) return
+	formValue.value.fontFamily = font.id
+})
 </script>
 
 <template>
 	<div class="page">
 		<div class="card">
 			<div class="card-header">
-				<n-button
+				<NButton
 					secondary
 					type="error"
 					@click="setDefaultSettings"
 				>
 					{{ t('sharedButtons.setDefaultSettings') }}
-				</n-button>
-				<n-button
+				</NButton>
+				<NButton
 					secondary
 					type="info"
 					:disabled="isSettingsError || isSettingsLoading || !canCopyLink"
 					@click="copyOverlayLink()"
 				>
 					{{ t('overlays.copyOverlayLink') }}
-				</n-button>
-				<n-button
+				</NButton>
+				<NButton
 					secondary
 					type="success"
 					@click="save"
 				>
 					{{ t('sharedButtons.save') }}
-				</n-button>
+				</NButton>
 			</div>
 
 			<div class="card-body">
 				<div class="card-body-column">
-					<n-divider class="!my-0">
+					<NDivider class="!my-0">
 						{{ t('overlays.brb.settings.main.label') }}
-					</n-divider>
+					</NDivider>
 
 					<div class="item">
 						<div class="flex flex-col gap-1">
@@ -169,9 +169,9 @@ watch(() => fontData.value, (font) => {
 								name="brb"
 								:title="t('overlays.brb.settings.main.startCommand.description')"
 							/>
-							<n-alert type="info" :show-icon="false">
+							<NAlert type="info" :show-icon="false">
 								<span v-html="t('overlays.brb.settings.main.startCommand.example')" />
-							</n-alert>
+							</NAlert>
 						</div>
 
 						<command-button
@@ -182,12 +182,12 @@ watch(() => fontData.value, (font) => {
 
 					<div class="item">
 						<span>{{ t('overlays.brb.settings.main.text') }}</span>
-						<n-input v-model:value="formValue.text" :maxlength="500" />
+						<NInput v-model:value="formValue.text" :maxlength="500" />
 					</div>
 
 					<div class="item">
 						<span>{{ t('overlays.brb.settings.main.background') }}</span>
-						<n-color-picker
+						<NColorPicker
 							v-model:value="formValue.backgroundColor" :modes="['rgb']"
 							show-preview
 						/>
@@ -195,7 +195,7 @@ watch(() => fontData.value, (font) => {
 
 					<div class="item">
 						<span>{{ t('overlays.brb.settings.main.font.color') }}</span>
-						<n-color-picker
+						<NColorPicker
 							v-model:value="formValue.fontColor" :modes="['hex', 'rgb']"
 							:show-alpha="false"
 						/>
@@ -203,7 +203,7 @@ watch(() => fontData.value, (font) => {
 
 					<div class="item">
 						<span>{{ t('overlays.brb.settings.main.font.family') }}</span>
-						<font-selector
+						<FontSelector
 							v-model:font="fontData"
 							:font-family="formValue.fontFamily"
 							font-style="normal"
@@ -213,27 +213,27 @@ watch(() => fontData.value, (font) => {
 
 					<div class="item">
 						<span>{{ t('overlays.brb.settings.main.font.size') }}</span>
-						<n-input-number v-model:value="formValue.fontSize" :min="1" :max="500" />
+						<NInputNumber v-model:value="formValue.fontSize" :min="1" :max="500" />
 					</div>
 				</div>
 
 				<div class="card-body-column">
-					<n-divider class="!my-0">
+					<NDivider class="!my-0">
 						{{ t('overlays.brb.settings.late.label') }}
-					</n-divider>
+					</NDivider>
 
 					<div class="item">
 						<span>{{ t('overlays.brb.settings.late.text') }}</span>
-						<n-input v-model:value="formValue.late!.text" :maxlength="500" />
+						<NInput v-model:value="formValue.late!.text" :maxlength="500" />
 					</div>
 
 					<div class="flex gap-2">
-						<n-switch v-model:value="formValue.late!.enabled" />
+						<NSwitch v-model:value="formValue.late!.enabled" />
 						<span>{{ t('sharedTexts.enabled') }}</span>
 					</div>
 
 					<div class="flex gap-2">
-						<n-switch v-model:value="formValue.late!.displayBrbTime" />
+						<NSwitch v-model:value="formValue.late!.displayBrbTime" />
 						<span>{{ t('overlays.brb.settings.late.displayBrb') }}</span>
 					</div>
 				</div>
@@ -250,10 +250,10 @@ watch(() => fontData.value, (font) => {
 			/>
 			<div class="absolute top-9 right-10 font-medium">
 				<div class="flex gap-2">
-					<n-button secondary size="small" type="warning" @click="sendIframeMessage('stop')">
+					<NButton secondary size="small" type="warning" @click="sendIframeMessage('stop')">
 						{{ t('overlays.brb.preview.stop') }}
-					</n-button>
-					<n-button
+					</NButton>
+					<NButton
 						secondary
 						size="small"
 						type="success"
@@ -263,7 +263,7 @@ watch(() => fontData.value, (font) => {
 						}"
 					>
 						{{ t('overlays.brb.preview.start') }}
-					</n-button>
+					</NButton>
 				</div>
 			</div>
 		</div>
diff --git a/frontend/dashboard/src/pages/overlays/chat/Chat.vue b/frontend/dashboard/src/pages/overlays/chat/Chat.vue
index 173bce7b2..7f69bfd46 100644
--- a/frontend/dashboard/src/pages/overlays/chat/Chat.vue
+++ b/frontend/dashboard/src/pages/overlays/chat/Chat.vue
@@ -1,55 +1,57 @@
 <script setup lang="ts">
 import {
+	type BadgeVersion,
 	ChatBox,
-	type Message,
 	type Settings as ChatBoxSettings,
-	BadgeVersion,
-} from '@twir/frontend-chat';
-import { useIntervalFn } from '@vueuse/core';
+	type Message,
+} from '@twir/frontend-chat'
+import { useIntervalFn } from '@vueuse/core'
 import {
-	NTabs,
-	NTabPane,
 	NAlert,
 	NScrollbar,
-	useThemeVars,
+	NTabPane,
+	NTabs,
 	NText,
-} from 'naive-ui';
-import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+	useThemeVars,
+} from 'naive-ui'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { useChatOverlayForm } from './components/form.js';
-import Form from './components/Form.vue';
-import { globalBadges } from './constants.js';
-import * as faker from './faker.js';
+import { useChatOverlayForm } from './components/form.js'
+import Form from './components/Form.vue'
+import { globalBadges } from './constants.js'
+import * as faker from './faker.js'
 
 import {
-	useChatOverlayManager, useUserAccessFlagChecker,
-} from '@/api/index.js';
-import { useNaiveDiscrete } from '@/composables/use-naive-discrete.js';
-import { ChannelRolePermissionEnum } from '@/gql/graphql';
-
+	useChatOverlayManager,
+	useUserAccessFlagChecker,
+} from '@/api/index.js'
+import { useNaiveDiscrete } from '@/composables/use-naive-discrete.js'
+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 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 { t } = useI18n()
+const { dialog } = useNaiveDiscrete()
 
 const {
 	data: entities,
-} = chatManager.useGetAll();
+} = chatManager.useGetAll()
 
-const globalBadgesObject = Object.fromEntries(globalBadges);
+const globalBadgesObject = Object.fromEntries(globalBadges)
 
-const messagesMock = ref<Message[]>([]);
+const messagesMock = ref<Message[]>([])
+
+const { data: formValue, setData, getDefaultSettings } = useChatOverlayForm()
 
 useIntervalFn(() => {
-	if (!formValue.value) return;
+	if (!formValue.value) return
 
-	const internalId = crypto.randomUUID();
+	const internalId = crypto.randomUUID()
 
 	messagesMock.value.push({
 		sender: faker.firstName(),
@@ -71,46 +73,44 @@ useIntervalFn(() => {
 		},
 		id: crypto.randomUUID(),
 		senderDisplayName: faker.firstName(),
-	});
+	})
 
-	if (formValue.value.messageHideTimeout != 0) {
+	if (formValue.value.messageHideTimeout !== 0) {
 		setTimeout(() => {
-			messagesMock.value = messagesMock.value.filter(m => m.internalId != internalId);
-		}, formValue.value.messageHideTimeout * 1000);
+			messagesMock.value = messagesMock.value.filter(m => m.internalId !== internalId)
+		}, formValue.value.messageHideTimeout * 1000)
 	}
 
 	if (messagesMock.value.length >= 20) {
-		messagesMock.value = messagesMock.value.slice(1);
+		messagesMock.value = messagesMock.value.slice(1)
 	}
-}, 1 * 1000);
-
-const openedTab = ref<string>();
+}, 1 * 1000)
 
-const { data: formValue, $setData, $getDefaultSettings } = useChatOverlayForm();
+const openedTab = ref<string>()
 
 function resetTab() {
 	if (!entities.value?.settings.at(0)) {
-		openedTab.value = undefined;
-		return;
+		openedTab.value = undefined
+		return
 	}
 
-	openedTab.value = entities.value.settings.at(0)!.id;
+	openedTab.value = entities.value.settings.at(0)!.id
 }
 
 watch(entities, () => {
-	resetTab();
-}, { immediate: true });
+	resetTab()
+}, { immediate: true })
 
 watch(openedTab, (v) => {
-	const entity = entities.value?.settings.find(s => s.id === v);
-	if (!entity) return;
+	const entity = entities.value?.settings.find(s => s.id === v)
+	if (!entity) return
 
-	$setData(entity);
-});
+	setData(entity)
+})
 
 watch(openedTab, () => {
-	messagesMock.value = [];
-});
+	messagesMock.value = []
+})
 
 const chatBoxSettings = computed<ChatBoxSettings>(() => {
 	return {
@@ -120,8 +120,8 @@ const chatBoxSettings = computed<ChatBoxSettings>(() => {
 		globalBadges,
 		channelBadges: new Map<string, BadgeVersion>(),
 		...formValue.value,
-	};
-});
+	}
+})
 
 async function handleClose(id: string) {
 	dialog.create({
@@ -131,22 +131,22 @@ async function handleClose(id: string) {
 		negativeText: 'Cancel',
 		showIcon: false,
 		onPositiveClick: async () => {
-			const entity = entities.value?.settings.find(s => s.id === id);
-			if (!entity?.id) return;
+			const entity = entities.value?.settings.find(s => s.id === id)
+			if (!entity?.id) return
 
-			await deleter.mutateAsync(entity.id);
-			resetTab();
+			await deleter.mutateAsync(entity.id)
+			resetTab()
 		},
-	});
+	})
 }
 
 async function handleAdd() {
-	await creator.mutateAsync($getDefaultSettings());
+	await creator.mutateAsync(getDefaultSettings())
 }
 
 const addable = computed(() => {
-	return userCanEditOverlays.value && (entities.value?.settings.length ?? 0) < 5;
-});
+	return userCanEditOverlays.value && (entities.value?.settings.length ?? 0) < 5
+})
 </script>
 
 <template>
@@ -159,13 +159,13 @@ const addable = computed(() => {
 				:settings="chatBoxSettings"
 			/>
 			<div v-else class="flex justify-center items-center h-full">
-				<n-text class="text-base">
+				<NText class="text-base">
 					Preview of chat will be here when you select some preset
-				</n-text>
+				</NText>
 			</div>
 		</div>
 		<div class="w-[30%]">
-			<n-tabs
+			<NTabs
 				v-model:value="openedTab"
 				type="card"
 				:closable="userCanEditOverlays"
@@ -178,21 +178,21 @@ const addable = computed(() => {
 					{{ t('overlays.chat.presets') }}
 				</template>
 				<template v-if="entities?.settings.length">
-					<n-tab-pane
+					<NTabPane
 						v-for="(entity, entityIndex) in entities?.settings"
 						:key="entity.id"
-						:tab="`#${entityIndex+1}`"
+						:tab="`#${entityIndex + 1}`"
 						:name="entity.id!"
 					>
-						<n-scrollbar class="max-h-[75vh]" trigger="none">
+						<NScrollbar class="max-h-[75vh]" trigger="none">
 							<Form />
-						</n-scrollbar>
-					</n-tab-pane>
+						</NScrollbar>
+					</NTabPane>
 				</template>
-			</n-tabs>
-			<n-alert v-if="!entities?.settings.length" type="info" class="mt-2">
+			</NTabs>
+			<NAlert v-if="!entities?.settings.length" type="info" class="mt-2">
 				Create new overlay for edit settings
-			</n-alert>
+			</NAlert>
 		</div>
 	</div>
 </template>
diff --git a/frontend/dashboard/src/pages/overlays/chat/components/Form.vue b/frontend/dashboard/src/pages/overlays/chat/components/Form.vue
index 82aaadaa4..b88aa4b23 100644
--- a/frontend/dashboard/src/pages/overlays/chat/components/Form.vue
+++ b/frontend/dashboard/src/pages/overlays/chat/components/Form.vue
@@ -1,147 +1,146 @@
 <script setup lang="ts">
-import { IconReload } from '@tabler/icons-vue';
-import { FontSelector, type Font } from '@twir/fontsource';
+import { IconReload } from '@tabler/icons-vue'
+import { type Font, FontSelector } from '@twir/fontsource'
 import {
 	NButton,
-	NText,
-	NSwitch,
-	NSlider,
-	NSelect,
 	NColorPicker,
 	NDivider,
+	NSelect,
+	NSlider,
+	NSwitch,
+	NText,
 	useThemeVars,
-} from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { ref, computed, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+} from 'naive-ui'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { defaultChatSettings } from './default-settings';
-import { useChatOverlayForm } from './form.js';
+import { defaultChatSettings } from './default-settings'
+import { useChatOverlayForm } from './form.js'
 
-import { useChatOverlayManager, useProfile, useUserAccessFlagChecker } from '@/api';
-import { useCopyOverlayLink } from '@/components/overlays/copyOverlayLink.js';
-import { useNaiveDiscrete } from '@/composables/use-naive-discrete';
-import { ChannelRolePermissionEnum } from '@/gql/graphql';
+import { useChatOverlayManager, useProfile, useUserAccessFlagChecker } from '@/api'
+import { useCopyOverlayLink } from '@/components/overlays/copyOverlayLink.js'
+import { useNaiveDiscrete } from '@/composables/use-naive-discrete'
+import { ChannelRolePermissionEnum } from '@/gql/graphql'
 
-const { t } = useI18n();
-const themeVars = useThemeVars();
-const discrete = useNaiveDiscrete();
-const { copyOverlayLink } = useCopyOverlayLink('chat');
-const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays);
-const { data: profile } = storeToRefs(useProfile());
+const { t } = useI18n()
+const themeVars = useThemeVars()
+const discrete = useNaiveDiscrete()
+const { copyOverlayLink } = useCopyOverlayLink('chat')
+const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays)
 
-const { data: formValue, $reset } = useChatOverlayForm();
+const { data: profile } = useProfile()
+const { data: formValue, reset } = useChatOverlayForm()
 
 const canCopyLink = computed(() => {
-	return profile?.value?.selectedDashboardId === profile.value?.id && userCanEditOverlays;
-});
+	return profile?.value?.selectedDashboardId === profile.value?.id && userCanEditOverlays
+})
 
 const styleSelectOptions = [
 	{ label: 'Clean', value: 'clean' },
 	{ label: 'Boxed', value: 'boxed' },
-];
+]
 const directionOptions = computed(() => {
 	return ['top', 'right', 'bottom', 'left'].map((direction) => ({
 		value: direction,
 		label: t(`overlays.chat.directions.${direction}`),
-	}));
-});
+	}))
+})
 
-const fontData = ref<Font | null>(null);
+const fontData = ref<Font | null>(null)
 watch(() => fontData.value, (font) => {
-	if (!font) return;
-	formValue.value.fontFamily = font.id;
-});
+	if (!font) return
+	formValue.value.fontFamily = font.id
+})
 
 const fontWeightOptions = computed(() => {
-	if (!fontData.value) return [];
-	return fontData.value.weights.map((weight) => ({ label: `${weight}`, value: weight }));
-});
+	if (!fontData.value) return []
+	return fontData.value.weights.map((weight) => ({ label: `${weight}`, value: weight }))
+})
 
 const fontStyleOptions = computed(() => {
-	if (!fontData.value) return [];
-	return fontData.value.styles.map((style) => ({ label: style, value: style }));
-});
+	if (!fontData.value) return []
+	return fontData.value.styles.map((style) => ({ label: style, value: style }))
+})
 
 const sliderMarks = {
 	0: '0',
 	60: '60',
-};
+}
 
-const manager = useChatOverlayManager();
-const updater = manager.useUpdate();
+const manager = useChatOverlayManager()
+const updater = manager.useUpdate()
 
 async function save() {
-	if (!formValue.value.id) return;
+	if (!formValue.value.id) return
 
 	await updater.mutateAsync({
 		id: formValue.value.id,
 		settings: formValue.value,
-	});
+	})
 
 	discrete.notification.success({
 		title: t('sharedTexts.saved'),
 		duration: 1500,
-	});
+	})
 }
 </script>
 
 <template>
 	<div v-if="formValue" class="card">
 		<div class="flex-wrap justify-start">
-			<n-button
+			<NButton
 				secondary
 				type="error"
-				@click="$reset"
+				@click="reset"
 			>
 				{{ t('sharedButtons.setDefaultSettings') }}
-			</n-button>
-			<n-button
+			</NButton>
+			<NButton
 				secondary
 				type="info"
 				:disabled="!formValue.id || !canCopyLink"
 				@click="copyOverlayLink({ id: formValue.id! })"
 			>
 				{{ t('overlays.copyOverlayLink') }}
-			</n-button>
-			<n-button secondary type="success" @click="save">
+			</NButton>
+			<NButton secondary type="success" @click="save">
 				{{ t('sharedButtons.save') }}
-			</n-button>
+			</NButton>
 		</div>
 
 		<div class="card-body">
 			<div class="card-body-column">
 				<div>
 					<span>{{ t('overlays.chat.style') }}</span>
-					<n-select v-model:value="formValue.preset" :options="styleSelectOptions" />
+					<NSelect v-model:value="formValue.preset" :options="styleSelectOptions" />
 				</div>
 
 				<div>
 					<span>{{ t('overlays.chat.direction') }}</span>
-					<n-select v-model:value="formValue.direction" :options="directionOptions" />
-					<n-text class="text-xd mt-1">
+					<NSelect v-model:value="formValue.direction" :options="directionOptions" />
+					<NText class="text-xd mt-1">
 						{{ t('overlays.chat.directionWarning') }}
-					</n-text>
+					</NText>
 				</div>
 
 				<div class="switch">
 					<span>{{ t('overlays.chat.hideBots') }}</span>
-					<n-switch v-model:value="formValue.hideBots" />
+					<NSwitch v-model:value="formValue.hideBots" />
 				</div>
 
 				<div class="switch">
 					<span>{{ t('overlays.chat.hideCommands') }}</span>
-					<n-switch v-model:value="formValue.hideCommands" />
+					<NSwitch v-model:value="formValue.hideCommands" />
 				</div>
 
 				<div class="switch">
 					<span>{{ t('overlays.chat.showBadges') }}</span>
-					<n-switch v-model:value="formValue.showBadges" />
+					<NSwitch v-model:value="formValue.showBadges" />
 				</div>
 
 				<div v-if="formValue.preset === 'boxed'" class="switch">
 					<span>{{ t('overlays.chat.showAnnounceBadge') }}</span>
-					<n-switch
+					<NSwitch
 						v-model:value="formValue.showAnnounceBadge"
 						:disabled="!formValue.showBadges"
 					/>
@@ -149,16 +148,16 @@ async function save() {
 
 				<div class="slider">
 					<span>{{ t('overlays.chat.paddingContainer') }} ({{ formValue.paddingContainer }}px)</span>
-					<n-slider
+					<NSlider
 						v-model:value="formValue.paddingContainer" :min="0" :max="256"
-						:marks="{ 0: '0', 256: '256'}"
+						:marks="{ 0: '0', 256: '256' }"
 					/>
 				</div>
 
-				<n-divider />
+				<NDivider />
 				<div>
 					<span>{{ t('overlays.chat.fontFamily') }}</span>
-					<font-selector
+					<FontSelector
 						v-model:font="fontData"
 						:font-family="formValue.fontFamily"
 						:font-weight="formValue.fontWeight"
@@ -168,7 +167,7 @@ async function save() {
 
 				<div>
 					<span>{{ t('overlays.chat.fontWeight') }}</span>
-					<n-select
+					<NSelect
 						v-model:value="formValue.fontWeight"
 						:options="fontWeightOptions"
 					/>
@@ -176,7 +175,7 @@ async function save() {
 
 				<div>
 					<span>{{ t('overlays.chat.fontStyle') }}</span>
-					<n-select
+					<NSelect
 						v-model:value="formValue.fontStyle"
 						:options="fontStyleOptions"
 					/>
@@ -184,44 +183,43 @@ async function save() {
 
 				<div class="slider">
 					<span>{{ t('overlays.chat.fontSize') }} ({{ formValue.fontSize }}px)</span>
-					<n-slider
+					<NSlider
 						v-model:value="formValue.fontSize" :min="12" :max="80"
-						:marks="{ 12: '12', 80: '80'}"
+						:marks="{ 12: '12', 80: '80' }"
 					/>
 				</div>
 
 				<div class="slider">
 					<div class="flex justify-between mb-1">
 						<span>{{ t('overlays.chat.backgroundColor') }}</span>
-						<n-button
+						<NButton
 							size="tiny" secondary type="success"
 							@click="formValue.chatBackgroundColor = defaultChatSettings.chatBackgroundColor"
 						>
 							<IconReload class="h-4 w-4" />
 							{{ t('overlays.chat.resetToDefault') }}
-						</n-button>
+						</NButton>
 					</div>
-					<n-color-picker
+					<NColorPicker
 						v-model:value="formValue.chatBackgroundColor"
 						default-value="rgba(16, 16, 20, 1)"
 					/>
 				</div>
 
-
 				<div class="slider">
 					<span>{{ t('overlays.chat.textShadow') }}({{ formValue.textShadowSize }}px)</span>
-					<n-color-picker
+					<NColorPicker
 						v-model:value="formValue.textShadowColor"
 						default-value="rgba(0,0,0,1)"
 					/>
-					<n-slider v-model:value="formValue.textShadowSize" :min="0" :max="30" />
+					<NSlider v-model:value="formValue.textShadowSize" :min="0" :max="30" />
 				</div>
 
-				<n-divider />
+				<NDivider />
 
 				<div class="slider">
 					<span>{{ t('overlays.chat.hideTimeout') }}({{ formValue.messageHideTimeout }}s)</span>
-					<n-slider
+					<NSlider
 						v-model:value="formValue.messageHideTimeout" :max="60"
 						:marks="sliderMarks"
 					/>
@@ -229,7 +227,7 @@ async function save() {
 
 				<div class="slider">
 					<span>{{ t('overlays.chat.showDelay') }}({{ formValue.messageShowDelay }}s)</span>
-					<n-slider
+					<NSlider
 						v-model:value="formValue.messageShowDelay" :max="60"
 						:marks="sliderMarks"
 					/>
@@ -239,7 +237,6 @@ async function save() {
 	</div>
 </template>
 
-
 <style scoped>
 @import '../../styles.css';
 
diff --git a/frontend/dashboard/src/pages/overlays/chat/components/form.ts b/frontend/dashboard/src/pages/overlays/chat/components/form.ts
index a941603c3..75c6a2eb4 100644
--- a/frontend/dashboard/src/pages/overlays/chat/components/form.ts
+++ b/frontend/dashboard/src/pages/overlays/chat/components/form.ts
@@ -1,29 +1,29 @@
-import { ref, toRaw } from 'vue';
+import { ref, toRaw } from 'vue'
 
-import { defaultChatSettings, type ChatSettingsWithOptionalId } from './default-settings';
+import { type ChatSettingsWithOptionalId, defaultChatSettings } from './default-settings'
 
-const data = ref<ChatSettingsWithOptionalId>(structuredClone(defaultChatSettings));
+const data = ref<ChatSettingsWithOptionalId>(structuredClone(defaultChatSettings))
 
-export const useChatOverlayForm = () => {
-	function $setData(d: ChatSettingsWithOptionalId) {
-		data.value = structuredClone(toRaw(d));
+export function useChatOverlayForm() {
+	function setData(d: ChatSettingsWithOptionalId) {
+		data.value = structuredClone(toRaw(d))
 	}
 
-	function $reset() {
+	function reset() {
 		data.value = {
 			id: data.value.id,
 			...structuredClone(defaultChatSettings),
-		};
+		}
 	}
 
-	function $getDefaultSettings() {
-		return structuredClone(defaultChatSettings);
+	function getDefaultSettings() {
+		return structuredClone(defaultChatSettings)
 	}
 
 	return {
 		data,
-		$setData,
-		$reset,
-		$getDefaultSettings,
-	};
-};
+		setData,
+		reset,
+		getDefaultSettings,
+	}
+}
diff --git a/frontend/dashboard/src/pages/overlays/dudes/dudes-settings-form.vue b/frontend/dashboard/src/pages/overlays/dudes/dudes-settings-form.vue
index b9ade0a9c..a2a408942 100644
--- a/frontend/dashboard/src/pages/overlays/dudes/dudes-settings-form.vue
+++ b/frontend/dashboard/src/pages/overlays/dudes/dudes-settings-form.vue
@@ -1,197 +1,197 @@
 <script setup lang="ts">
-import { Font, FontSelector } from '@twir/fontsource';
-import { DudesSprite } from '@twir/types/overlays';
-import { addZero, hexToRgb, colorBrightness, capitalize } from '@zero-dependency/utils';
-import { intervalToDuration } from 'date-fns';
+import { FontSelector } from '@twir/fontsource'
+import { DudesSprite } from '@twir/types/overlays'
+import { addZero, capitalize, colorBrightness, hexToRgb } from '@zero-dependency/utils'
+import { intervalToDuration } from 'date-fns'
 import {
 	NButton,
-	NSlider,
 	NColorPicker,
-	useThemeVars,
-	NSwitch,
-	NSelect,
 	NDynamicTags,
-	NTag,
-	NInputNumber,
+	NForm,
 	NFormItem,
+	NInputNumber,
 	NScrollbar,
-	NForm,
-	NTabs,
+	NSelect,
+	NSlider,
+	NSwitch,
 	NTabPane,
-} from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { h, computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+	NTabs,
+	NTag,
+	useThemeVars,
+} from 'naive-ui'
+import { computed, h, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { useDudesForm } from './use-dudes-form.js';
-import { useDudesIframe } from './use-dudes-frame.js';
+import { useDudesForm } from './use-dudes-form.js'
+import { useDudesIframe } from './use-dudes-frame.js'
 
-import { useDudesOverlayManager, useProfile, useUserAccessFlagChecker } from '@/api/index.js';
-import { useCopyOverlayLink } from '@/components/overlays/copyOverlayLink.js';
-import SelectTwitchUsers from '@/components/twitchUsers/multiple.vue';
-import { useNaiveDiscrete } from '@/composables/use-naive-discrete.js';
-import { ChannelRolePermissionEnum } from '@/gql/graphql';
+import type { Font } from '@twir/fontsource'
 
+import { useDudesOverlayManager, useProfile, useUserAccessFlagChecker } from '@/api/index.js'
+import { useCopyOverlayLink } from '@/components/overlays/copyOverlayLink.js'
+import SelectTwitchUsers from '@/components/twitchUsers/multiple.vue'
+import { useNaiveDiscrete } from '@/composables/use-naive-discrete.js'
+import { ChannelRolePermissionEnum } from '@/gql/graphql'
 
-const { t } = useI18n();
-const themeVars = useThemeVars();
-const discrete = useNaiveDiscrete();
-const { copyOverlayLink } = useCopyOverlayLink('dudes');
-const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays);
-const { data: profile } = storeToRefs(useProfile());
+const { t } = useI18n()
+const themeVars = useThemeVars()
+const discrete = useNaiveDiscrete()
+const { copyOverlayLink } = useCopyOverlayLink('dudes')
+const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays)
 
-const { data: formValue, $reset } = useDudesForm();
-const { sendIframeMessage } = useDudesIframe();
+const { data: profile } = useProfile()
+const { data: formValue, reset } = useDudesForm()
+const { sendIframeMessage } = useDudesIframe()
 
 watch(formValue, (form) => {
-	if (!form) return;
-	if (!form.nameBoxSettings.fill.length) return;
-	sendIframeMessage('update-settings', form);
-}, { deep: true });
+	if (!form) return
+	if (!form.nameBoxSettings.fill.length) return
+	sendIframeMessage('update-settings', form)
+}, { deep: true })
 
 watch(() => formValue.value.dudeSettings.defaultSprite, (dudeSprite) => {
-	sendIframeMessage('update-sprite', dudeSprite);
-});
+	sendIframeMessage('update-sprite', dudeSprite)
+})
 
 watch(() => formValue.value.dudeSettings.color, (dudeColor) => {
-	sendIframeMessage('update-color', dudeColor);
-});
+	sendIframeMessage('update-color', dudeColor)
+})
 
 const canCopyLink = computed(() => {
-	return profile?.value?.selectedDashboardId === profile.value?.id && userCanEditOverlays;
-});
+	return profile?.value?.selectedDashboardId === profile.value?.id && userCanEditOverlays
+})
 
-const manager = useDudesOverlayManager();
-const updater = manager.useUpdate();
+const manager = useDudesOverlayManager()
+const updater = manager.useUpdate()
 
 async function save() {
-	if (!formValue.value.id) return;
+	if (!formValue.value.id) return
 
 	await updater.mutateAsync({
 		id: formValue.value.id,
 		settings: formValue.value,
-	});
+	})
 
 	discrete.notification.success({
 		title: t('sharedTexts.saved'),
 		duration: 1500,
-	});
+	})
 }
 
 function formatDuration(duration: number) {
-	const { hours = 0, minutes = 0, seconds = 0 } = intervalToDuration({ start: 0, end: duration });
+	const { hours = 0, minutes = 0, seconds = 0 } = intervalToDuration({ start: 0, end: duration })
 	if (hours === 0) {
-		return `${addZero(minutes)}:${addZero(seconds)}`;
+		return `${addZero(minutes)}:${addZero(seconds)}`
 	}
 
-	return `${addZero(hours)}:${addZero(minutes)}:${addZero(seconds)}`;
+	return `${addZero(hours)}:${addZero(minutes)}:${addZero(seconds)}`
 }
 
 const fillGradientStops = computed(() => {
-	if (!formValue.value) return [];
-	return formValue.value.nameBoxSettings.fillGradientStops.map((stop) => `${stop}`);
-});
+	if (!formValue.value) return []
+	return formValue.value.nameBoxSettings.fillGradientStops.map((stop) => `${stop}`)
+})
 
 const fillGradidentStopMessage = computed(() => {
 	if (!formValue.value.nameBoxSettings.fillGradientStops.length) {
-		return t('overlays.dudes.nameBoxFillGradientStopsError');
+		return t('overlays.dudes.nameBoxFillGradientStopsError')
 	}
 
-	return '';
-});
+	return ''
+})
 
 const nameBoxFillMessage = computed(() => {
 	if (!formValue.value.nameBoxSettings.fill.length) {
-		return t('overlays.dudes.nameBoxFillError');
+		return t('overlays.dudes.nameBoxFillError')
 	}
 
-	return '';
-});
+	return ''
+})
 
-const fontData = ref<Font | null>(null);
+const fontData = ref<Font | null>(null)
 watch(() => fontData.value, (font) => {
-	if (!font) return;
-	formValue.value.nameBoxSettings.fontFamily = font.id;
-	formValue.value.messageBoxSettings.fontFamily = font.id;
-});
+	if (!font) return
+	formValue.value.nameBoxSettings.fontFamily = font.id
+	formValue.value.messageBoxSettings.fontFamily = font.id
+})
 
 const fontWeightOptions = computed(() => {
-	if (!fontData.value) return [];
+	if (!fontData.value) return []
 	return fontData.value.weights.map((weight) => ({
 		label: `${weight}`,
 		value: weight,
-	}));
-});
+	}))
+})
 
 const fontStyleOptions = computed(() => {
-	if (!fontData.value) return [];
+	if (!fontData.value) return []
 	return fontData.value.styles.map((style) => ({
 		label: capitalize(style),
 		value: style,
-	}));
-});
+	}))
+})
 
 const fontVariantOptions = ['normal', 'small-caps'].map((variant) => ({
 	label: capitalize(variant),
 	value: variant,
-}));
+}))
 
 const lineJoinOptions = ['round', 'bevel', 'miter'].map((lineJoin) => ({
 	label: capitalize(lineJoin),
 	value: lineJoin,
-}));
+}))
 
 const isMessageBoxDisabled = computed(() => {
-	return !formValue.value.messageBoxSettings.enabled;
-});
+	return !formValue.value.messageBoxSettings.enabled
+})
 
 const isNameBoxDisabled = computed(() => {
-	return !formValue.value.dudeSettings.visibleName;
-});
+	return !formValue.value.dudeSettings.visibleName
+})
 
 const isDropShadowDisabled = computed(() => {
-	return isNameBoxDisabled.value || !formValue.value.nameBoxSettings.dropShadow;
-});
+	return isNameBoxDisabled.value || !formValue.value.nameBoxSettings.dropShadow
+})
 
 const dudesSprites = Object.keys(DudesSprite).map((key) => ({
 	label: capitalize(key),
 	value: key,
-}));
+}))
 </script>
 
 <template>
 	<div v-if="formValue" class="card">
 		<div class="card-header">
-			<n-button
+			<NButton
 				secondary
 				type="error"
-				@click="$reset"
+				@click="reset"
 			>
 				{{ t('sharedButtons.setDefaultSettings') }}
-			</n-button>
-			<n-button
+			</NButton>
+			<NButton
 				secondary
 				type="info"
 				:disabled="!formValue.id || !canCopyLink"
 				@click="copyOverlayLink({ id: formValue.id! })"
 			>
 				{{ t('overlays.copyOverlayLink') }}
-			</n-button>
-			<n-button secondary type="success" @click="save">
+			</NButton>
+			<NButton secondary type="success" @click="save">
 				{{ t('sharedButtons.save') }}
-			</n-button>
+			</NButton>
 
-			<n-tabs class="pt-2" type="line" placement="left" default-value="dude" animated>
-				<n-tab-pane name="dude" :tab="t('overlays.dudes.dudeDivider')">
-					<n-form-item :label="t('overlays.dudes.dudeDefaultSprite')">
-						<n-select
+			<NTabs class="pt-2" type="line" placement="left" default-value="dude" animated>
+				<NTabPane name="dude" :tab="t('overlays.dudes.dudeDivider')">
+					<NFormItem :label="t('overlays.dudes.dudeDefaultSprite')">
+						<NSelect
 							v-model:value="formValue.dudeSettings.defaultSprite"
 							:options="dudesSprites"
 						/>
-					</n-form-item>
+					</NFormItem>
 
-					<n-form-item :show-feedback="false" :label="t('overlays.dudes.dudeMaxOnScreen')">
-						<n-slider
+					<NFormItem :show-feedback="false" :label="t('overlays.dudes.dudeMaxOnScreen')">
+						<NSlider
 							v-model:value="formValue.dudeSettings.maxOnScreen"
 							:min="0"
 							:max="128"
@@ -204,76 +204,76 @@ const dudesSprites = Object.keys(DudesSprite).map((key) => ({
 								return value;
 							}"
 						/>
-					</n-form-item>
+					</NFormItem>
 
-					<n-form-item :label="t('overlays.dudes.dudeColor')">
-						<n-color-picker
+					<NFormItem :label="t('overlays.dudes.dudeColor')">
+						<NColorPicker
 							v-model:value="formValue.dudeSettings.color"
 							:modes="['hex']"
 						/>
-					</n-form-item>
+					</NFormItem>
 
-					<n-form-item :show-feedback="false" :label="t('overlays.dudes.dudeGravity')">
-						<n-slider
+					<NFormItem :show-feedback="false" :label="t('overlays.dudes.dudeGravity')">
+						<NSlider
 							v-model:value="formValue.dudeSettings.gravity"
 							:min="100"
 							:max="5000"
 						/>
-					</n-form-item>
+					</NFormItem>
 
-					<n-form-item :show-feedback="false" :label="t('overlays.dudes.dudeMaxLifeTime')">
-						<n-slider
+					<NFormItem :show-feedback="false" :label="t('overlays.dudes.dudeMaxLifeTime')">
+						<NSlider
 							v-model:value="formValue.dudeSettings.maxLifeTime"
 							:min="1000"
 							:max="120 * 60 * 1000"
 							:step="1000"
 							:format-tooltip="(value) => formatDuration(value)"
 						/>
-					</n-form-item>
+					</NFormItem>
 
-					<n-form-item :show-feedback="false" :label="t('overlays.dudes.dudeScale')">
-						<n-slider
+					<NFormItem :show-feedback="false" :label="t('overlays.dudes.dudeScale')">
+						<NSlider
 							v-model:value="formValue.dudeSettings.scale"
 							:min="1"
 							:max="10"
 							:step="1"
 						/>
-					</n-form-item>
-				</n-tab-pane>
+					</NFormItem>
+				</NTabPane>
 
-				<n-tab-pane name="ignoring" :tab="t('overlays.dudes.ignoreDivider')">
-					<n-form-item
+				<NTabPane name="ignoring" :tab="t('overlays.dudes.ignoreDivider')">
+					<NFormItem
 						class="form-item-switch"
 						:show-feedback="false"
 						:label="t('overlays.dudes.ignoreCommands')"
 					>
-						<n-switch v-model:value="formValue.ignoreSettings.ignoreCommands" />
-					</n-form-item>
+						<NSwitch v-model:value="formValue.ignoreSettings.ignoreCommands" />
+					</NFormItem>
 
-					<n-form-item
+					<NFormItem
 						class="form-item-switch"
 						:show-feedback="false"
 						:label="t('overlays.dudes.ignoreUsers')"
 					>
-						<n-switch v-model:value="formValue.ignoreSettings.ignoreUsers" />
-					</n-form-item>
+						<NSwitch v-model:value="formValue.ignoreSettings.ignoreUsers" />
+					</NFormItem>
 
-					<n-form-item :show-feedback="false" :label="t('overlays.dudes.ignoreUsersList')">
-						<select-twitch-users v-model="formValue.ignoreSettings.users" />
-					</n-form-item>
-				</n-tab-pane>
+					<NFormItem :show-feedback="false" :label="t('overlays.dudes.ignoreUsersList')">
+						<SelectTwitchUsers v-model="formValue.ignoreSettings.users" />
+					</NFormItem>
+				</NTabPane>
 
-				<n-tab-pane name="sounds" :tab="t('overlays.dudes.dudeSoundsDivider')">
-					<n-form-item
+				<NTabPane name="sounds" :tab="t('overlays.dudes.dudeSoundsDivider')">
+					<NFormItem
 						class="form-item-switch"
 						:show-feedback="false"
 						:label="t('overlays.dudes.enable')"
 					>
-						<n-switch v-model:value="formValue.dudeSettings.soundsEnabled" />
-					</n-form-item>
+						<NSwitch v-model:value="formValue.dudeSettings.soundsEnabled" />
+					</NFormItem>
 
-					<n-form-item :show-feedback="false" :label="t('overlays.dudes.dudeSoundsVolume')">
-						<n-slider
+					<NFormItem :show-feedback="false" :label="t('overlays.dudes.dudeSoundsVolume')">
+						<NSlider
 							v-model:value="formValue.dudeSettings.soundsVolume"
 							:min="0.01"
 							:max="1"
@@ -281,48 +281,48 @@ const dudesSprites = Object.keys(DudesSprite).map((key) => ({
 							:format-tooltip="(value) => `${(value * 100).toFixed(0)}%`"
 							:disabled="!formValue.dudeSettings.soundsEnabled"
 						/>
-					</n-form-item>
-				</n-tab-pane>
+					</NFormItem>
+				</NTabPane>
 
-				<n-tab-pane name="grow" :tab="t('overlays.dudes.growDivider')">
-					<n-form-item :show-feedback="false" :label="t('overlays.dudes.growTime')">
-						<n-slider
+				<NTabPane name="grow" :tab="t('overlays.dudes.growDivider')">
+					<NFormItem :show-feedback="false" :label="t('overlays.dudes.growTime')">
+						<NSlider
 							v-model:value="formValue.dudeSettings.growTime"
 							:min="5000"
 							:max="1000 * 60 * 60"
 							:step="1000"
 							:format-tooltip="(value) => formatDuration(value)"
 						/>
-					</n-form-item>
+					</NFormItem>
 
-					<n-form-item :show-feedback="false" :label="t('overlays.dudes.growMaxScale')">
-						<n-slider
+					<NFormItem :show-feedback="false" :label="t('overlays.dudes.growMaxScale')">
+						<NSlider
 							v-model:value="formValue.dudeSettings.growMaxScale"
 							:min="formValue.dudeSettings.scale + 1"
 							:max="32"
 							:step="1"
 						/>
-					</n-form-item>
-				</n-tab-pane>
+					</NFormItem>
+				</NTabPane>
 
-				<n-tab-pane name="name-box" :tab="t('overlays.dudes.nameBoxDivider')">
-					<n-scrollbar style="max-height: calc(62vh - var(--layout-header-height));" trigger="none">
+				<NTabPane name="name-box" :tab="t('overlays.dudes.nameBoxDivider')">
+					<NScrollbar style="max-height: calc(62vh - var(--layout-header-height));" trigger="none">
 						<div class="pr-4">
-							<n-form>
-								<n-form-item
+							<NForm>
+								<NFormItem
 									class="form-item-switch"
 									:show-feedback="false"
 									:label="t('overlays.dudes.enable')"
 								>
-									<n-switch v-model:value="formValue.dudeSettings.visibleName" />
-								</n-form-item>
+									<NSwitch v-model:value="formValue.dudeSettings.visibleName" />
+								</NFormItem>
 
-								<n-form-item
+								<NFormItem
 									:validation-status="nameBoxFillMessage ? 'error' : undefined"
 									:feedback="nameBoxFillMessage"
 									:label="t('overlays.dudes.nameBoxFill')"
 								>
-									<n-dynamic-tags
+									<NDynamicTags
 										v-model:value="formValue.nameBoxSettings.fill"
 										:disabled="isNameBoxDisabled"
 										:max="6"
@@ -343,12 +343,12 @@ const dudesSprites = Object.keys(DudesSprite).map((key) => ({
 													color: tag,
 													borderColor: tag,
 													textColor,
-												}
+												},
 											}, { default: () => tag })
 										}"
 									>
 										<template #input="{ submit, deactivate }">
-											<n-color-picker
+											<NColorPicker
 												style="width: 80px;"
 												size="small"
 												default-show
@@ -360,25 +360,25 @@ const dudesSprites = Object.keys(DudesSprite).map((key) => ({
 												@blur="deactivate"
 											/>
 										</template>
-									</n-dynamic-tags>
-								</n-form-item>
-							</n-form>
+									</NDynamicTags>
+								</NFormItem>
+							</NForm>
 
-							<n-form>
-								<n-form-item
+							<NForm>
+								<NFormItem
 									:disabled="isNameBoxDisabled"
 									:validation-status="fillGradidentStopMessage ? 'error' : undefined"
 									:feedback="fillGradidentStopMessage"
 									:label="t('overlays.dudes.nameBoxFillGradientStops')"
 								>
-									<n-dynamic-tags
+									<NDynamicTags
 										v-model:value="fillGradientStops"
 										:render-tag="(tag: string, index: number) => {
 											return h(NTag, {
 												closable: true,
 												onClose: () => {
 													formValue.nameBoxSettings.fillGradientStops.splice(index, 1)
-												}
+												},
 											}, { default: () => tag })
 										}"
 										:max="formValue.nameBoxSettings.fill.length"
@@ -387,7 +387,7 @@ const dudesSprites = Object.keys(DudesSprite).map((key) => ({
 										}"
 									>
 										<template #input="{ submit, deactivate }">
-											<n-input-number
+											<NInputNumber
 												style="width: 100px;"
 												autofocus
 												placeholder=""
@@ -406,12 +406,12 @@ const dudesSprites = Object.keys(DudesSprite).map((key) => ({
 												@blur="deactivate"
 											/>
 										</template>
-									</n-dynamic-tags>
-								</n-form-item>
-							</n-form>
+									</NDynamicTags>
+								</NFormItem>
+							</NForm>
 
-							<n-form-item :label="t('overlays.dudes.nameBoxGradientType')">
-								<n-select
+							<NFormItem :label="t('overlays.dudes.nameBoxGradientType')">
+								<NSelect
 									v-model:value="formValue.nameBoxSettings.fillGradientType"
 									:disabled="isNameBoxDisabled || formValue.nameBoxSettings.fill.length < 2"
 									:options="[
@@ -422,13 +422,13 @@ const dudesSprites = Object.keys(DudesSprite).map((key) => ({
 										{
 											label: 'Horizontal',
 											value: 1,
-										}
+										},
 									]"
 								/>
-							</n-form-item>
+							</NFormItem>
 
-							<n-form-item :show-feedback="false" :label="t('overlays.dudes.nameBoxFontFamily')">
-								<font-selector
+							<NFormItem :show-feedback="false" :label="t('overlays.dudes.nameBoxFontFamily')">
+								<FontSelector
 									v-model:font="fontData"
 									:disabled="isNameBoxDisabled"
 									:font-family="formValue.nameBoxSettings.fontFamily"
@@ -436,118 +436,118 @@ const dudesSprites = Object.keys(DudesSprite).map((key) => ({
 									:font-style="formValue.nameBoxSettings.fontStyle"
 									:subsets="['latin', 'cyrillic']"
 								/>
-							</n-form-item>
+							</NFormItem>
 
-							<n-form-item :show-feedback="false" :label="t('overlays.dudes.nameBoxFontWeight')">
-								<n-select
+							<NFormItem :show-feedback="false" :label="t('overlays.dudes.nameBoxFontWeight')">
+								<NSelect
 									v-model:value="formValue.nameBoxSettings.fontWeight"
 									:disabled="isNameBoxDisabled"
 									:options="fontWeightOptions"
 								/>
-							</n-form-item>
+							</NFormItem>
 
-							<n-form-item :show-feedback="false" :label="t('overlays.dudes.nameBoxFontStyle')">
-								<n-select
+							<NFormItem :show-feedback="false" :label="t('overlays.dudes.nameBoxFontStyle')">
+								<NSelect
 									v-model:value="formValue.nameBoxSettings.fontStyle"
 									:disabled="isNameBoxDisabled"
 									:options="fontStyleOptions"
 								/>
-							</n-form-item>
+							</NFormItem>
 
-							<n-form-item :show-feedback="false" :label="t('overlays.dudes.nameBoxFontVariant')">
-								<n-select
+							<NFormItem :show-feedback="false" :label="t('overlays.dudes.nameBoxFontVariant')">
+								<NSelect
 									v-model:value="formValue.nameBoxSettings.fontVariant"
 									:disabled="isNameBoxDisabled"
 									:options="fontVariantOptions"
 								/>
-							</n-form-item>
+							</NFormItem>
 
-							<n-form-item :label="t('overlays.dudes.nameBoxFontSize')">
-								<n-slider
+							<NFormItem :label="t('overlays.dudes.nameBoxFontSize')">
+								<NSlider
 									v-model:value="formValue.nameBoxSettings.fontSize"
 									:disabled="isNameBoxDisabled"
 									:min="1"
 									:max="128"
 								/>
-							</n-form-item>
+							</NFormItem>
 
-							<n-form-item :show-feedback="false" :label="t('overlays.dudes.nameBoxStroke')">
-								<n-color-picker
+							<NFormItem :show-feedback="false" :label="t('overlays.dudes.nameBoxStroke')">
+								<NColorPicker
 									v-model:value="formValue.nameBoxSettings.stroke"
 									:disabled="isNameBoxDisabled"
 									:modes="['hex']"
 								/>
-							</n-form-item>
+							</NFormItem>
 
-							<n-form-item :show-feedback="false" :label="t('overlays.dudes.nameStrokeThickness')">
-								<n-slider
+							<NFormItem :show-feedback="false" :label="t('overlays.dudes.nameStrokeThickness')">
+								<NSlider
 									v-model:value="formValue.nameBoxSettings.strokeThickness"
 									:disabled="isNameBoxDisabled"
 									:min="0"
 									:max="16"
 									:step="1"
 								/>
-							</n-form-item>
+							</NFormItem>
 
-							<n-form-item :label="t('overlays.dudes.nameBoxLineJoin')">
-								<n-select
+							<NFormItem :label="t('overlays.dudes.nameBoxLineJoin')">
+								<NSelect
 									v-model:value="formValue.nameBoxSettings.lineJoin"
 									:disabled="isNameBoxDisabled"
 									:options="lineJoinOptions"
 								/>
-							</n-form-item>
+							</NFormItem>
 
-							<n-form-item
+							<NFormItem
 								class="form-item-switch"
 								:show-feedback="false"
 								:label="t('overlays.dudes.nameBoxDropShadow')"
 							>
-								<n-switch
+								<NSwitch
 									v-model:value="formValue.nameBoxSettings.dropShadow"
 									:disabled="isNameBoxDisabled"
 								/>
-							</n-form-item>
+							</NFormItem>
 
-							<n-form-item :show-feedback="false" :label="t('overlays.dudes.nameBoxDropShadowColor')">
-								<n-color-picker
+							<NFormItem :show-feedback="false" :label="t('overlays.dudes.nameBoxDropShadowColor')">
+								<NColorPicker
 									v-model:value="formValue.nameBoxSettings.dropShadowColor"
 									:modes="['hex']"
 									:disabled="isDropShadowDisabled"
 								/>
-							</n-form-item>
+							</NFormItem>
 
-							<n-form-item :show-feedback="false" :label="t('overlays.dudes.nameBoxDropShadowAlpha')">
-								<n-slider
+							<NFormItem :show-feedback="false" :label="t('overlays.dudes.nameBoxDropShadowAlpha')">
+								<NSlider
 									v-model:value="formValue.nameBoxSettings.dropShadowAlpha"
 									:min="0"
 									:max="1"
 									:step="0.01"
 									:disabled="isDropShadowDisabled"
 								/>
-							</n-form-item>
+							</NFormItem>
 
-							<n-form-item :show-feedback="false" :label="t('overlays.dudes.nameBoxDropShadowBlur')">
-								<n-slider
+							<NFormItem :show-feedback="false" :label="t('overlays.dudes.nameBoxDropShadowBlur')">
+								<NSlider
 									v-model:value="formValue.nameBoxSettings.dropShadowBlur"
 									:min="0"
 									:max="32"
 									:step="0.1"
 									:disabled="isDropShadowDisabled"
 								/>
-							</n-form-item>
+							</NFormItem>
 
-							<n-form-item :show-feedback="false" :label="t('overlays.dudes.nameBoxDropShadowDistance')">
-								<n-slider
+							<NFormItem :show-feedback="false" :label="t('overlays.dudes.nameBoxDropShadowDistance')">
+								<NSlider
 									v-model:value="formValue.nameBoxSettings.dropShadowDistance"
 									:min="0"
 									:max="32"
 									:step="0.1"
 									:disabled="isDropShadowDisabled"
 								/>
-							</n-form-item>
+							</NFormItem>
 
-							<n-form-item :show-feedback="false" :label="t('overlays.dudes.nameBoxDropShadowAngle')">
-								<n-slider
+							<NFormItem :show-feedback="false" :label="t('overlays.dudes.nameBoxDropShadowAngle')">
+								<NSlider
 									v-model:value="formValue.nameBoxSettings.dropShadowAngle"
 									:min="0"
 									:max="Math.PI * 2"
@@ -555,22 +555,22 @@ const dudesSprites = Object.keys(DudesSprite).map((key) => ({
 									:format-tooltip="(value) => `${Math.round((value * 180) / Math.PI)}°`"
 									:disabled="isDropShadowDisabled"
 								/>
-							</n-form-item>
+							</NFormItem>
 						</div>
-					</n-scrollbar>
-				</n-tab-pane>
+					</NScrollbar>
+				</NTabPane>
 
-				<n-tab-pane name="message-box" :tab="t('overlays.dudes.messageBoxDivider')">
-					<n-form-item
+				<NTabPane name="message-box" :tab="t('overlays.dudes.messageBoxDivider')">
+					<NFormItem
 						class="form-item-switch"
 						:show-feedback="false"
 						:label="t('overlays.dudes.enable')"
 					>
-						<n-switch v-model:value="formValue.messageBoxSettings.enabled" />
-					</n-form-item>
+						<NSwitch v-model:value="formValue.messageBoxSettings.enabled" />
+					</NFormItem>
 
-					<n-form-item :show-feedback="false" :label="t('overlays.dudes.messageBoxShowTime')">
-						<n-slider
+					<NFormItem :show-feedback="false" :label="t('overlays.dudes.messageBoxShowTime')">
+						<NSlider
 							v-model:value="formValue.messageBoxSettings.showTime"
 							:min="1000"
 							:max="60 * 1000"
@@ -578,65 +578,65 @@ const dudesSprites = Object.keys(DudesSprite).map((key) => ({
 							:format-tooltip="(value) => `${Math.round(value / 1000)}s`"
 							:disabled="isMessageBoxDisabled"
 						/>
-					</n-form-item>
+					</NFormItem>
 
-					<n-form-item :show-feedback="false" :label="t('overlays.dudes.messageBoxFill')">
-						<n-color-picker
+					<NFormItem :show-feedback="false" :label="t('overlays.dudes.messageBoxFill')">
+						<NColorPicker
 							v-model:value="formValue.messageBoxSettings.fill"
 							:modes="['hex']"
 							:disabled="isMessageBoxDisabled"
 						/>
-					</n-form-item>
+					</NFormItem>
 
-					<n-form-item :show-feedback="false" :label="t('overlays.dudes.messageBoxBackground')">
-						<n-color-picker
+					<NFormItem :show-feedback="false" :label="t('overlays.dudes.messageBoxBackground')">
+						<NColorPicker
 							v-model:value="formValue.messageBoxSettings.boxColor"
 							:modes="['hex']"
 							:disabled="isMessageBoxDisabled"
 						/>
-					</n-form-item>
+					</NFormItem>
 
-					<n-form-item :show-feedback="false" :label="t('overlays.dudes.messageBoxPadding')">
-						<n-slider
+					<NFormItem :show-feedback="false" :label="t('overlays.dudes.messageBoxPadding')">
+						<NSlider
 							v-model:value="formValue.messageBoxSettings.padding"
 							:min="0"
 							:max="64"
 							:step="1"
 							:disabled="isMessageBoxDisabled"
 						/>
-					</n-form-item>
+					</NFormItem>
 
-					<n-form-item :show-feedback="false" :label="t('overlays.dudes.messageBoxBorderRadius')">
-						<n-slider
+					<NFormItem :show-feedback="false" :label="t('overlays.dudes.messageBoxBorderRadius')">
+						<NSlider
 							v-model:value="formValue.messageBoxSettings.borderRadius"
 							:min="0"
 							:max="64"
 							:step="1"
 							:disabled="isMessageBoxDisabled"
 						/>
-					</n-form-item>
+					</NFormItem>
 
-					<n-form-item :show-feedback="false" :label="t('overlays.dudes.messageBoxFontSize')">
-						<n-slider
+					<NFormItem :show-feedback="false" :label="t('overlays.dudes.messageBoxFontSize')">
+						<NSlider
 							v-model:value="formValue.messageBoxSettings.fontSize"
 							:min="12"
 							:max="64"
 							:step="1"
 							:disabled="isMessageBoxDisabled"
 						/>
-					</n-form-item>
-				</n-tab-pane>
+					</NFormItem>
+				</NTabPane>
 
-				<n-tab-pane name="emote" :tab="t('overlays.dudes.emoteDivider')">
-					<n-form-item
+				<NTabPane name="emote" :tab="t('overlays.dudes.emoteDivider')">
+					<NFormItem
 						class="form-item-switch"
 						:show-feedback="false"
 						:label="t('overlays.dudes.enable')"
 					>
-						<n-switch v-model:value="formValue.spitterEmoteSettings.enabled" />
-					</n-form-item>
-				</n-tab-pane>
-			</n-tabs>
+						<NSwitch v-model:value="formValue.spitterEmoteSettings.enabled" />
+					</NFormItem>
+				</NTabPane>
+			</NTabs>
 		</div>
 	</div>
 </template>
diff --git a/frontend/dashboard/src/pages/overlays/dudes/dudes-settings.vue b/frontend/dashboard/src/pages/overlays/dudes/dudes-settings.vue
index f5ad1f3d7..87aecc53c 100644
--- a/frontend/dashboard/src/pages/overlays/dudes/dudes-settings.vue
+++ b/frontend/dashboard/src/pages/overlays/dudes/dudes-settings.vue
@@ -1,71 +1,72 @@
 <script setup lang="ts">
 import {
-	NTabs,
-	NTabPane,
 	NAlert,
-	useThemeVars,
 	NButton,
 	NSpace,
-} from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+	NTabPane,
+	NTabs,
+	useThemeVars,
+} from 'naive-ui'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import DudesSettingsForm from './dudes-settings-form.vue'
+import { useDudesForm } from './use-dudes-form.js'
+import { useDudesIframe } from './use-dudes-frame.js'
 
-import DudesSettingsForm from './dudes-settings-form.vue';
-import { DudesSettingsWithOptionalId } from './dudes-settings.js';
-import { useDudesForm } from './use-dudes-form.js';
-import { useDudesIframe } from './use-dudes-frame.js';
+import type { DudesSettingsWithOptionalId } from './dudes-settings.js'
 
 import {
-	useDudesOverlayManager, useProfile, useUserAccessFlagChecker,
-} from '@/api/index.js';
-import { useNaiveDiscrete } from '@/composables/use-naive-discrete.js';
-import CommandButton from '@/features/commands/components/command-button.vue';
-import { ChannelRolePermissionEnum } from '@/gql/graphql';
-
-const themeVars = useThemeVars();
-const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays);
-const dudesOverlayManager = useDudesOverlayManager();
-const creator = dudesOverlayManager.useCreate();
-const deleter = dudesOverlayManager.useDelete();
-const { data: profile } = storeToRefs(useProfile());
-
-const { t } = useI18n();
-const { dialog } = useNaiveDiscrete();
+	useDudesOverlayManager,
+	useProfile,
+	useUserAccessFlagChecker,
+} from '@/api/index.js'
+import { useNaiveDiscrete } from '@/composables/use-naive-discrete.js'
+import CommandButton from '@/features/commands/components/command-button.vue'
+import { ChannelRolePermissionEnum } from '@/gql/graphql'
+
+const themeVars = useThemeVars()
+const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays)
+const dudesOverlayManager = useDudesOverlayManager()
+const creator = dudesOverlayManager.useCreate()
+const deleter = dudesOverlayManager.useDelete()
+const { data: profile } = useProfile()
+
+const { t } = useI18n()
+const { dialog } = useNaiveDiscrete()
 
 const {
 	data: entities,
-} = dudesOverlayManager.useGetAll();
+} = dudesOverlayManager.useGetAll()
 
-const openedTab = ref<string>();
+const openedTab = ref<string>()
 
-const dudesIframeStore = useDudesIframe();
-const { dudesIframe } = storeToRefs(dudesIframeStore);
+const { dudesIframe, sendIframeMessage } = useDudesIframe()
 const dudesIframeUrl = computed(() => {
-	if (!profile.value || !openedTab.value) return null;
-	return `${window.location.origin}/overlays/${profile.value.apiKey}/dudes?id=${openedTab.value}`;
-});
+	if (!profile.value || !openedTab.value) return null
+	return `${window.location.origin}/overlays/${profile.value.apiKey}/dudes?id=${openedTab.value}`
+})
 
-const { $setData, $getDefaultSettings } = useDudesForm();
+const { setData, getDefaultSettings } = useDudesForm()
 
 function resetTab() {
 	if (!entities.value?.settings.at(0)) {
-		openedTab.value = undefined;
-		return;
+		openedTab.value = undefined
+		return
 	}
 
-	openedTab.value = entities.value.settings.at(0)?.id;
+	openedTab.value = entities.value.settings.at(0)?.id
 }
 
 watch(entities, () => {
-	resetTab();
-}, { immediate: true });
+	resetTab()
+}, { immediate: true })
 
 watch(openedTab, (v) => {
-	const entity = entities.value?.settings.find(s => s.id === v) as DudesSettingsWithOptionalId;
-	if (!entity) return;
-	$setData(entity);
-});
+	const entity = entities.value?.settings.find(s => s.id === v) as DudesSettingsWithOptionalId
+	if (!entity) return
+	setData(entity)
+})
 
 async function handleClose(id: string) {
 	dialog.create({
@@ -75,22 +76,22 @@ async function handleClose(id: string) {
 		negativeText: 'Cancel',
 		showIcon: false,
 		onPositiveClick: async () => {
-			const entity = entities.value?.settings.find(s => s.id === id);
-			if (!entity?.id) return;
+			const entity = entities.value?.settings.find(s => s.id === id)
+			if (!entity?.id) return
 
-			await deleter.mutateAsync(entity.id);
-			resetTab();
+			await deleter.mutateAsync(entity.id)
+			resetTab()
 		},
-	});
+	})
 }
 
 async function handleAdd() {
-	await creator.mutateAsync($getDefaultSettings());
+	await creator.mutateAsync(getDefaultSettings())
 }
 
 const addable = computed(() => {
-	return userCanEditOverlays.value && (entities.value?.settings.length ?? 0) < 5;
-});
+	return userCanEditOverlays.value && (entities.value?.settings.length ?? 0) < 5
+})
 </script>
 
 <template>
@@ -103,37 +104,37 @@ const addable = computed(() => {
 					:src="dudesIframeUrl"
 					class="iframe"
 				/>
-				<n-space :size="6" class="absolute top-[18px] left-2">
-					<n-button @click="dudesIframeStore.sendIframeMessage('spawn-emote')">
+				<NSpace :size="6" class="absolute top-[18px] left-2">
+					<NButton @click="sendIframeMessage('spawn-emote')">
 						Emote
-					</n-button>
-					<n-button @click="dudesIframeStore.sendIframeMessage('show-message')">
+					</NButton>
+					<NButton @click="sendIframeMessage('show-message')">
 						Message
-					</n-button>
-					<n-button @click="dudesIframeStore.sendIframeMessage('jump')">
+					</NButton>
+					<NButton @click="sendIframeMessage('jump')">
 						Jump
-					</n-button>
-					<n-button @click="dudesIframeStore.sendIframeMessage('grow')">
+					</NButton>
+					<NButton @click="sendIframeMessage('grow')">
 						Grow
-					</n-button>
-					<n-button @click="dudesIframeStore.sendIframeMessage('leave')">
+					</NButton>
+					<NButton @click="sendIframeMessage('leave')">
 						Leave
-					</n-button>
-					<n-button @click="dudesIframeStore.sendIframeMessage('reset')">
+					</NButton>
+					<NButton @click="sendIframeMessage('reset')">
 						Reset
-					</n-button>
-				</n-space>
+					</NButton>
+				</NSpace>
 			</div>
 		</div>
 		<div class="w-[30%]">
 			<div class="flex gap-2 flex-wrap">
-				<command-button title="Jump command" name="jump" />
-				<command-button title="Color command" name="dudes color" />
-				<command-button title="Grow command" name="dudes grow" />
-				<command-button title="Sprite command" name="dudes sprite" />
-				<command-button title="Leave command" name="dudes leave" />
+				<CommandButton title="Jump command" name="jump" />
+				<CommandButton title="Color command" name="dudes color" />
+				<CommandButton title="Grow command" name="dudes grow" />
+				<CommandButton title="Sprite command" name="dudes sprite" />
+				<CommandButton title="Leave command" name="dudes leave" />
 			</div>
-			<n-tabs
+			<NTabs
 				v-model:value="openedTab"
 				type="card"
 				:closable="userCanEditOverlays"
@@ -147,19 +148,19 @@ const addable = computed(() => {
 					{{ t('overlays.chat.presets') }}
 				</template>
 				<template v-if="entities?.settings.length">
-					<n-tab-pane
+					<NTabPane
 						v-for="(entity, entityIndex) in entities?.settings"
 						:key="entity.id"
-						:tab="`#${entityIndex+1}`"
+						:tab="`#${entityIndex + 1}`"
 						:name="entity.id!"
 					>
-						<dudes-settings-form />
-					</n-tab-pane>
+						<DudesSettingsForm />
+					</NTabPane>
 				</template>
-			</n-tabs>
-			<n-alert v-if="!entities?.settings.length" type="info" class="mt-2">
+			</NTabs>
+			<NAlert v-if="!entities?.settings.length" type="info" class="mt-2">
 				Create new overlay for edit settings
-			</n-alert>
+			</NAlert>
 		</div>
 	</div>
 </template>
diff --git a/frontend/dashboard/src/pages/overlays/dudes/use-dudes-form.ts b/frontend/dashboard/src/pages/overlays/dudes/use-dudes-form.ts
index 4a00df1f6..5bfabdfaf 100644
--- a/frontend/dashboard/src/pages/overlays/dudes/use-dudes-form.ts
+++ b/frontend/dashboard/src/pages/overlays/dudes/use-dudes-form.ts
@@ -1,29 +1,29 @@
-import { ref, toRaw } from 'vue';
+import { ref, toRaw } from 'vue'
 
-import { defaultDudesSettings, type DudesSettingsWithOptionalId } from './dudes-settings.js';
+import { type DudesSettingsWithOptionalId, defaultDudesSettings } from './dudes-settings.js'
 
-const data = ref<DudesSettingsWithOptionalId>(structuredClone(defaultDudesSettings));
+const data = ref<DudesSettingsWithOptionalId>(structuredClone(defaultDudesSettings))
 
-export const useDudesForm = () => {
-	function $setData(d: DudesSettingsWithOptionalId) {
-		data.value = structuredClone(toRaw(d));
+export function useDudesForm() {
+	function setData(d: DudesSettingsWithOptionalId) {
+		data.value = structuredClone(toRaw(d))
 	}
 
-	function $reset() {
+	function reset() {
 		data.value = {
-			...$getDefaultSettings(),
+			...getDefaultSettings(),
 			id: data.value.id,
-		};
+		}
 	}
 
-	function $getDefaultSettings() {
-		return structuredClone(defaultDudesSettings);
+	function getDefaultSettings() {
+		return structuredClone(defaultDudesSettings)
 	}
 
 	return {
 		data,
-		$setData,
-		$reset,
-		$getDefaultSettings,
-	};
-};
+		setData,
+		reset,
+		getDefaultSettings,
+	}
+}
diff --git a/frontend/dashboard/src/pages/overlays/dudes/use-dudes-frame.ts b/frontend/dashboard/src/pages/overlays/dudes/use-dudes-frame.ts
index a98f9ebde..1bc61bfef 100644
--- a/frontend/dashboard/src/pages/overlays/dudes/use-dudes-frame.ts
+++ b/frontend/dashboard/src/pages/overlays/dudes/use-dudes-frame.ts
@@ -1,20 +1,20 @@
-import { defineStore } from 'pinia';
-import { ref, toRaw } from 'vue';
+import { createGlobalState } from '@vueuse/core'
+import { ref, toRaw } from 'vue'
 
-export const useDudesIframe = defineStore('dudes-iframe', () => {
-	const dudesIframe = ref<HTMLIFrameElement | null>(null);
+export const useDudesIframe = createGlobalState(() => {
+	const dudesIframe = ref<HTMLIFrameElement | null>(null)
 
 	function sendIframeMessage(action: string, data?: any) {
-		if (!dudesIframe.value) return;
+		if (!dudesIframe.value) return
 		const payload = JSON.stringify({
 			action,
 			data: toRaw(data),
-		});
-		dudesIframe.value.contentWindow?.postMessage(payload);
+		})
+		dudesIframe.value.contentWindow?.postMessage(payload)
 	}
 
 	return {
 		dudesIframe,
 		sendIframeMessage,
-	};
-});
+	}
+})
diff --git a/frontend/dashboard/src/pages/overlays/kappagen/Kappagen.vue b/frontend/dashboard/src/pages/overlays/kappagen/Kappagen.vue
index 296fdaff5..3c677e63d 100644
--- a/frontend/dashboard/src/pages/overlays/kappagen/Kappagen.vue
+++ b/frontend/dashboard/src/pages/overlays/kappagen/Kappagen.vue
@@ -1,26 +1,25 @@
 <script lang="ts" setup>
-import { RpcError } from '@protobuf-ts/runtime-rpc';
-import { TwirEventType } from '@twir/api/messages/events/events';
+import { RpcError } from '@protobuf-ts/runtime-rpc'
+import { TwirEventType } from '@twir/api/messages/events/events'
+import { useDebounceFn } from '@vueuse/core'
+import { CopyIcon } from 'lucide-vue-next'
+import { NButton, NButtonGroup, NTabPane, NTabs, useThemeVars } from 'naive-ui'
+import { computed, ref, toRaw, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import SettingsAnimations from './settingsAnimations.vue'
+import SettingsEvents from './settingsEvents.vue'
+import SettingsGeneral from './settingsGeneral.vue'
+import { useKappagenFormSettings } from './store.js'
+
 import type {
 	Settings_AnimationSettings,
-} from '@twir/api/messages/overlays_kappagen/overlays_kappagen';
-import { useDebounceFn } from '@vueuse/core';
-import { CopyIcon } from 'lucide-vue-next';
-import { NTabs, NTabPane, NButton, NButtonGroup, useThemeVars } from 'naive-ui';
-import { computed, ref, toRaw, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import SettingsAnimations from './settingsAnimations.vue';
-import SettingsEvents from './settingsEvents.vue';
-import SettingsGeneral from './settingsGeneral.vue';
-import { useKappagenFormSettings } from './store.js';
-
+} from '@twir/api/messages/overlays_kappagen/overlays_kappagen'
 
-import { useKappaGenOverlayManager, useProfile } from '@/api';
-import { flatEvents } from '@/components/events/helpers.js';
-import { useCopyOverlayLink } from '@/components/overlays/copyOverlayLink.js';
-import { useToast } from '@/components/ui/toast';
-import { storeToRefs } from 'pinia';
+import { useKappaGenOverlayManager, useProfile } from '@/api'
+import { flatEvents } from '@/components/events/helpers.js'
+import { useCopyOverlayLink } from '@/components/overlays/copyOverlayLink.js'
+import { useToast } from '@/components/ui/toast'
 
 const availableEvents = Object.values(flatEvents)
 	.filter(e => e.enumValue !== undefined && TwirEventType[e.enumValue])
@@ -28,69 +27,72 @@ const availableEvents = Object.values(flatEvents)
 		return {
 			name: e.name,
 			value: e.enumValue,
-		};
-	}) as Array<{ name: string, value: TwirEventType }>;
+		}
+	}) as Array<{ name: string, value: TwirEventType }>
 
-const themeVars = useThemeVars();
-const { t } = useI18n();
-const { copyOverlayLink } = useCopyOverlayLink('kappagen');
+const themeVars = useThemeVars()
+const { t } = useI18n()
+const { copyOverlayLink } = useCopyOverlayLink('kappagen')
 
-const kappagenManager = useKappaGenOverlayManager();
-const { data: settings, error } = kappagenManager.getSettings();
-const updater = kappagenManager.updateSettings();
+const kappagenManager = useKappaGenOverlayManager()
+const { data: settings, error } = kappagenManager.getSettings()
+const updater = kappagenManager.updateSettings()
 
-const { settings: formValue } = useKappagenFormSettings();
+const { data: profile } = useProfile()
+const { settings: formValue } = useKappagenFormSettings()
 
 watch(error, async (v) => {
 	if (v instanceof RpcError) {
 		if (v.code === 'not_found') {
-			await updater.mutateAsync(formValue.value);
+			await updater.mutateAsync(formValue.value)
 		}
 	}
-});
+})
 
-const { toast } = useToast();
+const { toast } = useToast()
 async function save() {
-	if (!formValue.value) return;
+	if (!formValue.value) return
 
-	await updater.mutateAsync(formValue.value);
+	await updater.mutateAsync(formValue.value)
 	toast({
 		title: t('sharedTexts.saved'),
 		variant: 'success',
-	});
+	})
 }
 
-const sendSettings = () => sendIframeMessage('settings', {
-	...toRaw(formValue.value),
-	channelName: profile.value?.login,
-	channelId: profile.value?.id,
-});
+function sendSettings() {
+	return sendIframeMessage('settings', {
+		...toRaw(formValue.value),
+		channelName: profile.value?.login,
+		channelId: profile.value?.id,
+	})
+}
 
 const debouncedSave = useDebounceFn(async () => {
-	await save();
-	sendSettings();
-}, 1000);
+	await save()
+	sendSettings()
+}, 1000)
 watch(formValue, () => {
-	debouncedSave();
-}, { deep: true });
+	debouncedSave()
+}, { deep: true })
 
 watch(settings, (s) => {
-	if (!s) return;
+	if (!s) return
 
-	const events = toRaw(s.events);
+	const events = toRaw(s.events)
 
 	for (const event of availableEvents) {
-		const isExists = events.some(e => e.event === event.value);
-		if (isExists) continue;
+		const isExists = events.some(e => e.event === event.value)
+		if (isExists) continue
 
-		events.push({ event: event.value, disabledStyles: [], enabled: false });
+		events.push({ event: event.value, disabledStyles: [], enabled: false })
 	}
 
 	formValue.value = {
 		...toRaw(s),
-		events: events,
-	};
-}, { immediate: true });
+		events,
+	}
+}, { immediate: true })
 
 watch(() => [
 	formValue.value.emotes,
@@ -98,67 +100,65 @@ watch(() => [
 	formValue.value.animation,
 	formValue.value.cube,
 	formValue.value.size,
-], () => sendSettings(), { deep: true });
-
-const { data: profile } = storeToRefs(useProfile());
+], () => sendSettings(), { deep: true })
 
-const kappagenIframeRef = ref<HTMLIFrameElement | null>(null);
+const kappagenIframeRef = ref<HTMLIFrameElement | null>(null)
 const kappagenIframeUrl = computed(() => {
-	if (!profile.value) return null;
+	if (!profile.value) return null
 
-	return `${window.location.origin}/overlays/${profile.value.apiKey}/kappagen`;
-});
+	return `${window.location.origin}/overlays/${profile.value.apiKey}/kappagen`
+})
 
-const sendIframeMessage = (key: string, data?: any) => {
-	if (!kappagenIframeRef.value) return;
-	const win = kappagenIframeRef.value;
+function sendIframeMessage(key: string, data?: any) {
+	if (!kappagenIframeRef.value) return
+	const win = kappagenIframeRef.value
 
 	win.contentWindow?.postMessage(JSON.stringify({
 		key,
 		data: toRaw(data),
-	}));
-};
+	}))
+}
 
 watch(kappagenIframeRef, (v) => {
-	if (!v) return;
+	if (!v) return
 	v.contentWindow?.addEventListener('message', (event) => {
-		const data = JSON.parse(event.data);
-		if (data.key !== 'getSettings') return;
-		sendSettings();
-	});
-});
-
-const playKappaPreview = (animation: Settings_AnimationSettings) => {
-	sendIframeMessage('kappaWithAnimation', { animation });
-};
+		const data = JSON.parse(event.data)
+		if (data.key !== 'getSettings') return
+		sendSettings()
+	})
+})
+
+function playKappaPreview(animation: Settings_AnimationSettings) {
+	sendIframeMessage('kappaWithAnimation', { animation })
+}
 </script>
 
 <template>
 	<div class="flex h-full p-6 gap-10">
 		<div class="w-1/2">
 			<div class="header-buttons">
-				<n-button-group>
-					<n-button secondary @click="sendIframeMessage('kappa', 'EZ')">
+				<NButtonGroup>
+					<NButton secondary @click="sendIframeMessage('kappa', 'EZ')">
 						{{ t('overlays.kappagen.testKappagen') }}
-					</n-button>
-					<n-button secondary type="info" @click="sendIframeMessage('spawn', ['EZ'])">
+					</NButton>
+					<NButton secondary type="info" @click="sendIframeMessage('spawn', ['EZ'])">
 						{{ t('overlays.kappagen.testSpawn') }}
-					</n-button>
+					</NButton>
 
-					<n-button secondary type="warning" @click="sendIframeMessage('clear')">
+					<NButton secondary type="warning" @click="sendIframeMessage('clear')">
 						{{ t('overlays.kappagen.clear') }}
-					</n-button>
-				</n-button-group>
+					</NButton>
+				</NButtonGroup>
 
-				<n-button-group>
-					<n-button secondary type="info" @click="copyOverlayLink()">
+				<NButtonGroup>
+					<NButton secondary type="info" @click="copyOverlayLink()">
 						<CopyIcon class="mr-2 h-6 w-6" />
 						{{ t('overlays.copyOverlayLink') }}
-					</n-button>
-				</n-button-group>
+					</NButton>
+				</NButtonGroup>
 			</div>
 
-			<n-tabs
+			<NTabs
 				default-value="main"
 				type="line"
 				size="large"
@@ -166,30 +166,30 @@ const playKappaPreview = (animation: Settings_AnimationSettings) => {
 				animated
 				style="width: 100%; margin-top: 16px;"
 			>
-				<n-tab-pane name="main" :tab="t('overlays.kappagen.tabs.main')">
+				<NTabPane name="main" :tab="t('overlays.kappagen.tabs.main')">
 					<div class="card">
 						<div class="content">
 							<SettingsGeneral />
 						</div>
 					</div>
-				</n-tab-pane>
+				</NTabPane>
 
-				<n-tab-pane name="events" :tab="t('overlays.kappagen.tabs.events')">
+				<NTabPane name="events" :tab="t('overlays.kappagen.tabs.events')">
 					<div class="card">
 						<div class="content">
 							<SettingsEvents />
 						</div>
 					</div>
-				</n-tab-pane>
+				</NTabPane>
 
-				<n-tab-pane name="animations" :tab="t('overlays.kappagen.tabs.animations')">
+				<NTabPane name="animations" :tab="t('overlays.kappagen.tabs.animations')">
 					<div class="card">
 						<div class="content">
 							<SettingsAnimations @play="playKappaPreview" />
 						</div>
 					</div>
-				</n-tab-pane>
-			</n-tabs>
+				</NTabPane>
+			</NTabs>
 		</div>
 
 		<div class="w-1/2 h-full">
diff --git a/frontend/dashboard/src/pages/overlays/now-playing/now-playing-form.vue b/frontend/dashboard/src/pages/overlays/now-playing/now-playing-form.vue
index 767655008..0c0e601f9 100644
--- a/frontend/dashboard/src/pages/overlays/now-playing/now-playing-form.vue
+++ b/frontend/dashboard/src/pages/overlays/now-playing/now-playing-form.vue
@@ -1,40 +1,39 @@
 <script setup lang="ts">
-import { type Font, FontSelector } from '@twir/fontsource';
-import { NButton, NSelect, NFormItem, useThemeVars, NColorPicker, NSwitch, NInputNumber } from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { type Font, FontSelector } from '@twir/fontsource'
+import { NButton, NColorPicker, NFormItem, NInputNumber, NSelect, NSwitch, useThemeVars } from 'naive-ui'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { useNowPlayingForm } from './use-now-playing-form';
+import { useNowPlayingForm } from './use-now-playing-form'
 
 import {
 	useNowPlayingOverlayManager,
 	useProfile,
 	useUserAccessFlagChecker,
-} from '@/api';
-import { useCopyOverlayLink } from '@/components/overlays/copyOverlayLink';
-import { useNaiveDiscrete } from '@/composables/use-naive-discrete';
-import { ChannelRolePermissionEnum } from '@/gql/graphql';
+} from '@/api'
+import { useCopyOverlayLink } from '@/components/overlays/copyOverlayLink'
+import { useNaiveDiscrete } from '@/composables/use-naive-discrete'
+import { ChannelRolePermissionEnum } from '@/gql/graphql'
 
-const { t } = useI18n();
+const { t } = useI18n()
 
-const themeVars = useThemeVars();
-const discrete = useNaiveDiscrete();
-const { copyOverlayLink } = useCopyOverlayLink('now-playing');
-const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays);
-const { data: profile } = storeToRefs(useProfile());
+const themeVars = useThemeVars()
+const discrete = useNaiveDiscrete()
+const { copyOverlayLink } = useCopyOverlayLink('now-playing')
+const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays)
 
-const { data: formValue } = storeToRefs(useNowPlayingForm());
+const { data: profile } = useProfile()
+const { data: formValue } = useNowPlayingForm()
 
 const canCopyLink = computed(() => {
-	return profile?.value?.selectedDashboardId === profile.value?.id && userCanEditOverlays;
-});
+	return profile?.value?.selectedDashboardId === profile.value?.id && userCanEditOverlays
+})
 
-const manager = useNowPlayingOverlayManager();
-const updater = manager.useUpdate();
+const manager = useNowPlayingOverlayManager()
+const updater = manager.useUpdate()
 
 async function save() {
-	if (!formValue.value?.id) return;
+	if (!formValue.value?.id) return
 
 	await updater.mutateAsync({
 		id: formValue.value.id,
@@ -44,46 +43,46 @@ async function save() {
 		backgroundColor: formValue.value.backgroundColor,
 		showImage: formValue.value.showImage,
 		hideTimeout: formValue.value.hideTimeout,
-	});
+	})
 
 	discrete.notification.success({
 		title: t('sharedTexts.saved'),
 		duration: 1500,
-	});
+	})
 }
 
-const fontData = ref<Font | null>(null);
+const fontData = ref<Font | null>(null)
 watch(() => fontData.value, (font) => {
-	console.log(font);
-	if (!font) return;
-	formValue.value.fontFamily = font.id;
-}, { deep: true });
+	console.log(font)
+	if (!font) return
+	formValue.value.fontFamily = font.id
+}, { deep: true })
 
 const fontWeightOptions = computed(() => {
-	if (!fontData.value) return [];
-	return fontData.value.weights.map((weight) => ({ label: `${weight}`, value: weight }));
-});
+	if (!fontData.value) return []
+	return fontData.value.weights.map((weight) => ({ label: `${weight}`, value: weight }))
+})
 </script>
 
 <template>
 	<div v-if="formValue" class="card">
 		<div class="card-header">
-			<n-button
+			<NButton
 				secondary
 				type="info"
 				:disabled="!formValue.id || !canCopyLink"
 				@click="copyOverlayLink({ id: formValue.id! })"
 			>
 				{{ t('overlays.copyOverlayLink') }}
-			</n-button>
-			<n-button secondary type="success" @click="save">
+			</NButton>
+			<NButton secondary type="success" @click="save">
 				{{ t('sharedButtons.save') }}
-			</n-button>
+			</NButton>
 		</div>
 
 		<div class="card-body-column">
-			<n-form-item label="Style">
-				<n-select
+			<NFormItem label="Style">
+				<NSelect
 					v-model:value="formValue.preset"
 					:options="[
 						{ label: 'Aiden Redesign', value: 'AIDEN_REDESIGN' },
@@ -91,41 +90,41 @@ const fontWeightOptions = computed(() => {
 						{ label: 'Simple line', value: 'SIMPLE_LINE' },
 					]"
 				/>
-			</n-form-item>
+			</NFormItem>
 
-			<n-form-item label="Show image">
-				<n-switch v-model:value="formValue.showImage" />
-			</n-form-item>
+			<NFormItem label="Show image">
+				<NSwitch v-model:value="formValue.showImage" />
+			</NFormItem>
 
-			<n-form-item label="Background color">
-				<n-color-picker
+			<NFormItem label="Background color">
+				<NColorPicker
 					v-model:value="formValue.backgroundColor"
 				/>
-			</n-form-item>
+			</NFormItem>
 
-			<n-form-item :label="t('overlays.chat.fontFamily')">
-				<font-selector
+			<NFormItem :label="t('overlays.chat.fontFamily')">
+				<FontSelector
 					v-model:font="fontData"
 					:font-family="formValue.fontFamily"
 					:font-weight="formValue.fontWeight"
-					:font-style="'normal'"
+					font-style="normal"
 				/>
-			</n-form-item>
+			</NFormItem>
 
-			<n-form-item :label="t('overlays.chat.fontWeight')">
-				<n-select
+			<NFormItem :label="t('overlays.chat.fontWeight')">
+				<NSelect
 					v-model:value="formValue.fontWeight"
 					:options="fontWeightOptions"
 				/>
-			</n-form-item>
+			</NFormItem>
 
-			<n-form-item :label="t('overlays.chat.hideTimeout')">
-				<n-input-number
+			<NFormItem :label="t('overlays.chat.hideTimeout')">
+				<NInputNumber
 					v-model:value="formValue.hideTimeout"
 					:min="0"
 					:max="600"
 				/>
-			</n-form-item>
+			</NFormItem>
 		</div>
 	</div>
 </template>
diff --git a/frontend/dashboard/src/pages/overlays/now-playing/now-playing.vue b/frontend/dashboard/src/pages/overlays/now-playing/now-playing.vue
index 31227fa58..d2b1573a0 100644
--- a/frontend/dashboard/src/pages/overlays/now-playing/now-playing.vue
+++ b/frontend/dashboard/src/pages/overlays/now-playing/now-playing.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { NowPlaying } from '@twir/frontend-now-playing'
 import { NA, NAlert, NResult, NTabPane, NTabs, useThemeVars } from 'naive-ui'
-import { storeToRefs } from 'pinia'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -10,14 +9,14 @@ import {
 	useNowPlayingOverlayManager,
 	useSpotifyIntegration,
 	useUserAccessFlagChecker,
-	useVKIntegration
+	useVKIntegration,
 } from '@/api'
 import { useNaiveDiscrete } from '@/composables/use-naive-discrete'
 import { ChannelRolePermissionEnum } from '@/gql/graphql'
 import NowPlayingForm from '@/pages/overlays/now-playing/now-playing-form.vue'
 import {
 	defaultSettings,
-	useNowPlayingForm
+	useNowPlayingForm,
 } from '@/pages/overlays/now-playing/use-now-playing-form'
 
 const themeVars = useThemeVars()
@@ -37,11 +36,13 @@ const isSomeSongIntegrationEnabled = computed(() => {
 	return spotifyData.value?.userName || lastFmData.value?.userName || vkData.value?.userName
 })
 
-const formStore = useNowPlayingForm()
-const { data: settings } = storeToRefs(formStore)
+const {
+	data: settings,
+	setData,
+} = useNowPlayingForm()
 
 const {
-	data: entities
+	data: entities,
 } = nowPlayingOverlayManager.useGetAll()
 
 const openedTab = ref<string>()
@@ -72,7 +73,7 @@ async function handleClose(id: string) {
 
 			await deleter.mutateAsync(entity.id)
 			resetTab()
-		}
+		},
 	})
 }
 
@@ -83,7 +84,7 @@ const addable = computed(() => {
 watch(openedTab, async (v) => {
 	const entity = entities.value?.settings.find(s => s.id === v)
 	if (!entity) return
-	formStore.$setData(entity)
+	setData(entity)
 })
 
 watch(entities, () => {
diff --git a/frontend/dashboard/src/pages/overlays/now-playing/use-now-playing-form.ts b/frontend/dashboard/src/pages/overlays/now-playing/use-now-playing-form.ts
index 8b200cd33..8113782ac 100644
--- a/frontend/dashboard/src/pages/overlays/now-playing/use-now-playing-form.ts
+++ b/frontend/dashboard/src/pages/overlays/now-playing/use-now-playing-form.ts
@@ -1,6 +1,6 @@
-import { Settings } from '@twir/api/messages/overlays_now_playing/overlays_now_playing';
-import { defineStore } from 'pinia';
-import { ref, toRaw } from 'vue';
+import { Settings } from '@twir/api/messages/overlays_now_playing/overlays_now_playing'
+import { createGlobalState } from '@vueuse/core'
+import { ref, toRaw } from 'vue'
 
 export const defaultSettings: Settings = {
 	id: '',
@@ -11,22 +11,22 @@ export const defaultSettings: Settings = {
 	fontWeight: 400,
 	showImage: true,
 	hideTimeout: undefined,
-};
+}
 
-export const useNowPlayingForm = defineStore('now-playing-form', () => {
-	const data = ref<Settings>(structuredClone(defaultSettings));
+export const useNowPlayingForm = createGlobalState(() => {
+	const data = ref<Settings>(structuredClone(defaultSettings))
 
-	function $setData(d: Settings) {
-		data.value = structuredClone(toRaw(d));
+	function setData(d: Settings) {
+		data.value = structuredClone(toRaw(d))
 	}
 
-	function $getDefaultSettings() {
-		return structuredClone(Settings);
+	function getDefaultSettings() {
+		return structuredClone(Settings)
 	}
 
 	return {
 		data,
-		$setData,
-		$getDefaultSettings,
-	};
-});
+		setData,
+		getDefaultSettings,
+	}
+})
diff --git a/frontend/dashboard/src/pages/user-settings/user-account-settings.vue b/frontend/dashboard/src/pages/user-settings/user-account-settings.vue
index 6609522a9..2d4a77aa1 100644
--- a/frontend/dashboard/src/pages/user-settings/user-account-settings.vue
+++ b/frontend/dashboard/src/pages/user-settings/user-account-settings.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { IconRefresh } from '@tabler/icons-vue'
 import { NButton, NCard, NFormItem, NInput, NSwitch, NText } from 'naive-ui'
-import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
 import { useProfile, useUserSettings } from '@/api'
 import { useToast } from '@/components/ui/toast'
 
-const { data: profile } = storeToRefs(useProfile())
+const { data: profile } = useProfile()
 
 const userManager = useUserSettings()
 const updateUser = userManager.useUserUpdateMutation()
@@ -21,14 +20,14 @@ async function changeLandingVisibility() {
 
 	await updateUser.executeMutation({
 		opts: {
-			hideOnLandingPage: !profile.value.hideOnLandingPage
-		}
+			hideOnLandingPage: !profile.value.hideOnLandingPage,
+		},
 	})
 
 	toast.toast({
 		title: t('sharedTexts.saved'),
 		duration: 1500,
-		variant: 'success'
+		variant: 'success',
 	})
 }
 
@@ -37,7 +36,7 @@ async function callRegenerateKey() {
 
 	toast.toast({
 		title: t('sharedTexts.saved'),
-		variant: 'success'
+		variant: 'success',
 	})
 }
 </script>
diff --git a/frontend/overlays/package.json b/frontend/overlays/package.json
index 5e1bc6980..b844c081d 100644
--- a/frontend/overlays/package.json
+++ b/frontend/overlays/package.json
@@ -22,7 +22,6 @@
     "emoji-regex": "10.3.0",
     "nested-css-to-flat": "1.0.5",
     "obs-websocket-js": "5.0.5",
-    "pinia": "2.1.7",
     "tmi.js": "1.8.5",
     "vue": "3.4.21",
     "vue-router": "4.3.0"
diff --git a/frontend/overlays/src/components/brb-timer.vue b/frontend/overlays/src/components/brb-timer.vue
index cc0f7d934..b0d1f8881 100644
--- a/frontend/overlays/src/components/brb-timer.vue
+++ b/frontend/overlays/src/components/brb-timer.vue
@@ -1,103 +1,102 @@
 <script setup lang="ts">
-import { useFontSource } from '@twir/fontsource';
-import { useIntervalFn } from '@vueuse/core';
-import { storeToRefs } from 'pinia';
-import { computed, ref, watch } from 'vue';
+import { useFontSource } from '@twir/fontsource'
+import { useIntervalFn } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 
-import { useBrbSettings } from '@/composables/brb/use-brb-settings';
-import { getTimeDiffInMilliseconds, millisecondsToTime } from '@/helpers.js';
-import type { BrbOnStartFn, BrbOnStopFn } from '@/types.js';
+import type { BrbOnStartFn, BrbOnStopFn } from '@/types.js'
 
-const brbSettingsStore = useBrbSettings();
-const { settings } = storeToRefs(brbSettingsStore);
+import { useBrbSettings } from '@/composables/brb/use-brb-settings.js'
+import { getTimeDiffInMilliseconds, millisecondsToTime } from '@/helpers.js'
 
-const minutes = ref(0);
-const text = ref<string | null>(null);
-const countDownTicks = ref(0);
-const countUpTicks = ref(0);
+const { settings } = useBrbSettings()
+
+const minutes = ref(0)
+const text = ref<string | null>(null)
+const countDownTicks = ref(0)
+const countUpTicks = ref(0)
+
+const countUpInterval = useIntervalFn(() => {
+	countUpTicks.value++
+}, 1000, { immediate: false })
 
 const countDownInterval = useIntervalFn(() => {
-	countDownTicks.value--;
+	countDownTicks.value--
 
 	if (!countDownTicks.value) {
-		countDownInterval.pause();
+		countDownInterval.pause()
 	}
 
 	if (!countDownTicks.value && settings.value?.late?.enabled) {
-		countUpInterval.resume();
+		countUpInterval.resume()
 	}
-}, 1000, { immediate: false });
+}, 1000, { immediate: false })
 
-const countUpInterval = useIntervalFn(() => {
-	countUpTicks.value++;
-}, 1000, { immediate: false });
+const stop: BrbOnStopFn = () => {
+	countDownTicks.value = 0
+	countUpTicks.value = 0
+	minutes.value = 0
+	text.value = null
+
+	countDownInterval.pause()
+	countUpInterval.pause()
+}
 
 const start: BrbOnStartFn = (incomingMinutes, incomingText) => {
-	stop();
-	const ticks = parseInt((getTimeDiffInMilliseconds(incomingMinutes) / 1000).toString());
+	stop()
+	const ticks = Number.parseInt((getTimeDiffInMilliseconds(incomingMinutes) / 1000).toString())
 
-	countDownTicks.value = ticks;
-	minutes.value = getTimeDiffInMilliseconds(incomingMinutes);
-	text.value = incomingText;
+	countDownTicks.value = ticks
+	minutes.value = getTimeDiffInMilliseconds(incomingMinutes)
+	text.value = incomingText
 
-	countDownInterval.resume();
-};
+	countDownInterval.resume()
+}
 
-const stop: BrbOnStopFn = () => {
-	countDownTicks.value = 0;
-	countUpTicks.value = 0;
-	minutes.value = 0;
-	text.value = null;
-
-	countDownInterval.pause();
-	countUpInterval.pause();
-};
-
-export type BrbTimerMethods = {
-	start: BrbOnStartFn,
-	stop: BrbOnStopFn,
+export interface BrbTimerMethods {
+	start: BrbOnStartFn
+	stop: BrbOnStopFn
 }
 
 defineExpose<BrbTimerMethods>({
 	start,
 	stop,
-});
+})
 
 const showCountDown = computed(() => {
-	const isActive = countDownInterval.isActive.value;
+	const isActive = countDownInterval.isActive.value
 
-	if (isActive) return true;
-	if (countUpInterval.isActive.value && !settings.value?.late?.displayBrbTime) return false;
+	if (isActive) return true
+	if (countUpInterval.isActive.value && !settings.value?.late?.displayBrbTime) return false
 
-	return true;
-});
+	return true
+})
 
-const fontSource = useFontSource(false);
+const fontSource = useFontSource(false)
 watch(() => settings.value?.fontFamily, (font) => {
-	if (!font) return;
-	fontSource.loadFont(font, 400, 'normal');
-}, { immediate: true });
+	if (!font) return
+	fontSource.loadFont(font, 400, 'normal')
+}, { immediate: true })
 
 const fontFamily = computed(() => {
-	return `"${settings.value?.fontFamily}-400-normal"`;
-});
+	return `"${settings.value?.fontFamily}-400-normal"`
+})
 
 const backgroundColor = computed(() => {
-	return settings.value?.backgroundColor || 'rgba(9, 8, 8, 0.50)';
-});
+	return settings.value?.backgroundColor || 'rgba(9, 8, 8, 0.50)'
+})
 
 const fontColor = computed(() => {
-	return settings.value?.fontColor || '#fff';
-});
+	return settings.value?.fontColor || '#fff'
+})
 
 const countUpFontSize = computed(() => {
-	if (!settings.value?.fontSize) return '16px';
-	return `${settings.value.fontSize / (countUpInterval.isActive.value ? 2 : 1)}px`;
-});
+	if (!settings.value?.fontSize) return '16px'
+	return `${settings.value.fontSize / (countUpInterval.isActive.value ? 2 : 1)}px`
+})
 
 const countDownFontSize = computed(() => {
-	return `${settings.value?.fontSize || 16}px`;
-});
+	return `${settings.value?.fontSize || 16}px`
+})
 </script>
 
 <template>
diff --git a/frontend/overlays/src/composables/brb/use-brb-settings.ts b/frontend/overlays/src/composables/brb/use-brb-settings.ts
index 3017f02b2..f44298919 100644
--- a/frontend/overlays/src/composables/brb/use-brb-settings.ts
+++ b/frontend/overlays/src/composables/brb/use-brb-settings.ts
@@ -1,18 +1,18 @@
-import type { Settings } from '@twir/api/messages/overlays_be_right_back/overlays_be_right_back';
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { createGlobalState } from '@vueuse/core'
+import { ref } from 'vue'
 
-import type { BrbSetSettingsFn } from '@/types.js';
+import type { BrbSetSettingsFn } from '@/types.js'
+import type { Settings } from '@twir/api/messages/overlays_be_right_back/overlays_be_right_back'
 
-export const useBrbSettings = defineStore('brb-settings', () => {
-	const settings = ref<Settings>();
+export const useBrbSettings = createGlobalState(() => {
+	const settings = ref<Settings>()
 
 	const setSettings: BrbSetSettingsFn = (newSettings) => {
-		settings.value = newSettings;
-	};
+		settings.value = newSettings
+	}
 
 	return {
 		settings,
 		setSettings,
-	};
-});
+	}
+})
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 78e3a4a25..da829b6c7 100644
--- a/frontend/overlays/src/composables/chat/use-chat-overlay-socket.ts
+++ b/frontend/overlays/src/composables/chat/use-chat-overlay-socket.ts
@@ -1,12 +1,12 @@
-import type { Settings, ChatBadge, BadgeVersion } from '@twir/frontend-chat';
-import { useWebSocket } from '@vueuse/core';
-import { defineStore } from 'pinia';
-import { ref, watch } from 'vue';
+import { createGlobalState, useWebSocket } from '@vueuse/core'
+import { ref, watch } from 'vue'
 
-import type { TwirWebSocketEvent } from '@/api.js';
-import { generateSocketUrlWithParams } from '@/helpers.js';
+import type { TwirWebSocketEvent } from '@/api.js'
+import type { BadgeVersion, ChatBadge, Settings } from '@twir/frontend-chat'
 
-export const useChatOverlaySocket = defineStore('chat-socket', () => {
+import { generateSocketUrlWithParams } from '@/helpers.js'
+
+export const useChatOverlaySocket = createGlobalState(() => {
 	const settings = ref<Settings>({
 		channelId: '',
 		channelName: '',
@@ -29,10 +29,10 @@ export const useChatOverlaySocket = defineStore('chat-socket', () => {
 		fontStyle: 'normal',
 		fontWeight: 400,
 		paddingContainer: 0,
-	});
+	})
 
-	const overlayId = ref<string | undefined>();
-	const socketUrl = ref('');
+	const overlayId = ref<string | undefined>()
+	const socketUrl = ref('')
 
 	const { data, status, send, open, close } = useWebSocket(
 		socketUrl,
@@ -42,55 +42,55 @@ export const useChatOverlaySocket = defineStore('chat-socket', () => {
 				delay: 500,
 			},
 			onConnected() {
-				send(JSON.stringify({ eventName: 'getSettings' }));
+				send(JSON.stringify({ eventName: 'getSettings' }))
 			},
 		},
-	);
+	)
 
 	watch(data, (d: string) => {
-		const event = JSON.parse(d) as TwirWebSocketEvent<Settings>;
+		const event = JSON.parse(d) as TwirWebSocketEvent<Settings>
 		if (event.eventName === 'settings') {
-			if (overlayId.value && event.data.id !== overlayId.value) return;
+			if (overlayId.value && event.data.id !== overlayId.value) return
 
-			const data = event.data;
+			const data = event.data
 
 			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);
+				settings.value.globalBadges.set(badge.set_id, badge)
 			}
 
 			for (const [setId, version] of Object.entries(data.channelBadges)) {
-				settings.value.channelBadges.set(setId, version);
+				settings.value.channelBadges.set(setId, version)
 			}
 		}
-	});
+	})
 
 	function destroy(): void {
-		close();
+		close()
 	}
 
 	function connect(apiKey: string, _overlayId?: string): void {
-		if (status.value === 'OPEN') return;
+		if (status.value === 'OPEN') return
 
 		const url = generateSocketUrlWithParams('/overlays/chat', {
 			apiKey,
 			id: _overlayId,
-		});
+		})
 
-		socketUrl.value = url;
-		overlayId.value = _overlayId;
+		socketUrl.value = url
+		overlayId.value = _overlayId
 
-		open();
+		open()
 	}
 
 	return {
 		settings,
 		connect,
 		destroy,
-	};
-});
+	}
+})
diff --git a/frontend/overlays/src/composables/dudes/use-dudes-iframe.ts b/frontend/overlays/src/composables/dudes/use-dudes-iframe.ts
index aeebfeffa..8ed84b0b6 100644
--- a/frontend/overlays/src/composables/dudes/use-dudes-iframe.ts
+++ b/frontend/overlays/src/composables/dudes/use-dudes-iframe.ts
@@ -1,118 +1,119 @@
-import type { Settings } from '@twir/api/messages/overlays_dudes/overlays_dudes';
-import { defineStore } from 'pinia';
+import { createGlobalState } from '@vueuse/core'
 
-import { getSprite, dudeMock } from './dudes-config.js';
-import { useDudesSettings } from './use-dudes-settings.js';
-import { useDudesSocket } from './use-dudes-socket.js';
-import { useDudes } from './use-dudes.js';
+import { dudeMock, getSprite } from './dudes-config.js'
+import { useDudesSettings } from './use-dudes-settings.js'
+import { useDudesSocket } from './use-dudes-socket.js'
+import { useDudes } from './use-dudes.js'
 
-import { randomEmoji } from '@/helpers.js';
+import type { Settings } from '@twir/api/messages/overlays_dudes/overlays_dudes'
+
+import { randomEmoji } from '@/helpers.js'
 
 interface DudesPostMessage {
-	action: string;
+	action: string
 	data?: any
 }
 
-export const useDudesIframe = defineStore('dudes-iframe', () => {
-	const isIframe = Boolean(window.frameElement);
-	const dudesStore = useDudes();
-	const dudesSocketStore = useDudesSocket();
-	const dudesSettingsStore = useDudesSettings();
+export const useDudesIframe = createGlobalState(() => {
+	const isIframe = Boolean(window.frameElement)
+	const { dudes, updateDudeColors, getProxiedEmoteUrl } = useDudes()
+	const dudesSocketStore = useDudesSocket()
+	const dudesSettingsStore = useDudesSettings()
 
 	async function onPostMessage(msg: MessageEvent<string>) {
-		if (!dudesStore.dudes?.dudes) return;
+		if (!dudes.value?.dudes) return
 
-		const parsedData = JSON.parse(msg.data) as DudesPostMessage;
-		const dude = dudesStore.dudes.dudes.getDude(dudeMock.id);
+		const parsedData = JSON.parse(msg.data) as DudesPostMessage
+		const dude = dudes.value.dudes.getDude(dudeMock.id)
 
 		if (parsedData.action === 'reset') {
-			dudesStore.dudes.dudes.removeAllDudes();
-			spawnIframeDude();
-			return;
+			dudes.value.dudes.removeAllDudes()
+			spawnIframeDude()
+			return
 		}
 
 		if (parsedData.data) {
 			if (parsedData.action === 'update-settings') {
-				const settings = parsedData.data as Required<Settings>;
-				dudesSocketStore.updateSettingFromSocket(settings);
-				return;
+				const settings = parsedData.data as Required<Settings>
+				dudesSocketStore.updateSettingFromSocket(settings)
+				return
 			}
 
-			if (!dude) return;
+			if (!dude) return
 
 			if (parsedData.action === 'update-sprite') {
-				const spriteData = getSprite(parsedData.data);
-				await dude.updateSpriteData(spriteData);
-				dudesStore.updateDudeColors(dude);
-				return;
+				const spriteData = getSprite(parsedData.data)
+				await dude.updateSpriteData(spriteData)
+				updateDudeColors(dude)
+				return
 			}
 
 			if (parsedData.action === 'update-color') {
-				dudesStore.updateDudeColors(dude, parsedData.data);
-				return;
+				updateDudeColors(dude, parsedData.data)
+				return
 			}
 		}
 
 		if (dude) {
 			if (parsedData.action === 'jump') {
-				dude.jump();
+				dude.jump()
 			}
 
 			if (parsedData.action === 'grow') {
-				dude.grow();
+				dude.grow()
 			}
 
 			if (parsedData.action === 'leave') {
-				dude.leave();
+				dude.leave()
 			}
 
 			if (parsedData.action === 'spawn-emote') {
-				const emote = dudesStore.getProxiedEmoteUrl({
+				const emote = getProxiedEmoteUrl({
 					type: '3rd_party_emote',
 					value: 'https://cdn.7tv.app/emote/60b00d1f0d3a78a196f803e3/1x.gif',
-				});
-				dude.addEmotes([emote]);
+				})
+				dude.addEmotes([emote])
 			}
 
 			if (parsedData.action === 'show-message') {
-				dude.addMessage(`Hello, ${dudesSettingsStore.channelData!.channelDisplayName}! ${randomEmoji('emoticons')}`);
+				dude.addMessage(`Hello, ${dudesSettingsStore.channelData.value!.channelDisplayName}! ${randomEmoji('emoticons')}`)
 			}
 		}
 	}
 
 	async function spawnIframeDude() {
 		if (
-			!dudesStore.dudes?.dudes ||
-			!dudesSettingsStore.dudesSettings ||
-			!dudesSettingsStore.channelData ||
-			dudesStore.dudes.dudes.getDude(dudeMock.id)
-		) return;
+			!dudes.value?.dudes
+			|| !dudesSettingsStore.dudesSettings.value
+			|| !dudesSettingsStore.channelData.value
+			|| dudes.value.dudes.getDude(dudeMock.id)
+		) return
 
-		const emote = dudesStore.getProxiedEmoteUrl({
+		const emote = getProxiedEmoteUrl({
 			type: '3rd_party_emote',
 			value: 'https://cdn.7tv.app/emote/65413498dc0468e8c1fbcdc6/1x.gif',
-		});
+		})
 
-		const dudeSprite = getSprite(dudesSettingsStore.dudesSettings.overlay.defaultSprite);
-		const dude = await dudesStore.dudes.dudes.createDude({
+		const dudeSprite = getSprite(dudesSettingsStore.dudesSettings.value.overlay.defaultSprite)
+		const dude = await dudes.value.dudes.createDude({
 			id: dudeMock.id,
 			name: dudeMock.name,
 			sprite: dudeSprite,
-		});
+		})
 
-		dudesStore.updateDudeColors(dude, dudeMock.color);
-		dude.addMessage(`Hello, ${dudesSettingsStore.channelData.channelDisplayName}! ${randomEmoji('emoticons')}`);
-		dude.addEmotes([emote]);
+		updateDudeColors(dude, dudeMock.color)
+		dude.addMessage(`Hello, ${dudesSettingsStore.channelData.value.channelDisplayName}! ${randomEmoji('emoticons')}`)
+		dude.addEmotes([emote])
 	}
 
 	function connect() {
-		if (!isIframe) return;
-		window.addEventListener('message', onPostMessage);
+		if (!isIframe) return
+		window.addEventListener('message', onPostMessage)
 	}
 
 	function destroy() {
-		if (!isIframe) return;
-		window.removeEventListener('message', onPostMessage);
+		if (!isIframe) return
+		window.removeEventListener('message', onPostMessage)
 	}
 
 	return {
@@ -120,5 +121,5 @@ export const useDudesIframe = defineStore('dudes-iframe', () => {
 		spawnIframeDude,
 		connect,
 		destroy,
-	};
-});
+	}
+})
diff --git a/frontend/overlays/src/composables/dudes/use-dudes-settings.ts b/frontend/overlays/src/composables/dudes/use-dudes-settings.ts
index dc56f42c1..d19724a64 100644
--- a/frontend/overlays/src/composables/dudes/use-dudes-settings.ts
+++ b/frontend/overlays/src/composables/dudes/use-dudes-settings.ts
@@ -1,18 +1,18 @@
-import type { IgnoreSettings } from '@twir/api/messages/overlays_dudes/overlays_dudes';
-import { useFontSource } from '@twir/fontsource';
-import type { DudesSprite, DudesUserSettings } from '@twir/types/overlays';
-import type { DudesTypes } from '@twirapp/dudes-vue/types';
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { useFontSource } from '@twir/fontsource'
+import { createGlobalState } from '@vueuse/core'
+import { ref } from 'vue'
 
-import type { ChannelData } from '@/types.js';
+import type { ChannelData } from '@/types.js'
+import type { IgnoreSettings } from '@twir/api/messages/overlays_dudes/overlays_dudes'
+import type { DudesSprite, DudesUserSettings } from '@twir/types/overlays'
+import type { DudesTypes } from '@twirapp/dudes-vue/types'
 
-export type DudesOverlaySettings = {
+export interface DudesOverlaySettings {
 	maxOnScreen: number
 	defaultSprite: keyof typeof DudesSprite
 }
 
-export type DudesConfig = {
+export interface DudesConfig {
 	ignore: IgnoreSettings
 	dudes: {
 		dude: DudesTypes.DudeStyles
@@ -24,18 +24,18 @@ export type DudesConfig = {
 	overlay: DudesOverlaySettings
 }
 
-export const useDudesSettings = defineStore('dudes-settings', () => {
-	const fontSource = useFontSource();
-	const dudesSettings = ref<DudesConfig | null>(null);
-	const dudesUserSettings = new Map<string, DudesUserSettings & { userDisplayName?: string }>();
-	const channelData = ref<ChannelData>();
+export const useDudesSettings = createGlobalState(() => {
+	const fontSource = useFontSource()
+	const dudesSettings = ref<DudesConfig | null>(null)
+	const dudesUserSettings = new Map<string, DudesUserSettings & { userDisplayName?: string }>()
+	const channelData = ref<ChannelData>()
 
 	function updateSettings(settings: DudesConfig): void {
-		dudesSettings.value = settings;
+		dudesSettings.value = settings
 	}
 
 	function updateChannelData(data: ChannelData): void {
-		channelData.value = data;
+		channelData.value = data
 	}
 
 	async function loadFont(
@@ -48,13 +48,13 @@ export const useDudesSettings = defineStore('dudes-settings', () => {
 				fontFamily,
 				fontWeight,
 				fontStyle,
-			);
+			)
 
-			const fontKey = `${fontFamily}-${fontWeight}-${fontStyle}`;
-			return fontKey;
+			const fontKey = `${fontFamily}-${fontWeight}-${fontStyle}`
+			return fontKey
 		} catch (err) {
-			console.error(err);
-			return 'Arial';
+			console.error(err)
+			return 'Arial'
 		}
 	}
 
@@ -65,5 +65,5 @@ export const useDudesSettings = defineStore('dudes-settings', () => {
 		dudesUserSettings,
 		updateSettings,
 		loadFont,
-	};
-});
+	}
+})
diff --git a/frontend/overlays/src/composables/dudes/use-dudes-socket.ts b/frontend/overlays/src/composables/dudes/use-dudes-socket.ts
index 402c59a25..bb2412103 100644
--- a/frontend/overlays/src/composables/dudes/use-dudes-socket.ts
+++ b/frontend/overlays/src/composables/dudes/use-dudes-socket.ts
@@ -1,101 +1,100 @@
-import type { Settings } from '@twir/api/messages/overlays_dudes/overlays_dudes';
-import { DudesSprite, type DudesUserSettings } from '@twir/types/overlays';
-import { useWebSocket } from '@vueuse/core';
-import { defineStore, storeToRefs } from 'pinia';
-import { onMounted, ref, watch } from 'vue';
+import { createGlobalState, useWebSocket } from '@vueuse/core'
+import { onMounted, ref, watch } from 'vue'
 
-import { getSprite } from './dudes-config.js';
-import { useDudesSettings } from './use-dudes-settings';
-import { useDudes } from './use-dudes.js';
+import { getSprite } from './dudes-config.js'
+import { useDudesSettings } from './use-dudes-settings'
+import { useDudes } from './use-dudes.js'
 
-import type { TwirWebSocketEvent } from '@/api.js';
-import { generateSocketUrlWithParams } from '@/helpers.js';
-import type { ChannelData } from '@/types.js';
+import type { TwirWebSocketEvent } from '@/api.js'
+import type { ChannelData } from '@/types.js'
+import type { Settings } from '@twir/api/messages/overlays_dudes/overlays_dudes'
+import type { DudesSprite , DudesUserSettings } from '@twir/types/overlays'
+
+import { generateSocketUrlWithParams } from '@/helpers.js'
 
 declare global {
 	interface GlobalEventHandlersEventMap {
-		'get-user-settings': CustomEvent<string>;
+		'get-user-settings': CustomEvent<string>
 	}
 }
 
-export const useDudesSocket = defineStore('dudes-socket', () => {
-	const dudesStore = useDudes();
-	const { dudes } = storeToRefs(dudesStore);
+export const useDudesSocket = createGlobalState(() => {
+	const { dudes, createDude, updateDudeColors } = useDudes()
+	const dudesSettingsStore = useDudesSettings()
 
-	const dudesSettingsStore = useDudesSettings();
-	const overlayId = ref('');
-	const dudesUrl = ref('');
+	const overlayId = ref('')
+	const dudesUrl = ref('')
 	const { data, send, open, close, status } = useWebSocket(dudesUrl, {
 		immediate: false,
 		autoReconnect: {
 			delay: 500,
 		},
 		onConnected() {
-			send(JSON.stringify({ eventName: 'getSettings' }));
+			send(JSON.stringify({ eventName: 'getSettings' }))
 		},
-	});
+	})
 
 	watch(data, async (recieviedData) => {
-		if (!dudes.value?.dudes) return;
+		if (!dudes.value?.dudes) return
 
-		const parsedData = JSON.parse(recieviedData) as TwirWebSocketEvent;
+		const parsedData = JSON.parse(recieviedData) as TwirWebSocketEvent
 		if (parsedData.eventName === 'settings') {
-			const data = parsedData.data as Required<Settings & ChannelData>;
+			const data = parsedData.data as Required<Settings & ChannelData>
 
 			dudesSettingsStore.updateChannelData({
 				channelId: data.channelId,
 				channelName: data.channelName,
 				channelDisplayName: data.channelDisplayName,
-			});
+			})
 
-			updateSettingFromSocket(data);
-			return;
+			updateSettingFromSocket(data)
+			return
 		}
 
-		const data = parsedData.data as DudesUserSettings;
-		const dude = dudes.value.dudes.getDude(data?.userId);
+		const data = parsedData.data as DudesUserSettings
+		const dude = dudes.value.dudes.getDude(data?.userId)
 
 		if (parsedData.eventName === 'userSettings') {
-			const dudeSettings = dudesSettingsStore.dudesUserSettings.get(data.userId);
-			if (!dudeSettings?.userDisplayName) return;
+			const dudeSettings = dudesSettingsStore.dudesUserSettings.get(data.userId)
+			if (!dudeSettings?.userDisplayName) return
 
 			dudesSettingsStore.dudesUserSettings.set(data.userId, {
 				...dudeSettings,
 				...data,
 				dudeColor: data.dudeColor ?? dudeSettings.dudeColor,
-			});
+			})
 
 			const spriteData = getSprite(
-				data.dudeSprite ??
-				dudesSettingsStore.dudesSettings?.overlay.defaultSprite,
-			);
+				data.dudeSprite
+				?? dudesSettingsStore.dudesSettings.value?.overlay.defaultSprite,
+			)
 
-			const createdDude = await dudesStore.createDude({
+			const createdDude = await createDude({
 				userId: dudeSettings.userId,
-			});
+			})
 
 			if (createdDude?.dude) {
-				await createdDude.dude.updateSpriteData(spriteData);
-				dudesStore.updateDudeColors(createdDude.dude, data.dudeColor);
+				await createdDude.dude.updateSpriteData(spriteData)
+				updateDudeColors(createdDude.dude, data.dudeColor)
 			}
 		} else if (parsedData.eventName === 'jump') {
-			dude?.jump();
+			dude?.jump()
 		} else if (parsedData.eventName === 'grow') {
-			dude?.grow();
+			dude?.grow()
 		} else if (parsedData.eventName === 'leave') {
-			dude?.leave();
+			dude?.leave()
 		} else if (parsedData.eventName === 'punished') {
-			dudes.value.dudes.removeDude(data.userId);
-			dudesSettingsStore.dudesUserSettings.delete(data.userId);
+			dudes.value.dudes.removeDude(data.userId)
+			dudesSettingsStore.dudesUserSettings.delete(data.userId)
 		}
-	});
+	})
 
 	async function updateSettingFromSocket(data: Required<Settings>) {
 		const fontFamily = await dudesSettingsStore.loadFont(
 			data.nameBoxSettings.fontFamily,
 			data.nameBoxSettings.fontWeight,
 			data.nameBoxSettings.fontStyle,
-		);
+		)
 
 		dudesSettingsStore.updateSettings({
 			ignore: data.ignoreSettings,
@@ -125,34 +124,34 @@ export const useDudesSocket = defineStore('dudes-socket', () => {
 				},
 				emote: data.spitterEmoteSettings,
 			},
-		});
+		})
 	}
 
 	function destroy(): void {
 		if (status.value === 'OPEN') {
-			close();
+			close()
 		}
 	}
 
 	function connect(apiKey: string, id: string): void {
-		overlayId.value = id;
+		overlayId.value = id
 		dudesUrl.value = generateSocketUrlWithParams('/overlays/dudes', {
 			apiKey,
 			id,
-		});
-		open();
+		})
+		open()
 	}
 
 	onMounted(() => {
 		document.addEventListener('get-user-settings', (event) => {
-			if (status.value !== 'OPEN') return;
-			send(JSON.stringify({ eventName: 'getUserSettings', data: event.detail }));
-		});
-	});
+			if (status.value !== 'OPEN') return
+			send(JSON.stringify({ eventName: 'getUserSettings', data: event.detail }))
+		})
+	})
 
 	return {
 		destroy,
 		connect,
 		updateSettingFromSocket,
-	};
-});
+	}
+})
diff --git a/frontend/overlays/src/composables/dudes/use-dudes.ts b/frontend/overlays/src/composables/dudes/use-dudes.ts
index 17cabe807..0683e5f27 100644
--- a/frontend/overlays/src/composables/dudes/use-dudes.ts
+++ b/frontend/overlays/src/composables/dudes/use-dudes.ts
@@ -1,149 +1,150 @@
-import type { MessageChunk } from '@twir/frontend-chat';
-import { DudesSprite } from '@twir/types/overlays';
-import DudesOverlay, { DudesLayers } from '@twirapp/dudes-vue';
-import type { Dude } from '@twirapp/dudes-vue/types';
-import { defineStore, storeToRefs } from 'pinia';
-import { computed, ref, watch } from 'vue';
+import { DudesSprite } from '@twir/types/overlays'
+import { DudesLayers } from '@twirapp/dudes-vue'
+import { createGlobalState } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 
-import { getSprite } from './dudes-config.js';
-import { useDudesSettings } from './use-dudes-settings.js';
+import { getSprite } from './dudes-config.js'
+import { useDudesSettings } from './use-dudes-settings.js'
 
-import { randomRgbColor } from '@/helpers.js';
+import type { MessageChunk } from '@twir/frontend-chat'
+import type DudesOverlay from '@twirapp/dudes-vue'
+import type { Dude } from '@twirapp/dudes-vue/types'
 
-export const useDudes = defineStore('dudes', () => {
-	const dudesSettingsStore = useDudesSettings();
-	const { dudesSettings } = storeToRefs(dudesSettingsStore);
+import { randomRgbColor } from '@/helpers.js'
 
-	const dudes = ref<InstanceType<typeof DudesOverlay> | null>(null);
-	const isDudeReady = ref(false);
+export const useDudes = createGlobalState(() => {
+	const { dudesSettings, dudesUserSettings } = useDudesSettings()
+
+	const dudes = ref<InstanceType<typeof DudesOverlay> | null>(null)
+	const isDudeReady = ref(false)
 	const isDudeOverlayReady = computed(() => {
-		return dudes.value && dudesSettings.value && isDudeReady.value;
-	});
+		return dudes.value && dudesSettings.value && isDudeReady.value
+	})
 
 	function createDudeInstance(dude: Dude) {
 		return {
 			dude,
 			isCreated: false,
-			showMessage: function (messageChunks: MessageChunk[]) {
+			showMessage(messageChunks: MessageChunk[]) {
 				if (this.isCreated) {
-					setTimeout(() => showMessageDude(this.dude, messageChunks), 1000);
+					setTimeout(() => showMessageDude(this.dude, messageChunks), 1000)
 				} else {
-					showMessageDude(this.dude, messageChunks);
+					showMessageDude(this.dude, messageChunks)
 				}
 			},
-		};
+		}
 	}
 
 	async function createDude(
 		{ userId, userName, color }: { userId: string, userName?: string, color?: string },
 	) {
-		if (!dudes.value?.dudes || !dudesSettings.value) return;
+		if (!dudes.value?.dudes || !dudesSettings.value) return
 
-		const actualDude = dudes.value.dudes.getDude(userId);
+		const actualDude = dudes.value.dudes.getDude(userId)
 		if (actualDude) {
-			return createDudeInstance(actualDude);
+			return createDudeInstance(actualDude)
 		}
 
 		if (
-			dudesSettings.value.overlay.maxOnScreen !== 0 &&
-			dudes.value.dudes.dudes.size === dudesSettings.value.overlay.maxOnScreen
-		) return;
+			dudesSettings.value.overlay.maxOnScreen !== 0
+			&& dudes.value.dudes.dudes.size === dudesSettings.value.overlay.maxOnScreen
+		) return
 
-		const userSettings = requestDudeUserSettings(userId);
+		const userSettings = requestDudeUserSettings(userId)
 		if (!userSettings) {
-			dudesSettingsStore.dudesUserSettings.set(userId, {
+			dudesUserSettings.set(userId, {
 				userId,
 				userDisplayName: userName,
 				dudeColor: color,
-			});
-			return;
+			})
+			return
 		}
 
 		const dudeColor = userSettings.dudeColor
-			?? color
-			?? dudesSettings.value.dudes.dude.bodyColor;
+		  ?? color
+		  ?? dudesSettings.value.dudes.dude.bodyColor
 
-		const dudeSprite = getSprite(userSettings?.dudeSprite ?? dudesSettings.value.overlay.defaultSprite);
+		const dudeSprite = getSprite(userSettings?.dudeSprite ?? dudesSettings.value.overlay.defaultSprite)
 		const dude = await dudes.value.dudes.createDude({
 			id: userSettings.userId,
 			name: userSettings.userDisplayName!,
 			sprite: dudeSprite,
-		});
+		})
 
-		updateDudeColors(dude, dudeColor);
+		updateDudeColors(dude, dudeColor)
 
-		const dudeInstance = createDudeInstance(dude);
-		dudeInstance.isCreated = true;
+		const dudeInstance = createDudeInstance(dude)
+		dudeInstance.isCreated = true
 
-		return dudeInstance;
+		return dudeInstance
 	}
 
 	function updateDudeColors(dude: Dude, color?: string): void {
 		if (color) {
-			dude.updateColor(DudesLayers.body, color);
+			dude.updateColor(DudesLayers.body, color)
 		}
 
 		if (dude.config.sprite.name.startsWith(DudesSprite.girl)) {
-			dude.updateColor(DudesLayers.hat, '#FF0000');
+			dude.updateColor(DudesLayers.hat, '#FF0000')
 		}
 
 		if (dude.config.sprite.name.startsWith(DudesSprite.santa)) {
-			dude.updateColor(DudesLayers.hat, '#FFF');
+			dude.updateColor(DudesLayers.hat, '#FFF')
 		}
 
 		if (dude.config.sprite.name.startsWith(DudesSprite.agent)) {
-			dude.updateColor(DudesLayers.cosmetics, '#8a2be2');
+			dude.updateColor(DudesLayers.cosmetics, '#8a2be2')
 		}
 
 		if (dude.config.sprite.name.startsWith(DudesSprite.sith)) {
-			dude.updateColor(DudesLayers.cosmetics, randomRgbColor());
+			dude.updateColor(DudesLayers.cosmetics, randomRgbColor())
 		}
 	}
 
 	function showMessageDude(dude: Dude, messageChunks: MessageChunk[]): void {
 		if (
-			dudesSettings.value?.ignore.ignoreCommands &&
-			messageChunks?.at(0)?.value.startsWith('!')
+			dudesSettings.value?.ignore.ignoreCommands
+			&& messageChunks?.at(0)?.value.startsWith('!')
 		) {
-			return;
+			return
 		}
 
 		const message = messageChunks
 			.filter((chunk) => chunk.type === 'text')
 			.map((chunk) => chunk.value)
-			.join(' ');
+			.join(' ')
 
-		dude.addMessage(message);
+		dude.addMessage(message)
 
 		const emotes = messageChunks
 			.filter((chunk) => chunk.type !== 'text')
-			.map(getProxiedEmoteUrl);
+			.map(getProxiedEmoteUrl)
 
 		if (emotes.length) {
-			dude.addEmotes([...new Set(emotes)]);
+			dude.addEmotes([...new Set(emotes)])
 		}
 	}
 
 	function getProxiedEmoteUrl(messageChunk: MessageChunk): string {
 		if (messageChunk.type === 'emoji') {
-			const code = messageChunk.value.codePointAt(0)?.toString(16);
-			return `https://cdn.frankerfacez.com/static/emoji/images/twemoji/${code}.png`;
+			const code = messageChunk.value.codePointAt(0)?.toString(16)
+			return `https://cdn.frankerfacez.com/static/emoji/images/twemoji/${code}.png`
 		}
 
-		return `${window.location.origin}/api/proxy?url=${messageChunk.value}`;
+		return `${window.location.origin}/api/proxy?url=${messageChunk.value}`
 	}
 
 	function requestDudeUserSettings(userId: string) {
-		const userSettings = dudesSettingsStore.dudesUserSettings.get(userId);
-		if (userSettings) return userSettings;
-		document.dispatchEvent(new CustomEvent<string>('get-user-settings', { detail: userId }));
+		const userSettings = dudesUserSettings.get(userId)
+		if (userSettings) return userSettings
+		document.dispatchEvent(new CustomEvent<string>('get-user-settings', { detail: userId }))
 	}
 
 	watch(() => dudes.value, async (dudes) => {
-		if (!dudes) return;
-		await dudes.initDudes();
-		isDudeReady.value = true;
-	});
+		if (!dudes) return
+		await dudes.initDudes()
+		isDudeReady.value = true
+	})
 
 	return {
 		dudes,
@@ -152,5 +153,5 @@ export const useDudes = defineStore('dudes', () => {
 		updateDudeColors,
 		getProxiedEmoteUrl,
 		isDudeOverlayReady,
-	};
-});
+	}
+})
diff --git a/frontend/overlays/src/composables/kappagen/use-kappagen-builder.ts b/frontend/overlays/src/composables/kappagen/use-kappagen-builder.ts
index fff921a74..a59216a4f 100644
--- a/frontend/overlays/src/composables/kappagen/use-kappagen-builder.ts
+++ b/frontend/overlays/src/composables/kappagen/use-kappagen-builder.ts
@@ -1,60 +1,57 @@
-import { EmojiStyle } from '@twir/api/messages/overlays_kappagen/overlays_kappagen';
-import type { MessageChunk } from '@twir/frontend-chat';
-import type { Emote } from '@twirapp/kappagen/types';
-import { storeToRefs } from 'pinia';
-import { computed } from 'vue';
+import { EmojiStyle } from '@twir/api/messages/overlays_kappagen/overlays_kappagen'
+import { computed } from 'vue'
 
-import { useKappagenSettings } from '@/composables/kappagen/use-kappagen-settings.js';
-import { useEmotes } from '@/composables/tmi/use-emotes.js';
+import type { MessageChunk } from '@twir/frontend-chat'
+import type { Emote } from '@twirapp/kappagen/types'
 
-const getEmojiStyleName = (style: EmojiStyle) => {
+import { useKappagenSettings } from '@/composables/kappagen/use-kappagen-settings.js'
+import { useEmotes } from '@/composables/tmi/use-emotes.js'
+
+function getEmojiStyleName(style: EmojiStyle) {
 	switch (style) {
 		case EmojiStyle.Blobmoji:
-			return 'blob';
+			return 'blob'
 		case EmojiStyle.Noto:
-			return 'noto';
+			return 'noto'
 		case EmojiStyle.Openmoji:
-			return 'openmoji';
+			return 'openmoji'
 		case EmojiStyle.Twemoji:
-			return 'twemoji';
+			return 'twemoji'
 	}
-};
-
-export type Buidler = {
-	buildKappagenEmotes: (chunks: MessageChunk[]) => Emote[];
-	buildSpawnEmotes: (chunks: MessageChunk[]) => Emote[];
 }
 
-export const useKappagenEmotesBuilder = (): Buidler => {
-	const emotesStore = useEmotes();
-	const { emotes } = storeToRefs(emotesStore);
+export interface Buidler {
+	buildKappagenEmotes: (chunks: MessageChunk[]) => Emote[]
+	buildSpawnEmotes: (chunks: MessageChunk[]) => Emote[]
+}
 
-	const kappagenSettingsStore = useKappagenSettings();
-	const { overlaySettings } = storeToRefs(kappagenSettingsStore);
+export function useKappagenEmotesBuilder(): Buidler {
+	const { emotes } = useEmotes()
+	const { overlaySettings } = useKappagenSettings()
 
 	const kappagenEmotes = computed(() => {
-		if (!emotes.value) return [];
-		const emotesArray = Object.values(emotes.value);
-		return emotesArray.filter(e => !e.isZeroWidth && !e.isModifier);
-	});
+		if (!emotes.value) return []
+		const emotesArray = Object.values(emotes.value)
+		return emotesArray.filter(e => !e.isZeroWidth && !e.isModifier)
+	})
 
 	// chat events
 	const buildSpawnEmotes = (chunks: MessageChunk[]) => {
-		const emotes: Emote[] = [];
+		const emotes: Emote[] = []
 
 		for (const chunk of chunks) {
-			if (chunk.type === 'text') continue;
+			if (chunk.type === 'text') continue
 
-			const zwe = chunk.zeroWidthModifiers?.map(z => ({ url: z })) ?? [];
+			const zwe = chunk.zeroWidthModifiers?.map(z => ({ url: z })) ?? []
 
-			if (chunk.emoteName && overlaySettings.value?.excludedEmotes?.includes(chunk.emoteName)) continue;
+			if (chunk.emoteName && overlaySettings.value?.excludedEmotes?.includes(chunk.emoteName)) continue
 
 			if (chunk.type === 'emote') {
 				emotes.push({
 					url: chunk.value,
 					zwe: chunk.zeroWidthModifiers?.map(z => ({ url: z })) ?? [],
-				});
-				continue;
+				})
+				continue
 			}
 
 			if (chunk.type === '3rd_party_emote') {
@@ -63,28 +60,28 @@ export const useKappagenEmotesBuilder = (): Buidler => {
 					zwe,
 					width: chunk.emoteWidth,
 					height: chunk.emoteHeight,
-				});
-				continue;
+				})
+				continue
 			}
 
-			const emojiStyle = overlaySettings.value?.emotes?.emojiStyle;
+			const emojiStyle = overlaySettings.value?.emotes?.emojiStyle
 			if (chunk.type === 'emoji' && emojiStyle) {
-				const code = chunk.value.codePointAt(0)?.toString(16);
-				if (!code) continue;
+				const code = chunk.value.codePointAt(0)?.toString(16)
+				if (!code) continue
 				emotes.push({
 					url: `https://cdn.frankerfacez.com/static/emoji/images/${getEmojiStyleName(emojiStyle)}/${code}.png`,
-				});
+				})
 			}
 		}
 
-		return emotes;
-	};
+		return emotes
+	}
 
 	// command, twitch events
 	const buildKappagenEmotes = (chunks: MessageChunk[]) => {
-		const result: Emote[] = [];
+		const result: Emote[] = []
 
-		const emotesChunks = chunks.filter(c => c.type !== 'text');
+		const emotesChunks = chunks.filter(c => c.type !== 'text')
 		if (!emotesChunks.length) {
 			const mappedEmotes = kappagenEmotes.value
 				.filter(v => !overlaySettings.value?.excludedEmotes?.includes(v.name))
@@ -92,26 +89,26 @@ export const useKappagenEmotesBuilder = (): Buidler => {
 					url: v.urls.at(-1)!,
 					width: v.width,
 					height: v.height,
-				}));
+				}))
 
-			result.push(...mappedEmotes);
+			result.push(...mappedEmotes)
 		} else {
 			for (const chunk of emotesChunks) {
-				const emote = buildSpawnEmotes([chunk]);
+				const emote = buildSpawnEmotes([chunk])
 				if (emote.length) {
-					result.push(...emote);
+					result.push(...emote)
 				}
 			}
 		}
 
-		return result;
-	};
+		return result
+	}
 
 	return {
 		buildKappagenEmotes,
 		buildSpawnEmotes,
-	};
-};
+	}
+}
 
 export const twirEmote: Emote = {
 	url: 'https://cdn.7tv.app/emote/6548b7074789656a7be787e1/4x.webp',
@@ -120,4 +117,4 @@ export const twirEmote: Emote = {
 			url: 'https://cdn.7tv.app/emote/6128ed55a50c52b1429e09dc/4x.webp',
 		},
 	],
-};
+}
diff --git a/frontend/overlays/src/composables/kappagen/use-kappagen-settings.ts b/frontend/overlays/src/composables/kappagen/use-kappagen-settings.ts
index e95bf63e7..2392e5cdf 100644
--- a/frontend/overlays/src/composables/kappagen/use-kappagen-settings.ts
+++ b/frontend/overlays/src/composables/kappagen/use-kappagen-settings.ts
@@ -1,10 +1,10 @@
-import type { KappagenConfig } from '@twirapp/kappagen/types';
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { createGlobalState } from '@vueuse/core'
+import { ref } from 'vue'
 
-import type { KappagenSettings } from '@/types.js';
+import type { KappagenSettings } from '@/types.js'
+import type { KappagenConfig } from '@twirapp/kappagen/types'
 
-export const useKappagenSettings = defineStore('kappagen-settings', () => {
+export const useKappagenSettings = createGlobalState(() => {
 	const kappagenSettings = ref<Required<KappagenConfig>>({
 		max: 0,
 		time: 5,
@@ -38,17 +38,17 @@ export const useKappagenSettings = defineStore('kappagen-settings', () => {
 				small: 1 / 24,
 			},
 		},
-	});
+	})
 
-	const overlaySettings = ref<KappagenSettings>();
+	const overlaySettings = ref<KappagenSettings>()
 
 	function updateOverlaySettings(settings: KappagenSettings): void {
-		overlaySettings.value = settings;
+		overlaySettings.value = settings
 
 		if (settings.emotes) {
-			kappagenSettings.value.max = settings.emotes.max;
-			kappagenSettings.value.time = settings.emotes.time;
-			kappagenSettings.value.queue = settings.emotes.queue;
+			kappagenSettings.value.max = settings.emotes.max
+			kappagenSettings.value.time = settings.emotes.time
+			kappagenSettings.value.queue = settings.emotes.queue
 		}
 
 		if (settings.size) {
@@ -59,25 +59,25 @@ export const useKappagenSettings = defineStore('kappagen-settings', () => {
 					normal: settings.size.ratioNormal,
 					small: settings.size.ratioSmall,
 				},
-			};
+			}
 		}
 
 		if (settings.cube) {
 			kappagenSettings.value.cube = {
 				speed: settings.cube.speed,
-			};
+			}
 		}
 
 		if (settings.animation) {
 			kappagenSettings.value.in = {
 				fade: settings.animation.fadeIn,
 				zoom: settings.animation.zoomIn,
-			};
+			}
 
 			kappagenSettings.value.out = {
 				fade: settings.animation.fadeOut,
 				zoom: settings.animation.zoomOut,
-			};
+			}
 		}
 	}
 
@@ -85,5 +85,5 @@ export const useKappagenSettings = defineStore('kappagen-settings', () => {
 		overlaySettings,
 		kappagenSettings,
 		updateSettings: updateOverlaySettings,
-	};
-});
+	}
+})
diff --git a/frontend/overlays/src/composables/kappagen/use-kappagen-socket.ts b/frontend/overlays/src/composables/kappagen/use-kappagen-socket.ts
index 0e81a7089..7c15083b9 100644
--- a/frontend/overlays/src/composables/kappagen/use-kappagen-socket.ts
+++ b/frontend/overlays/src/composables/kappagen/use-kappagen-socket.ts
@@ -1,26 +1,24 @@
-import type { KappagenAnimations, KappagenMethods } from '@twirapp/kappagen/types';
-import { useWebSocket } from '@vueuse/core';
-import { storeToRefs } from 'pinia';
-import { ref, watch } from 'vue';
+import { useWebSocket } from '@vueuse/core'
+import { ref, watch } from 'vue'
 
-import { type Buidler } from './use-kappagen-builder.js';
+import type { Buidler } from './use-kappagen-builder.js'
+import type { TwirWebSocketEvent } from '@/api.js'
+import type { KappagenSettings, KappagenTriggerRequestEmote } from '@/types.js'
+import type { KappagenAnimations, KappagenMethods } from '@twirapp/kappagen/types'
 
-import type { TwirWebSocketEvent } from '@/api.js';
-import { useKappagenSettings } from '@/composables/kappagen/use-kappagen-settings.js';
-import { useMessageHelpers } from '@/composables/tmi/use-message-helpers.js';
-import { generateSocketUrlWithParams } from '@/helpers.js';
-import type { KappagenSettings, KappagenTriggerRequestEmote } from '@/types.js';
+import { useKappagenSettings } from '@/composables/kappagen/use-kappagen-settings.js'
+import { useMessageHelpers } from '@/composables/tmi/use-message-helpers.js'
+import { generateSocketUrlWithParams } from '@/helpers.js'
 
 type Options = Omit<KappagenMethods, 'clear'> & {
 	emotesBuilder: Buidler
 }
 
-export const useKappagenOverlaySocket = (options: Options) => {
-	const { makeMessageChunks } = useMessageHelpers();
-	const kappagenSettingsStore = useKappagenSettings();
-	const { overlaySettings } = storeToRefs(kappagenSettingsStore);
+export function useKappagenOverlaySocket(options: Options) {
+	const { makeMessageChunks } = useMessageHelpers()
+	const { overlaySettings, updateSettings } = useKappagenSettings()
 
-	const kappagenUrl = ref('');
+	const kappagenUrl = ref('')
 	const { data, send, open, close } = useWebSocket(
 		kappagenUrl,
 		{
@@ -29,44 +27,44 @@ export const useKappagenOverlaySocket = (options: Options) => {
 				delay: 500,
 			},
 			onConnected() {
-				send(JSON.stringify({ eventName: 'getSettings' }));
+				send(JSON.stringify({ eventName: 'getSettings' }))
 			},
 		},
-	);
+	)
 
 	function randomAnimation() {
-		if (!overlaySettings.value) return;
+		if (!overlaySettings.value) return
 		const enabledAnimations = overlaySettings.value.animations
-			.filter((animation) => animation.enabled);
+			.filter((animation) => animation.enabled)
 
 		const index = Math.floor(Math.random() * enabledAnimations.length)
-		return enabledAnimations[index] as KappagenAnimations;
+		return enabledAnimations[index] as KappagenAnimations
 	}
 
 	watch(data, (d: string) => {
-		const event = JSON.parse(d) as TwirWebSocketEvent;
+		const event = JSON.parse(d) as TwirWebSocketEvent
 
 		if (event.eventName === 'settings') {
-			const data = event.data as KappagenSettings;
-			kappagenSettingsStore.updateSettings(data);
+			const data = event.data as KappagenSettings
+			updateSettings(data)
 		}
 
 		if (event.eventName === 'event') {
-			const generatedEmotes = options.emotesBuilder.buildKappagenEmotes([]);
+			const generatedEmotes = options.emotesBuilder.buildKappagenEmotes([])
 
-			const animation = randomAnimation();
-			if (!animation) return;
+			const animation = randomAnimation()
+			if (!animation) return
 
-			options.playAnimation(generatedEmotes, animation);
+			options.playAnimation(generatedEmotes, animation)
 		}
 
 		if (event.eventName === 'kappagen') {
-			const data = event.data as { text: string, emotes?: KappagenTriggerRequestEmote[] };
+			const data = event.data as { text: string, emotes?: KappagenTriggerRequestEmote[] }
 
-			const emotesList: Record<string, string[]> = {};
+			const emotesList: Record<string, string[]> = {}
 			if (data.emotes) {
 				for (const emote of data.emotes) {
-					emotesList[emote.id] = emote.positions;
+					emotesList[emote.id] = emote.positions
 				}
 			}
 
@@ -76,32 +74,32 @@ export const useKappagenOverlaySocket = (options: Options) => {
 					isSmaller: false,
 					emotesList,
 				},
-			);
-			const emotesForKappagen = options.emotesBuilder.buildKappagenEmotes(chunks);
+			)
+			const emotesForKappagen = options.emotesBuilder.buildKappagenEmotes(chunks)
 
-			const animation = randomAnimation();
-			if (!animation) return;
+			const animation = randomAnimation()
+			if (!animation) return
 
-			options.playAnimation(emotesForKappagen, animation);
+			options.playAnimation(emotesForKappagen, animation)
 		}
-	});
+	})
 
 	function destroy() {
-		close();
+		close()
 	}
 
 	function connect(apiKey: string): void {
 		const url = generateSocketUrlWithParams('/overlays/kappagen', {
 			apiKey,
-		});
+		})
 
-		kappagenUrl.value = url;
+		kappagenUrl.value = url
 
-		open();
+		open()
 	}
 
 	return {
 		connect,
 		destroy,
-	};
-};
+	}
+}
diff --git a/frontend/overlays/src/composables/obs/use-obs.ts b/frontend/overlays/src/composables/obs/use-obs.ts
index 1b0cd2347..e24a2ee1e 100644
--- a/frontend/overlays/src/composables/obs/use-obs.ts
+++ b/frontend/overlays/src/composables/obs/use-obs.ts
@@ -1,131 +1,131 @@
-import OBSWebSocket from 'obs-websocket-js';
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { createGlobalState } from '@vueuse/core'
+import OBSWebSocket from 'obs-websocket-js'
+import { ref } from 'vue'
 
-type ObsSource = {
-  name: string;
-  type: string | null;
+interface ObsSource {
+	name: string
+	type: string | null
 }
 
-type OBSScenes = {
-  [x: string]: ObsSource[];
+interface OBSScenes {
+	[x: string]: ObsSource[]
 }
 
-export const useObs = defineStore('obs', () => {
-  const obs = ref(new OBSWebSocket());
-  const connected = ref(false);
+export const useObs = createGlobalState(() => {
+	const obs = ref(new OBSWebSocket())
+	const connected = ref(false)
 
-  async function connect(address: string, port: number | string, password: string) {
+	async function connect(address: string, port: number | string, password: string) {
 		if (!address || !port || !password) {
-			return;
+			return
 		}
 
-		await obs.value.disconnect();
+		await obs.value.disconnect()
 
 		try {
-			await obs.value.connect(`ws://${address}:${port}`, password);
-			connected.value = true;
+			await obs.value.connect(`ws://${address}:${port}`, password)
+			connected.value = true
 		} catch (e) {
-			connected.value = false;
-			throw e;
+			connected.value = false
+			throw e
 		}
 	}
 
-  async function disconnect() {
-		await obs.value.disconnect();
+	async function disconnect() {
+		await obs.value.disconnect()
 	}
 
-  function setScene(sceneName: string) {
-		obs.value.call('SetCurrentProgramScene', { sceneName });
+	function setScene(sceneName: string) {
+		obs.value.call('SetCurrentProgramScene', { sceneName })
 	}
 
-  async function toggleSource(sourceName: string) {
-		const currentSceneReq = await obs.value.call('GetCurrentProgramScene');
-		if (!currentSceneReq) return;
+	async function toggleSource(sourceName: string) {
+		const currentSceneReq = await obs.value.call('GetCurrentProgramScene')
+		if (!currentSceneReq) return
 
 		const [currentStateReq, idReq] = await Promise.all([
 			obs.value.call('GetSourceActive', { sourceName }),
 			obs.value.call('GetSceneItemId', { sourceName, sceneName: currentSceneReq.currentProgramSceneName }),
-		]);
-		if (!currentStateReq || !idReq) return;
+		])
+		if (!currentStateReq || !idReq) return
 
 		await obs.value.call('SetSceneItemEnabled', {
 			sceneName: currentSceneReq.currentProgramSceneName,
 			sceneItemId: idReq.sceneItemId,
 			sceneItemEnabled: !currentStateReq.videoShowing,
-		});
+		})
 	}
 
-  async function toggleAudioSource(sourceName: string, muted?: boolean) {
+	async function toggleAudioSource(sourceName: string, muted?: boolean) {
 		if (typeof muted !== 'undefined') {
-			await obs.value.call('SetInputMute', { inputName: sourceName, inputMuted: !muted });
+			await obs.value.call('SetInputMute', { inputName: sourceName, inputMuted: !muted })
 		} else {
-			await obs.value.call('ToggleInputMute', { inputName: sourceName });
+			await obs.value.call('ToggleInputMute', { inputName: sourceName })
 		}
 	}
 
-  async function setVolume(inputName: string, volume: number) {
+	async function setVolume(inputName: string, volume: number) {
 		await obs.value.call('SetInputVolume', {
 			inputName,
 			inputVolumeDb: volume * 3 - 60,
-		});
+		})
 	}
 
-  async function changeVolume(inputName: string, step: number, operation: 'increase' | 'decrease') {
-		const currentVolumeReq = await obs.value.call('GetInputVolume', { inputName });
-		if (!currentVolumeReq) return;
+	async function changeVolume(inputName: string, step: number, operation: 'increase' | 'decrease') {
+		const currentVolumeReq = await obs.value.call('GetInputVolume', { inputName })
+		if (!currentVolumeReq) return
 
 		if (currentVolumeReq.inputVolumeDb === 0 && operation === 'increase') {
-			return;
+			return
 		}
 
 		if (currentVolumeReq.inputVolumeDb <= 95 && operation === 'decrease') {
-			return;
+			return
 		}
 
-		const newVolume = currentVolumeReq.inputVolumeDb + (operation === 'increase' ? step : -step);
+		const newVolume = currentVolumeReq.inputVolumeDb + (operation === 'increase' ? step : -step)
 
 		await obs.value.call('SetInputVolume', {
 			inputName,
 			inputVolumeDb: newVolume,
-		});
+		})
 	}
 
-  async function startStream() {
-		await obs.value.call('StartStream');
+	async function startStream() {
+		await obs.value.call('StartStream')
 	}
 
-  async function stopStream() {
-		await obs.value.call('StopStream');
+	async function stopStream() {
+		await obs.value.call('StopStream')
 	}
 
-  async function getSources() {
-		const scenesReq = await obs.value.call('GetSceneList');
-		if (!scenesReq) return;
+	async function getSources() {
+		const scenesReq = await obs.value.call('GetSceneList')
+		if (!scenesReq) return
 
-		const mappedScenesNames = scenesReq.scenes.map(s => s.sceneName as string);
+		const mappedScenesNames = scenesReq.scenes.map(s => s.sceneName as string)
 
 		const itemsPromises = await Promise.all(mappedScenesNames.map((sceneName) => {
-			return obs.value.call('GetSceneItemList', { sceneName });
-		}));
+			return obs.value.call('GetSceneItemList', { sceneName })
+		}))
 
-		const result: OBSScenes = {};
+		const result: OBSScenes = {}
 
 		await Promise.all(itemsPromises.map(async (item, index) => {
-			if (!item) return;
-			const sceneName = mappedScenesNames[index];
+			if (!item) return
+			const sceneName = mappedScenesNames[index]
 			result[sceneName] = item.sceneItems.filter(i => !i.isGroup).map((i) => ({
 				name: i.sourceName as string,
 				type: i.inputKind?.toString() || null,
-			}));
+			}))
 
 			const groups = item.sceneItems
 				.filter(i => i.isGroup)
-				.map(g => g.sourceName);
+				.map(g => g.sourceName)
 
 			await Promise.all(groups.map(async (g) => {
-				const group = await obs.value.call('GetGroupSceneItemList', { sceneName: g as string });
-				if (!group) return;
+				const group = await obs.value.call('GetGroupSceneItemList', { sceneName: g as string })
+				if (!group) return
 
 				result[sceneName] = [
 					...result[sceneName],
@@ -133,31 +133,31 @@ export const useObs = defineStore('obs', () => {
 						name: i.sourceName as string,
 						type: i.inputKind?.toString() || null,
 					})),
-				];
-			}));
-		}));
+				]
+			}))
+		}))
 
-		return result;
+		return result
 	}
 
-  async function getAudioSources() {
-		const req = await obs.value.call('GetInputList');
-		return req?.inputs.map(i => i.inputName as string) ?? [];
+	async function getAudioSources() {
+		const req = await obs.value.call('GetInputList')
+		return req?.inputs.map(i => i.inputName as string) ?? []
 	}
 
-  return {
-    connect,
-    disconnect,
-    connected,
-    setScene,
-    toggleSource,
-    toggleAudioSource,
-    setVolume,
-    changeVolume,
-    startStream,
-    stopStream,
-    getSources,
-    getAudioSources,
-    instance: obs,
-  };
-});
+	return {
+		connect,
+		disconnect,
+		connected,
+		setScene,
+		toggleSource,
+		toggleAudioSource,
+		setVolume,
+		changeVolume,
+		startStream,
+		stopStream,
+		getSources,
+		getAudioSources,
+		instance: obs,
+	}
+})
diff --git a/frontend/overlays/src/composables/overlays/use-overlays.ts b/frontend/overlays/src/composables/overlays/use-overlays.ts
index 1cbc42132..baae89a64 100644
--- a/frontend/overlays/src/composables/overlays/use-overlays.ts
+++ b/frontend/overlays/src/composables/overlays/use-overlays.ts
@@ -1,36 +1,35 @@
-import { useWebSocket } from '@vueuse/core';
-import { defineStore } from 'pinia';
-import { ref, watch } from 'vue';
+import { createGlobalState, useWebSocket } from '@vueuse/core'
+import { ref, watch } from 'vue'
 
-import { base64DecodeUnicode, generateSocketUrlWithParams } from '@/helpers.js';
+import { base64DecodeUnicode, generateSocketUrlWithParams } from '@/helpers.js'
 
 export interface Layer {
-	id: string;
-	type: 'HTML';
-	settings: LayerSettings;
-	overlay_id: string;
-	pos_x: number;
-	pos_y: number;
-	width: number;
-	height: number;
-	createdAt: string;
-	updatedAt: string;
-	overlay: any;
-	periodically_refetch_data: boolean;
-	htmlContent?: string;
+	id: string
+	type: 'HTML'
+	settings: LayerSettings
+	overlay_id: string
+	pos_x: number
+	pos_y: number
+	width: number
+	height: number
+	createdAt: string
+	updatedAt: string
+	overlay: any
+	periodically_refetch_data: boolean
+	htmlContent?: string
 }
 
 export interface LayerSettings {
-	htmlOverlayDataPollSecondsInterval: number;
-	htmlOverlayHtml: string;
-	htmlOverlayCss: string;
-	htmlOverlayJs: string;
+	htmlOverlayDataPollSecondsInterval: number
+	htmlOverlayHtml: string
+	htmlOverlayCss: string
+	htmlOverlayJs: string
 }
 
-export const useOverlays = defineStore('overlays', () => {
-	const overlayUrl = ref('');
-	const overlayId = ref('');
-	const layers = ref<Array<Layer>>([]);
+export const useOverlays = createGlobalState(() => {
+	const overlayUrl = ref('')
+	const overlayId = ref('')
+	const layers = ref<Array<Layer>>([])
 
 	const { data, status, send, open } = useWebSocket(
 		overlayUrl,
@@ -47,18 +46,18 @@ export const useOverlays = defineStore('overlays', () => {
 							overlayId: overlayId.value,
 						},
 					}),
-				);
+				)
 			},
 		},
-	);
+	)
 
-	const parsedLayersData = ref<Record<string, string>>({});
+	const parsedLayersData = ref<Record<string, string>>({})
 
 	watch(data, (d) => {
-		const parsedData = JSON.parse(d);
+		const parsedData = JSON.parse(d)
 
 		if (parsedData.eventName === 'layers') {
-			const parsedLayers = parsedData.layers as Array<Layer>;
+			const parsedLayers = parsedData.layers as Array<Layer>
 
 			layers.value = parsedLayers.map((l) => ({
 				...l,
@@ -69,19 +68,19 @@ export const useOverlays = defineStore('overlays', () => {
 						: '',
 					htmlOverlayJs: l.settings.htmlOverlayJs ? base64DecodeUnicode(l.settings.htmlOverlayJs) : '',
 				},
-			}));
+			}))
 		}
 
 		if (parsedData.eventName === 'parsedLayerVariables') {
 			parsedLayersData.value[parsedData.layerId] = parsedData.data
 				? base64DecodeUnicode(parsedData.data)
-				: '';
+				: ''
 		}
 
 		if (parsedData.eventName === 'refreshOverlays') {
-			window.location.reload();
+			window.location.reload()
 		}
-	});
+	})
 
 	function requestLayerData(layerId: string): void {
 		send(
@@ -91,20 +90,20 @@ export const useOverlays = defineStore('overlays', () => {
 					layerId,
 				},
 			}),
-		);
+		)
 	}
 
 	function connectToOverlays(apiKey: string, _overlayId: string): void {
-		if (status.value === 'OPEN') return;
+		if (status.value === 'OPEN') return
 
 		const url = generateSocketUrlWithParams('/overlays/registry/overlays', {
 			apiKey,
-		});
+		})
 
-		overlayUrl.value = url;
-		overlayId.value = _overlayId;
+		overlayUrl.value = url
+		overlayId.value = _overlayId
 
-		open();
+		open()
 	}
 
 	return {
@@ -112,5 +111,5 @@ export const useOverlays = defineStore('overlays', () => {
 		parsedLayersData,
 		requestLayerData,
 		connectToOverlays,
-	};
-});
+	}
+})
diff --git a/frontend/overlays/src/composables/tmi/use-bettertv.ts b/frontend/overlays/src/composables/tmi/use-bettertv.ts
index 8980101a6..3c2a2edf5 100644
--- a/frontend/overlays/src/composables/tmi/use-bettertv.ts
+++ b/frontend/overlays/src/composables/tmi/use-bettertv.ts
@@ -1,12 +1,13 @@
-import { defineStore } from 'pinia';
+import { createGlobalState } from '@vueuse/core'
 
-import { useEmotes } from './use-emotes.js';
+import { useEmotes } from './use-emotes.js'
 
-import { requestWithOutCache } from '@/helpers.js';
-import type { BttvChannelResponse, BttvGlobalResponse } from '@/types.js';
+import type { BttvChannelResponse, BttvGlobalResponse } from '@/types.js'
 
-export const useBetterTv = defineStore('bettertv', () => {
-	const { setBttvEmotes } = useEmotes();
+import { requestWithOutCache } from '@/helpers.js'
+
+export const useBetterTv = createGlobalState(() => {
+	const { setBttvEmotes } = useEmotes()
 
 	async function fetchBttvEmotes(channelId: string): Promise<void> {
 		try {
@@ -17,16 +18,16 @@ export const useBetterTv = defineStore('bettertv', () => {
 				requestWithOutCache<BttvChannelResponse>(
 					`https://api.betterttv.net/3/cached/users/twitch/${channelId}`,
 				),
-			]);
+			])
 
-			setBttvEmotes(globalEmotes);
-			setBttvEmotes(channelEmotes);
+			setBttvEmotes(globalEmotes)
+			setBttvEmotes(channelEmotes)
 		} catch (err) {
-			console.error(err);
+			console.error(err)
 		}
 	}
 
 	return {
 		fetchBttvEmotes,
-	};
-});
+	}
+})
diff --git a/frontend/overlays/src/composables/tmi/use-emotes.ts b/frontend/overlays/src/composables/tmi/use-emotes.ts
index 112a3410c..f4399f1b3 100644
--- a/frontend/overlays/src/composables/tmi/use-emotes.ts
+++ b/frontend/overlays/src/composables/tmi/use-emotes.ts
@@ -1,6 +1,6 @@
-import { BttvZeroModifiers } from '@twir/frontend-chat';
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { BttvZeroModifiers } from '@twir/frontend-chat'
+import { createGlobalState } from '@vueuse/core'
+import { ref } from 'vue'
 
 import type {
 	BttvChannelResponse,
@@ -11,53 +11,53 @@ import type {
 	SevenTvChannelResponse,
 	SevenTvEmote,
 	SevenTvGlobalResponse,
-} from '@/types.js';
-
-type Emote = {
-	urls: string[];
-	isZeroWidth?: boolean;
-	name: string;
-	modifierFlag?: number;
-	isModifier?: boolean;
-	service: '7tv' | 'bttv' | 'ffz';
-	width?: number;
-	height?: number;
-};
+} from '@/types.js'
+
+interface Emote {
+	urls: string[]
+	isZeroWidth?: boolean
+	name: string
+	modifierFlag?: number
+	isModifier?: boolean
+	service: '7tv' | 'bttv' | 'ffz'
+	width?: number
+	height?: number
+}
 
 function isZeroWidthEmote(flags: number): boolean {
-	return flags === 1 << 0;
+	return flags === 1 << 0
 }
 
 function bttvEmoteUrls(id: string, isAnimated: boolean): string[] {
-	const emoteExt = isAnimated ? 'gif' : 'webp';
+	const emoteExt = isAnimated ? 'gif' : 'webp'
 	return Array.from({ length: 3 }).map(
 		(_, index) => `https://cdn.betterttv.net/emote/${id}/${index + 1}x.${emoteExt}`,
-	);
+	)
 }
 
-export const useEmotes = defineStore('emotes', () => {
-	const emotes = ref<Record<string, Emote>>({});
+export const useEmotes = createGlobalState(() => {
+	const emotes = ref<Record<string, Emote>>({})
 
 	function setSevenTvEmotes(data: SevenTvChannelResponse | SevenTvGlobalResponse): void {
-		let emotesForParse: Array<SevenTvEmote>;
+		let emotesForParse: Array<SevenTvEmote>
 		if ('emote_set' in data) {
-			emotesForParse = data.emote_set.emotes;
+			emotesForParse = data.emote_set.emotes
 		} else {
-			emotesForParse = data.emotes;
+			emotesForParse = data.emotes
 		}
 
 		for (const emote of emotesForParse) {
-			updateSevenTvEmote(emote);
+			updateSevenTvEmote(emote)
 		}
 	}
 
 	function setBttvEmotes(data: BttvChannelResponse | BttvGlobalResponse): void {
-		let emotesForParse: Array<BttvEmote>;
+		let emotesForParse: Array<BttvEmote>
 
 		if ('channelEmotes' in data) {
-			emotesForParse = [...data.channelEmotes, ...data.sharedEmotes];
+			emotesForParse = [...data.channelEmotes, ...data.sharedEmotes]
 		} else {
-			emotesForParse = data;
+			emotesForParse = data
 		}
 
 		for (const emote of emotesForParse) {
@@ -68,13 +68,13 @@ export const useEmotes = defineStore('emotes', () => {
 				height: emote.height,
 				width: emote.width,
 				isModifier: emote.modifier ?? false,
-				isZeroWidth: BttvZeroModifiers.some((e) => e === emote.code),
-			};
+				isZeroWidth: BttvZeroModifiers.includes(emote.code),
+			}
 		}
 	}
 
 	function setFrankerFaceZEmotes(data: FfzChannelResponse | FfzGlobalResponse): void {
-		const sets = Object.values(data.sets);
+		const sets = Object.values(data.sets)
 		for (const set of sets) {
 			for (const emote of set.emoticons) {
 				emotes.value[emote.name] = {
@@ -85,21 +85,21 @@ export const useEmotes = defineStore('emotes', () => {
 					height: emote.height,
 					isModifier: emote.modifier,
 					modifierFlag: emote.modifier_flags,
-				};
+				}
 			}
 		}
 	}
 
 	function removeEmoteByName(emoteName: string): void {
 		if (emotes.value[emoteName]) {
-			delete emotes.value[emoteName];
+			delete emotes.value[emoteName]
 		}
 	}
 
 	function updateSevenTvEmote(emote: SevenTvEmote): void {
-		const files = emote.data.host.files.filter((file) => file.format === 'WEBP');
-		const { height, width } = files.at(0)!;
-		const isAnimated = emote.data.animated;
+		const files = emote.data.host.files.filter((file) => file.format === 'WEBP')
+		const { height, width } = files.at(0)!
+		const isAnimated = emote.data.animated
 
 		emotes.value[emote.name] = {
 			urls: files.map((file) => `https:${emote.data.host.url}/${isAnimated ? file.name.replace('.webp', '.gif') : file.name}`),
@@ -108,7 +108,7 @@ export const useEmotes = defineStore('emotes', () => {
 			service: '7tv',
 			width,
 			height,
-		};
+		}
 	}
 
 	// const loadedEmotes = ref<string[]>([]);
@@ -129,5 +129,5 @@ export const useEmotes = defineStore('emotes', () => {
 		removeEmoteByName,
 		setBttvEmotes,
 		setFrankerFaceZEmotes,
-	};
-});
+	}
+})
diff --git a/frontend/overlays/src/composables/tmi/use-ffz.ts b/frontend/overlays/src/composables/tmi/use-ffz.ts
index 2d40cfc33..2fef2f0b5 100644
--- a/frontend/overlays/src/composables/tmi/use-ffz.ts
+++ b/frontend/overlays/src/composables/tmi/use-ffz.ts
@@ -1,12 +1,13 @@
-import { defineStore } from 'pinia';
+import { createGlobalState } from '@vueuse/core'
 
-import { useEmotes } from './use-emotes.js';
+import { useEmotes } from './use-emotes.js'
 
-import { requestWithOutCache } from '@/helpers.js';
-import type { FfzChannelResponse, FfzGlobalResponse } from '@/types.js';
+import type { FfzChannelResponse, FfzGlobalResponse } from '@/types.js'
 
-export const useFrankerFaceZ = defineStore('ffz', () => {
-	const { setFrankerFaceZEmotes } = useEmotes();
+import { requestWithOutCache } from '@/helpers.js'
+
+export const useFrankerFaceZ = createGlobalState(() => {
+	const { setFrankerFaceZEmotes } = useEmotes()
 
 	async function fetchFrankerFaceZEmotes(channelId: string): Promise<void> {
 		try {
@@ -17,16 +18,16 @@ export const useFrankerFaceZ = defineStore('ffz', () => {
 				requestWithOutCache<FfzChannelResponse>(
 					`https://api.frankerfacez.com/v1/room/id/${channelId}`,
 				),
-			]);
+			])
 
-			setFrankerFaceZEmotes(globalEmotes);
-			setFrankerFaceZEmotes(channelEmotes);
+			setFrankerFaceZEmotes(globalEmotes)
+			setFrankerFaceZEmotes(channelEmotes)
 		} catch (err) {
-			console.error(err);
+			console.error(err)
 		}
 	}
 
 	return {
 		fetchFrankerFaceZEmotes,
-	};
-});
+	}
+})
diff --git a/frontend/overlays/src/composables/tmi/use-message-helpers.ts b/frontend/overlays/src/composables/tmi/use-message-helpers.ts
index 801dd6460..d9aa16023 100644
--- a/frontend/overlays/src/composables/tmi/use-message-helpers.ts
+++ b/frontend/overlays/src/composables/tmi/use-message-helpers.ts
@@ -1,64 +1,66 @@
-import { type MessageChunk } from '@twir/frontend-chat';
-import emojiRegex from 'emoji-regex';
-import { defineStore, storeToRefs } from 'pinia';
+import { createGlobalState } from '@vueuse/core'
+import emojiRegex from 'emoji-regex'
 
-import { useEmotes } from './use-emotes.js';
+import { useEmotes } from './use-emotes.js'
 
-const emojiRegexp = emojiRegex();
+import type { MessageChunk } from '@twir/frontend-chat'
 
-type TwitchEmotes = { [emoteId: string]: string }
+const emojiRegexp = emojiRegex()
 
-export const useMessageHelpers = defineStore('message-helpers', () => {
-	const emotesStore = useEmotes();
-	const { emotes: thirdPartyEmotes } = storeToRefs(emotesStore);
+interface TwitchEmotes {
+	[emoteId: string]: string
+}
+
+export const useMessageHelpers = createGlobalState(() => {
+	const { emotes: thirdPartyEmotes } = useEmotes()
 
 	function makeMessageChunks(
 		message: string,
 		emotes: {
-			isSmaller: boolean,
+			isSmaller: boolean
 			emotesList: Record<string, string[]>
 		},
 	): MessageChunk[] {
-		const chunks: MessageChunk[] = [];
-		const parsedTwitchEmotes: TwitchEmotes = {};
+		const chunks: MessageChunk[] = []
+		const parsedTwitchEmotes: TwitchEmotes = {}
 
 		for (const [emoteId, positions] of Object.entries(emotes.emotesList)) {
 			for (const position of positions) {
-				const [from] = position.split('-').map(Number);
-				parsedTwitchEmotes[from] = emoteId;
+				const [from] = position.split('-').map(Number)
+				parsedTwitchEmotes[from] = emoteId
 			}
 		}
 
-		let currentWordIndex = 0;
+		let currentWordIndex = 0
 		for (const part of message.split(' ')) {
-			const emote = parsedTwitchEmotes[currentWordIndex];
-			const thirdPartyEmote = thirdPartyEmotes.value[part];
-			const emojiMatch = part.match(emojiRegexp);
+			const emote = parsedTwitchEmotes[currentWordIndex]
+			const thirdPartyEmote = thirdPartyEmotes.value[part]
+			const emojiMatch = part.match(emojiRegexp)
 
 			if (emojiMatch && emojiMatch.length) {
 				chunks.push({
 					type: 'emoji',
 					value: part,
-				});
+				})
 			} else if (emote) {
 				chunks.push({
 					type: 'emote',
 					value: `https://static-cdn.jtvnw.net/emoticons/v2/${emote}/default/dark/${emotes.isSmaller ? 1 : 3}.0`,
-				});
+				})
 			} else if (thirdPartyEmote) {
-				const isZeroWidthModifier = thirdPartyEmote.isZeroWidth;
-				const isModifier = typeof thirdPartyEmote.modifierFlag !== 'undefined';
-				const url = thirdPartyEmote.urls.at(emotes.isSmaller ? 0 : -1)!;
-				const latestChunk = chunks.at(-1)!;
+				const isZeroWidthModifier = thirdPartyEmote.isZeroWidth
+				const isModifier = typeof thirdPartyEmote.modifierFlag !== 'undefined'
+				const url = thirdPartyEmote.urls.at(emotes.isSmaller ? 0 : -1)!
+				const latestChunk = chunks.at(-1)!
 
 				if (isZeroWidthModifier && latestChunk) {
-					latestChunk.zeroWidthModifiers = [...(latestChunk.zeroWidthModifiers ?? []), url];
+					latestChunk.zeroWidthModifiers = [...(latestChunk.zeroWidthModifiers ?? []), url]
 				} else if (isModifier && latestChunk) {
 					const flags = [
 						...(latestChunk.flags ?? []),
 						thirdPartyEmote.modifierFlag as number,
-					];
-					latestChunk.flags = flags;
+					]
+					latestChunk.flags = flags
 				} else {
 					chunks.push({
 						type: '3rd_party_emote',
@@ -66,19 +68,19 @@ export const useMessageHelpers = defineStore('message-helpers', () => {
 						emoteHeight: thirdPartyEmote.height,
 						emoteWidth: thirdPartyEmote.width,
 						emoteName: thirdPartyEmote.name,
-					});
+					})
 				}
 			} else {
-				chunks.push({ type: 'text', value: part });
+				chunks.push({ type: 'text', value: part })
 			}
 
-			currentWordIndex = currentWordIndex + part.length + 1;
+			currentWordIndex = currentWordIndex + part.length + 1
 		}
 
-		return chunks;
+		return chunks
 	}
 
 	return {
 		makeMessageChunks,
-	};
-});
+	}
+})
diff --git a/frontend/overlays/src/composables/tmi/use-seven-tv.ts b/frontend/overlays/src/composables/tmi/use-seven-tv.ts
index 19a739ee5..9e3443a4d 100644
--- a/frontend/overlays/src/composables/tmi/use-seven-tv.ts
+++ b/frontend/overlays/src/composables/tmi/use-seven-tv.ts
@@ -1,11 +1,11 @@
-import { useWebSocket } from '@vueuse/core';
-import { defineStore, storeToRefs } from 'pinia';
-import { ref, watch } from 'vue';
+import { createGlobalState, useWebSocket } from '@vueuse/core'
+import { ref, watch } from 'vue'
 
-import { useEmotes } from './use-emotes.js';
+import { useEmotes } from './use-emotes.js'
 
-import { requestWithOutCache } from '@/helpers.js';
-import type { SevenTvChannelResponse, SevenTvEmote, SevenTvGlobalResponse } from '@/types.js';
+import type { SevenTvChannelResponse, SevenTvEmote, SevenTvGlobalResponse } from '@/types.js'
+
+import { requestWithOutCache } from '@/helpers.js'
 
 // opcodes https://github.com/SevenTV/EventAPI#opcodes
 const OPCODES = {
@@ -25,12 +25,12 @@ const OPCODES = {
 	UNSUBSCRIBE: 36,
 	SIGNAL: 37,
 	BRIDGE: 38,
-} as const;
+} as const
 
-type Opcode = (typeof OPCODES)[keyof typeof OPCODES];
+type Opcode = (typeof OPCODES)[keyof typeof OPCODES]
 
 interface SevenTvWebsocketPayload {
-	op: number;
+	op: number
 	d: {
 		type: string
 		body: {
@@ -39,12 +39,12 @@ interface SevenTvWebsocketPayload {
 			pushed?: SevenTvWebsocketBody[]
 			updated?: SevenTvWebsocketBody[]
 		}
-	};
+	}
 }
 
 interface SevenTvWebsocketBody {
-	old_value?: SevenTvEmote;
-	value: SevenTvEmote;
+	old_value?: SevenTvEmote
+	value: SevenTvEmote
 }
 
 function sevenTvPayload(opcode: Opcode, data: any): string {
@@ -52,31 +52,35 @@ function sevenTvPayload(opcode: Opcode, data: any): string {
 		op: opcode,
 		t: Date.now(),
 		d: data,
-	});
+	})
 }
 
-export const useSevenTv = defineStore('seven-tv', () => {
-	const countRefetch = ref(0);
-	const sevenTvUserId = ref('');
-	const currentEmoteSetId = ref('');
+export const useSevenTv = createGlobalState(() => {
+	const countRefetch = ref(0)
+	const sevenTvUserId = ref('')
+	const currentEmoteSetId = ref('')
 
-	const emotesStore = useEmotes();
-	const { emotes } = storeToRefs(emotesStore);
+	const {
+		emotes,
+		removeEmoteByName,
+		setSevenTvEmotes,
+		updateSevenTvEmote,
+	} = useEmotes()
 
 	const { data, status, open, send, close } = useWebSocket('wss://events.7tv.io/v3', {
 		immediate: false,
 		autoReconnect: {
 			delay: 500,
 		},
-	});
+	})
 
 	function sendSevenTv(opcode: Opcode, data: any): void {
-		send(sevenTvPayload(opcode, data));
+		send(sevenTvPayload(opcode, data))
 	}
 
 	watch(() => currentEmoteSetId.value, (emoteSetId) => {
-		sendSevenTvEvent(OPCODES.SUBSCRIBE, emoteSetId);
-	});
+		sendSevenTvEvent(OPCODES.SUBSCRIBE, emoteSetId)
+	})
 
 	function sendSevenTvEvent(opcode: Opcode, emoteSetId: string): void {
 		sendSevenTv(opcode, {
@@ -84,42 +88,42 @@ export const useSevenTv = defineStore('seven-tv', () => {
 			condition: {
 				object_id: emoteSetId,
 			},
-		});
+		})
 
 		sendSevenTv(opcode, {
 			type: 'user.update',
 			condition: {
 				object_id: sevenTvUserId.value,
 			},
-		});
+		})
 	}
 
 	watch(() => data.value, async (data) => {
-		const parsedData = JSON.parse(data) as SevenTvWebsocketPayload;
+		const parsedData = JSON.parse(data) as SevenTvWebsocketPayload
 
 		if (parsedData.op === OPCODES.DISPATCH) {
-			const { type, body } = parsedData.d;
+			const { type, body } = parsedData.d
 
 			if (type === 'emote_set.update') {
 				// ADD
 				if (body.pushed) {
 					for (const emote of body.pushed) {
-						emotesStore.updateSevenTvEmote(emote.value);
+						updateSevenTvEmote(emote.value)
 					}
 					// UPDATE
 				} else if (body.updated) {
 					for (const emote of body.updated) {
 						if (emote.old_value) {
-							emotesStore.removeEmoteByName(emote.old_value.name);
+							removeEmoteByName(emote.old_value.name)
 						}
 
-						emotesStore.updateSevenTvEmote(emote.value);
+						updateSevenTvEmote(emote.value)
 					}
 					// REMOVE
 				} else if (body.pulled) {
 					for (const emote of body.pulled) {
 						if (emote.old_value) {
-							emotesStore.removeEmoteByName(emote.old_value.name);
+							removeEmoteByName(emote.old_value.name)
 						}
 					}
 				}
@@ -129,30 +133,30 @@ export const useSevenTv = defineStore('seven-tv', () => {
 				// UPDATE
 				if (body.updated) {
 					// Unsubscribe from old emote set
-					sendSevenTvEvent(OPCODES.UNSUBSCRIBE, currentEmoteSetId.value);
+					sendSevenTvEvent(OPCODES.UNSUBSCRIBE, currentEmoteSetId.value)
 
 					// Delete all emotes
 					for (const emote of Object.values(emotes)) {
-						if (emote.service !== '7tv') continue;
-						delete emotes.value[emote.name];
+						if (emote.service !== '7tv') continue
+						delete emotes.value[emote.name]
 					}
 
 					// Fetch actual emotes
-					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-					// @ts-ignore
-					const newEmoteSetId = body.updated[0].value[0].value.id;
+					// eslint-disable-next-line ts/ban-ts-comment
+					// @ts-expect-error
+					const newEmoteSetId = body.updated[0].value[0].value.id
 					const newEmotes = await requestWithOutCache<SevenTvGlobalResponse>(
 						`https://7tv.io/v3/emote-sets/${newEmoteSetId}`,
-					);
-					emotesStore.setSevenTvEmotes(newEmotes);
-					currentEmoteSetId.value = newEmoteSetId;
+					)
+					setSevenTvEmotes(newEmotes)
+					currentEmoteSetId.value = newEmoteSetId
 				}
 			}
 		}
-	});
+	})
 
 	async function fetchSevenTvEmotes(channelId: string) {
-		if (status.value === 'OPEN' || countRefetch.value > 3) return;
+		if (status.value === 'OPEN' || countRefetch.value > 3) return
 
 		try {
 			const [globalEmotes, channelEmotes] = await Promise.all([
@@ -162,29 +166,29 @@ export const useSevenTv = defineStore('seven-tv', () => {
 				requestWithOutCache<SevenTvChannelResponse>(
 					`https://7tv.io/v3/users/twitch/${channelId}`,
 				),
-			]);
+			])
 
-			emotesStore.setSevenTvEmotes(globalEmotes);
-			emotesStore.setSevenTvEmotes(channelEmotes);
+			setSevenTvEmotes(globalEmotes)
+			setSevenTvEmotes(channelEmotes)
 
-			currentEmoteSetId.value = channelEmotes.emote_set.id;
-			sevenTvUserId.value = channelEmotes.user.id;
+			currentEmoteSetId.value = channelEmotes.emote_set.id
+			sevenTvUserId.value = channelEmotes.user.id
 
-			open();
+			open()
 		} catch (err) {
-			countRefetch.value++;
-			fetchSevenTvEmotes(channelId);
-			console.error(err);
+			countRefetch.value++
+			fetchSevenTvEmotes(channelId)
+			console.error(err)
 		}
 	}
 
 	function destroy(): void {
-		if (status.value !== 'OPEN') return;
-		close();
+		if (status.value !== 'OPEN') return
+		close()
 	}
 
 	return {
 		destroy,
 		fetchSevenTvEmotes,
-	};
-});
+	}
+})
diff --git a/frontend/overlays/src/main.ts b/frontend/overlays/src/main.ts
index 1c0b06fc7..a13af24b8 100644
--- a/frontend/overlays/src/main.ts
+++ b/frontend/overlays/src/main.ts
@@ -1,14 +1,12 @@
-import { createPinia } from 'pinia';
-import { createApp } from 'vue';
+import { createApp } from 'vue'
 
-import MainApp from './app.vue';
-import { routes } from './routes.js';
-import './style.css';
+import MainApp from './app.vue'
+import { routes } from './routes.js'
+import './style.css'
 
-const pinia = createPinia();
-createApp(MainApp).use(pinia).use(routes).mount('#app');
+createApp(MainApp).use(routes).mount('#app')
 
 // refresh the page when new version comes
 document.body.addEventListener('plugin_web_update_notice', () => {
-	window.location.reload();
-});
+	window.location.reload()
+})
diff --git a/frontend/overlays/src/pages/obs.vue b/frontend/overlays/src/pages/obs.vue
index 8b07a8210..5b0f29bb2 100644
--- a/frontend/overlays/src/pages/obs.vue
+++ b/frontend/overlays/src/pages/obs.vue
@@ -1,18 +1,18 @@
 <script lang="ts" setup>
-import { useWebSocket } from '@vueuse/core';
-import { ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { useWebSocket } from '@vueuse/core'
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
-import { useObs } from '@/composables/obs/use-obs.js';
-import { generateSocketUrlWithParams } from '@/helpers.js';
+import { useObs } from '@/composables/obs/use-obs.js'
+import { generateSocketUrlWithParams } from '@/helpers.js'
 
-const obs = useObs();
-const route = useRoute();
+const obs = useObs()
+const route = useRoute()
 
-const apiKey = route.params.apiKey as string;
+const apiKey = route.params.apiKey as string
 const obsUrl = generateSocketUrlWithParams('/overlays/obs', {
 	apiKey,
-});
+})
 
 const internalSocket = useWebSocket(obsUrl, {
 	immediate: true,
@@ -20,96 +20,96 @@ const internalSocket = useWebSocket(obsUrl, {
 		delay: 500,
 	},
 	onConnected(ws) {
-		ws.send(JSON.stringify({ eventName: 'requestSettings' }));
+		ws.send(JSON.stringify({ eventName: 'requestSettings' }))
 	},
-});
+})
 
-const settings = ref<Record<string, any> | null>(null);
+const settings = ref<Record<string, any> | null>(null)
 
 watch(internalSocket.data, (message) => {
-	const { eventName, data } = JSON.parse(message);
-	
+	const { eventName, data } = JSON.parse(message)
+
 	switch (eventName) {
 		case 'settings':
-			settings.value = data;
-			break;
+			settings.value = data
+			break
 		case 'setScene':
-			obs.setScene(data.sceneName);
-			break;
+			obs.setScene(data.sceneName)
+			break
 		case 'toggleSource':
-			obs.toggleSource(data.sourceName);
-			break;
+			obs.toggleSource(data.sourceName)
+			break
 		case 'toggleAudioSource':
-			obs.toggleAudioSource(data.audioSourceName);
-			break;
+			obs.toggleAudioSource(data.audioSourceName)
+			break
 		case 'setVolume':
-			obs.setVolume(data.audioSourceName, data.volume);
-			break;
+			obs.setVolume(data.audioSourceName, data.volume)
+			break
 		case 'increaseVolume':
-			obs.changeVolume(data.audioSourceName, data.step, 'increase');
-			break;
+			obs.changeVolume(data.audioSourceName, data.step, 'increase')
+			break
 		case 'decreaseVolume':
-			obs.changeVolume(data.audioSourceName, data.step, 'decrease');
-			break;
+			obs.changeVolume(data.audioSourceName, data.step, 'decrease')
+			break
 		case 'enableAudio':
-			obs.toggleAudioSource(data.audioSourceName, true);
-			break;
+			obs.toggleAudioSource(data.audioSourceName, true)
+			break
 		case 'disableAudio':
-			obs.toggleAudioSource(data.audioSourceName, false);
-			break;
+			obs.toggleAudioSource(data.audioSourceName, false)
+			break
 		case 'startStart':
-			obs.startStream();
-			break;
+			obs.startStream()
+			break
 		case 'stopStream':
-			obs.stopStream();
-			break;
+			obs.stopStream()
+			break
 	}
-});
+})
 
 watch(settings, async (settings) => {
 	if (!settings) {
-		await obs.disconnect();
-		return;
+		await obs.disconnect()
+		return
 	}
 
-	await obs.connect(settings.serverAddress, settings.serverPort, settings.serverPassword);
-	console.log('Twir obs socket opened');
+	await obs.connect(settings.serverAddress, settings.serverPort, settings.serverPassword)
+	console.log('Twir obs socket opened')
 
-	internalSocket.send(JSON.stringify({ eventName: 'obsConnected' }));
+	internalSocket.send(JSON.stringify({ eventName: 'obsConnected' }))
 
 	obs.getSources().then((sources) => {
-		if (!sources) return;
+		if (!sources) return
 		internalSocket.send(JSON.stringify({
 			eventName: 'setSources',
 			data: sources,
-		}));
-	});
+		}))
+	})
 
 	obs.getAudioSources().then((sources) => {
-		if (!sources) return;
+		if (!sources) return
 		internalSocket.send(JSON.stringify({
 			eventName: 'setAudioSources',
 			data: sources,
-		}));
-	});
+		}))
+	})
 
 	const scenesHandler = async () => {
-		const sources = await obs.getSources();
+		const sources = await obs.getSources()
 		internalSocket.send(JSON.stringify({
 			eventName: 'setSources',
 			data: sources,
-		}));
-	};
+		}))
+	}
 
 	const audioHandler = async () => {
-		const sources = await obs.getAudioSources();
+		const sources = await obs.getAudioSources()
 		internalSocket.send(JSON.stringify({
 			eventName: 'setAudioSources',
 			data: sources,
-		}));
-	};
+		}))
+	}
 
-	obs.instance
+	obs.instance.value
 		.on('SceneListChanged', scenesHandler)
 
 		.on('InputCreated', audioHandler)
@@ -117,6 +117,6 @@ watch(settings, async (settings) => {
 		.on('InputNameChanged', audioHandler)
 
 		.on('SceneItemCreated', scenesHandler)
-		.on('SceneItemRemoved', scenesHandler);
-});
+		.on('SceneItemRemoved', scenesHandler)
+})
 </script>
diff --git a/frontend/overlays/src/pages/overlays.vue b/frontend/overlays/src/pages/overlays.vue
index 720379184..4f1b28295 100644
--- a/frontend/overlays/src/pages/overlays.vue
+++ b/frontend/overlays/src/pages/overlays.vue
@@ -1,36 +1,39 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia';
-import { onMounted, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
-import htmlLayer from '@/components/html-layer.vue';
-import { useOverlays } from '@/composables/overlays/use-overlays.js';
+import htmlLayer from '@/components/html-layer.vue'
+import { useOverlays } from '@/composables/overlays/use-overlays.js'
 
-const route = useRoute();
+const route = useRoute()
 
-const overlaysStore = useOverlays();
-const { layers, parsedLayersData } = storeToRefs(overlaysStore);
+const {
+	layers,
+	parsedLayersData,
+	connectToOverlays,
+	requestLayerData,
+} = useOverlays()
 
 onMounted(() => {
-	const apiKey = route.params.apiKey as string;
-	const overlayId = route.params.overlayId as string;
-	overlaysStore.connectToOverlays(apiKey, overlayId);
-});
+	const apiKey = route.params.apiKey as string
+	const overlayId = route.params.overlayId as string
+	connectToOverlays(apiKey, overlayId)
+})
 
 watch(layers, (layers) => {
-	if (!layers.length) return;
+	if (!layers.length) return
 
 	for (const layer of layers) {
 		if (layer.type === 'HTML') {
-			overlaysStore.requestLayerData(layer.id);
+			requestLayerData(layer.id)
 
 			setInterval(
-				() => overlaysStore.requestLayerData(layer.id),
+				() => requestLayerData(layer.id),
 				layer.settings.htmlOverlayDataPollSecondsInterval * 1000,
-			);
+			)
 		}
 	}
-});
+})
 </script>
 
 <template>
diff --git a/frontend/overlays/src/pages/overlays/chat.vue b/frontend/overlays/src/pages/overlays/chat.vue
index f797b87c6..b0343e56a 100644
--- a/frontend/overlays/src/pages/overlays/chat.vue
+++ b/frontend/overlays/src/pages/overlays/chat.vue
@@ -1,53 +1,52 @@
 <script setup lang="ts">
-import { ChatBox } from '@twir/frontend-chat';
-import type { Message } from '@twir/frontend-chat';
-import { storeToRefs } from 'pinia';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { ChatBox } from '@twir/frontend-chat'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 
-import { useChatOverlaySocket } from '@/composables/chat/use-chat-overlay-socket.js';
+import type { Message } from '@twir/frontend-chat'
+
+import { useChatOverlaySocket } from '@/composables/chat/use-chat-overlay-socket.js'
 import {
 	type ChatMessage,
 	type ChatSettings,
-	useChatTmi,
 	knownBots,
-} from '@/composables/tmi/use-chat-tmi.js';
+	useChatTmi,
+} from '@/composables/tmi/use-chat-tmi.js'
 
-const route = useRoute();
+const route = useRoute()
 
-const messages = ref<Message[]>([]);
-const maxMessages = ref(30);
+const messages = ref<Message[]>([])
+const maxMessages = ref(30)
 
-const chatSocketStore = useChatOverlaySocket();
-const { settings } = storeToRefs(chatSocketStore);
+const { settings, connect, destroy } = useChatOverlaySocket()
 
-const removeMessageByInternalId = (id: string) => {
-	messages.value = messages.value.filter(m => m.internalId !== id);
-};
+function removeMessageByInternalId(id: string) {
+	messages.value = messages.value.filter(m => m.internalId !== id)
+}
 
-const removeMessageById = (id: string) => {
-	messages.value = messages.value.filter(m => m.id !== id);
-};
+function removeMessageById(id: string) {
+	messages.value = messages.value.filter(m => m.id !== id)
+}
 
-const removeMessageByUserName = (userName: string) => {
-	messages.value = messages.value.filter(m => m.sender !== userName);
-};
+function removeMessageByUserName(userName: string) {
+	messages.value = messages.value.filter(m => m.sender !== userName)
+}
 
-const onMessage = (m: ChatMessage) => {
+function onMessage(m: ChatMessage) {
 	if (m.sender && settings.value.hideBots && knownBots.has(m.sender)) {
-		return;
+		return
 	}
 
 	if (settings.value.hideCommands && m.chunks.at(0)?.value.startsWith('!')) {
-		return;
+		return
 	}
 
-	const internalId = crypto.randomUUID();
+	const internalId = crypto.randomUUID()
 
-	const showDelay = settings.value.messageShowDelay ?? settings.value.messageShowDelay;
+	const showDelay = settings.value.messageShowDelay ?? settings.value.messageShowDelay
 
 	if (messages.value.length >= maxMessages.value) {
-		messages.value = messages.value.slice(1);
+		messages.value = messages.value.slice(1)
 	}
 
 	setTimeout(() => {
@@ -57,15 +56,15 @@ const onMessage = (m: ChatMessage) => {
 			createdAt: new Date(),
 			internalId,
 			isAnnounce: m.isAnnounce ?? false,
-		});
-	}, showDelay * 1000);
+		})
+	}, showDelay * 1000)
 
-	const hideTimeout = m.messageHideTimeout ?? settings.value.messageHideTimeout;
+	const hideTimeout = m.messageHideTimeout ?? settings.value.messageHideTimeout
 
 	if (hideTimeout) {
-		setTimeout(() => removeMessageByInternalId(internalId), hideTimeout * 1000);
+		setTimeout(() => removeMessageByInternalId(internalId), hideTimeout * 1000)
 	}
-};
+}
 
 const chatSettings = computed<ChatSettings>(() => {
 	return {
@@ -80,27 +79,27 @@ const chatSettings = computed<ChatSettings>(() => {
 		onRemoveMessage: removeMessageById,
 		onRemoveMessageByUser: removeMessageByUserName,
 		onChatClear: () => {
-			messages.value = [];
+			messages.value = []
 		},
-	};
-});
+	}
+})
 
-const chatTmiStore = useChatTmi(chatSettings);
+const chatTmiStore = useChatTmi(chatSettings)
 
 onMounted(() => {
-	document.body.style.overflow = 'hidden';
+	document.body.style.overflow = 'hidden'
 
-	const apiKey = route.params.apiKey as string;
-	const overlayId = route.query.id as string;
-	chatSocketStore.connect(apiKey, overlayId);
-});
+	const apiKey = route.params.apiKey as string
+	const overlayId = route.query.id as string
+	connect(apiKey, overlayId)
+})
 
 onUnmounted(async () => {
-	chatSocketStore.destroy();
-	chatTmiStore.destroy();
-});
+	destroy()
+	chatTmiStore.destroy()
+})
 </script>
 
 <template>
-	<chat-box :messages="messages" :settings="settings" />
+	<ChatBox :messages="messages" :settings="settings" />
 </template>
diff --git a/frontend/overlays/src/pages/overlays/dudes.vue b/frontend/overlays/src/pages/overlays/dudes.vue
index fe5382fd8..4246cd53f 100644
--- a/frontend/overlays/src/pages/overlays/dudes.vue
+++ b/frontend/overlays/src/pages/overlays/dudes.vue
@@ -1,58 +1,51 @@
 <script setup lang="ts">
-import DudesOverlay from '@twirapp/dudes-vue';
-import { storeToRefs } from 'pinia';
-import { onMounted, onUnmounted, computed, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import DudesOverlay from '@twirapp/dudes-vue'
+import { computed, onMounted, onUnmounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
 import {
-	dudesSounds,
 	assetsLoaderOptions,
-} from '@/composables/dudes/dudes-config.js';
-import { useDudesIframe } from '@/composables/dudes/use-dudes-iframe.js';
-import { useDudesSettings } from '@/composables/dudes/use-dudes-settings.js';
-import { useDudesSocket } from '@/composables/dudes/use-dudes-socket.js';
-import { useDudes } from '@/composables/dudes/use-dudes.js';
-import { useChatTmi, type ChatSettings, type ChatMessage } from '@/composables/tmi/use-chat-tmi.js';
-import { normalizeDisplayName } from '@/helpers.js';
-
-const route = useRoute();
-
-const dudesStore = useDudes();
-const { dudes, isDudeOverlayReady } = storeToRefs(dudesStore);
-
-const dudesSettingStore = useDudesSettings();
-const { channelData, dudesSettings } = storeToRefs(dudesSettingStore);
-
-const dudesSocketStore = useDudesSocket();
-
-const iframe = useDudesIframe();
+	dudesSounds,
+} from '@/composables/dudes/dudes-config.js'
+import { useDudesIframe } from '@/composables/dudes/use-dudes-iframe.js'
+import { useDudesSettings } from '@/composables/dudes/use-dudes-settings.js'
+import { useDudesSocket } from '@/composables/dudes/use-dudes-socket.js'
+import { useDudes } from '@/composables/dudes/use-dudes.js'
+import { type ChatMessage, type ChatSettings, useChatTmi } from '@/composables/tmi/use-chat-tmi.js'
+import { normalizeDisplayName } from '@/helpers.js'
+
+const route = useRoute()
+const { dudes, isDudeOverlayReady, createDude } = useDudes()
+const { channelData, dudesSettings } = useDudesSettings()
+const dudesSocketStore = useDudesSocket()
+const iframe = useDudesIframe()
 
 watch([isDudeOverlayReady, dudesSettings], ([isReady, settings]) => {
-	if (!isReady || !settings || !dudes.value?.dudes) return;
-	dudes.value.dudes.updateSettings(settings.dudes);
+	if (!isReady || !settings || !dudes.value?.dudes) return
+	dudes.value.dudes.updateSettings(settings.dudes)
 
 	if (iframe.isIframe) {
-		iframe.spawnIframeDude();
+		iframe.spawnIframeDude()
 	}
-});
+})
 
 async function onMessage(chatMessage: ChatMessage): Promise<void> {
-	if (!dudes.value || chatMessage.type === 'system') return;
+	if (!dudes.value || chatMessage.type === 'system') return
 
 	if (
-		dudesSettings.value?.ignore.ignoreUsers &&
-		dudesSettings.value.ignore.users.includes(chatMessage.senderId!)
+		dudesSettings.value?.ignore.ignoreUsers
+		&& dudesSettings.value.ignore.users.includes(chatMessage.senderId!)
 	) {
-		return;
+		return
 	}
 
-	const name = normalizeDisplayName(chatMessage.senderDisplayName!, chatMessage.sender!);
-	const dude = await dudesStore.createDude({
+	const name = normalizeDisplayName(chatMessage.senderDisplayName!, chatMessage.sender!)
+	const dude = await createDude({
 		userName: name,
 		userId: chatMessage.senderId!,
 		color: chatMessage.senderColor,
-	});
-	dude?.showMessage(chatMessage.chunks);
+	})
+	dude?.showMessage(chatMessage.chunks)
 }
 
 const chatSettings = computed<ChatSettings>(() => {
@@ -66,26 +59,26 @@ const chatSettings = computed<ChatSettings>(() => {
 			sevenTv: true,
 		},
 		onMessage,
-	};
-});
+	}
+})
 
-const { destroy } = useChatTmi(chatSettings);
+const { destroy } = useChatTmi(chatSettings)
 
 onMounted(async () => {
-	const apiKey = route.params.apiKey as string;
-	const overlayId = route.params.id as string;
-	dudesSocketStore.connect(apiKey, overlayId);
-	iframe.connect();
-});
+	const apiKey = route.params.apiKey as string
+	const overlayId = route.params.id as string
+	dudesSocketStore.connect(apiKey, overlayId)
+	iframe.connect()
+})
 
 onUnmounted(() => {
-	destroy();
-	iframe.destroy();
-});
+	destroy()
+	iframe.destroy()
+})
 </script>
 
 <template>
-	<dudes-overlay
+	<DudesOverlay
 		ref="dudes"
 		:assets-loader-options="assetsLoaderOptions"
 		:sounds="dudesSounds"
diff --git a/frontend/overlays/src/pages/overlays/kappagen.vue b/frontend/overlays/src/pages/overlays/kappagen.vue
index af3310617..1ff80d670 100644
--- a/frontend/overlays/src/pages/overlays/kappagen.vue
+++ b/frontend/overlays/src/pages/overlays/kappagen.vue
@@ -1,57 +1,57 @@
 <script setup lang="ts">
-import KappagenOverlay from '@twirapp/kappagen';
-import type { Emote, KappagenAnimations, KappagenMethods } from '@twirapp/kappagen/types';
-import { storeToRefs } from 'pinia';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
-
-import { useKappagenEmotesBuilder } from '@/composables/kappagen/use-kappagen-builder.js';
-import { useKappagenIframe } from '@/composables/kappagen/use-kappagen-iframe.js';
-import { useKappagenSettings } from '@/composables/kappagen/use-kappagen-settings.js';
-import { useKappagenOverlaySocket } from '@/composables/kappagen/use-kappagen-socket.js';
-import { useChatTmi, type ChatSettings, type ChatMessage } from '@/composables/tmi/use-chat-tmi.js';
-
-const kappagen = ref<KappagenMethods>();
-const route = useRoute();
-const { kappagenSettings, overlaySettings } = storeToRefs(useKappagenSettings());
-
-const playAnimation = (emotes: Emote[], animation: KappagenAnimations) => {
-	if (!kappagen.value) return Promise.resolve();
-	return kappagen.value.playAnimation(emotes, animation);
-};
-
-const showEmotes = (emotes: Emote[]) => {
-	if (!kappagen.value) return;
-	kappagen.value.showEmotes(emotes);
-};
-
-const emotesBuilder = useKappagenEmotesBuilder();
+import KappagenOverlay from '@twirapp/kappagen'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+import type { Emote, KappagenAnimations, KappagenMethods } from '@twirapp/kappagen/types'
+
+import { useKappagenEmotesBuilder } from '@/composables/kappagen/use-kappagen-builder.js'
+import { useKappagenIframe } from '@/composables/kappagen/use-kappagen-iframe.js'
+import { useKappagenSettings } from '@/composables/kappagen/use-kappagen-settings.js'
+import { useKappagenOverlaySocket } from '@/composables/kappagen/use-kappagen-socket.js'
+import { type ChatMessage, type ChatSettings, useChatTmi } from '@/composables/tmi/use-chat-tmi.js'
+
+const kappagen = ref<KappagenMethods>()
+const route = useRoute()
+const { kappagenSettings, overlaySettings } = useKappagenSettings()
+
+function playAnimation(emotes: Emote[], animation: KappagenAnimations) {
+	if (!kappagen.value) return Promise.resolve()
+	return kappagen.value.playAnimation(emotes, animation)
+}
+
+function showEmotes(emotes: Emote[]) {
+	if (!kappagen.value) return
+	kappagen.value.showEmotes(emotes)
+}
+
+const emotesBuilder = useKappagenEmotesBuilder()
 
 const socket = useKappagenOverlaySocket({
 	playAnimation,
 	showEmotes,
 	emotesBuilder,
-});
+})
 
 const iframe = useKappagenIframe({
 	playAnimation,
 	showEmotes,
 	clear: () => {
-		kappagen.value?.clear();
+		kappagen.value?.clear()
 	},
-});
+})
 
 function onMessage(msg: ChatMessage): void {
-	if (msg.type === 'system' || !overlaySettings.value?.enableSpawn) return;
+	if (msg.type === 'system' || !overlaySettings.value?.enableSpawn) return
 
-	const firstChunk = msg.chunks.at(0)!;
+	const firstChunk = msg.chunks.at(0)!
 	if (firstChunk.type === 'text' && firstChunk.value.startsWith('!')) {
-		return;
+		return
 	}
 
-	const generatedEmotes = emotesBuilder.buildSpawnEmotes(msg.chunks);
-	if (!generatedEmotes.length) return;
-	showEmotes(generatedEmotes);
+	const generatedEmotes = emotesBuilder.buildSpawnEmotes(msg.chunks)
+	if (!generatedEmotes.length) return
+	showEmotes(generatedEmotes)
 }
 
 const chatSettings = computed<ChatSettings>(() => {
@@ -64,27 +64,27 @@ const chatSettings = computed<ChatSettings>(() => {
 			sevenTv: overlaySettings.value?.emotes?.sevenTvEnabled,
 		},
 		onMessage,
-	};
-});
+	}
+})
 
-const { destroy } = useChatTmi(chatSettings);
+const { destroy } = useChatTmi(chatSettings)
 
 onMounted(() => {
 	if (window.frameElement) {
-		iframe.create();
+		iframe.create()
 	} else {
-		const apiKey = route.params.apiKey as string;
-		socket.connect(apiKey);
+		const apiKey = route.params.apiKey as string
+		socket.connect(apiKey)
 	}
-});
+})
 
 onUnmounted(() => {
-	iframe.destroy();
-	socket.destroy();
-	destroy();
-});
+	iframe.destroy()
+	socket.destroy()
+	destroy()
+})
 </script>
 
 <template>
-	<kappagen-overlay ref="kappagen" :config="kappagenSettings" :is-rave="overlaySettings?.enableRave" />
+	<KappagenOverlay ref="kappagen" :config="kappagenSettings" :is-rave="overlaySettings?.enableRave" />
 </template>
diff --git a/frontend/public-page/package.json b/frontend/public-page/package.json
index 73fe4dabb..6e165bfcb 100644
--- a/frontend/public-page/package.json
+++ b/frontend/public-page/package.json
@@ -23,7 +23,6 @@
 		"clsx": "2.1.0",
 		"graphql": "16.8.1",
 		"lucide-vue-next": "0.368.0",
-		"pinia": "2.1.7",
 		"radix-vue": "1.7.0",
 		"tailwind-merge": "2.2.2",
 		"tailwindcss-animate": "1.0.7",
diff --git a/frontend/public-page/src/api/use-commands.ts b/frontend/public-page/src/api/use-commands.ts
index e1960bcd7..ddf4b4311 100644
--- a/frontend/public-page/src/api/use-commands.ts
+++ b/frontend/public-page/src/api/use-commands.ts
@@ -1,23 +1,22 @@
-import { useQuery } from '@tanstack/vue-query';
-import { storeToRefs } from 'pinia';
+import { useQuery } from '@tanstack/vue-query'
 
-import { unprotectedClient } from '@/api/twirp.js';
-import { useStreamerProfile } from '@/api/use-streamer-profile';
+import { unprotectedClient } from '@/api/twirp.js'
+import { useStreamerProfile } from '@/api/use-streamer-profile'
 
-export const useCommands = () => {
-	const { data: profile } = storeToRefs(useStreamerProfile());
+export function useCommands() {
+	const { data: profile } = useStreamerProfile()
 
 	return useQuery({
 		queryKey: ['commands', profile],
 		queryFn: async () => {
-			const id = profile.value?.twitchGetUserByName?.id;
-			if (!id) return { commands: [] };
+			const id = profile.value?.twitchGetUserByName?.id
+			if (!id) return { commands: [] }
 
 			const call = await unprotectedClient.getChannelCommands({
 				channelId: id,
-			});
+			})
 
-			return call.response;
+			return call.response
 		},
-	});
-};
+	})
+}
diff --git a/frontend/public-page/src/api/use-song-requests.ts b/frontend/public-page/src/api/use-song-requests.ts
index bb0c3d10f..c29349914 100644
--- a/frontend/public-page/src/api/use-song-requests.ts
+++ b/frontend/public-page/src/api/use-song-requests.ts
@@ -1,22 +1,21 @@
-import { useQuery } from '@tanstack/vue-query';
-import { storeToRefs } from 'pinia';
+import { useQuery } from '@tanstack/vue-query'
 
-import { unprotectedClient } from '@/api/twirp.js';
-import { useStreamerProfile } from '@/api/use-streamer-profile';
+import { unprotectedClient } from '@/api/twirp.js'
+import { useStreamerProfile } from '@/api/use-streamer-profile'
 
-export const useSongsQueue = () => {
-	const { data: profile } = storeToRefs(useStreamerProfile());
+export function useSongsQueue() {
+	const { data: profile } = useStreamerProfile()
 
 	return useQuery({
 		queryKey: ['songsQueue', profile],
 		queryFn: async () => {
 			const call = await unprotectedClient.getSongsQueue({
 				channelId: profile.value!.twitchGetUserByName!.id,
-			});
+			})
 
-			return call.response;
+			return call.response
 		},
 		refetchInterval: 1000,
 		enabled: () => !!profile.value,
-	});
-};
+	})
+}
diff --git a/frontend/public-page/src/api/use-streamer-profile.ts b/frontend/public-page/src/api/use-streamer-profile.ts
index 1f4586c93..b29a27486 100644
--- a/frontend/public-page/src/api/use-streamer-profile.ts
+++ b/frontend/public-page/src/api/use-streamer-profile.ts
@@ -1,21 +1,21 @@
-import { useQuery } from '@urql/vue';
-import { defineStore, storeToRefs } from 'pinia';
-import { computed, unref, watch } from 'vue';
-import { useRouter } from 'vue-router';
+import { useQuery } from '@urql/vue'
+import { createGlobalState } from '@vueuse/core'
+import { computed, unref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 
-import { graphql } from '@/gql';
-import { routeNames } from '@/router';
+import { graphql } from '@/gql'
+import { routeNames } from '@/router'
 
-export const useStreamerProfile = defineStore('streamerProfile', () => {
-	const router = useRouter();
+export const useStreamerProfile = createGlobalState(() => {
+	const router = useRouter()
 	const streamerName = computed(() => {
-		const name = router.currentRoute.value.params.channelName;
+		const name = router.currentRoute.value.params.channelName
 		if (typeof name !== 'string') {
-			return '';
+			return ''
 		}
 
-		return name;
-	});
+		return name
+	})
 
 	const request = useQuery({
 		query: graphql(`
@@ -32,22 +32,22 @@ export const useStreamerProfile = defineStore('streamerProfile', () => {
 		`),
 		variables: {
 			get userName() {
-				return unref(streamerName);
+				return unref(streamerName)
 			},
 		},
-	});
+	})
 
 	watch([streamerName, request.error, request.data], ([name, error, data]) => {
 		if (!name || error || data?.twitchGetUserByName?.notFound) {
-			router.push({ name: routeNames.notFound });
+			router.push({ name: routeNames.notFound })
 		}
-	});
+	})
 
-	return request;
-});
+	return request
+})
 
-export const useStreamerPublicSettings = defineStore('streamerPublicSettings', () => {
-	const { data } = storeToRefs(useStreamerProfile());
+export const useStreamerPublicSettings = createGlobalState(() => {
+	const { data } = useStreamerProfile()
 
 	return useQuery({
 		query: graphql(`
@@ -63,11 +63,11 @@ export const useStreamerPublicSettings = defineStore('streamerPublicSettings', (
 		`),
 		variables: {
 			get userId() {
-				return data.value?.twitchGetUserByName?.id || '';
+				return data.value?.twitchGetUserByName?.id || ''
 			},
 		},
-	});
-});
+	})
+})
 
 // export const useStreamerPublicSettings = () => {
 // 	const { isLoading, data } = useStreamerProfile();
diff --git a/frontend/public-page/src/api/use-tts-settings.ts b/frontend/public-page/src/api/use-tts-settings.ts
index 63ea32334..90d2458ad 100644
--- a/frontend/public-page/src/api/use-tts-settings.ts
+++ b/frontend/public-page/src/api/use-tts-settings.ts
@@ -1,37 +1,36 @@
-import { useQuery } from '@tanstack/vue-query';
-import { storeToRefs } from 'pinia';
+import { useQuery } from '@tanstack/vue-query'
 
-import { unprotectedClient } from '@/api/twirp.js';
-import { useStreamerProfile } from '@/api/use-streamer-profile';
+import { unprotectedClient } from '@/api/twirp.js'
+import { useStreamerProfile } from '@/api/use-streamer-profile'
 
-export const useTTSChannelSettings = () => {
-	const { data: profile } = storeToRefs(useStreamerProfile());
+export function useTTSChannelSettings() {
+	const { data: profile } = useStreamerProfile()
 
 	return useQuery({
 		queryKey: ['channelTTSSettings', profile],
 		queryFn: async () => {
 			const call = await unprotectedClient.getTTSChannelSettings({
 				channelId: profile.value!.twitchGetUserByName!.id,
-			});
+			})
 
-			return call.response;
+			return call.response
 		},
 		enabled: () => !!profile.value,
-	});
-};
+	})
+}
 
-export const useTTSUsersSettings = () => {
-	const { data: profile } = storeToRefs(useStreamerProfile());
+export function useTTSUsersSettings() {
+	const { data: profile } = useStreamerProfile()
 
 	return useQuery({
 		queryKey: ['usersTTSSettings', profile],
 		queryFn: async () => {
 			const call = await unprotectedClient.getTTSUsersSettings({
 				channelId: profile.value!.twitchGetUserByName!.id,
-			});
+			})
 
-			return call.response;
+			return call.response
 		},
 		enabled: () => !!profile.value,
-	});
-};
+	})
+}
diff --git a/frontend/public-page/src/composables/use-community.ts b/frontend/public-page/src/composables/use-community.ts
index 45a572353..642b4ba7f 100644
--- a/frontend/public-page/src/composables/use-community.ts
+++ b/frontend/public-page/src/composables/use-community.ts
@@ -1,48 +1,47 @@
-import { useQuery } from '@tanstack/vue-query';
+import { useQuery } from '@tanstack/vue-query'
 import {
 	GetUsersRequest_Order,
 	GetUsersRequest_SortBy,
-} from '@twir/api/messages/community/community';
-import { storeToRefs } from 'pinia';
-import { type ComputedRef, type Ref, unref } from 'vue';
+} from '@twir/api/messages/community/community'
+import { type ComputedRef, type Ref, unref } from 'vue'
 
-import { unprotectedClient } from '@/api/twirp.js';
-import { useStreamerProfile } from '@/api/use-streamer-profile';
+import { unprotectedClient } from '@/api/twirp.js'
+import { useStreamerProfile } from '@/api/use-streamer-profile.js'
 
 const sortBy = {
-	'watched': GetUsersRequest_SortBy.Watched,
-	'messages': GetUsersRequest_SortBy.Messages,
-	'emotes': GetUsersRequest_SortBy.Emotes,
-	'usedChannelPoints': GetUsersRequest_SortBy.UsedChannelPoints,
-};
+	watched: GetUsersRequest_SortBy.Watched,
+	messages: GetUsersRequest_SortBy.Messages,
+	emotes: GetUsersRequest_SortBy.Emotes,
+	usedChannelPoints: GetUsersRequest_SortBy.UsedChannelPoints,
+}
 
 export type SortKey = keyof typeof sortBy
 
-export type GetCommunityUsersOpts = {
-	limit: number;
-	page: number;
-	desc: boolean;
-	sortBy: SortKey;
+export interface GetCommunityUsersOpts {
+	limit: number
+	page: number
+	desc: boolean
+	sortBy: SortKey
 }
 
-export const useCommunityUsers = (options: Ref<GetCommunityUsersOpts> | ComputedRef<GetCommunityUsersOpts>) => {
-	const { data: profile } = storeToRefs(useStreamerProfile());
+export function useCommunityUsers(options: Ref<GetCommunityUsersOpts> | ComputedRef<GetCommunityUsersOpts>) {
+	const { data: profile } = useStreamerProfile()
 
 	return useQuery({
 		queryKey: ['communityUsers', options, profile],
 		queryFn: async () => {
-			const rawOpts = unref(options);
+			const rawOpts = unref(options)
 
-			const order = rawOpts.desc ? GetUsersRequest_Order.Desc : GetUsersRequest_Order.Asc;
+			const order = rawOpts.desc ? GetUsersRequest_Order.Desc : GetUsersRequest_Order.Asc
 			const call = await unprotectedClient.communityGetUsers({
 				limit: rawOpts.limit,
 				page: rawOpts.page,
 				order,
 				sortBy: sortBy[rawOpts.sortBy],
 				channelId: profile.value!.twitchGetUserByName!.id,
-			}, { timeout: 5000 });
-			return call.response;
+			}, { timeout: 5000 })
+			return call.response
 		},
 		enabled: () => !!profile.value,
-	});
-};
+	})
+}
diff --git a/frontend/public-page/src/layout/layout-streamer-profile.vue b/frontend/public-page/src/layout/layout-streamer-profile.vue
index 605990e35..9e2e04849 100644
--- a/frontend/public-page/src/layout/layout-streamer-profile.vue
+++ b/frontend/public-page/src/layout/layout-streamer-profile.vue
@@ -1,19 +1,17 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia';
-import { watch } from 'vue';
+import { watch } from 'vue'
 
-import { useStreamerProfile, useStreamerPublicSettings } from '@/api/use-streamer-profile';
-import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
-import { Skeleton } from '@/components/ui/skeleton';
+import { useStreamerProfile, useStreamerPublicSettings } from '@/api/use-streamer-profile'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Skeleton } from '@/components/ui/skeleton'
 
-const { data: profile, fetching } = storeToRefs(useStreamerProfile());
-const { data: publicSettings } = storeToRefs(useStreamerPublicSettings());
+const { data: profile, fetching } = useStreamerProfile()
+const { data: publicSettings } = useStreamerPublicSettings()
 
 watch(profile, (v) => {
-	if (!v) return;
-
-	window.document.title = `Twir - ${v.twitchGetUserByName?.displayName}`;
-});
+	if (!v) return
+	window.document.title = `Twir - ${v.twitchGetUserByName?.displayName}`
+})
 </script>
 
 <template>
diff --git a/frontend/public-page/src/main.ts b/frontend/public-page/src/main.ts
index 026e80387..63e489c22 100644
--- a/frontend/public-page/src/main.ts
+++ b/frontend/public-page/src/main.ts
@@ -1,19 +1,16 @@
-import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query';
-import urql from '@urql/vue';
-import { createPinia } from 'pinia';
-import { createApp } from 'vue';
+import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
+import urql from '@urql/vue'
+import { createApp } from 'vue'
 
-import MainApp from './app.vue';
-import { router } from './router';
+import MainApp from './app.vue'
+import { router } from './router'
 
-import './assets/index.css';
-import { urqlClient } from '@/urql-client';
+import './assets/index.css'
+import { urqlClient } from '@/urql-client'
 
-const pinia = createPinia();
 const app = createApp(MainApp)
-	.use(pinia)
 	.use(urql, urqlClient)
-	.use(router);
+	.use(router)
 
 VueQueryPlugin.install(app, {
 	queryClient: new QueryClient({
@@ -26,6 +23,6 @@ VueQueryPlugin.install(app, {
 			},
 		},
 	}),
-});
+})
 
-app.mount('#app');
+app.mount('#app')
diff --git a/frontend/public-page/src/pages/tts.vue b/frontend/public-page/src/pages/tts.vue
index fbad7caf7..6245bcfe2 100644
--- a/frontend/public-page/src/pages/tts.vue
+++ b/frontend/public-page/src/pages/tts.vue
@@ -1,52 +1,51 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia';
-import { computed } from 'vue';
+import { computed } from 'vue'
 
-import { useStreamerProfile } from '@/api/use-streamer-profile';
-import { useTTSChannelSettings, useTTSUsersSettings } from '@/api/use-tts-settings';
-import TableRowsSkeleton from '@/components/TableRowsSkeleton.vue';
+import { useStreamerProfile } from '@/api/use-streamer-profile'
+import { useTTSChannelSettings, useTTSUsersSettings } from '@/api/use-tts-settings'
+import TableRowsSkeleton from '@/components/TableRowsSkeleton.vue'
 import {
 	Table,
-	TableBody, TableCell,
+	TableBody,
+	TableCell,
 	TableHead,
 	TableHeader,
 	TableRow,
-} from '@/components/ui/table';
-import { useTwitchGetUsers } from '@/composables/use-twitch-users';
-import UserRow from '@/pages/tts/user-row.vue';
+} from '@/components/ui/table'
+import { useTwitchGetUsers } from '@/composables/use-twitch-users'
+import UserRow from '@/pages/tts/user-row.vue'
 
-
-const { data: profile } = storeToRefs(useStreamerProfile());
+const { data: profile } = useStreamerProfile()
 const {
 	data: channelSettings,
 	isLoading: isChannelSettingsLoading,
-} = useTTSChannelSettings();
+} = useTTSChannelSettings()
 const {
 	data: usersSettings,
 	isLoading: isUsersSettingsLoading,
-} = useTTSUsersSettings();
+} = useTTSUsersSettings()
 
-const usersIds = computed(() => usersSettings.value?.settings.map(s => s.userId) ?? []);
-const { data: users, isLoading: isTwitchUsersLoading } = useTwitchGetUsers(usersIds);
+const usersIds = computed(() => usersSettings.value?.settings.map(s => s.userId) ?? [])
+const { data: users, isLoading: isTwitchUsersLoading } = useTwitchGetUsers(usersIds)
 
 const isLoading = computed(() => {
-	return isChannelSettingsLoading.value || isUsersSettingsLoading.value || isTwitchUsersLoading.value;
-});
+	return isChannelSettingsLoading.value || isUsersSettingsLoading.value || isTwitchUsersLoading.value
+})
 
 const usersWithProfiles = computed(() => {
-	if (!users.value?.users) return [];
+	if (!users.value?.users) return []
 
 	return users.value.users.map(u => {
-		const settings = usersSettings.value?.settings.find(s => s.userId === u.id);
-		if (!settings) return;
+		const settings = usersSettings.value?.settings.find(s => s.userId === u.id)
+		if (!settings) return null
 
 		return {
 			name: u.displayName,
 			avatar: u.profileImageUrl,
 			...settings,
-		};
-	}).filter(Boolean);
-});
+		}
+	}).filter(Boolean)
+})
 </script>
 
 <template>
@@ -71,7 +70,7 @@ const usersWithProfiles = computed(() => {
 			</TableHeader>
 			<Transition name="table-rows" appear mode="out-in">
 				<TableBody v-if="!usersWithProfiles || isLoading">
-					<table-rows-skeleton :rows="20" :colspan="5" />
+					<TableRowsSkeleton :rows="20" :colspan="5" />
 				</TableBody>
 				<TableBody v-else-if="!users?.users?.length">
 					<TableRow>
@@ -83,7 +82,7 @@ const usersWithProfiles = computed(() => {
 					</TableRow>
 				</TableBody>
 				<TableBody v-else>
-					<user-row
+					<UserRow
 						v-if="channelSettings && profile?.twitchGetUserByName"
 						:name="profile.twitchGetUserByName.displayName"
 						:avatar="profile.twitchGetUserByName.profileImageUrl"
@@ -92,7 +91,7 @@ const usersWithProfiles = computed(() => {
 						:voice="channelSettings.voice"
 					/>
 
-					<user-row
+					<UserRow
 						v-for="(user) of usersWithProfiles"
 						:key="user!.userId"
 						:name="user!.name"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5cad333dd..6779e63af 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -239,9 +239,6 @@ importers:
       nested-css-to-flat:
         specifier: 1.0.5
         version: 1.0.5
-      pinia:
-        specifier: 2.1.7
-        version: 2.1.7(typescript@5.4.5)(vue@3.4.21(typescript@5.4.5))
       plyr:
         specifier: 3.7.8
         version: 3.7.8
@@ -439,9 +436,6 @@ importers:
       obs-websocket-js:
         specifier: 5.0.5
         version: 5.0.5
-      pinia:
-        specifier: 2.1.7
-        version: 2.1.7(typescript@5.4.5)(vue@3.4.21(typescript@5.4.5))
       tmi.js:
         specifier: 1.8.5
         version: 1.8.5
@@ -515,9 +509,6 @@ importers:
       lucide-vue-next:
         specifier: 0.368.0
         version: 0.368.0(vue@3.4.21(typescript@5.4.5))
-      pinia:
-        specifier: 2.1.7
-        version: 2.1.7(typescript@5.4.5)(vue@3.4.21(typescript@5.4.5))
       radix-vue:
         specifier: 1.7.0
         version: 1.7.0(vue@3.4.21(typescript@5.4.5))
@@ -5688,18 +5679,6 @@ packages:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
-  pinia@2.1.7:
-    resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==}
-    peerDependencies:
-      '@vue/composition-api': ^1.4.0
-      typescript: '>=4.4.4'
-      vue: ^2.6.14 || ^3.3.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-      typescript:
-        optional: true
-
   pino-abstract-transport@1.1.0:
     resolution: {integrity: sha512-lsleG3/2a/JIWUtf9Q5gUNErBqwIu1tUKTT3dUzaf5DySw9ra1wcqKjJjLX1VTY64Wk1eEOYsVGSaGfCK85ekA==}
 
@@ -13119,14 +13098,6 @@ snapshots:
 
   pify@4.0.1: {}
 
-  pinia@2.1.7(typescript@5.4.5)(vue@3.4.21(typescript@5.4.5)):
-    dependencies:
-      '@vue/devtools-api': 6.6.1
-      vue: 3.4.21(typescript@5.4.5)
-      vue-demi: 0.14.7(vue@3.4.21(typescript@5.4.5))
-    optionalDependencies:
-      typescript: 5.4.5
-
   pino-abstract-transport@1.1.0:
     dependencies:
       readable-stream: 4.5.2