diff --git a/frontend/dashboard/src/components/alerts/modal.vue b/frontend/dashboard/src/components/alerts/modal.vue
index d67fe442a..259c90c03 100644
--- a/frontend/dashboard/src/components/alerts/modal.vue
+++ b/frontend/dashboard/src/components/alerts/modal.vue
@@ -1,214 +1,216 @@
 <script setup lang="ts">
-import { IconPlayerPlay, IconTrash } from '@tabler/icons-vue';
+import { IconPlayerPlay, IconTrash } from '@tabler/icons-vue'
 import {
-  type FormInst,
-  type FormItemRule,
-  type FormRules,
-  NButton,
-  NForm,
-  NFormItem,
-  NInput,
-  NModal,
-  NSlider,
-  NSpace,
-  NDivider,
-  NSelect,
-} from 'naive-ui';
-import { computed, onMounted, ref, toRaw } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import { type EditableAlert } from './types.js';
-import rewardsSelector from '../rewardsSelector.vue';
+	type FormInst,
+	type FormItemRule,
+	type FormRules,
+	NButton,
+	NDivider,
+	NForm,
+	NFormItem,
+	NInput,
+	NModal,
+	NSelect,
+	NSlider,
+	NSpace
+} from 'naive-ui'
+import { storeToRefs } from 'pinia'
+import { computed, onMounted, ref, toRaw } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import rewardsSelector from '../rewardsSelector.vue'
+
+import type { EditableAlert } from './types.js'
 
 import {
-  useAlertsManager,
-  useFiles,
-  useProfile, useTwitchGetUsers,
-} from '@/api';
-import { useCommandsApi } from '@/api/commands/commands';
-import { useGreetingsApi } from '@/api/greetings';
-import { useKeywordsApi } from '@/api/keywords';
-import FilesPicker from '@/components/files/files.vue';
-import { playAudio } from '@/helpers/index.js';
-import { storeToRefs } from 'pinia';
+	useAlertsManager,
+	useFiles,
+	useProfile,
+	useTwitchGetUsers
+} from '@/api'
+import { useCommandsApi } from '@/api/commands/commands'
+import { useGreetingsApi } from '@/api/greetings'
+import { useKeywordsApi } from '@/api/keywords'
+import FilesPicker from '@/components/files/files.vue'
+import { playAudio } from '@/helpers/index.js'
 
 const props = defineProps<{
-  alert?: EditableAlert | null
-}>();
+	alert?: EditableAlert | null
+}>()
 const emits = defineEmits<{
-  close: []
-}>();
+	close: []
+}>()
 
-const formRef = ref<FormInst | null>(null);
+const formRef = ref<FormInst | null>(null)
 const formValue = ref<EditableAlert>({
-  id: '',
-  name: '',
-  audioId: undefined,
-  audioVolume: 100,
-  commandIds: [],
-  rewardIds: [],
-  greetingsIds: [],
-  keywordsIds: [],
-});
+	id: '',
+	name: '',
+	audioId: undefined,
+	audioVolume: 100,
+	commandIds: [],
+	rewardIds: [],
+	greetingsIds: [],
+	keywordsIds: []
+})
 
 onMounted(() => {
-  if (!props.alert) return;
-  formValue.value = structuredClone(toRaw(props.alert));
-});
+	if (!props.alert) return
+	formValue.value = structuredClone(toRaw(props.alert))
+})
 
-const { t } = useI18n();
+const { t } = useI18n()
 
 const rules: FormRules = {
-  name: {
-    trigger: ['input', 'blur'],
-    validator: (_: FormItemRule, value: string) => {
-      if (!value || !value.length || value.length > 30) {
-        return new Error(t('alerts.validations.name'));
-      }
-
-      return true;
-    },
-  },
-};
-
-const manager = useAlertsManager();
-const creator = manager.create;
-const updater = manager.update;
+	name: {
+		trigger: ['input', 'blur'],
+		validator: (_: FormItemRule, value: string) => {
+			if (!value || !value.length || value.length > 30) {
+				return new Error(t('alerts.validations.name'))
+			}
+
+			return true
+		}
+	}
+}
+
+const manager = useAlertsManager()
+const creator = manager.create
+const updater = manager.update
 
 async function save() {
-  if (!formRef.value || !formValue.value) return;
-  await formRef.value.validate();
+	if (!formRef.value || !formValue.value) return
+	await formRef.value.validate()
 
-  const data = formValue.value;
+	const data = formValue.value
 
-  if (data.id) {
-    await updater.mutateAsync({
-      ...data,
-      id: data.id!,
-    });
-  } else {
-    await creator.mutateAsync(data);
-  }
+	if (data.id) {
+		await updater.mutateAsync({
+			...data,
+			id: data.id!
+		})
+	} else {
+		await creator.mutateAsync(data)
+	}
 
-  emits('close');
+	emits('close')
 }
 
