diff --git a/package-lock.json b/package-lock.json
index a857132b..d99393e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
         "@vueform/multiselect": "^2.2.0",
         "@vueuse/core": "^6.5.3",
         "idb": "^6.1.4",
+        "pinia": "*",
         "vue": "^3.2.19",
         "vue-i18n": "^9.2.0-beta.9",
         "vue-router": "^4.0.11",
@@ -7978,6 +7979,56 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.0-rc.12.tgz",
+      "integrity": "sha512-1MqXgyiju5fcJBfNO+aU5GP24ZxoaC5bjosSTVnb13fJYu8CfFxCZ/XWwMoD1QnZFq6JGbYigZNCaJDL2tmzQg==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.18",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.2.3",
+        "typescript": "^4.4.3",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.11.4.tgz",
+      "integrity": "sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.1",
       "dev": true,
@@ -16715,6 +16766,23 @@
       "version": "2.3.0",
       "dev": true
     },
+    "pinia": {
+      "version": "2.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.0-rc.12.tgz",
+      "integrity": "sha512-1MqXgyiju5fcJBfNO+aU5GP24ZxoaC5bjosSTVnb13fJYu8CfFxCZ/XWwMoD1QnZFq6JGbYigZNCaJDL2tmzQg==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.18",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.11.4",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.11.4.tgz",
+          "integrity": "sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A==",
+          "requires": {}
+        }
+      }
+    },
     "pirates": {
       "version": "4.0.1",
       "dev": true,
diff --git a/package.json b/package.json
index 3e6a8833..28101b45 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@vueform/multiselect": "^2.2.0",
     "@vueuse/core": "^6.5.3",
     "idb": "^6.1.4",
+    "pinia": "*",
     "vue": "^3.2.19",
     "vue-i18n": "^9.2.0-beta.9",
     "vue-router": "^4.0.11",
diff --git a/src/components/DamageCalculator.vue b/src/components/DamageCalculator.vue
index 823ea15b..07b258e8 100644
--- a/src/components/DamageCalculator.vue
+++ b/src/components/DamageCalculator.vue
@@ -66,18 +66,22 @@
 
       <section v-if="side.hero" class="skills">
         <SelectSkillButtons
-          v-for="skill in data.skills"
+          v-for="skill in store.skills"
           :key="`attacker-skill-${skill.name}-buttons`"
           color="attacker"
           :name="skill.name"
-          :levels="data.levels.slice(1, data.levels.length)"
+          :levels="store.levels.slice(1, store.levels.length)"
           @click="side.hero!.skills[skill.name.toLowerCase()] = $event as number"
         />
       </section>
 
       <section v-if="side.activeCreature" class="effects">
         <div
-          v-for="(effectGroup, i) in [attackPositiveEffects, defensePositiveEffects, attackNegativeEffects]"
+          v-for="(effectGroup, i) in [
+            store.attackPositiveEffects,
+            store.defensePositiveEffects,
+            store.attackNegativeEffects,
+          ]"
           :key="`attacker-effects-group-${i}`"
         >
           <template v-for="effect in effectGroup" :key="`attacker-effect-${effect}`">
@@ -98,15 +102,15 @@
     </section>
 
     <div class="calculator-footer">
-      <SelectTerrain :terrains="data.terrains" @select-terrain="onSelectTerrain($event)" />
+      <SelectTerrain :terrains="store.terrains" @select-terrain="onSelectTerrain($event)" />
     </div>
   </section>
 </template>
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, watch } from '@vue/runtime-core'
-import { computed, reactive, ref } from '@vue/reactivity'
-import type { Battle, BattleSide, DamageCalculatorBattleSide } from '@/models/Battle'
+import { reactive, ref } from '@vue/reactivity'
+import type { Battle, DamageCalculatorBattleSide } from '@/models/Battle'
 import { CreatureInstance } from '@/models/Creature'
 import type { Creature } from '@/models/Creature'
 import { useI18n } from 'vue-i18n'
