diff --git a/src/components/CalculatorTabs.vue b/src/components/CalculatorTabs.vue
index fb1bc32d..01fd74b7 100755
--- a/src/components/CalculatorTabs.vue
+++ b/src/components/CalculatorTabs.vue
@@ -7,7 +7,7 @@
         class="tab"
         :class="{ active: index === activeIndex }"
         :title="calculatorTitle(calculator.attacker, calculator.defender)"
-        @click="$emit('selectTab', index)"
+        @click="emit('selectTab', index)"
       >
         <span class="tab-title">
           {{ calculatorTitle(calculator.attacker, calculator.defender) }}
@@ -16,7 +16,7 @@
         <button
           class="tab-close-button"
           :class="{ disabled: calculators.length < 2 }"
-          @click="$emit('deleteTab', index)"
+          @click="emit('deleteTab', index)"
         />
       </li>
     </ul>
@@ -25,48 +25,36 @@
       class="tab-add-button"
       :class="{ disabled: calculators.length >= 7 }"
       title="Add new Calculator tab"
-      @click="$emit('addTab')"
+      @click="emit('addTab')"
     />
   </section>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue'
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
-export default defineComponent({
-  name: 'CalculatorTabs',
-  props: {
-    calculators: {
-      type: Array as PropType<Array<{ attacker: string | null; defender: string | null }>>,
-      required: true,
-    },
-    activeIndex: {
-      type: Number,
-      required: true,
-    },
-  },
-  emits: ['addTab', 'selectTab', 'deleteTab'],
-  setup() {
-    const { t } = useI18n()
-    const route = useRoute()
-
-    const calculatorTitle = (attacker: string | null, defender: string | null) => {
-      if (attacker && defender) return `${attacker} — ${defender}`
-      else if (attacker) return attacker
-      else if (defender) return defender
-      else if (route.path === '/damage') return t('pages.damageCalculator')
-      else if (route.path === '/magic') return t('pages.magicCalculator')
-      else return t('pages.damageCalculator')
-    }
-
-    return {
-      calculatorTitle,
-    }
-  },
-})
+defineProps<{
+  calculators: Array<{ attacker: string | null; defender: string | null }>
+  activeIndex: number
+}>()
+const emit = defineEmits<{
+  addTab: []
+  selectTab: [index: number]
+  deleteTab: [index: number]
+}>()
+
+const { t } = useI18n()
+const route = useRoute()
+
+const calculatorTitle = (attacker: string | null, defender: string | null) => {
+  if (attacker && defender) return `${attacker} — ${defender}`
+  else if (attacker) return attacker
+  else if (defender) return defender
+  else if (route.path === '/damage') return t('pages.damageCalculator')
+  else if (route.path === '/magic') return t('pages.magicCalculator')
+  else return t('pages.damageCalculator')
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/DamageCalculator.vue b/src/components/DamageCalculator.vue
index 00533c5c..301ebf71 100644
--- a/src/components/DamageCalculator.vue
+++ b/src/components/DamageCalculator.vue
@@ -130,7 +130,7 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import PickCreatureButton from '@/components/PickCreatureButton.vue'
 import SelectHero from '@/components/SelectHero.vue'
 import SelectTerrain from '@/components/SelectTerrain.vue'
@@ -143,117 +143,82 @@ import { HeroInstance } from '@/models/Hero'
 import type { Spell } from '@/models/Spell'
 import type { Terrain } from '@/models/Terrain'
 import { useStore } from '@/store'
-import { computed, defineAsyncComponent, defineComponent, reactive, type PropType } from 'vue'
+import { computed, defineAsyncComponent, reactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-export default defineComponent({
-  name: 'DamageCalculator',
-  components: {
-    PickCreatureButton,
-    SelectHero,
-    SelectTerrain,
-    ObjectPortrait: defineAsyncComponent(() => import('@/components/ObjectPortrait.vue')),
-    BaseInputNumber: defineAsyncComponent(() => import('@/components/base/BaseInputNumber.vue')),
-    InputHeroStat: defineAsyncComponent(() => import('@/components/damageCalculator/InputHeroStat.vue')),
-    SelectSkillButtons: defineAsyncComponent(() => import('@/components/damageCalculator/SelectSkillButtons.vue')),
-    BaseCheckbox: defineAsyncComponent(() => import('@/components/base/BaseCheckbox.vue')),
-  },
-  props: {
-    battleValue: {
-      type: Object as PropType<Battle>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { t } = useI18n()
-    const store = useStore()
-
-    const battle = reactive(props.battleValue)
-    const heroes = computed(() => store.heroes)
-    const terrains = computed(() => store.terrains)
-    const levels = computed(() => store.levels)
-    const skills = computed(() => {
-      const damageCalculatorSkillsIds = [
-        SecondarySkills.Offense,
-        SecondarySkills.AirMagic,
-        SecondarySkills.Armorer,
-        SecondarySkills.FireMagic,
-        SecondarySkills.Archery,
-        SecondarySkills.EarthMagic,
-        SecondarySkills.Artillery,
-        SecondarySkills.WaterMagic,
-      ]
-      const damageCalculatorSkills = ['air', 'archery', 'armorer', 'artillery', 'earth', 'fire', 'offense', 'water']
-      const skills = {}
-      store.skills
-        .filter((skill) => damageCalculatorSkillsIds.includes(skill.id))
-        .forEach((skill, index) => (skills[damageCalculatorSkills[index]] = skill.name))
-      return skills
-    })
-    const effects = computed(() => [
-      store.attackPositiveEffects,
-      store.defensePositiveEffects,
-      store.attackNegativeEffects,
-    ])
-
-    // Return string of total damage or total kills
-    const getTotalResultString = (min: number, max: number, average: number) => {
-      if (min !== max) return `${min} — ${max} (~ ${average})`
-      else if (min === max) return min
-      else return 0
-    }
+const ObjectPortrait = defineAsyncComponent(() => import('@/components/ObjectPortrait.vue'))
+const BaseInputNumber = defineAsyncComponent(() => import('@/components/base/BaseInputNumber.vue'))
+const InputHeroStat = defineAsyncComponent(() => import('@/components/damageCalculator/InputHeroStat.vue'))
+const SelectSkillButtons = defineAsyncComponent(() => import('@/components/damageCalculator/SelectSkillButtons.vue'))
+const BaseCheckbox = defineAsyncComponent(() => import('@/components/base/BaseCheckbox.vue'))
+
+const props = defineProps<{
+  battleValue: Battle
+}>()
+
+const { t } = useI18n()
+const store = useStore()
+
+const battle = reactive(props.battleValue)
+const heroes = computed(() => store.heroes)
+const terrains = computed(() => store.terrains)
+const levels = computed(() => store.levels)
+const skills = computed(() => {
+  const damageCalculatorSkillsIds = [
+    SecondarySkills.Offense,
+    SecondarySkills.AirMagic,
+    SecondarySkills.Armorer,
+    SecondarySkills.FireMagic,
+    SecondarySkills.Archery,
+    SecondarySkills.EarthMagic,
+    SecondarySkills.Artillery,
+    SecondarySkills.WaterMagic,
+  ]
+  const damageCalculatorSkills = ['air', 'archery', 'armorer', 'artillery', 'earth', 'fire', 'offense', 'water']
+  const skills = {}
+  store.skills
+    .filter((skill) => damageCalculatorSkillsIds.includes(skill.id))
+    .forEach((skill, index) => (skills[damageCalculatorSkills[index]] = skill.name))
+  return skills
+})
+const effects = computed(() => [store.attackPositiveEffects, store.defensePositiveEffects, store.attackNegativeEffects])
 
-    const onSelectCreature = (side: DamageCalculatorBattleSide, creature: Creature) => {
-      const creatureInstance = new CreatureInstance(creature)
-      if (side.activeCreature) creatureInstance.count = side.activeCreature.count
-      side.activeCreature = creatureInstance
-      side.creatures[0] = creatureInstance
-    }
+// Return string of total damage or total kills
+const getTotalResultString = (min: number, max: number, average: number) => {
+  if (min !== max) return `${min} — ${max} (~ ${average})`
+  else if (min === max) return min
+  else return 0
+}
 
-    const onSelectHero = (side: DamageCalculatorBattleSide, hero: Hero) => {
-      side.hero = new HeroInstance(hero)
-    }
+const onSelectCreature = (side: DamageCalculatorBattleSide, creature: Creature) => {
+  const creatureInstance = new CreatureInstance(creature)
+  if (side.activeCreature) creatureInstance.count = side.activeCreature.count
+  side.activeCreature = creatureInstance
+  side.creatures[0] = creatureInstance
+}
 
-    const onSelectCreatureEffect = (side: DamageCalculatorBattleSide, spell: Spell, effectEnabled: boolean) => {
-      if (!side.activeCreature) return
+const onSelectHero = (side: DamageCalculatorBattleSide, hero: Hero) => {
+  side.hero = new HeroInstance(hero)
+}
 
-      if (!effectEnabled) {
-        side.activeCreature.effects.push(spell)
-      } else {
-        side.activeCreature.effects = side.activeCreature.effects.filter(
-          (creatureEffect) => creatureEffect.id !== spell.id,
-        )
-      }
-    }
+const onSelectCreatureEffect = (side: DamageCalculatorBattleSide, spell: Spell, effectEnabled: boolean) => {
+  if (!side.activeCreature) return
 
-    const isEffectEnabled = (side: DamageCalculatorBattleSide, spell: Spell) => {
-      return side.activeCreature?.effects.findIndex((creatureEffect) => creatureEffect.id === spell.id) !== -1
-    }
+  if (!effectEnabled) {
+    side.activeCreature.effects.push(spell)
+  } else {
+    side.activeCreature.effects = side.activeCreature.effects.filter((creatureEffect) => creatureEffect.id !== spell.id)
+  }
+}
 
-    const onSelectTerrain = (terrain: Terrain | null) => {
-      battle.attacker.terrain = terrain
-      battle.defender.terrain = terrain
-    }
+const isEffectEnabled = (side: DamageCalculatorBattleSide, spell: Spell) => {
+  return side.activeCreature?.effects.findIndex((creatureEffect) => creatureEffect.id === spell.id) !== -1
+}
 
-    return {
-      t,
-
-      battle,
-      heroes,
-      terrains,
-      levels,
-      skills,
-      effects,
-
-      getTotalResultString,
-      onSelectCreature,
-      onSelectHero,
-      onSelectCreatureEffect,
-      isEffectEnabled,
-      onSelectTerrain,
-    }
-  },
-})
+const onSelectTerrain = (terrain: Terrain | null) => {
+  battle.attacker.terrain = terrain
+  battle.defender.terrain = terrain
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/HowToUse.vue b/src/components/HowToUse.vue
index 50989708..794d4257 100644
--- a/src/components/HowToUse.vue
+++ b/src/components/HowToUse.vue
@@ -22,9 +22,9 @@
   </teleport>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useTemplateRefsList } from '@vueuse/core'
-import { computed, defineComponent, ref, watch, type PropType } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import BaseButton from './base/BaseButton.vue'
 import BaseTooltip from './base/BaseTooltip.vue'
@@ -40,129 +40,109 @@ interface HowToUseStepProp {
   }>
 }
 
-export default defineComponent({
-  name: 'HowToUse',
-  components: { CloseButton, BaseButton, BaseTooltip },
-  props: {
-    firstStep: {
-      type: Number,
-      default: 0,
-    },
-    steps: {
-      type: Array as PropType<Array<HowToUseStepProp>>,
-      default: () => [],
-    },
+const props = withDefaults(
+  defineProps<{
+    firstStep?: number
+    steps?: Array<HowToUseStepProp>
+  }>(),
+  {
+    firstStep: 0,
+    steps: () => [],
   },
-  setup(props) {
-    const { t } = useI18n()
+)
 
-    const isStarted = ref(false)
-    const step = ref(props.firstStep)
-    const refs = useTemplateRefsList<HTMLDivElement>()
+const { t } = useI18n()
 
-    const startTour = () => {
-      isStarted.value = true
-      if (step.value === props.firstStep) displayStep(props.firstStep)
-      step.value = props.firstStep
-    }
+const isStarted = ref(false)
+const step = ref(props.firstStep)
+const refs = useTemplateRefsList<HTMLDivElement>()
+
+const startTour = () => {
+  isStarted.value = true
+  if (step.value === props.firstStep) displayStep(props.firstStep)
+  step.value = props.firstStep
+}
+
+const triggerStep = () => {
+  returnElementStyles(step.value)
+  step.value++
+}
 
-    const triggerStep = () => {
-      returnElementStyles(step.value)
+const displayStep = (stepToDisplay: number) => {
+  const currentStep = props.steps[stepToDisplay]
+  currentStep.targets.forEach((target) => {
+    const element = document.querySelector(target.node) as HTMLElement
+    if (!element) {
       step.value++
+      return
     }
 
-    const displayStep = (stepToDisplay: number) => {
-      const currentStep = props.steps[stepToDisplay]
-      currentStep.targets.forEach((target) => {
-        const element = document.querySelector(target.node) as HTMLElement
-        if (!element) {
-          step.value++
-          return
-        }
-
-        const elementStyles = getComputedStyle(element)
-        element.style.setProperty('z-index', '1001')
-
-        if (
-          elementStyles.backgroundColor === 'rgb(21, 21, 21)' ||
-          elementStyles.backgroundColor === 'rgba(0, 0, 0, 0)'
-        ) {
-          element.style.setProperty('background-color', 'rgba(255, 255, 255, 1)')
-          element.style.setProperty('color', 'rgba(0, 0, 0, 1)')
-        } else if (elementStyles.backgroundColor === 'rgb(255, 255, 255)') {
-          element.style.setProperty('background-color', 'rgba(0, 0, 0, 0.5)')
-          element.style.setProperty('color', 'rgba(255, 255, 255, 1)')
-        }
-
-        if (target.eventTriggerNode) {
-          const eventTriggerNode = document.querySelector(target.eventTriggerNode) as HTMLElement
-          if (!eventTriggerNode) return
-          eventTriggerNode.addEventListener('click', triggerStep, { once: true })
-        }
-      })
+    const elementStyles = getComputedStyle(element)
+    element.style.setProperty('z-index', '1001')
+
+    if (elementStyles.backgroundColor === 'rgb(21, 21, 21)' || elementStyles.backgroundColor === 'rgba(0, 0, 0, 0)') {
+      element.style.setProperty('background-color', 'rgba(255, 255, 255, 1)')
+      element.style.setProperty('color', 'rgba(0, 0, 0, 1)')
+    } else if (elementStyles.backgroundColor === 'rgb(255, 255, 255)') {
+      element.style.setProperty('background-color', 'rgba(0, 0, 0, 0.5)')
+      element.style.setProperty('color', 'rgba(255, 255, 255, 1)')
     }
 
-    const returnElementStyles = (stepToClear: number) => {
-      props.steps[stepToClear].targets.forEach((target) => {
-        const element = document.querySelector(target.node) as HTMLElement
-        if (!element) return
-        element.style.setProperty('z-index', '')
-        element.style.setProperty('background-color', '')
-        element.style.setProperty('color', 'unset')
-      })
+    if (target.eventTriggerNode) {
+      const eventTriggerNode = document.querySelector(target.eventTriggerNode) as HTMLElement
+      if (!eventTriggerNode) return
+      eventTriggerNode.addEventListener('click', triggerStep, { once: true })
     }
+  })
+}
 
-    watch(step, (newStep) => {
-      if (newStep > props.steps.length - 1) {
-        isStarted.value = false
-      } else {
-        displayStep(newStep)
-      }
-    })
-
-    watch(isStarted, (newIsStarted) => {
-      if (!newIsStarted && step.value <= props.steps.length - 1) returnElementStyles(step.value)
-    })
-
-    const tourContainers = computed(() => {
-      if (!isStarted.value) return []
-      const currentStep = props.steps[step.value]
-      const stepsWithText = currentStep.targets.filter((target) => target.text)
-      return stepsWithText.map((target, index) => {
-        const node = document.querySelector(
-          target.eventTriggerNode ? target.eventTriggerNode : target.node,
-        ) as HTMLElement
-        if (!node) return
-
-        const buttons: Array<{ text: string; action: () => unknown }> = []
-
-        if (step.value === props.steps.length - 1 && index === stepsWithText.length - 1) {
-          buttons.push({
-            text: t('components.howToUse.finishTheTour'),
-            action: () => {
-              triggerStep()
-            },
-          })
-        }
-
-        return {
-          text: target.text,
-          node,
-          buttons,
-        }
-      })
-    })
+const returnElementStyles = (stepToClear: number) => {
+  props.steps[stepToClear].targets.forEach((target) => {
+    const element = document.querySelector(target.node) as HTMLElement
+    if (!element) return
+    element.style.setProperty('z-index', '')
+    element.style.setProperty('background-color', '')
+    element.style.setProperty('color', 'unset')
+  })
+}
 
-    return {
-      t,
+watch(step, (newStep) => {
+  if (newStep > props.steps.length - 1) {
+    isStarted.value = false
+  } else {
+    displayStep(newStep)
+  }
+})
 
-      isStarted,
-      tourContainers,
-      refs,
+watch(isStarted, (newIsStarted) => {
+  if (!newIsStarted && step.value <= props.steps.length - 1) returnElementStyles(step.value)
+})
 
-      startTour,
+const tourContainers = computed(() => {
+  if (!isStarted.value) return []
+  const currentStep = props.steps[step.value]
+  const stepsWithText = currentStep.targets.filter((target) => target.text)
+  return stepsWithText.map((target, index) => {
+    const node = document.querySelector(target.eventTriggerNode ? target.eventTriggerNode : target.node) as HTMLElement
+    if (!node) return
+
+    const buttons: Array<{ text: string; action: () => unknown }> = []
+
+    if (step.value === props.steps.length - 1 && index === stepsWithText.length - 1) {
+      buttons.push({
+        text: t('components.howToUse.finishTheTour'),
+        action: () => {
+          triggerStep()
+        },
+      })
     }
-  },
+
+    return {
+      text: target.text,
+      node,
+      buttons,
+    }
+  })
 })
 </script>
 
diff --git a/src/components/MagicCalculator.vue b/src/components/MagicCalculator.vue
index 55642b72..4a51b5f2 100755
--- a/src/components/MagicCalculator.vue
+++ b/src/components/MagicCalculator.vue
@@ -120,7 +120,7 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import PickCreatureButton from '@/components/PickCreatureButton.vue'
 import SelectHero from '@/components/SelectHero.vue'
 import { Battle, getOppositeBattleSide, type BattleSide, type DamageCalculatorBattleSide } from '@/models/Battle'
@@ -131,7 +131,7 @@ import type { Hero } from '@/models/Hero'
 import { HeroInstance } from '@/models/Hero'
 import type { Spell } from '@/models/Spell'
 import { useStore } from '@/store'
-import { computed, defineAsyncComponent, defineComponent, reactive, ref, watch, type PropType } from 'vue'
+import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const spellsTargets = {
@@ -139,191 +139,151 @@ const spellsTargets = {
   self: [Spells.AnimateDead, Spells.Cure, Spells.Resurrection],
 }
 
-export default defineComponent({
-  name: 'MagicCalculator',
-  components: {
-    PickCreatureButton,
-    SelectHero,
-    ObjectPortrait: defineAsyncComponent(() => import('@/components/ObjectPortrait.vue')),
-    BaseInputNumber: defineAsyncComponent(() => import('@/components/base/BaseInputNumber.vue')),
-    InputHeroStat: defineAsyncComponent(() => import('@/components/damageCalculator/InputHeroStat.vue')),
-    SelectSkillButtons: defineAsyncComponent(() => import('@/components/damageCalculator/SelectSkillButtons.vue')),
-    SpellCard: defineAsyncComponent(() => import('@/components/SpellCard.vue')),
-    BaseSelect: defineAsyncComponent(() => import('@/components/base/BaseSelect.vue')),
-  },
-  props: {
-    battleValue: {
-      type: Object as PropType<Battle>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { t } = useI18n()
-    const store = useStore()
-
-    const battle = reactive(props.battleValue)
-
-    const heroes = computed(() => store.heroes)
-    const levels = computed(() => store.levels)
-    const spells = computed(() => {
-      const allowedSpells = [1, 7, 24, 40, 58, 8, 9, 29, 42, 62, 11, 15, 47, 48, 64, 70, 51]
-      return store.spells.filter((spell) => allowedSpells.includes(spell.id))
-    })
-    const skills = computed(() => {
-      const skills = {
-        air: '',
-        earth: '',
-        fire: '',
-        water: '',
-        sorcery: '',
-      }
-      const magicSkillsIds = [
-        SecondarySkills.FireMagic,
-        SecondarySkills.EarthMagic,
-        SecondarySkills.AirMagic,
-        SecondarySkills.Sorcery,
-        SecondarySkills.WaterMagic,
-        SecondarySkills.Interference,
-      ]
-      const skillsNames = ['air', 'earth', 'fire', 'sorcery', 'water', 'interference']
-      store.skills
-        .filter((skill) => magicSkillsIds.indexOf(skill.id) !== -1)
-        .forEach((skill, index) => (skills[skillsNames[index]] = skill.name))
-      return skills
-    })
-
-    const spellsEffects = computed(() => {
-      const effectsIds = [5, 22, 46, 60]
-      return store.spells.filter((spell) => effectsIds.includes(spell.id))
-    })
-
-    const spellDamages = ref({
-      attacker: 0,
-      defender: 0,
-    })
-
-    const selectedSpell = ref<{ attacker: Spell | null; defender: Spell | null }>({
-      attacker: null,
-      defender: null,
-    })
-
-    const hasOtherSideCreature = (side: BattleSide) => {
-      const oppositeSide = getOppositeBattleSide(side)
-      return !!battle[oppositeSide].activeCreature
-    }
+const ObjectPortrait = defineAsyncComponent(() => import('@/components/ObjectPortrait.vue'))
+const BaseInputNumber = defineAsyncComponent(() => import('@/components/base/BaseInputNumber.vue'))
+const InputHeroStat = defineAsyncComponent(() => import('@/components/damageCalculator/InputHeroStat.vue'))
+const SelectSkillButtons = defineAsyncComponent(() => import('@/components/damageCalculator/SelectSkillButtons.vue'))
+const SpellCard = defineAsyncComponent(() => import('@/components/SpellCard.vue'))
+const BaseSelect = defineAsyncComponent(() => import('@/components/base/BaseSelect.vue'))
+
+const props = defineProps<{
+  battleValue: Battle
+}>()
+const { t } = useI18n()
+const store = useStore()
+
+const battle = reactive(props.battleValue)
+
+const heroes = computed(() => store.heroes)
+const levels = computed(() => store.levels)
+const spells = computed(() => {
+  const allowedSpells = [1, 7, 24, 40, 58, 8, 9, 29, 42, 62, 11, 15, 47, 48, 64, 70, 51]
+  return store.spells.filter((spell) => allowedSpells.includes(spell.id))
+})
+const skills = computed(() => {
+  const skills = {
+    air: '',
+    earth: '',
+    fire: '',
+    water: '',
+    sorcery: '',
+  }
+  const magicSkillsIds = [
+    SecondarySkills.FireMagic,
+    SecondarySkills.EarthMagic,
+    SecondarySkills.AirMagic,
+    SecondarySkills.Sorcery,
+    SecondarySkills.WaterMagic,
+    SecondarySkills.Interference,
+  ]
+  const skillsNames = ['air', 'earth', 'fire', 'sorcery', 'water', 'interference']
+  store.skills
+    .filter((skill) => magicSkillsIds.indexOf(skill.id) !== -1)
+    .forEach((skill, index) => (skills[skillsNames[index]] = skill.name))
+  return skills
+})
 
-    const onSelectCreature = (side: DamageCalculatorBattleSide, creature: Creature) => {
-      const creatureInstance = new CreatureInstance(creature)
-      if (side.activeCreature) creatureInstance.count = side.activeCreature.count
-      side.activeCreature = creatureInstance
-      side.creatures[0] = creatureInstance
-    }
+const spellsEffects = computed(() => {
+  const effectsIds = [5, 22, 46, 60]
+  return store.spells.filter((spell) => effectsIds.includes(spell.id))
+})
 
-    const onSelectHero = (side: DamageCalculatorBattleSide, hero: Hero) => {
-      side.hero = new HeroInstance(hero)
-    }
+const spellDamages = ref({
+  attacker: 0,
+  defender: 0,
+})
 
-    const onSelectCreatureEffect = (side: DamageCalculatorBattleSide, spell: Spell) => {
-      if (!side.activeCreature) return
-
-      const isEnabled = side.activeCreature.effects.find((effect) => effect.id === spell.id)
-      if (!isEnabled) {
-        side.activeCreature.effects.push(spell)
-      } else {
-        side.activeCreature.effects = side.activeCreature.effects.filter(
-          (creatureEffect) => creatureEffect.id !== spell.id,
-        )
-      }
-    }
+const selectedSpell = ref<{ attacker: Spell | null; defender: Spell | null }>({
+  attacker: null,
+  defender: null,
+})
 
-    watch(
-      [battle.attacker, battle.defender, selectedSpell],
-      () => {
-        if (selectedSpell.value.attacker) calculateSpell('attacker', selectedSpell.value.attacker)
-        if (selectedSpell.value.defender) calculateSpell('defender', selectedSpell.value.defender)
-      },
-      {
-        deep: true,
-      },
-    )
-
-    const onSelectSpell = (sideName: BattleSide, spell: Spell) => {
-      if (selectedSpell.value[sideName]?.id === spell.id) {
-        selectedSpell.value[sideName] = null
-        spellDamages.value[sideName] = 0
-        return
-      } else {
-        selectedSpell.value[sideName] = spell
-      }
-    }
+const hasOtherSideCreature = (side: BattleSide) => {
+  const oppositeSide = getOppositeBattleSide(side)
+  return !!battle[oppositeSide].activeCreature
+}
 
-    const calculateSpell = (sideName: BattleSide, spell: Spell) => {
-      if (!battle.attacker.activeCreature || !battle.defender.activeCreature) return
-      const oppositeSide = getOppositeBattleSide(sideName)
-      const attacker = battle[sideName]
-      const defender = battle[oppositeSide]
-
-      if (spellsTargets.all.includes(spell.id)) {
-        spellDamages.value[sideName] = battle.cast(attacker, defender, defender.activeCreature, spell)
-        spellDamages.value[oppositeSide] = battle.cast(
-          defender,
-          attacker,
-          battle[sideName as string].activeCreature,
-          spell,
-        )
-      } else if (spellsTargets.self.includes(spell.id)) {
-        spellDamages.value[sideName] = battle.cast(attacker, attacker, battle[sideName as string].activeCreature, spell)
-      } else {
-        spellDamages.value[sideName] = battle.cast(attacker, defender, defender.activeCreature, spell)
-      }
-    }
+const onSelectCreature = (side: DamageCalculatorBattleSide, creature: Creature) => {
+  const creatureInstance = new CreatureInstance(creature)
+  if (side.activeCreature) creatureInstance.count = side.activeCreature.count
+  side.activeCreature = creatureInstance
+  side.creatures[0] = creatureInstance
+}
 
-    const getSpellKillsValue = (sideName: BattleSide) => {
-      const oppositeSide = getOppositeBattleSide(sideName)
-      const kills = Math.floor(spellDamages.value[sideName] / battle[oppositeSide].activeCreature?.health)
-      return Math.abs(kills) || 0
-    }
+const onSelectHero = (side: DamageCalculatorBattleSide, hero: Hero) => {
+  side.hero = new HeroInstance(hero)
+}
 
-    const getSpellTargets = (sideName: BattleSide) => {
-      const oppositeSide = getOppositeBattleSide(sideName)
-      const spellId = selectedSpell.value[sideName]?.id
-      const attacker = battle[sideName].activeCreature?.name || ''
-      const defender = battle[oppositeSide].activeCreature?.name || ''
-
-      if (!spellId) {
-        return ''
-      } else if (spellsTargets.all.includes(spellId)) {
-        return `${defender}, ${attacker}`
-      } else if (spellsTargets.self.includes(spellId)) {
-        return attacker
-      } else {
-        return defender
-      }
-    }
+const onSelectCreatureEffect = (side: DamageCalculatorBattleSide, spell: Spell) => {
+  if (!side.activeCreature) return
 
-    return {
-      t,
-
-      battle,
-      heroes,
-      levels,
-      skills,
-      spells,
-
-      spellDamages,
-      selectedSpell,
-      spellsEffects,
-
-      onSelectCreature,
-      onSelectHero,
-      onSelectCreatureEffect,
-      onSelectSpell,
-      getSpellKillsValue,
-      getSpellTargets,
-      hasOtherSideCreature,
-    }
+  const isEnabled = side.activeCreature.effects.find((effect) => effect.id === spell.id)
+  if (!isEnabled) {
+    side.activeCreature.effects.push(spell)
+  } else {
+    side.activeCreature.effects = side.activeCreature.effects.filter((creatureEffect) => creatureEffect.id !== spell.id)
+  }
+}
+
+watch(
+  [battle.attacker, battle.defender, selectedSpell],
+  () => {
+    if (selectedSpell.value.attacker) calculateSpell('attacker', selectedSpell.value.attacker)
+    if (selectedSpell.value.defender) calculateSpell('defender', selectedSpell.value.defender)
   },
-})
+  {
+    deep: true,
+  },
+)
+
+const onSelectSpell = (sideName: BattleSide, spell: Spell) => {
+  if (selectedSpell.value[sideName]?.id === spell.id) {
+    selectedSpell.value[sideName] = null
+    spellDamages.value[sideName] = 0
+    return
+  } else {
+    selectedSpell.value[sideName] = spell
+  }
+}
+
+const calculateSpell = (sideName: BattleSide, spell: Spell) => {
+  if (!battle.attacker.activeCreature || !battle.defender.activeCreature) return
+  const oppositeSide = getOppositeBattleSide(sideName)
+  const attacker = battle[sideName]
+  const defender = battle[oppositeSide]
+
+  if (spellsTargets.all.includes(spell.id)) {
+    spellDamages.value[sideName] = battle.cast(attacker, defender, defender.activeCreature, spell)
+    spellDamages.value[oppositeSide] = battle.cast(defender, attacker, battle[sideName as string].activeCreature, spell)
+  } else if (spellsTargets.self.includes(spell.id)) {
+    spellDamages.value[sideName] = battle.cast(attacker, attacker, battle[sideName as string].activeCreature, spell)
+  } else {
+    spellDamages.value[sideName] = battle.cast(attacker, defender, defender.activeCreature, spell)
+  }
+}
+
+const getSpellKillsValue = (sideName: BattleSide) => {
+  const oppositeSide = getOppositeBattleSide(sideName)
+  const kills = Math.floor(spellDamages.value[sideName] / battle[oppositeSide].activeCreature?.health)
+  return Math.abs(kills) || 0
+}
+
+const getSpellTargets = (sideName: BattleSide) => {
+  const oppositeSide = getOppositeBattleSide(sideName)
+  const spellId = selectedSpell.value[sideName]?.id
+  const attacker = battle[sideName].activeCreature?.name || ''
+  const defender = battle[oppositeSide].activeCreature?.name || ''
+
+  if (!spellId) {
+    return ''
+  } else if (spellsTargets.all.includes(spellId)) {
+    return `${defender}, ${attacker}`
+  } else if (spellsTargets.self.includes(spellId)) {
+    return attacker
+  } else {
+    return defender
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/ObjectPortrait.vue b/src/components/ObjectPortrait.vue
index cda875a2..44c81114 100644
--- a/src/components/ObjectPortrait.vue
+++ b/src/components/ObjectPortrait.vue
@@ -11,39 +11,27 @@
   </picture>
 </template>
 
-<script lang="ts">
-import { defineComponent, type PropType } from 'vue'
-
-export default defineComponent({
-  name: 'ObjectPortrait',
-  props: {
-    file: {
-      type: Object as PropType<{ name: string | number; alt?: string }>,
-      required: true,
-    },
-    folder: {
-      type: String,
-      required: true,
-    },
-    width: {
-      type: [Number, String],
-      default: 'auto',
-    },
-    height: {
-      type: [Number, String],
-      default: 'auto',
-    },
-    lazyLoading: {
-      type: Boolean,
-      default: true,
-    },
-    sizes: {
-      type: String,
-      default: null,
-    },
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    file: { name: string | number; alt?: string }
+    folder: string
+    width?: string | number
+    height?: string | number
+    lazyLoading?: boolean
+    sizes?: string
+  }>(),
+  {
+    lazyLoading: true,
+    width: 'auto',
+    height: 'auto',
+    sizes: undefined,
   },
-  emits: ['click', 'clickPicture'],
-})
+)
+defineEmits<{
+  click: [name: string | number]
+  clickPicture: []
+}>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/PageFooter.vue b/src/components/PageFooter.vue
index 48d7a18f..cf0d2da9 100644
--- a/src/components/PageFooter.vue
+++ b/src/components/PageFooter.vue
@@ -35,25 +35,16 @@
     </div>
   </footer>
 
-  <RouterView v-slot="{ route }">
-    <BaseDialog
-      v-if="route.path === staticCurrentRoute && route.hash === '#about'"
-      show
-      size="small"
-      @close="router.push(route.path)"
-    >
+  <RouterView v-slot="{ route: { hash, path } }">
+    <BaseDialog v-if="path === staticCurrentRoute && hash === '#about'" show size="small" @close="router.back">
       <template #content>
         <slot name="aboutModal"></slot>
       </template>
     </BaseDialog>
   </RouterView>
 
-  <RouterView v-slot="{ route }">
-    <BaseDialog
-      v-if="route.path === staticCurrentRoute && route.hash === '#license'"
-      show
-      @close="router.push(route.path)"
-    >
+  <RouterView v-slot="{ route: { hash, path } }">
+    <BaseDialog v-if="path === staticCurrentRoute && hash === '#license'" show @close="router.back">
       <template #content>
         <p>{{ t('components.pageFooter.license.1') }}</p>
         <i18n-t keypath="components.pageFooter.license.2" tag="p">
@@ -69,65 +60,50 @@
   </RouterView>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import i18n from '@/i18n'
 import { useStore } from '@/store'
 import { isDark, useLocale } from '@/utilities'
-import { defineAsyncComponent, defineComponent, watch, type PropType } from 'vue'
+import { defineAsyncComponent, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
-
-export default defineComponent({
-  name: 'PageFooter',
-  components: {
-    BaseDialog: defineAsyncComponent(() => import('@/components/base/BaseDialog.vue')),
+const BaseDialog = defineAsyncComponent(() => import('@/components/base/BaseDialog.vue'))
+
+withDefaults(
+  defineProps<{
+    about?: { hide?: boolean; text?: string | null }
+    border?: string
+  }>(),
+  {
+    about: () => ({ hide: false, text: null }),
+    border: '1px solid var(--color-border)',
   },
-  props: {
-    about: {
-      type: Object as PropType<{ hide?: boolean; text?: string }>,
-      default: () => ({ hide: false, text: null }),
-    },
-    border: {
-      type: String,
-      default: '1px solid var(--color-border)',
-    },
+)
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+const locale = useLocale()
+
+const staticCurrentRoute = route.path
+const locales = [
+  {
+    name: 'en',
+    value: 'English',
   },
-  setup() {
-    const { t } = useI18n()
-    const route = useRoute()
-    const router = useRouter()
-    const store = useStore()
-    const locale = useLocale()
-
-    const staticCurrentRoute = route.path
-    const locales = [
-      {
-        name: 'en',
-        value: 'English',
-      },
-      {
-        name: 'ru',
-        value: 'Русский',
-      },
-    ]
-
-    watch(i18n.global.locale, (newLocale) => {
-      store.loadData(newLocale)
-      document.title = t(route.meta.title as string)
-    })
-
-    return {
-      t,
-      isDark,
-      router,
-      staticCurrentRoute,
-
-      locales,
-      locale,
-      appVersion: import.meta.env.__APP_VERSION__,
-    }
+  {
+    name: 'ru',
+    value: 'Русский',
   },
+]
+
+watch(i18n.global.locale, (newLocale) => {
+  store.loadData(newLocale)
+  document.title = t(route.meta.title as string)
 })
+
+const appVersion = import.meta.env.__APP_VERSION__
 </script>
 
 <style lang="scss">
diff --git a/src/components/PickCreatureButton.vue b/src/components/PickCreatureButton.vue
index 4ba88f87..cea99218 100644
--- a/src/components/PickCreatureButton.vue
+++ b/src/components/PickCreatureButton.vue
@@ -6,28 +6,16 @@
   <SelectUnitModal :show="showSelectUnitModal" @close="showSelectUnitModal = false" @select="$emit('select', $event)" />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { BattleSide } from '@/models/Battle'
-import { defineAsyncComponent, defineComponent, ref, type PropType } from 'vue'
+import type { Creature } from '@/models/Creature'
+import { defineAsyncComponent, ref } from 'vue'
+const SelectUnitModal = defineAsyncComponent(() => import('@/components/SelectUnitModal.vue'))
 
-export default defineComponent({
-  name: 'PickCreatureButton',
-  components: {
-    SelectUnitModal: defineAsyncComponent(() => import('@/components/SelectUnitModal.vue')),
-  },
-  props: {
-    color: {
-      type: String as PropType<BattleSide>,
-      required: true,
-    },
-  },
-  emits: ['click', 'select'],
-  setup() {
-    return {
-      showSelectUnitModal: ref(false),
-    }
-  },
-})
+defineProps<{ color: BattleSide }>()
+defineEmits<{ click: []; select: [creature: Creature] }>()
+
+const showSelectUnitModal = ref(false)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SelectHero.vue b/src/components/SelectHero.vue
index ab047409..85cbce3f 100644
--- a/src/components/SelectHero.vue
+++ b/src/components/SelectHero.vue
@@ -31,37 +31,17 @@
   </BaseSelect>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import BaseSelect from '@/components/base/BaseSelect.vue'
 import type { Hero, HeroInstance } from '@/models/Hero'
-import { defineAsyncComponent, defineComponent, type PropType } from 'vue'
+import { defineAsyncComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
+const ObjectPortrait = defineAsyncComponent(() => import('@/components/ObjectPortrait.vue'))
 
-export default defineComponent({
-  name: 'SelectHero',
-  components: {
-    BaseSelect,
-    ObjectPortrait: defineAsyncComponent(() => import('@/components/ObjectPortrait.vue')),
-  },
-  props: {
-    heroes: {
-      type: Array as PropType<Array<Hero>>,
-      required: true,
-    },
-    value: {
-      type: null as unknown as PropType<Hero | HeroInstance | null>,
-      required: true,
-    },
-  },
-  emits: ['select', 'clear'],
-  setup() {
-    const { t } = useI18n()
+defineProps<{ heroes: Array<Hero>; value: Hero | HeroInstance | null }>()
+defineEmits<{ select: [hero: Hero]; clear: [] }>()
 
-    return {
-      t,
-    }
-  },
-})
+const { t } = useI18n()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SelectTerrain.vue b/src/components/SelectTerrain.vue
index 7f8b481c..25a5f1a9 100644
--- a/src/components/SelectTerrain.vue
+++ b/src/components/SelectTerrain.vue
@@ -28,37 +28,17 @@
   </BaseSelect>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import BaseSelect from '@/components/base/BaseSelect.vue'
 import type { Terrain } from '@/models/Terrain'
-import { defineAsyncComponent, defineComponent, type PropType } from 'vue'
+import { defineAsyncComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
+const ObjectPortrait = defineAsyncComponent(() => import('@/components/ObjectPortrait.vue'))
 
-export default defineComponent({
-  name: 'SelectTerrain',
-  components: {
-    BaseSelect,
-    ObjectPortrait: defineAsyncComponent(() => import('@/components/ObjectPortrait.vue')),
-  },
-  props: {
-    value: {
-      type: null as unknown as PropType<Terrain | null>,
-      required: true,
-    },
-    terrains: {
-      type: Array as PropType<Array<Terrain>>,
-      required: true,
-    },
-  },
-  emits: ['select'],
-  setup() {
-    const { t } = useI18n()
+defineProps<{ value: Terrain | null; terrains: Array<Terrain> }>()
+defineEmits<{ select: [terrain: Terrain | null] }>()
 
-    return {
-      t,
-    }
-  },
-})
+const { t } = useI18n()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SelectUnitModal.vue b/src/components/SelectUnitModal.vue
index c66082da..32591191 100644
--- a/src/components/SelectUnitModal.vue
+++ b/src/components/SelectUnitModal.vue
@@ -59,104 +59,77 @@
   </BaseDialog>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import BaseDialog from '@/components/base/BaseDialog.vue'
 import type { Creature } from '@/models/Creature'
 import { useStore } from '@/store'
 import { refDebounced } from '@vueuse/core'
-import { computed, defineAsyncComponent, defineComponent, nextTick, ref, watch } from 'vue'
+import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+const ObjectPortrait = defineAsyncComponent(() => import('@/components/ObjectPortrait.vue'))
 
-export default defineComponent({
-  name: 'SelectUnitModal',
-  components: {
-    BaseDialog,
-    ObjectPortrait: defineAsyncComponent(() => import('@/components/ObjectPortrait.vue')),
-  },
-  props: {
-    show: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  emits: ['close', 'select'],
-  setup(props, context) {
-    const { t } = useI18n()
-    const store = useStore()
-
-    const creatures = computed(() => store.creatures)
-    const towns = computed(() => store.towns)
-
-    const search = ref('')
-    const debouncedSearch = refDebounced(search, 200)
-    const searchInput = ref()
-
-    watch(
-      () => props.show,
-      (newShowState) => {
-        if (newShowState) nextTick(() => searchInput.value.focus())
-      },
-    )
-
-    const searchCreatures = computed(() => {
-      const searchText = debouncedSearch.value.toLowerCase()
-      return creatures.value.filter(({ name }: Creature) => {
-        return name.toLowerCase().includes(searchText)
-      })
-    })
-
-    const creaturesByTowns = computed(() => {
-      const map: {
-        [key: number]: Array<Creature>
-      } = {
-        0: [],
-      }
-
-      towns.value.forEach((town) => (map[town.id] = []))
-      creatures.value.forEach((creature) => {
-        if (creature.townId) {
-          map[creature.townId].push(creature)
-        } else {
-          map[0].push(creature)
-        }
-      })
-
-      return map
-    })
-
-    const selectUnit = (value: Creature) => {
-      search.value = ''
-      context.emit('select', value)
-      context.emit('close')
-    }
+const props = defineProps<{ show: boolean }>()
+const emit = defineEmits<{ close: []; select: [creature: Creature] }>()
 
-    const selectFirstFounded = () => {
-      context.emit('select', searchCreatures.value[0])
-      context.emit('close')
-      search.value = ''
-    }
+const { t } = useI18n()
+const store = useStore()
 
-    const onClose = () => {
-      search.value = ''
-      context.emit('close')
-    }
+const creatures = computed(() => store.creatures)
+const towns = computed(() => store.towns)
 
-    return {
-      t,
+const search = ref('')
+const debouncedSearch = refDebounced(search, 200)
+const searchInput = ref()
+
+watch(
+  () => props.show,
+  (newShowState) => {
+    if (newShowState) nextTick(() => searchInput.value.focus())
+  },
+)
+
+const searchCreatures = computed(() => {
+  const searchText = debouncedSearch.value.toLowerCase()
+  return creatures.value.filter(({ name }: Creature) => {
+    return name.toLowerCase().includes(searchText)
+  })
+})
 
-      towns,
-      search,
-      debouncedSearch,
-      creaturesByTowns,
-      searchCreatures,
-      searchInput,
+const creaturesByTowns = computed(() => {
+  const map: {
+    [key: number]: Array<Creature>
+  } = {
+    0: [],
+  }
 
-      selectUnit,
-      selectFirstFounded,
-      onClose,
+  towns.value.forEach((town) => (map[town.id] = []))
+  creatures.value.forEach((creature) => {
+    if (creature.townId) {
+      map[creature.townId].push(creature)
+    } else {
+      map[0].push(creature)
     }
-  },
+  })
+
+  return map
 })
+
+const selectUnit = (value: Creature) => {
+  search.value = ''
+  emit('select', value)
+  emit('close')
+}
+
+const selectFirstFounded = () => {
+  emit('select', searchCreatures.value[0])
+  emit('close')
+  search.value = ''
+}
+
+const onClose = () => {
+  search.value = ''
+  emit('close')
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SpellCard.vue b/src/components/SpellCard.vue
index ab65451d..1e801394 100644
--- a/src/components/SpellCard.vue
+++ b/src/components/SpellCard.vue
@@ -13,32 +13,24 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ObjectPortrait from '@/components/ObjectPortrait.vue'
 import type { Spell } from '@/models/Spell'
-import { defineComponent, type PropType } from 'vue'
 
-export default defineComponent({
-  name: 'SpellCard',
-  components: { ObjectPortrait },
-  props: {
-    spell: {
-      type: Object as PropType<Spell>,
-      required: true,
-    },
-    selected: {
-      type: Boolean,
-      default: false,
-    },
-    imageSizes: {
-      type: Object as PropType<{ height: string | 'auto'; width: string | 'auto' }>,
-      default() {
-        return { height: 'auto', width: 'auto' }
-      },
+withDefaults(
+  defineProps<{
+    spell: Spell
+    selected?: boolean
+    imageSizes?: { height: string | 'auto'; width: string | 'auto' }
+  }>(),
+  {
+    selected: false,
+    imageSizes: () => {
+      return { height: 'auto', width: 'auto' }
     },
   },
-  emits: ['click'],
-})
+)
+defineEmits<{ click: [spell: Spell] }>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
index ae6fcd70..09315f32 100644
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -1,27 +1,23 @@
 <template>
-  <button class="base-button" :class="`color-${color}`" @click="$emit('click')">
+  <button class="base-button" :class="`color-${color}`" @click="emit('click')">
     <slot />
   </button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { BattleSide } from '@/models/Battle'
-import { defineComponent, type PropType } from 'vue'
 
-export default defineComponent({
-  name: 'BaseButton',
-  props: {
-    color: {
-      type: String as PropType<BattleSide>,
-      default: 'attacker',
-    },
-    width: {
-      type: String,
-      default: '100%',
-    },
+withDefaults(
+  defineProps<{
+    color?: BattleSide
+    width?: string
+  }>(),
+  {
+    color: 'attacker',
+    width: '100%',
   },
-  emits: ['click'],
-})
+)
+const emit = defineEmits<{ click: [] }>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/base/BaseCheckbox.vue b/src/components/base/BaseCheckbox.vue
index a16865e7..c6affd22 100644
--- a/src/components/base/BaseCheckbox.vue
+++ b/src/components/base/BaseCheckbox.vue
@@ -7,7 +7,7 @@
       :checked="value"
       :disabled="disabled"
       :name="`${label}-checkbox`"
-      @change="$emit('change', value)"
+      @change="emit('change', value)"
     />
     <svg class="checkbox" viewBox="0 0 20 20">
       <rect class="check-focus" x="0.5" y="0.5" width="19" height="19" rx="4" />
@@ -18,31 +18,21 @@
   </label>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'BaseCheckbox',
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    color: {
-      type: String,
-      default: 'default',
-    },
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    label: string
+    value?: boolean
+    disabled?: boolean
+    color?: string
+  }>(),
+  {
+    value: false,
+    disabled: false,
+    color: 'default',
   },
-  emits: ['change'],
-})
+)
+const emit = defineEmits<{ change: [value: boolean] }>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/base/BaseDialog.vue b/src/components/base/BaseDialog.vue
index 7858b5c1..54a5c91d 100644
--- a/src/components/base/BaseDialog.vue
+++ b/src/components/base/BaseDialog.vue
@@ -17,55 +17,40 @@
   </teleport>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import CloseButton from '@/components/buttons/CloseButton.vue'
 import { onClickOutside } from '@vueuse/core'
-import { defineComponent, ref, watch, type PropType } from 'vue'
-
-type BaseDialogSizesProp = 'small' | 'medium' | 'large' | 'maximum'
-
-export default defineComponent({
-  name: 'BaseDialog',
-  components: {
-    CloseButton,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      required: true,
-    },
-    size: {
-      type: String as PropType<BaseDialogSizesProp>,
-      default: 'medium',
-    },
+import { ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    size?: 'small' | 'medium' | 'large' | 'maximum'
+  }>(),
+  {
+    size: 'medium',
   },
-  emits: ['close'],
-  setup(props, context) {
-    const baseDialogRef = ref(null)
-
-    onClickOutside(baseDialogRef, () => context.emit('close'))
-
-    watch(
-      () => props.show,
-      (newShowState) => {
-        if (newShowState) {
-          const scrollbarWidth = window.innerWidth - document.body.clientWidth
-          document.body.style.paddingRight = `${scrollbarWidth}px`
-          document.body.classList.add('no-scroll')
-        } else {
-          setTimeout(() => {
-            document.body.classList.remove('no-scroll')
-            document.body.style.paddingRight = ''
-          }, 200)
-        }
-      },
-    )
-
-    return {
-      baseDialogRef,
+)
+const emit = defineEmits<{ close: [] }>()
+
+const baseDialogRef = ref(null)
+onClickOutside(baseDialogRef, () => emit('close'))
+
+watch(
+  () => props.show,
+  (newShowState) => {
+    if (newShowState) {
+      const scrollbarWidth = window.innerWidth - document.body.clientWidth
+      document.body.style.paddingRight = `${scrollbarWidth}px`
+      document.body.classList.add('no-scroll')
+    } else {
+      setTimeout(() => {
+        document.body.classList.remove('no-scroll')
+        document.body.style.paddingRight = ''
+      }, 200)
     }
   },
-})
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/base/BaseInputNumber.vue b/src/components/base/BaseInputNumber.vue
index 0256582a..deaf0579 100644
--- a/src/components/base/BaseInputNumber.vue
+++ b/src/components/base/BaseInputNumber.vue
@@ -10,65 +10,51 @@
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useDebounce } from '@vueuse/core'
-import { defineComponent, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 
-export default defineComponent({
-  name: 'BaseInputNumber',
-  props: {
-    min: {
-      type: Number,
-      default: 1,
-    },
-    max: {
-      type: Number,
-      default: 99,
-    },
-    value: {
-      type: Number,
-      default: 1,
-      required: true,
-    },
-    debounce: {
-      type: Number,
-      default: 0,
-    },
+const props = withDefaults(
+  defineProps<{
+    min?: number
+    max?: number
+    value?: number
+    debounce?: number
+  }>(),
+  {
+    min: 1,
+    max: 99,
+    value: 1,
+    debounce: 0,
   },
-  emits: ['input'],
-  setup(props, context) {
-    const currentValue = ref(props.value)
-    const previousValue = ref(0)
-    const debouncedValue = useDebounce(currentValue, props.debounce)
+)
+const emit = defineEmits<{ input: [number: number] }>()
 
-    watch(
-      () => props.value,
-      (newValue) => (currentValue.value = newValue),
-    )
+const currentValue = ref(props.value)
+const previousValue = ref(0)
+const debouncedValue = useDebounce(currentValue, props.debounce)
 
-    watch(debouncedValue, () => context.emit('input', debouncedValue.value))
+watch(
+  () => props.value,
+  (newValue) => (currentValue.value = newValue),
+)
 
-    const onInput = (event: Event) => {
-      if (!event.target) return
+watch(debouncedValue, () => emit('input', debouncedValue.value))
 
-      const target = event.target as HTMLInputElement
+const onInput = (event: Event) => {
+  if (!event.target) return
 
-      let targetValue = parseInt(target.value)
-      if (targetValue < props.min || targetValue > props.max) {
-        currentValue.value = previousValue.value
-        targetValue = previousValue.value
-      } else {
-        currentValue.value = targetValue
-        previousValue.value = currentValue.value
-      }
-    }
+  const target = event.target as HTMLInputElement
 
-    return {
-      currentValue,
-      onInput,
-    }
-  },
-})
+  let targetValue = parseInt(target.value)
+  if (targetValue < props.min || targetValue > props.max) {
+    currentValue.value = previousValue.value
+    targetValue = previousValue.value
+  } else {
+    currentValue.value = targetValue
+    previousValue.value = currentValue.value
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/base/BaseNotification.vue b/src/components/base/BaseNotification.vue
index 4721d5ff..52f4897d 100644
--- a/src/components/base/BaseNotification.vue
+++ b/src/components/base/BaseNotification.vue
@@ -19,8 +19,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, nextTick, ref, type PropType } from 'vue'
+<script setup lang="ts">
+import { nextTick, ref } from 'vue'
 
 interface BaseNotificationButtonProp {
   text: string
@@ -29,43 +29,29 @@ interface BaseNotificationButtonProp {
   onClick?: () => void
 }
 
-export default defineComponent({
-  name: 'BaseNotification',
-  props: {
-    show: {
-      type: Boolean,
-      required: true,
-    },
-    color: {
-      type: String,
-      default: 'rgb(33, 186, 69)',
-    },
-    textColor: {
-      type: String,
-      default: 'rgb(255, 255, 255)',
-    },
-    buttons: {
-      type: Array as PropType<Array<BaseNotificationButtonProp>>,
-      default: () => [],
-    },
+withDefaults(
+  defineProps<{
+    show: boolean
+    color?: string
+    textColor?: string
+    buttons?: Array<BaseNotificationButtonProp>
+  }>(),
+  {
+    color: 'rgb(33, 186, 69)',
+    textColor: 'rgb(255, 255, 255)',
+    buttons: () => [],
   },
-  emits: ['close'],
-  setup(_, context) {
-    const showNotification = ref(false)
-    nextTick(() => (showNotification.value = true))
+)
+const emit = defineEmits<{ close: [] }>()
 
-    const onClick = (button: BaseNotificationButtonProp) => {
-      showNotification.value = false
-      if (button.onClick) button.onClick()
-      context.emit('close')
-    }
+const showNotification = ref(false)
+nextTick(() => (showNotification.value = true))
 
-    return {
-      showNotification,
-      onClick,
-    }
-  },
-})
+const onClick = (button: BaseNotificationButtonProp) => {
+  showNotification.value = false
+  if (button.onClick) button.onClick()
+  emit('close')
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue
index 25c9a2c4..eb538028 100644
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -56,141 +56,109 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts" generic="T extends Record<string, any>">
 import i18n from '@/i18n'
 import { onClickOutside, useVirtualList } from '@vueuse/core'
-import { computed, defineComponent, ref, watch, type PropType } from 'vue'
+import type { Ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-export default defineComponent({
-  name: 'BaseSelect',
-  props: {
-    value: {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      type: null as unknown as PropType<Record<string, any> | null>,
-      required: true,
+const props = withDefaults(
+  defineProps<{
+    value: T | null
+    label?: string
+    options: T[]
+    optionsMaxHeight?: string
+    preloadOptionsCount?: number
+    useVirtualScroll?: boolean
+    height?: string
+    dropdownPosition?: 'top' | 'bottom'
+    placeholder?: string
+  }>(),
+  {
+    label: 'name',
+    optionsMaxHeight: '300px',
+    preloadOptionsCount: 5,
+    useVirtualScroll: false,
+    height: '42px',
+    dropdownPosition: 'bottom',
+    placeholder: () => {
+      return i18n.global.t('components.base.baseSelect.selectOptions')
     },
-    label: {
-      type: String,
-      default: 'name',
-    },
-    options: {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      type: Array as PropType<Array<Record<string, any>>>,
-      required: true,
-    },
-    optionsMaxHeight: {
-      type: String,
-      default: '300px',
-    },
-    preloadOptionsCount: {
-      type: Number,
-      default: 5,
-    },
-    useVirtualScoll: {
-      type: Boolean,
-      default: false,
-    },
-    height: {
-      type: String,
-      default: '42px',
-    },
-    dropdownPosition: {
-      type: String as PropType<'top' | 'bottom'>,
-      default: 'bottom',
-    },
-    placeholder: {
-      type: String,
-      default: i18n.global.t('components.base.baseSelect.selectOptions'),
-    },
-  },
-  emits: ['click', 'select', 'clear'],
-  setup(props, context) {
-    const { t } = useI18n()
-
-    const opened = ref(false)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const selectedValue = ref<Record<string, any> | null>(props.value)
-    const search = ref('')
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const onSelect = (item: Record<string, any>) => {
-      selectedValue.value = item
-      opened.value = false
-      search.value = ''
-      context.emit('select', item)
-    }
-
-    const onClear = () => {
-      selectedValue.value = null
-      search.value = ''
-      if (opened.value) opened.value = false
-      context.emit('clear')
-    }
-
-    const open = () => {
-      if (!opened.value) opened.value = true
-    }
-
-    const searchElement = (event: Event) => {
-      const target = event.currentTarget as HTMLInputElement
-      search.value = target.value
-    }
-
-    const firstOptions = computed(() => {
-      if (search.value.length) {
-        return props.options
-          .filter((option) => {
-            const optionString = option[props.label] as string
-            return optionString.toLowerCase().indexOf(search.value.toLowerCase()) > -1
-          })
-          .map((data, index) => ({ data, index }))
-      } else {
-        return props.options.map((data, index) => ({ data, index }))
-      }
-    })
-
-    const { list, containerProps, wrapperProps } = useVirtualList(firstOptions, {
-      itemHeight: parseInt(props.height),
-      overscan: props.preloadOptionsCount,
-    })
-
-    const optionsList = computed(() => {
-      if (props.useVirtualScoll) {
-        return list.value.map((item) => ({ ...item.data, index: item.index }))
-      } else {
-        return firstOptions.value
-      }
-    })
-
-    watch(search, () => {
-      if (!optionsList.value.length) {
-        wrapperProps.value.style.height = '0px'
-      }
-    })
-
-    onClickOutside(containerProps.ref, () => {
-      setTimeout(() => {
-        opened.value = false
-      }, 100)
-    })
-
-    return {
-      t,
-
-      opened,
-      selectedValue,
-      search,
-      optionsList,
-      containerProps,
-      wrapperProps,
-
-      open,
-      searchElement,
-      onSelect,
-      onClear,
-    }
   },
+)
+const emit = defineEmits<{
+  click: [option: T | null]
+  select: [option: T]
+  clear: []
+}>()
+
+const { t } = useI18n()
+
+const opened = ref(false)
+const selectedValue: Ref<T | null> = ref(null)
+selectedValue.value = props.value
+const search = ref('')
+
+const onSelect = (item: T) => {
+  selectedValue.value = item
+  opened.value = false
+  search.value = ''
+  emit('select', item)
+}
+
+const onClear = () => {
+  selectedValue.value = null
+  search.value = ''
+  if (opened.value) opened.value = false
+  emit('clear')
+}
+
+const open = () => {
+  if (!opened.value) opened.value = true
+}
+
+const searchElement = (event: Event) => {
+  const target = event.currentTarget as HTMLInputElement
+  search.value = target.value
+}
+
+const firstOptions = computed(() => {
+  if (search.value.length) {
+    return props.options
+      .filter((option) => {
+        const optionString = option[props.label] as string
+        return optionString.toLowerCase().indexOf(search.value.toLowerCase()) > -1
+      })
+      .map((data, index) => ({ data, index }))
+  } else {
+    return props.options.map((data, index) => ({ data, index }))
+  }
+})
+
+const { list, containerProps, wrapperProps } = useVirtualList(firstOptions, {
+  itemHeight: parseInt(props.height),
+  overscan: props.preloadOptionsCount,
+})
+
+const optionsList = computed(() => {
+  if (props.useVirtualScroll) {
+    return list.value.map((item) => ({ ...item.data, index: item.index }))
+  } else {
+    return firstOptions.value
+  }
+})
+
+watch(search, () => {
+  if (!optionsList.value.length) {
+    wrapperProps.value.style.height = '0px'
+  }
+})
+
+onClickOutside(containerProps.ref, () => {
+  setTimeout(() => {
+    opened.value = false
+  }, 100)
 })
 </script>
 
diff --git a/src/components/base/BaseTooltip.vue b/src/components/base/BaseTooltip.vue
index 104edc95..534980fd 100644
--- a/src/components/base/BaseTooltip.vue
+++ b/src/components/base/BaseTooltip.vue
@@ -4,49 +4,38 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useElementBounding } from '@vueuse/core'
-import { computed, defineComponent, ref, type PropType } from 'vue'
+import { computed, ref } from 'vue'
 
-export default defineComponent({
-  name: 'BaseTooltip',
-  props: {
-    anchor: {
-      type: Object as PropType<HTMLElement>,
-      required: true,
-    },
-    placement: {
-      type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
-      default: 'bottom',
-    },
+const props = withDefaults(
+  defineProps<{
+    anchor: HTMLElement
+    placement?: 'top' | 'bottom' | 'left' | 'right'
+  }>(),
+  {
+    placement: 'bottom',
   },
-  setup(props) {
-    const tooltip = ref<HTMLElement>()
+)
 
-    const { width: tooltipWidth } = useElementBounding(tooltip)
-    const { top, left, height, width } = useElementBounding(props.anchor)
+const tooltip = ref<HTMLElement>()
 
-    const tooltipX = computed(() => {
-      if (props.placement === 'top' || props.placement === 'bottom')
-        return `${left.value + width.value / 2 - tooltipWidth.value / 2}px`
-      else if (props.placement === 'left') return `${left.value - tooltipWidth.value - 8}px`
-      else if (props.placement === 'right') return `${left.value + width.value + 8}px`
-      else return `0px`
-    })
+const { width: tooltipWidth } = useElementBounding(tooltip)
+const { top, left, height, width } = useElementBounding(props.anchor)
 
-    const tooltipY = computed(() => {
-      if (props.placement === 'top') return `${top.value - height.value * 2}px`
-      if (props.placement === 'bottom') return `${top.value + height.value + 8}px`
-      else if (props.placement === 'left' || props.placement === 'right') return `${top.value - height.value / 2}px`
-      else return `0px`
-    })
+const tooltipX = computed(() => {
+  if (props.placement === 'top' || props.placement === 'bottom')
+    return `${left.value + width.value / 2 - tooltipWidth.value / 2}px`
+  else if (props.placement === 'left') return `${left.value - tooltipWidth.value - 8}px`
+  else if (props.placement === 'right') return `${left.value + width.value + 8}px`
+  else return `0px`
+})
 
-    return {
-      tooltip,
-      tooltipX,
-      tooltipY,
-    }
-  },
+const tooltipY = computed(() => {
+  if (props.placement === 'top') return `${top.value - height.value * 2}px`
+  if (props.placement === 'bottom') return `${top.value + height.value + 8}px`
+  else if (props.placement === 'left' || props.placement === 'right') return `${top.value - height.value / 2}px`
+  else return `0px`
 })
 </script>
 
diff --git a/src/components/buttons/CloseButton.vue b/src/components/buttons/CloseButton.vue
index ad8684ec..6d0ba0e7 100644
--- a/src/components/buttons/CloseButton.vue
+++ b/src/components/buttons/CloseButton.vue
@@ -1,23 +1,13 @@
 <template>
-  <button class="close-button" aria-label="close button" @click="$emit('click')">
+  <button class="close-button" aria-label="close button" @click="emit('click')">
     <span class="cross-first-line" />
     <span class="cross-second-line" />
   </button>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'CloseButton',
-  props: {
-    weight: {
-      type: String,
-      default: '1px',
-    },
-  },
-  emits: ['click'],
-})
+<script setup lang="ts">
+withDefaults(defineProps<{ width?: string }>(), { width: '1px' })
+const emit = defineEmits<{ click: [] }>()
 </script>
 
 <style lang="scss" scoped>
@@ -32,14 +22,14 @@ export default defineComponent({
   top: 50%;
   left: 0;
   width: 100%;
-  height: v-bind(weight);
+  height: v-bind(width);
   transform: translate(0%, -50%) rotate(45deg);
 }
 
 .cross-second-line {
   top: 0;
   left: 50%;
-  width: v-bind(weight);
+  width: v-bind(width);
   height: 100%;
   transform: translate(-50%, 0%) rotate(45deg);
 }
diff --git a/src/components/creaturesLibrary/CreatureCard.vue b/src/components/creaturesLibrary/CreatureCard.vue
index c56943cf..d6d3dc04 100644
--- a/src/components/creaturesLibrary/CreatureCard.vue
+++ b/src/components/creaturesLibrary/CreatureCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :id="creature.name" class="creature-card" @click="$emit('click', creature)">
+  <div :id="creature.name" class="creature-card" @click="emit('click', creature)">
     <div class="creature-image">
       <ObjectPortrait :file="{ name: creature.id, alt: creature.name }" folder="/images/creatures/models" />
     </div>
@@ -47,30 +47,15 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { Creature } from '@/models/Creature'
-import { defineComponent, type PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ObjectPortrait from '../ObjectPortrait.vue'
 
-export default defineComponent({
-  name: 'CreatureCard',
-  components: { ObjectPortrait },
-  props: {
-    creature: {
-      type: Object as PropType<Creature>,
-      required: true,
-    },
-  },
-  emits: ['click'],
-  setup() {
-    const { t } = useI18n()
-
-    return {
-      t,
-    }
-  },
-})
+defineProps<{ creature: Creature }>()
+const emit = defineEmits<{ click: [creature: Creature] }>()
+
+const { t } = useI18n()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/damageCalculator/InputHeroStat.vue b/src/components/damageCalculator/InputHeroStat.vue
index ade44384..89c737ac 100644
--- a/src/components/damageCalculator/InputHeroStat.vue
+++ b/src/components/damageCalculator/InputHeroStat.vue
@@ -3,39 +3,21 @@
     <label class="stat-name">
       {{ t(`data.${stat}`) }}
     </label>
-    <BaseInputNumber :min="0" :max="99" :value="value" :debounce="50" @input="$emit('input', $event)" />
+    <BaseInputNumber :min="0" :max="99" :value="value" :debounce="50" @input="emit('input', $event)" />
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import BaseInputNumber from '@/components/base/BaseInputNumber.vue'
-import { defineComponent, type PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-export default defineComponent({
-  name: 'InputHeroStat',
-  components: {
-    BaseInputNumber,
-  },
-  props: {
-    stat: {
-      type: String as PropType<'attack' | 'defense' | 'power' | 'knowledge' | string>,
-      required: true,
-    },
-    value: {
-      type: Number,
-      required: true,
-    },
-  },
-  emits: ['input'],
-  setup() {
-    const { t } = useI18n()
+defineProps<{
+  stat: 'attack' | 'defense' | 'power' | 'knowledge' | string
+  value: number
+}>()
+const emit = defineEmits<{ input: [number: number] }>()
 
-    return {
-      t,
-    }
-  },
-})
+const { t } = useI18n()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/damageCalculator/SelectSkillButtons.vue b/src/components/damageCalculator/SelectSkillButtons.vue
index fe716f3e..e41e3b65 100644
--- a/src/components/damageCalculator/SelectSkillButtons.vue
+++ b/src/components/damageCalculator/SelectSkillButtons.vue
@@ -17,57 +17,34 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { BattleSide } from '@/models/Battle'
 import type { Level } from '@/models/Level'
-import { defineComponent, ref, watch, type PropType } from 'vue'
+import { ref, watch } from 'vue'
 
-export default defineComponent({
-  name: 'SelectSkillButtons',
-  props: {
-    color: {
-      type: String as PropType<BattleSide>,
-      required: true,
-    },
-    name: {
-      type: String,
-      default: '',
-      required: true,
-    },
-    levels: {
-      type: Array as PropType<Array<Level>>,
-      required: true,
-    },
-    value: {
-      type: Number,
-      required: true,
-    },
-  },
-  emits: ['click'],
-  setup(props, context) {
-    const selectedLevel = ref(props.value)
+const props = defineProps<{
+  color: BattleSide
+  name: string
+  levels: Array<Level>
+  value: number
+}>()
+const emit = defineEmits<{ click: [level: number] }>()
 
-    watch(
-      () => props.value,
-      (newValue) => (selectedLevel.value = newValue),
-    )
+const selectedLevel = ref(props.value)
 
-    const onClick = (level: number) => {
-      if (level === selectedLevel.value) {
-        selectedLevel.value = 0
-      } else {
-        selectedLevel.value = level
-      }
-      context.emit('click', selectedLevel.value)
-    }
-
-    return {
-      selectedLevel,
+watch(
+  () => props.value,
+  (newValue) => (selectedLevel.value = newValue),
+)
 
-      onClick,
-    }
-  },
-})
+const onClick = (level: number) => {
+  if (level === selectedLevel.value) {
+    selectedLevel.value = 0
+  } else {
+    selectedLevel.value = level
+  }
+  emit('click', selectedLevel.value)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/DamageCalculatorPage.vue b/src/views/DamageCalculatorPage.vue
index ac1fd908..361cb6f7 100755
--- a/src/views/DamageCalculatorPage.vue
+++ b/src/views/DamageCalculatorPage.vue
@@ -42,185 +42,211 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import CalculatorTabs from '@/components/CalculatorTabs.vue'
 import DamageCalculator from '@/components/DamageCalculator.vue'
 import { Battle } from '@/models/Battle'
 import { watchIgnorable } from '@vueuse/shared'
 import type { Ref } from 'vue'
-import { computed, defineAsyncComponent, defineComponent, ref } from 'vue'
+import { computed, defineAsyncComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useHead } from '@unhead/vue'
+const PageFooter = defineAsyncComponent(() => import('@/components/PageFooter.vue'))
+const HowToUse = defineAsyncComponent(() => import('@/components/HowToUse.vue'))
 
-export default defineComponent({
-  name: 'DamageCalculatorPage',
-  components: {
-    CalculatorTabs,
-    DamageCalculator,
-    PageFooter: defineAsyncComponent(() => import('@/components/PageFooter.vue')),
-    HowToUse: defineAsyncComponent(() => import('@/components/HowToUse.vue')),
-  },
-  setup() {
-    const { t } = useI18n()
+const { t } = useI18n()
+useHead({
+  title: `${t('pages.damageCalculator')} | Heroes 3 tools`,
+  meta: [
+    {
+      name: 'description',
+      content: t('pages.damageCalculator'),
+    },
+    {
+      name: 'keywords',
+      content: t('pages.damageCalculator'),
+    },
+    {
+      name: 'og:title',
+      content: `${t('pages.damageCalculator')} | Heroes 3 tools`,
+    },
+    {
+      name: 'og:description',
+      content: t('pages.damageCalculator'),
+    },
+    {
+      name: 'og:url',
+      content: 'https://heroes.3dn.ru/damage',
+    },
+    {
+      name: 'twitter:title',
+      content: `${t('pages.damageCalculator')} | Heroes 3 tools`,
+    },
+    {
+      name: 'twitter:description',
+      content: t('pages.damageCalculator'),
+    },
+    {
+      name: 'twitter:url',
+      content: 'https://heroes.3dn.ru/damage',
+    },
+    {
+      name: 'og:image',
+      content: 'https://heroes.3dn.ru/img/og/damage-calculator.jpg',
+    },
+    {
+      name: 'twitter:image',
+      content: 'https://heroes.3dn.ru/img/og/damage-calculator.jpg',
+    },
+  ],
+})
 
-    const calculators = ref<Array<Battle>>([new Battle()]) as Ref<Array<Battle>>
-    const activeIndex = ref(0)
+const calculators = ref<Array<Battle>>([new Battle()]) as Ref<Array<Battle>>
+const activeIndex = ref(0)
 
-    const attacker = computed(() => calculators.value[activeIndex.value].attacker)
-    const defender = computed(() => calculators.value[activeIndex.value].defender)
-    const howToUseSteps = computed(() => {
-      return [
+const attacker = computed(() => calculators.value[activeIndex.value].attacker)
+const defender = computed(() => calculators.value[activeIndex.value].defender)
+const howToUseSteps = computed(() => {
+  return [
+    {
+      name: 'Pick attacker creature',
+      targets: [
         {
-          name: 'Pick attacker creature',
-          targets: [
-            {
-              node: 'section.attacker button.pick-creature-button',
-              eventTriggerNode: 'section.attacker button.pick-creature-button',
-              text: t('common.howToUseSteps.selectAttackerCreature'),
-            },
-          ],
+          node: 'section.attacker button.pick-creature-button',
+          eventTriggerNode: 'section.attacker button.pick-creature-button',
+          text: t('common.howToUseSteps.selectAttackerCreature'),
         },
+      ],
+    },
+    {
+      name: 'Select attacker creature',
+      targets: [
         {
-          name: 'Select attacker creature',
-          targets: [
-            {
-              node: 'div.dialog-area',
-              //   insertBackground: true,
-            },
-            {
-              node: 'div.dialog-area div.units',
-              eventTriggerNode: 'div.dialog-area div.units',
-            },
-          ],
+          node: 'div.dialog-area',
+          //   insertBackground: true,
         },
         {
-          name: 'Open hero list',
-          targets: [
-            {
-              node: 'section.attacker div.select',
-              eventTriggerNode: 'section.attacker div.select',
-              text: t('common.howToUseSteps.selectAttackerHero'),
-            },
-          ],
+          node: 'div.dialog-area div.units',
+          eventTriggerNode: 'div.dialog-area div.units',
         },
+      ],
+    },
+    {
+      name: 'Open hero list',
+      targets: [
         {
-          name: 'Pick hero',
-          targets: [
-            {
-              node: 'section.attacker div.select > div.items',
-              eventTriggerNode: 'section.attacker div.select > div.items',
-            },
-          ],
+          node: 'section.attacker div.select',
+          eventTriggerNode: 'section.attacker div.select',
+          text: t('common.howToUseSteps.selectAttackerHero'),
         },
+      ],
+    },
+    {
+      name: 'Pick hero',
+      targets: [
         {
-          name: 'Click to "pick creature" defender button',
-          targets: [
-            {
-              node: 'section.defender button.pick-creature-button',
-              eventTriggerNode: 'section.defender button.pick-creature-button',
-              text: t('common.howToUseSteps.selectDefenderCreature'),
-            },
-          ],
+          node: 'section.attacker div.select > div.items',
+          eventTriggerNode: 'section.attacker div.select > div.items',
         },
+      ],
+    },
+    {
+      name: 'Click to "pick creature" defender button',
+      targets: [
         {
-          name: 'Select defender creature',
-          targets: [
-            {
-              node: 'div.dialog-area',
-              //   insertBackground: true,
-            },
-            {
-              node: 'div.dialog-area div.units',
-              eventTriggerNode: 'div.dialog-area div.units',
-            },
-          ],
+          node: 'section.defender button.pick-creature-button',
+          eventTriggerNode: 'section.defender button.pick-creature-button',
+          text: t('common.howToUseSteps.selectDefenderCreature'),
         },
+      ],
+    },
+    {
+      name: 'Select defender creature',
+      targets: [
         {
-          name: 'Open hero list',
-          targets: [
-            {
-              node: 'section.defender div.select',
-              eventTriggerNode: 'section.defender div.select',
-              text: t('common.howToUseSteps.selectDefenderHero'),
-            },
-          ],
+          node: 'div.dialog-area',
+          //   insertBackground: true,
         },
         {
-          name: 'Pick hero',
-          targets: [
-            {
-              node: 'section.defender div.select > div.items',
-              eventTriggerNode: 'section.defender div.select > div.items',
-            },
-          ],
+          node: 'div.dialog-area div.units',
+          eventTriggerNode: 'div.dialog-area div.units',
         },
+      ],
+    },
+    {
+      name: 'Open hero list',
+      targets: [
         {
-          name: 'Check values',
-          targets: [
-            {
-              node: 'section.attacker section.damage > strong',
-            },
-            {
-              node: 'section.attacker section.damage > strong:nth-child(2)',
-              text: t('common.howToUseSteps.damage'),
-            },
-            {
-              node: 'section.defender section.damage > strong',
-            },
-            {
-              node: 'section.defender section.damage > strong:nth-child(2)',
-            },
-          ],
+          node: 'section.defender div.select',
+          eventTriggerNode: 'section.defender div.select',
+          text: t('common.howToUseSteps.selectDefenderHero'),
         },
-      ]
-    })
-
-    const { ignoreUpdates } = watchIgnorable(
-      [attacker, defender],
-      () => {
-        if (!attacker.value.activeCreature?.id || !defender.value.activeCreature?.id) return
-        ignoreUpdates(() => calculators.value[activeIndex.value].calculate())
-      },
-      { deep: true },
-    )
-
-    const addCalculator = () => {
-      calculators.value.push(new Battle())
-      activeIndex.value = calculators.value.length - 1
-    }
+      ],
+    },
+    {
+      name: 'Pick hero',
+      targets: [
+        {
+          node: 'section.defender div.select > div.items',
+          eventTriggerNode: 'section.defender div.select > div.items',
+        },
+      ],
+    },
+    {
+      name: 'Check values',
+      targets: [
+        {
+          node: 'section.attacker section.damage > strong',
+        },
+        {
+          node: 'section.attacker section.damage > strong:nth-child(2)',
+          text: t('common.howToUseSteps.damage'),
+        },
+        {
+          node: 'section.defender section.damage > strong',
+        },
+        {
+          node: 'section.defender section.damage > strong:nth-child(2)',
+        },
+      ],
+    },
+  ]
+})
 
-    const deleteCalculator = (index: number) => {
-      // Cancel changing activeIndex in <li class="tab"> onClick event
-      // event.stopPropagation()
-
-      // Delete calculator instance
-      calculators.value.splice(index, 1)
-
-      // If current calculator selected for delete
-      if (activeIndex.value === index) {
-        if (index > 0 && index < calculators.value.length - 1) {
-          activeIndex.value = index + 1
-        } else if (index > 0 && index !== calculators.value.length - 1) {
-          activeIndex.value = index - 1
-        } else if (index < calculators.value.length - 1) {
-          activeIndex.value = 0
-        }
-      } else if (index < activeIndex.value) {
-        activeIndex.value = calculators.value.length - 1
-      }
-    }
+const { ignoreUpdates } = watchIgnorable(
+  [attacker, defender],
+  () => {
+    if (!attacker.value.activeCreature?.id || !defender.value.activeCreature?.id) return
+    ignoreUpdates(() => calculators.value[activeIndex.value].calculate())
+  },
+  { deep: true },
+)
 
-    return {
-      t,
+const addCalculator = () => {
+  calculators.value.push(new Battle())
+  activeIndex.value = calculators.value.length - 1
+}
 
-      calculators,
-      activeIndex,
-      howToUseSteps,
+const deleteCalculator = (index: number) => {
+  // Cancel changing activeIndex in <li class="tab"> onClick event
+  // event.stopPropagation()
 
-      addCalculator,
-      deleteCalculator,
+  // Delete calculator instance
+  calculators.value.splice(index, 1)
+
+  // If current calculator selected for delete
+  if (activeIndex.value === index) {
+    if (index > 0 && index < calculators.value.length - 1) {
+      activeIndex.value = index + 1
+    } else if (index > 0 && index !== calculators.value.length - 1) {
+      activeIndex.value = index - 1
+    } else if (index < calculators.value.length - 1) {
+      activeIndex.value = 0
     }
-  },
-})
+  } else if (index < activeIndex.value) {
+    activeIndex.value = calculators.value.length - 1
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 470385da..03bef329 100755
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -33,47 +33,33 @@
   </section>
 </template>
 
-<script lang="ts">
-import { computed, defineAsyncComponent, defineComponent } from 'vue'
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
+const ObjectPortrait = defineAsyncComponent(() => import('@/components/ObjectPortrait.vue'))
+const PageFooter = defineAsyncComponent(() => import('@/components/PageFooter.vue'))
 
-export default defineComponent({
-  name: 'HomePage',
-  components: {
-    ObjectPortrait: defineAsyncComponent(() => import('@/components/ObjectPortrait.vue')),
-    PageFooter: defineAsyncComponent(() => import('@/components/PageFooter.vue')),
+const { t } = useI18n()
+const router = useRouter()
+
+const pages = computed(() => [
+  {
+    name: t('pages.damageCalculator'),
+    path: '/damage',
+    image: 'Tactics',
   },
-  setup() {
-    const { t } = useI18n()
-    const router = useRouter()
-
-    const pages = computed(() => [
-      {
-        name: t('pages.damageCalculator'),
-        path: '/damage',
-        image: 'Tactics',
-      },
-      {
-        name: t('pages.magicCalculator'),
-        path: '/magic',
-        image: 'Water',
-      },
-      {
-        name: t('pages.creaturesLibrary'),
-        path: '/creatures',
-        image: 'Scholar',
-      },
-    ])
-
-    return {
-      t,
-      router,
-
-      pages,
-    }
+  {
+    name: t('pages.magicCalculator'),
+    path: '/magic',
+    image: 'Water',
+  },
+  {
+    name: t('pages.creaturesLibrary'),
+    path: '/creatures',
+    image: 'Scholar',
   },
-})
+])
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/MagicCalculatorPage.vue b/src/views/MagicCalculatorPage.vue
index 3811ceb7..863f827c 100755
--- a/src/views/MagicCalculatorPage.vue
+++ b/src/views/MagicCalculatorPage.vue
@@ -39,62 +39,44 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import CalculatorTabs from '@/components/CalculatorTabs.vue'
 import { Battle } from '@/models/Battle'
-import { defineAsyncComponent, defineComponent, ref, type Ref } from 'vue'
+import { defineAsyncComponent, ref, type Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import MagicCalculator from '../components/MagicCalculator.vue'
+const PageFooter = defineAsyncComponent(() => import('@/components/PageFooter.vue'))
 
-export default defineComponent({
-  name: 'MagicCalculatorPage',
-  components: {
-    CalculatorTabs,
-    MagicCalculator,
-    PageFooter: defineAsyncComponent(() => import('@/components/PageFooter.vue')),
-  },
-  setup() {
-    const { t } = useI18n()
+const { t } = useI18n()
 
-    const calculators = ref<Array<Battle>>([new Battle()]) as Ref<Array<Battle>>
-    const activeIndex = ref(0)
+const calculators = ref<Array<Battle>>([new Battle()]) as Ref<Array<Battle>>
+const activeIndex = ref(0)
 
-    const addCalculator = () => {
-      calculators.value.push(new Battle())
-      activeIndex.value = calculators.value.length - 1
-    }
-
-    const deleteCalculator = (index: number) => {
-      // Cancel changing activeIndex in <li class="tab"> onClick event
-      // event.stopPropagation()
-
-      // Delete calculator instance
-      calculators.value.splice(index, 1)
-
-      // If current calculator selected for delete
-      if (activeIndex.value === index) {
-        if (index > 0 && index < calculators.value.length - 1) {
-          activeIndex.value = index + 1
-        } else if (index > 0 && index !== calculators.value.length - 1) {
-          activeIndex.value = index - 1
-        } else if (index < calculators.value.length - 1) {
-          activeIndex.value = 0
-        }
-      } else if (index < activeIndex.value) {
-        activeIndex.value = calculators.value.length - 1
-      }
-    }
-
-    return {
-      t,
-      calculators,
-      activeIndex,
+const addCalculator = () => {
+  calculators.value.push(new Battle())
+  activeIndex.value = calculators.value.length - 1
+}
 
-      addCalculator,
-      deleteCalculator,
+const deleteCalculator = (index: number) => {
+  // Cancel changing activeIndex in <li class="tab"> onClick event
+  // event.stopPropagation()
+
+  // Delete calculator instance
+  calculators.value.splice(index, 1)
+
+  // If current calculator selected for delete
+  if (activeIndex.value === index) {
+    if (index > 0 && index < calculators.value.length - 1) {
+      activeIndex.value = index + 1
+    } else if (index > 0 && index !== calculators.value.length - 1) {
+      activeIndex.value = index - 1
+    } else if (index < calculators.value.length - 1) {
+      activeIndex.value = 0
     }
-  },
-})
+  } else if (index < activeIndex.value) {
+    activeIndex.value = calculators.value.length - 1
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/NotFoundPage.vue b/src/views/NotFoundPage.vue
index fd4facbf..345b24e5 100644
--- a/src/views/NotFoundPage.vue
+++ b/src/views/NotFoundPage.vue
@@ -10,18 +10,9 @@
   </main>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-
-export default defineComponent({
-  name: 'NotFoundPage',
-  setup() {
-    const { t } = useI18n()
-
-    return { t }
-  },
-})
+const { t } = useI18n()
 </script>
 
 <style lang="scss" scoped>