-const { data: files } = useFiles();
-const selectedAudio = computed(() => files.value?.files.find(f => f.id === formValue.value.audioId));
-const showAudioModal = ref(false);
+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 } = storeToRefs(useProfile())
 
 async function testAudio() {
-  if (!selectedAudio.value?.id || !profile.value) return;
+	if (!selectedAudio.value?.id || !profile.value) return
 
-  const query = new URLSearchParams({
-    channel_id: profile.value.selectedDashboardId,
-    file_id: selectedAudio.value.id,
-  });
+	const query = new URLSearchParams({
+		channel_id: profile.value.selectedDashboardId,
+		file_id: selectedAudio.value.id
+	})
 
-  const req = await fetch(`${window.location.origin}/api/files/?${query}`);
-  if (!req.ok) {
-    console.error(await req.text());
-    return;
-  }
+	const req = await fetch(`${window.location.origin}/api-old/files/?${query}`)
+	if (!req.ok) {
+		console.error(await req.text())
+		return
+	}
 
-  await playAudio(await req.arrayBuffer(), formValue.value.audioVolume);
+	await playAudio(await req.arrayBuffer(), formValue.value.audioVolume)
 }
 
-const commandsManager = useCommandsApi();
-const { data: commands } = commandsManager.useQueryCommands();
+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();
-const { data: greetings } = greetingsManager.useQueryGreetings();
-const greetingsUsersIds = computed(() => greetings.value?.greetings.map(g => g.userId) ?? []);
-const { data: twitchUsers } = useTwitchGetUsers({ ids: greetingsUsersIds });
+const greetingsManager = useGreetingsApi()
+const { data: greetings } = greetingsManager.useQueryGreetings()
+const greetingsUsersIds = computed(() => greetings.value?.greetings.map(g => g.userId) ?? [])
+const { data: twitchUsers } = useTwitchGetUsers({ ids: greetingsUsersIds })
 const greetingsSelectOptions = computed(() => {
-  if (!greetingsUsersIds.value.length || !twitchUsers.value?.users.length) return [];
-  return greetings.value?.greetings.map(g => {
-    const twitchUser = twitchUsers.value.users.find(u => u.id === g.userId);
-    return { label: twitchUser?.login ?? g.userId, value: g.id };
-  });
-});
-
-const keywordsManager = useKeywordsApi();
-const { data: keywords } = keywordsManager.useQueryKeywords();
+	if (!greetingsUsersIds.value.length || !twitchUsers.value?.users.length) return []
+	return greetings.value?.greetings.map(g => {
+		const twitchUser = twitchUsers.value.users.find(u => u.id === g.userId)
+		return { label: twitchUser?.login ?? g.userId, value: g.id }
+	})
+})
+
+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>
 
 <template>
-	<n-form
+	<NForm
 		ref="formRef"
 		:model="formValue"
 		:rules="rules"
 	>
-		<n-space vertical class="w-full">
-			<n-form-item label="Name" path="name" show-require-mark>
-				<n-input v-model:value="formValue.name" :maxlength="30" />
-			</n-form-item>
+		<NSpace vertical class="w-full">
+			<NFormItem label="Name" path="name" show-require-mark>
+				<NInput v-model:value="formValue.name" :maxlength="30" />
+			</NFormItem>
 
-			<n-divider />
+			<NDivider />
 
-			<n-form-item :label="t('alerts.trigger.commands')" path="commandIds">
-				<n-select
+			<NFormItem :label="t('alerts.trigger.commands')" path="commandIds">
+				<NSelect
 					v-model:value="formValue.commandIds"
 					:fallback-option="false"
 					filterable
 					multiple
 					:options="commandsSelectOptions"
 				/>
-			</n-form-item>
+			</NFormItem>
 