@@ -115,12 +119,9 @@ import SelectHero from '@/components/SelectHero.vue'
 import { HeroInstance } from '@/models/Hero'
 import type { Spell } from '@/models/Spell'
 import type { Hero } from '@/models/Hero'
-import type { Skill } from '@/models/Skill'
-import type { Level } from '@/models/Level'
-import { Spells } from '@/models/enums'
-import { getDatabaseStore, initDatabaseStore } from '@/database'
 import type { Terrain } from '@/models/Terrain'
 import SelectTerrain from '@/components/SelectTerrain.vue'
+import { useStore } from '@/store'
 
 export default defineComponent({
   name: 'DamageCalculator',
@@ -142,10 +143,13 @@ export default defineComponent({
   },
   setup(props) {
     const { t } = useI18n()
+    const store = useStore()
+
     const battle = reactive(props.battleValue)
-    const battleSides: Array<BattleSide> = ['attacker', 'defender']
     const isStarted = ref(false)
 
+    store.initData()
+
     watch(
       [battle.attacker, battle.defender],
       () => {
@@ -161,26 +165,6 @@ export default defineComponent({
       if (newIsStarted) isStarted.value = false
     })
 
-    let data = reactive({
-      skills: [] as Array<Skill>,
-      levels: [] as Array<Level>,
-      spells: [] as Array<Spell>,
-      terrains: [] as Array<Terrain>,
-    })
-
-    getDatabaseStore('creatures').then((creatures) => {
-      if (!creatures.length) {
-        initDatabaseStore('classes')
-        initDatabaseStore('creatures')
-        initDatabaseStore('heroes')
-        initDatabaseStore('levels').then((result) => (data.levels = result))
-        initDatabaseStore('skills').then((result) => (data.skills = result))
-        initDatabaseStore('spells').then((result) => (data.spells = result))
-        initDatabaseStore('terrains').then((result) => (data.terrains = result))
-        initDatabaseStore('towns')
-      }
-    })
-
     const totalDamage = (side: DamageCalculatorBattleSide) => {
       const { minDamage, maxDamage, averageDamage } = side.activeCreature!.calculation
       if (minDamage > 0 && minDamage !== maxDamage) {
@@ -203,29 +187,6 @@ export default defineComponent({
       }
     }
 
-    const attackPositiveEffectsIds = [
-      Spells.Bless,
-      Spells.Bloodlust,
-      Spells.Frenzy,
-      Spells.Prayer,
-      Spells.Precision,
-      Spells.Slayer,
-    ]
-
-    const attackPositiveEffects = computed(() => {
-      return data.spells.filter((spell) => attackPositiveEffectsIds.indexOf(spell.id) !== -1)
-    })
-
-    const defensePositiveEffectsIds = [Spells.Shield, Spells.StoneSkin, Spells.AirShield]
-    const defensePositiveEffects = computed(() => {
-      return data.spells.filter((spell) => defensePositiveEffectsIds.indexOf(spell.id) !== -1)
-    })
-
-    const attackNegativeEffectsIds = [Spells.Curse, Spells.Weakness, Spells.DisruptingRay]
-    const attackNegativeEffects = computed(() => {
-      return data.spells.filter((spell) => attackNegativeEffectsIds.indexOf(spell.id) !== -1)
-    })
-
     const onSelectCreature = (side: DamageCalculatorBattleSide, creature: unknown) => {
       const newCreature = new CreatureInstance(creature as Creature)
 
@@ -276,11 +237,9 @@ export default defineComponent({
 
     return {
       t,
+      store,
+
       battle,
-      data,
-      attackPositiveEffects,
-      defensePositiveEffects,
-      attackNegativeEffects,
 
       totalDamage,
       totalKills,
diff --git a/src/components/SelectHero.vue b/src/components/SelectHero.vue
index 5cdce7b3..496fafdb 100644
--- a/src/components/SelectHero.vue
+++ b/src/components/SelectHero.vue
@@ -31,10 +31,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, defineAsyncComponent, watch } from 'vue'
+import { defineComponent, ref, defineAsyncComponent, watch, computed } from 'vue'
 import Multiselect from '@vueform/multiselect'
 import type { Hero, HeroInstance } from '@/models/Hero'
-import { getDatabaseStore } from '@/database'
+import { useStore } from '@/store'
 
 export default defineComponent({
   name: 'SelectHero',
@@ -50,10 +50,10 @@ export default defineComponent({
   },
   emits: ['selectHero'],
   setup(props, context) {
-    const selectedHero = ref(props.value?.id)
-    const heroes = ref<Array<Hero>>([])
+    const store = useStore()
 
-    getDatabaseStore('heroes').then((heroes_) => (heroes.value = heroes_))
+    const selectedHero = ref(props.value?.id)
+    const heroes = computed(() => store.heroes)
 
     watch(selectedHero, (id) =>
       context.emit(
diff --git a/src/components/damageCalculator/PickCreatureButton.vue b/src/components/damageCalculator/PickCreatureButton.vue
index e7bcabf8..54e17428 100644
--- a/src/components/damageCalculator/PickCreatureButton.vue
+++ b/src/components/damageCalculator/PickCreatureButton.vue
@@ -3,7 +3,12 @@
     <slot />
   </button>
 
-  <SelectUnitModal :show="showSelectUnitModal" @close="showSelectUnitModal = false" @select="$emit('select', $event)" />
+  <SelectUnitModal
+    v-if="showSelectUnitModal"
+    :show="showSelectUnitModal"
+    @close="showSelectUnitModal = false"
+    @select="$emit('select', $event)"
+  />
 </template>
 
 <script lang="ts">
diff --git a/src/components/damageCalculator/SelectUnitModal.vue b/src/components/damageCalculator/SelectUnitModal.vue
index 16a95508..9c6c69f4 100644
--- a/src/components/damageCalculator/SelectUnitModal.vue
+++ b/src/components/damageCalculator/SelectUnitModal.vue
@@ -62,9 +62,8 @@
 import { computed, defineAsyncComponent, defineComponent, ref } from 'vue'
 import BaseModal from '@/components/base/BaseModal.vue'
 import type { Creature } from '@/models/Creature'
-import type { Town } from '@/models/Town'
 import { useI18n } from 'vue-i18n'
-import { getDatabaseStore } from '@/database'
+import { useStore } from '@/store'
 
 export default defineComponent({
   name: 'SelectUnitModal',
@@ -77,14 +76,10 @@ export default defineComponent({
   setup(props, context) {
     const { t } = useI18n()
     const search = ref('')
-    const towns = ref([] as Town[])
-    const creatures = ref([] as Array<Creature>)
-
-    getDatabaseStore('creatures').then((result) => (creatures.value = result))
-    getDatabaseStore('towns').then((result) => (towns.value = result))
+    const { creatures, towns } = useStore()
 
     const filterCreaturesByName = computed((): Creature[] => {
-      return creatures.value.filter((creature: Creature) => {
+      return creatures.filter((creature: Creature) => {
         const searchText = search.value.toLowerCase()
         const creatureName = creature.name.toLowerCase()
         return creatureName.indexOf(searchText) > -1
@@ -111,41 +106,20 @@ export default defineComponent({
     return {
       t,
       creatures,
+      towns,
+
+      search,
+      filterCreaturesByName,
+
       selectUnit,
       selectFirstFounded,
-      filterCreaturesByName,
       onClose,
-      towns,
-      search,
     }
   },
 })
 </script>
 
 <style lang="scss" scoped>
-.modal-units {
-  width: 90%;
-  min-width: 200px;
-  margin: auto;
-  margin-top: 20px;
-  background-color: rgb(255, 255, 255);
-  border-radius: 0.3rem;
-  outline: 0;
-  min-height: 100%;
-
-  @include media-medium {
-    width: 100%;
-  }
-
-  @include media-large {
-    width: 95%;
-  }
-
-  @include media-large {
-    width: 85%;
-  }
-}
-
 .units-modal-content {
   flex-direction: column;
   width: 100%;
diff --git a/src/main.ts b/src/main.ts
index 19c4b4af..10ac1ac8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,7 @@
 import App from '@/App.vue'
 import i18n from '@/i18n'
 import router from '@/router'
-import store from '@/store'
+import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 
-createApp(App).use(i18n).use(router).use(store).mount('#app')
+createApp(App).use(i18n).use(router).use(createPinia()).mount('#app')
diff --git a/src/store.ts b/src/store.ts
index 2e02d85c..1c651d8b 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,13 +1,90 @@
-import { createStore } from 'vuex'
-import type { Battle } from './models/Battle'
+import { defineStore } from 'pinia'
+import { DataStore, getDatabaseStore, initDatabaseStore } from './database'
+import { Class } from './models/Class'
+import { Creature } from './models/Creature'
+import { Spells } from './models/enums'
+import { Hero } from './models/Hero'
+import { Level } from './models/Level'
+import { Skill } from './models/Skill'
+import { Spell } from './models/Spell'
+import { Terrain } from './models/Terrain'
+import { Town } from './models/Town'
 
-export default createStore({
-  state: {},
+export interface PiniaStateData {
+  classes: Array<Class>
+  creatures: Array<Creature>
+  heroes: Array<Hero>
+  skills: Array<Skill>
+  levels: Array<Level>
+  terrains: Array<Terrain>
+  spells: Array<Spell>
+  towns: Array<Town>
+}
+
+export const useStore = defineStore('data', {
+  state: () =>
+    ({
+      classes: [],
+      creatures: [],
+      heroes: [],
+      skills: [],
+      levels: [],
+      terrains: [],
+      spells: [],
+      towns: [],
+    } as PiniaStateData),
+  getters: {
+    attackPositiveEffects(state) {
+      const attackPositiveEffectsIds = [
+        Spells.Bless,
+        Spells.Bloodlust,
+        Spells.Frenzy,
+        Spells.Prayer,
+        Spells.Precision,
+        Spells.Slayer,
+      ]
+
+      return state.spells.filter((spell) => attackPositiveEffectsIds.indexOf(spell.id) !== -1)
+    },
+    defensePositiveEffects(state) {
+      const defensePositiveEffectsIds = [Spells.Shield, Spells.StoneSkin, Spells.AirShield]
+      return state.spells.filter((spell) => defensePositiveEffectsIds.indexOf(spell.id) !== -1)
+    },
+    attackNegativeEffects(state) {
+      const attackNegativeEffectsIds = [Spells.Curse, Spells.Weakness, Spells.DisruptingRay]
+      return state.spells.filter((spell) => attackNegativeEffectsIds.indexOf(spell.id) !== -1)
+    },
+  },
   actions: {
-    rememberCalculators({ commit }, payload: { calculators: Array<Battle> }) {
-      commit('REMEMBER_CALCULATORS', { calculators: payload.calculators })
+    async initData() {
+      const dataStores: Array<DataStore> = [
+        'classes',
+        'creatures',
+        'heroes',
+        'skills',
+        'levels',
+        'terrains',
+        'spells',
+        'towns',
+      ]
+
+      dataStores.forEach(async (datastore: DataStore) => {
+        let data = await getDatabaseStore(datastore)
+
+        if (!data || !data.length) {
+          data = await initDatabaseStore(datastore)
+        }
+
+        // TODO: fix
+        if (datastore === 'classes') this.classes = data as Class[]
+        if (datastore === 'creatures') this.creatures = data as Creature[]
+        if (datastore === 'heroes') this.heroes = data as Hero[]
+        if (datastore === 'skills') this.skills = data as Skill[]
+        if (datastore === 'levels') this.levels = data as Level[]
+        if (datastore === 'terrains') this.terrains = data as Terrain[]
+        if (datastore === 'spells') this.spells = data as Spell[]
+        if (datastore === 'towns') this.towns = data as Town[]
+      })
     },
   },
-  mutations: {},
-  strict: import.meta.env.DEV,
 })