-			<n-form-item :label="t('alerts.trigger.rewards')" path="rewardIds">
+			<NFormItem :label="t('alerts.trigger.rewards')" path="rewardIds">
 				<rewardsSelector v-model="formValue.rewardIds" multiple />
-			</n-form-item>
+			</NFormItem>
 
-			<n-form-item :label="t('alerts.trigger.keywords')" path="rewardIds">
-				<n-select
+			<NFormItem :label="t('alerts.trigger.keywords')" path="rewardIds">
+				<NSelect
 					v-model:value="formValue.keywordsIds"
 					:fallback-option="false"
 					filterable
 					multiple
 					:options="keywordsSelectOptions"
 				/>
-			</n-form-item>
+			</NFormItem>
 
-			<n-form-item :label="t('alerts.trigger.greetings')" path="rewardIds">
-				<n-select
+			<NFormItem :label="t('alerts.trigger.greetings')" path="rewardIds">
+				<NSelect
 					v-model:value="formValue.greetingsIds"
 					:fallback-option="false"
 					filterable
 					multiple
 					:options="greetingsSelectOptions"
 				/>
-			</n-form-item>
+			</NFormItem>
 
-			<n-divider />
+			<NDivider />
 
-			<n-form-item :label="t('alerts.select.audio')">
+			<NFormItem :label="t('alerts.select.audio')">
 				<div class="flex gap-2.5 w-[85%]">
-					<n-button class="overflow-hidden text-nowrap" block type="info" @click="showAudioModal = true">
+					<NButton class="overflow-hidden text-nowrap" block type="info" @click="showAudioModal = true">
 						{{ selectedAudio?.name ?? t('sharedButtons.select') }}
-					</n-button>
-					<n-button
+					</NButton>
+					<NButton
 						:disabled="!formValue.audioId" text type="error"
 						@click="formValue.audioId = undefined"
 					>
 						<IconTrash />
-					</n-button>
-					<n-button :disabled="!formValue.audioId" text type="info" @click="testAudio">
+					</NButton>
+					<NButton :disabled="!formValue.audioId" text type="info" @click="testAudio">
 						<IconPlayerPlay />
-					</n-button>
+					</NButton>
 				</div>
-			</n-form-item>
+			</NFormItem>
 
-			<n-form-item :label="t('alerts.audioVolume', { volume: formValue.audioVolume })">
-				<n-slider
+			<NFormItem :label="t('alerts.audioVolume', { volume: formValue.audioVolume })">
+				<NSlider
 					v-model:value="formValue.audioVolume"
 					:step="1"
 					:min="1"
@@ -217,27 +219,27 @@ const keywordsSelectOptions = computed(() => keywords.value?.keywords
 					:show-tooltip="false"
 					:tooltip="false"
 				/>
-			</n-form-item>
+			</NFormItem>
 
-			<n-form-item :label="t('alerts.select.image')">
-				<n-button block type="info" disabled>
+			<NFormItem :label="t('alerts.select.image')">
+				<NButton block type="info" disabled>
 					Soon...
-				</n-button>
-			</n-form-item>
+				</NButton>
+			</NFormItem>
 
-			<n-form-item :label="t('alerts.select.text')">
-				<n-button block type="info" disabled>
+			<NFormItem :label="t('alerts.select.text')">
+				<NButton block type="info" disabled>
 					Soon...
-				</n-button>
-			</n-form-item>
-		</n-space>
+				</NButton>
+			</NFormItem>
+		</NSpace>
 
-		<n-button secondary type="success" block @click="save">
+		<NButton secondary type="success" block @click="save">
 			{{ t('sharedButtons.save') }}
-		</n-button>
-	</n-form>
+		</NButton>
+	</NForm>
 
-	<n-modal
+	<NModal
 		v-model:show="showAudioModal"
 		:mask-closable="false"
 		:segmented="true"
@@ -250,7 +252,7 @@ const keywordsSelectOptions = computed(() => keywords.value?.keywords
 		}"
 		:on-close="() => showAudioModal = false"
 	>
-		<files-picker
+		<FilesPicker
 			mode="picker"
 			tab="audios"
 			@select="(id) => {
@@ -263,5 +265,5 @@ const keywordsSelectOptions = computed(() => keywords.value?.keywords
 				}
 			}"
 		/>
-	</n-modal>
+	</NModal>
 </template>