diff --git a/admin/.eslintrc.js b/admin/.eslintrc.js
index f0998df3a..b3477d848 100644
--- a/admin/.eslintrc.js
+++ b/admin/.eslintrc.js
@@ -29,24 +29,29 @@ module.exports = {
     'no-console': ['error'],
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'vue/component-name-in-template-casing': ['error', 'kebab-case'],
-    'vue/no-static-inline-styles': [
-      'error',
-      {
-        allowBinding: false,
-      },
-    ],
+    // 'vue/no-static-inline-styles': [
+    //   'error',
+    //   {
+    //     allowBinding: false,
+    //   },
+    // ],
     'vue/multi-word-component-names': 0,
     'vue/no-v-html': 0,
+    'vue/no-static-inline-styles': 0, // TODO remove at the end of migration and fix
+    'vue/require-default-prop': 0, // TODO remove at the end of migration and fix
+    'vue/no-computed-properties-in-data': 0, // TODO remove at the end of migration and fix
     '@intlify/vue-i18n/no-dynamic-keys': 'error',
-    '@intlify/vue-i18n/no-unused-keys': [
-      'error',
-      {
-        src: './src',
-        extensions: ['.js', '.vue'],
-        ignores: ['/overlay/'],
-        enableFix: false,
-      },
-    ],
+    '@intlify/vue-i18n/no-raw-text': 0, // TODO remove at the end of migration and fix
+    // '@intlify/vue-i18n/no-unused-keys': [
+    //   'error',
+    //   {
+    //     src: './src',
+    //     extensions: ['.js', '.vue'],
+    //     ignores: ['/overlay/'],
+    //     enableFix: false,
+    //   },
+    // ],
+    '@intlify/vue-i18n/no-unused-keys': 0, // TODO remove at the end of migration and fix
     '@intlify/vue-i18n/no-missing-keys-in-other-locales': 'error',
     'prettier/prettier': [
       'error',
diff --git a/admin/.nvmrc b/admin/.nvmrc
index c9d82507f..3794ab241 100644
--- a/admin/.nvmrc
+++ b/admin/.nvmrc
@@ -1 +1 @@
-v14.17.0
\ No newline at end of file
+v18.20
\ No newline at end of file
diff --git a/admin/.stylelintrc.js b/admin/.stylelintrc.js
index 061b87a79..bd0c3a5c2 100644
--- a/admin/.stylelintrc.js
+++ b/admin/.stylelintrc.js
@@ -1,18 +1,17 @@
-'use strict';
+'use strict'
 
 module.exports = {
-  extends: ["stylelint-config-standard-scss", "stylelint-config-recommended-vue"],
+  extends: ['stylelint-config-standard-scss', 'stylelint-config-recommended-vue'],
   overrides: [
     {
-      files: "**/*.{scss}",
-      customSyntax: "postcss-scss",
-      extends: ["stylelint-config-standard-scss"],
+      files: '**/*.{scss}',
+      customSyntax: 'postcss-scss',
+      extends: ['stylelint-config-standard-scss'],
     },
     {
-      files: "**/*.vue",
-      customSyntax: "postcss-html",
-      extends: ["stylelint-config-recommended-vue"],
-    }
-  ]
-
-};
\ No newline at end of file
+      files: '**/*.vue',
+      customSyntax: 'postcss-html',
+      extends: ['stylelint-config-recommended-vue'],
+    },
+  ],
+}
diff --git a/admin/components.d.ts b/admin/components.d.ts
index e614417fc..75f33eafb 100644
--- a/admin/components.d.ts
+++ b/admin/components.d.ts
@@ -7,7 +7,40 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    BAvatar: typeof import('bootstrap-vue-next')['BAvatar']
+    BBadge: typeof import('bootstrap-vue-next')['BBadge']
+    BButton: typeof import('bootstrap-vue-next')['BButton']
+    BCard: typeof import('bootstrap-vue-next')['BCard']
+    BCardText: typeof import('bootstrap-vue-next')['BCardText']
+    BCol: typeof import('bootstrap-vue-next')['BCol']
+    BCollapse: typeof import('bootstrap-vue-next')['BCollapse']
+    BContainer: typeof import('bootstrap-vue-next')['BContainer']
+    BForm: typeof import('bootstrap-vue-next')['BForm']
+    BFormCheckbox: typeof import('bootstrap-vue-next')['BFormCheckbox']
+    BFormGroup: typeof import('bootstrap-vue-next')['BFormGroup']
+    BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
+    BFormRadioGroup: typeof import('bootstrap-vue-next')['BFormRadioGroup']
+    BFormSelect: typeof import('bootstrap-vue-next')['BFormSelect']
+    BFormTextarea: typeof import('bootstrap-vue-next')['BFormTextarea']
+    BInputGroup: typeof import('bootstrap-vue-next')['BInputGroup']
+    BLink: typeof import('bootstrap-vue-next')['BLink']
+    BListGroup: typeof import('bootstrap-vue-next')['BListGroup']
+    BListGroupItem: typeof import('bootstrap-vue-next')['BListGroupItem']
     BModal: typeof import('bootstrap-vue-next')['BModal']
+    BPagination: typeof import('bootstrap-vue-next')['BPagination']
+    BRow: typeof import('bootstrap-vue-next')['BRow']
+    BTab: typeof import('bootstrap-vue-next')['BTab']
+    BTable: typeof import('bootstrap-vue-next')['BTable']
+    BTableLite: typeof import('bootstrap-vue-next')['BTableLite']
+    BTableSimple: typeof import('bootstrap-vue-next')['BTableSimple']
+    BTabs: typeof import('bootstrap-vue-next')['BTabs']
+    BTbody: typeof import('bootstrap-vue-next')['BTbody']
+    BTd: typeof import('bootstrap-vue-next')['BTd']
+    BTh: typeof import('bootstrap-vue-next')['BTh']
+    BThead: typeof import('bootstrap-vue-next')['BThead']
+    BToastOrchestrator: typeof import('bootstrap-vue-next')['BToastOrchestrator']
+    BTooltip: typeof import('bootstrap-vue-next')['BTooltip']
+    BTr: typeof import('bootstrap-vue-next')['BTr']
     ChangeUserRoleFormular: typeof import('./src/components/ChangeUserRoleFormular.vue')['default']
     CommunityVisualizeItem: typeof import('./src/components/Federation/CommunityVisualizeItem.vue')['default']
     ConfirmRegisterMailFormular: typeof import('./src/components/ConfirmRegisterMailFormular.vue')['default']
@@ -27,7 +60,15 @@ declare module 'vue' {
     EditCreationFormular: typeof import('./src/components/EditCreationFormular.vue')['default']
     FederationVisualizeItem: typeof import('./src/components/Federation/FederationVisualizeItem.vue')['default']
     FigureQrCode: typeof import('./src/components/FigureQrCode.vue')['default']
+    IBiArrowClockwise: typeof import('~icons/bi/arrow-clockwise')['default']
+    IBiBellFill: typeof import('~icons/bi/bell-fill')['default']
+    IBiCheck: typeof import('~icons/bi/check')['default']
     IBiEnvelope: typeof import('~icons/bi/envelope')['default']
+    IBiEye: typeof import('~icons/bi/eye')['default']
+    IBiList: typeof import('~icons/bi/list')['default']
+    IBiPencil: typeof import('~icons/bi/pencil')['default']
+    IBiPencilFill: typeof import('~icons/bi/pencil-fill')['default']
+    IBiTrash: typeof import('~icons/bi/trash')['default']
     IBiXCircle: typeof import('~icons/bi/x-circle')['default']
     IIcBaselineClose: typeof import('~icons/ic/baseline-close')['default']
     IOcticonCircleSlash24: typeof import('~icons/octicon/circle-slash24')['default']
@@ -35,7 +76,6 @@ declare module 'vue' {
     IPhCaretDown: typeof import('~icons/ph/caret-down')['default']
     IPhCaretUpFill: typeof import('~icons/ph/caret-up-fill')['default']
     IPhEnvelope: typeof import('~icons/ph/envelope')['default']
-    IPhXCircle: typeof import('~icons/ph/x-circle')['default']
     NavBar: typeof import('./src/components/NavBar.vue')['default']
     NotFoundPage: typeof import('./src/components/NotFoundPage.vue')['default']
     OpenCreationsTable: typeof import('./src/components/Tables/OpenCreationsTable.vue')['default']
@@ -49,5 +89,11 @@ declare module 'vue' {
     TimePicker: typeof import('./src/components/input/TimePicker.vue')['default']
     TransactionLinkList: typeof import('./src/components/TransactionLinkList.vue')['default']
     UserQuery: typeof import('./src/components/UserQuery.vue')['default']
+    IPhXCircle: typeof import('~icons/ph/x-circle')['default']
+
+  }
+  export interface ComponentCustomProperties {
+    vBToggle: typeof import('bootstrap-vue-next')['vBToggle']
+    vBTooltip: typeof import('bootstrap-vue-next')['vBTooltip']
   }
 }
diff --git a/admin/package.json b/admin/package.json
index 5f9556bfa..b1983fd39 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -84,7 +84,7 @@
     "postcss-html": "^1.3.0",
     "postcss-scss": "^4.0.3",
     "prettier": "^3.3.3",
-    "stylelint": "14.16.1",
+    "stylelint": "16.7.0",
     "stylelint-config-recommended-vue": "1.5.0",
     "stylelint-config-standard-scss": "13.1.0",
     "unplugin-icons": "^0.19.0",
diff --git a/admin/src/App.vue b/admin/src/App.vue
index 155cd5b65..126cebb70 100644
--- a/admin/src/App.vue
+++ b/admin/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="app">
+    <BToastOrchestrator />
     <default-layout v-if="$store.state.token" />
     <router-view v-else></router-view>
     <BModalOrchestrator />
@@ -14,7 +15,8 @@ import { BModalOrchestrator } from 'bootstrap-vue-next'
 .pointer {
   cursor: pointer;
 }
+
 .pointer:hover {
-  background-color: rgb(216, 213, 213);
+  background-color: rgb(216 213 213);
 }
 </style>
diff --git a/admin/src/components/ConfirmRegisterMailFormular.vue b/admin/src/components/ConfirmRegisterMailFormular.vue
index fbb1fff6b..bb4a9963e 100644
--- a/admin/src/components/ConfirmRegisterMailFormular.vue
+++ b/admin/src/components/ConfirmRegisterMailFormular.vue
@@ -56,6 +56,6 @@ const sendRegisterMail = async () => {
 </script>
 <style>
 .input-group-text {
-  background-color: rgb(255, 252, 205);
+  background-color: rgb(255 252 205);
 }
 </style>
diff --git a/admin/src/components/ContributionLink/ContributionLink.vue b/admin/src/components/ContributionLink/ContributionLink.vue
index 3b8f5f74f..6440b5eaa 100644
--- a/admin/src/components/ContributionLink/ContributionLink.vue
+++ b/admin/src/components/ContributionLink/ContributionLink.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="contribution-link">
-    <b-card
+    <BCard
       border-variant="success"
       :header="$t('contributionLink.contributionLinks')"
       header-bg-variant="success"
@@ -8,17 +8,17 @@
       header-class="text-center"
       class="mt-5"
     >
-      <b-button
+      <BButton
         v-if="!editContributionLink"
         class="my-3 d-flex justify-content-left"
         data-test="new-contribution-link-button"
         @click="visible = !visible"
       >
         {{ $t('math.plus') }} {{ $t('contributionLink.newContributionLink') }}
-      </b-button>
+      </BButton>
 
-      <b-collapse id="newContribution" v-model="visible" class="mt-2">
-        <b-card>
+      <BCollapse id="newContribution" v-model="visible" class="mt-2">
+        <BCard>
           <p class="h2 ml-5">{{ $t('contributionLink.contributionLinks') }}</p>
           <contribution-link-form
             :contribution-link-data="contributionLinkData"
@@ -26,10 +26,10 @@
             @get-contribution-links="$emit('get-contribution-links')"
             @close-contribution-form="closeContributionForm"
           />
-        </b-card>
-      </b-collapse>
+        </BCard>
+      </BCollapse>
 
-      <b-card-text>
+      <BCardText>
         <contribution-link-list
           v-if="count > 0"
           :items="items"
@@ -38,10 +38,61 @@
           @close-contribution-form="closeContributionForm"
         />
         <div v-else>{{ $t('contributionLink.noContributionLinks') }}</div>
-      </b-card-text>
-    </b-card>
+      </BCardText>
+    </BCard>
   </div>
 </template>
+
+<!--<script setup>-->
+<!--import { ref, watchEffect } from 'vue'-->
+<!--import { useEmit } from '@vueuse/core'-->
+<!--import ContributionLinkForm from '../ContributionLink/ContributionLinkForm'-->
+<!--import ContributionLinkList from '../ContributionLink/ContributionLinkList'-->
+<!--import { useToggle } from 'vueuse'-->
+
+<!--// extracting props-->
+<!--const props = defineProps({-->
+<!--  items: {-->
+<!--    type: Array,-->
+<!--    required: true,-->
+<!--  },-->
+<!--  count: {-->
+<!--    type: Number,-->
+<!--    required: true,-->
+<!--  },-->
+<!--})-->
+
+<!--// extracting emits-->
+<!--const emit = useEmit()-->
+
+<!--// setting up refs-->
+<!--const visible = ref(false)-->
+<!--const contributionLinkData = ref({})-->
+<!--const editContributionLink = ref(false)-->
+
+<!--// setting up methods-->
+<!--const closeContributionForm = () => {-->
+<!--  if (visible.value) {-->
+<!--    emit('bv::toggle::collapse', 'newContribution')-->
+<!--    editContributionLink.value = false-->
+<!--    contributionLinkData.value = {}-->
+<!--  }-->
+<!--}-->
+
+<!--const editContributionLinkData = (data) => {-->
+<!--  if (!visible.value) {-->
+<!--    emit('bv::toggle::collapse', 'newContribution')-->
+<!--  }-->
+<!--  contributionLinkData.value = data-->
+<!--  editContributionLink.value = true-->
+<!--}-->
+
+<!--defineExpose({-->
+<!--  closeContributionForm,-->
+<!--  editContributionLinkData,-->
+<!--})-->
+<!--</script>-->
+
 <script>
 import ContributionLinkForm from '../ContributionLink/ContributionLinkForm'
 import ContributionLinkList from '../ContributionLink/ContributionLinkList'
@@ -73,14 +124,14 @@ export default {
   methods: {
     closeContributionForm() {
       if (this.visible) {
-        this.$root.$emit('bv::toggle::collapse', 'newContribution')
+        this.visible = false
         this.editContributionLink = false
         this.contributionLinkData = {}
       }
     },
     editContributionLinkData(data) {
       if (!this.visible) {
-        this.$root.$emit('bv::toggle::collapse', 'newContribution')
+        this.visible = true
       }
       this.contributionLinkData = data
       this.editContributionLink = true
diff --git a/admin/src/components/ContributionLink/ContributionLinkForm.vue b/admin/src/components/ContributionLink/ContributionLinkForm.vue
index 239d77c83..f6f3e1409 100644
--- a/admin/src/components/ContributionLink/ContributionLinkForm.vue
+++ b/admin/src/components/ContributionLink/ContributionLinkForm.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="contribution-link-form">
-    <b-form ref="contributionLinkForm" class="m-5" @submit.prevent="onSubmit">
+    <BForm ref="contributionLinkForm" class="m-5" @submit.prevent="onSubmit" @reset="onReset">
       <!-- Date -->
-      <b-row>
-        <b-col>
-          <b-form-group :label="$t('contributionLink.validFrom')">
-            <b-form-datepicker
+      <BRow>
+        <BCol>
+          <BFormGroup :label="$t('contributionLink.validFrom')">
+            <BFormInput
               v-model="form.validFrom"
               reset-button
               size="lg"
@@ -14,12 +14,13 @@
               reset-value=""
               :label-no-date-selected="$t('contributionLink.noDateSelected')"
               required
-            ></b-form-datepicker>
-          </b-form-group>
-        </b-col>
-        <b-col>
-          <b-form-group :label="$t('contributionLink.validTo')">
-            <b-form-datepicker
+              type="date"
+            />
+          </BFormGroup>
+        </BCol>
+        <BCol>
+          <BFormGroup :label="$t('contributionLink.validTo')">
+            <BFormInput
               v-model="form.validTo"
               reset-button
               size="lg"
@@ -28,14 +29,15 @@
               reset-value=""
               :label-no-date-selected="$t('contributionLink.noDateSelected')"
               required
-            ></b-form-datepicker>
-          </b-form-group>
-        </b-col>
-      </b-row>
+              type="date"
+            />
+          </BFormGroup>
+        </BCol>
+      </BRow>
 
       <!-- Name -->
-      <b-form-group :label="$t('contributionLink.name')">
-        <b-form-input
+      <BFormGroup :label="$t('contributionLink.name')">
+        <BFormInput
           v-model="form.name"
           size="lg"
           type="text"
@@ -43,175 +45,274 @@
           required
           maxlength="100"
           class="test-name"
-        ></b-form-input>
-      </b-form-group>
+        ></BFormInput>
+      </BFormGroup>
       <!-- Desc -->
-      <b-form-group :label="$t('contributionLink.memo')">
-        <b-form-textarea
+      <BFormGroup :label="$t('contributionLink.memo')">
+        <BFormTextarea
           v-model="form.memo"
           size="lg"
           :placeholder="$t('contributionLink.memo')"
           required
           maxlength="255"
           class="test-memo"
-        ></b-form-textarea>
-      </b-form-group>
+        ></BFormTextarea>
+      </BFormGroup>
       <!-- Amount -->
-      <b-form-group :label="$t('contributionLink.amount')">
-        <b-form-input
+      <BFormGroup :label="$t('contributionLink.amount')">
+        <BFormInput
           v-model="form.amount"
           size="lg"
           type="number"
           placeholder="0"
           required
           class="test-amount"
-        ></b-form-input>
-      </b-form-group>
-      <b-row class="mb-4">
-        <b-col>
+        ></BFormInput>
+      </BFormGroup>
+      <BRow class="mb-4">
+        <BCol>
           <!-- Cycle -->
           <label for="cycle">{{ $t('contributionLink.cycle') }}</label>
-          <b-form-select
-            v-model="form.cycle"
-            :options="cycle"
-            class="mb-3"
-            size="lg"
-          ></b-form-select>
-        </b-col>
-        <b-col>
+          <BFormSelect v-model="form.cycle" :options="cycle" class="mb-3" size="lg"></BFormSelect>
+        </BCol>
+        <BCol>
           <!-- maxPerCycle -->
           <label for="maxPerCycle">{{ $t('contributionLink.maxPerCycle') }}</label>
-          <b-form-select
+          <BFormSelect
             v-model="form.maxPerCycle"
             :options="maxPerCycle"
             :disabled="disabled"
             class="mb-3"
             size="lg"
-          ></b-form-select>
-        </b-col>
-      </b-row>
+          ></BFormSelect>
+        </BCol>
+      </BRow>
 
       <!-- Max amount -->
       <!-- 
-          <b-form-group :label="$t('contributionLink.maximumAmount')">
-            <b-form-input
+          <BFormGroup :label="$t('contributionLink.maximumAmount')">
+            <BFormInput
               v-model="form.maxAmountPerMonth"
               size="lg"
               :disabled="disabled"
               type="number"
               placeholder="0"
-            ></b-form-input>
-          </b-form-group>
+            ></BFormInput>
+          </BFormGroup>
           -->
       <div class="mt-6">
-        <b-button type="submit" variant="primary">
+        <BButton type="submit" variant="primary">
           {{
             editContributionLink ? $t('contributionLink.saveChange') : $t('contributionLink.create')
           }}
-        </b-button>
-        <b-button type="reset" variant="danger" @click.prevent="onReset">
+        </BButton>
+        <BButton type="reset" variant="danger">
           {{ $t('contributionLink.clear') }}
-        </b-button>
-        <b-button @click.prevent="$emit('close-contribution-form')">
+        </BButton>
+        <BButton @click.prevent="emit('close-contribution-form')">
           {{ $t('close') }}
-        </b-button>
+        </BButton>
       </div>
-    </b-form>
+    </BForm>
   </div>
 </template>
-<script>
+<!--<script>-->
+<!--import { createContributionLink } from '@/graphql/createContributionLink.js'-->
+<!--import { updateContributionLink } from '@/graphql/updateContributionLink.js'-->
+
+<!--export default {-->
+<!--  name: 'ContributionLinkForm',-->
+<!--  props: {-->
+<!--    contributionLinkData: {-->
+<!--      type: Object,-->
+<!--      default() {-->
+<!--        return {}-->
+<!--      },-->
+<!--    },-->
+<!--    editContributionLink: { type: Boolean, required: true },-->
+<!--  },-->
+<!--  emits: ['close-contribution-form', 'close-contribution-link', 'get-contribution-links'],-->
+<!--  data() {-->
+<!--    return {-->
+<!--      form: {-->
+<!--        name: null,-->
+<!--        memo: null,-->
+<!--        amount: null,-->
+<!--        validFrom: null,-->
+<!--        validTo: null,-->
+<!--        cycle: 'ONCE',-->
+<!--        maxPerCycle: 1,-->
+<!--        maxAmountPerMonth: '0',-->
+<!--      },-->
+<!--      min: new Date(),-->
+<!--      cycle: [-->
+<!--        { value: 'ONCE', text: this.$t('contributionLink.options.cycle.once') },-->
+<!--        //        { value: 'hourly', text: this.$t('contributionLink.options.cycle.hourly') },-->
+<!--        { value: 'DAILY', text: this.$t('contributionLink.options.cycle.daily') },-->
+<!--        //        { value: 'weekly', text: this.$t('contributionLink.options.cycle.weekly') },-->
+<!--        //        { value: 'monthly', text: this.$t('contributionLink.options.cycle.monthly') },-->
+<!--        //        { value: 'yearly', text: this.$t('contributionLink.options.cycle.yearly') },-->
+<!--      ],-->
+<!--      maxPerCycle: [-->
+<!--        { value: '1', text: '1 x' },-->
+<!--        //        { value: '2', text: '2 x' },-->
+<!--        //        { value: '3', text: '3 x' },-->
+<!--        //        { value: '4', text: '4 x' },-->
+<!--        //        { value: '5', text: '5 x' },-->
+<!--      ],-->
+<!--    }-->
+<!--  },-->
+<!--  computed: {-->
+<!--    disabled() {-->
+<!--      return true-->
+<!--    },-->
+<!--  },-->
+<!--  watch: {-->
+<!--    contributionLinkData() {-->
+<!--      this.form = this.contributionLinkData-->
+<!--    },-->
+<!--  },-->
+<!--  methods: {-->
+<!--    onSubmit() {-->
+<!--      if (this.form.validFrom === null)-->
+<!--        return this.toastError(this.$t('contributionLink.noStartDate'))-->
+<!--      if (this.form.validTo === null) return this.toastError(this.$t('contributionLink.noEndDate'))-->
+
+<!--      const variables = {-->
+<!--        ...this.form,-->
+<!--        id: this.contributionLinkData.id ? this.contributionLinkData.id : null,-->
+<!--      }-->
+
+<!--      this.$apollo-->
+<!--        .mutate({-->
+<!--          mutation: this.editContributionLink ? updateContributionLink : createContributionLink,-->
+<!--          variables: variables,-->
+<!--        })-->
+<!--        .then((result) => {-->
+<!--          const link = this.editContributionLink-->
+<!--            ? result.data.updateContributionLink.link-->
+<!--            : result.data.createContributionLink.link-->
+<!--          this.toastSuccess(-->
+<!--            this.editContributionLink ? this.$t('contributionLink.changeSaved') : link,-->
+<!--          )-->
+<!--          this.onReset()-->
+<!--          this.$root.$emit('bv::toggle::collapse', 'newContribution')-->
+<!--          this.$emit('get-contribution-links')-->
+<!--        })-->
+<!--        .catch((error) => {-->
+<!--          this.toastError(error.message)-->
+<!--        })-->
+<!--    },-->
+<!--    onReset() {-->
+<!--      this.$refs.contributionLinkForm.reset()-->
+<!--      this.form = {}-->
+<!--      this.form.validFrom = null-->
+<!--      this.form.validTo = null-->
+<!--    },-->
+<!--  },-->
+<!--}-->
+<!--</script>-->
+
+<script setup>
+import { ref, watch } from 'vue'
+import { useMutation } from '@vue/apollo-composable'
 import { createContributionLink } from '@/graphql/createContributionLink.js'
 import { updateContributionLink } from '@/graphql/updateContributionLink.js'
+import { useAppToast } from '@/composables/useToast'
+import { useI18n } from 'vue-i18n'
 
-export default {
-  name: 'ContributionLinkForm',
-  props: {
-    contributionLinkData: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-    editContributionLink: { type: Boolean, required: true },
+const props = defineProps({
+  contributionLinkData: {
+    type: Object,
+    default: () => ({}),
   },
-  emits: ['close-contribution-form', 'close-contribution-link', 'get-contribution-links'],
-  data() {
-    return {
-      form: {
-        name: null,
-        memo: null,
-        amount: null,
-        validFrom: null,
-        validTo: null,
-        cycle: 'ONCE',
-        maxPerCycle: 1,
-        maxAmountPerMonth: '0',
-      },
-      min: new Date(),
-      cycle: [
-        { value: 'ONCE', text: this.$t('contributionLink.options.cycle.once') },
-        //        { value: 'hourly', text: this.$t('contributionLink.options.cycle.hourly') },
-        { value: 'DAILY', text: this.$t('contributionLink.options.cycle.daily') },
-        //        { value: 'weekly', text: this.$t('contributionLink.options.cycle.weekly') },
-        //        { value: 'monthly', text: this.$t('contributionLink.options.cycle.monthly') },
-        //        { value: 'yearly', text: this.$t('contributionLink.options.cycle.yearly') },
-      ],
-      maxPerCycle: [
-        { value: '1', text: '1 x' },
-        //        { value: '2', text: '2 x' },
-        //        { value: '3', text: '3 x' },
-        //        { value: '4', text: '4 x' },
-        //        { value: '5', text: '5 x' },
-      ],
-    }
-  },
-  computed: {
-    disabled() {
-      return true
-    },
-  },
-  watch: {
-    contributionLinkData() {
-      this.form = this.contributionLinkData
-    },
-  },
-  methods: {
-    onSubmit() {
-      if (this.form.validFrom === null)
-        return this.toastError(this.$t('contributionLink.noStartDate'))
-      if (this.form.validTo === null) return this.toastError(this.$t('contributionLink.noEndDate'))
+  editContributionLink: { type: Boolean, required: true },
+})
 
-      const variables = {
-        ...this.form,
-        id: this.contributionLinkData.id ? this.contributionLinkData.id : null,
-      }
+const emit = defineEmits([
+  'bv::toggle::collapse',
+  'get-contribution-links',
+  'close-contribution-form',
+])
 
-      this.$apollo
-        .mutate({
-          mutation: this.editContributionLink ? updateContributionLink : createContributionLink,
-          variables: variables,
-        })
-        .then((result) => {
-          const link = this.editContributionLink
-            ? result.data.updateContributionLink.link
-            : result.data.createContributionLink.link
-          this.toastSuccess(
-            this.editContributionLink ? this.$t('contributionLink.changeSaved') : link,
-          )
-          this.onReset()
-          this.$root.$emit('bv::toggle::collapse', 'newContribution')
-          this.$emit('get-contribution-links')
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
-    },
-    onReset() {
-      this.$refs.contributionLinkForm.reset()
-      this.form = {}
-      this.form.validFrom = null
-      this.form.validTo = null
-    },
+const { t } = useI18n()
+
+const contributionLinkForm = ref(null)
+
+const form = ref({
+  name: null,
+  memo: null,
+  amount: null,
+  validFrom: null,
+  validTo: null,
+  cycle: 'ONCE',
+  maxPerCycle: 1,
+  maxAmountPerMonth: '0',
+})
+
+const min = new Date().toLocaleDateString()
+const { toastError, toastSuccess } = useAppToast()
+
+const cycle = ref([
+  { value: 'ONCE', text: t('contributionLink.options.cycle.once') },
+  { value: 'DAILY', text: t('contributionLink.options.cycle.daily') },
+])
+
+const maxPerCycle = ref([{ value: '1', text: '1 x' }])
+
+// Set client
+const { mutate: contributionLinkMutation } = useMutation(
+  props.editContributionLink ? updateContributionLink : createContributionLink,
+)
+
+watch(
+  () => props.contributionLinkData,
+  (newVal) => {
+    form.value = newVal
+    form.value.validFrom = formatDateFromDateTime(newVal.validFrom)
+    form.value.validTo = formatDateFromDateTime(newVal.validTo)
   },
+)
+
+const onSubmit = async () => {
+  if (form.value.validFrom === null) return toastError(t('contributionLink.noStartDate'))
+
+  if (form.value.validTo === null) return toastError(t('contributionLink.noEndDate'))
+
+  const variables = {
+    ...form.value,
+    maxAmountPerMonth: 1, // TODO this is added only for test puropuse during migration since max amount input is commented out but without it being a number bigger then 0 it doesn't work
+    id: props.contributionLinkData.id ? props.contributionLinkData.id : null,
+  }
+
+  try {
+    const result = await contributionLinkMutation({ ...variables })
+    const link = props.editContributionLink
+      ? result.data.updateContributionLink.link
+      : result.data.createContributionLink.link
+    toastSuccess(props.editContributionLink ? t('contributionLink.changeSaved') : link)
+    onReset()
+    emit('close-contribution-form')
+    emit('get-contribution-links')
+  } catch (error) {
+    toastError(error.message)
+  }
 }
+
+const formatDateFromDateTime = (datetimeString) => {
+  if (!datetimeString || !datetimeString?.includes('T')) return datetimeString
+  return datetimeString.split('T')[0]
+}
+
+const onReset = () => {
+  form.value = { validFrom: null, validTo: null }
+}
+
+defineExpose({
+  form,
+  min,
+  cycle,
+  maxPerCycle,
+  onSubmit,
+})
 </script>
diff --git a/admin/src/components/ContributionLink/ContributionLinkList.vue b/admin/src/components/ContributionLink/ContributionLinkList.vue
index e87a48059..d22ef3af9 100644
--- a/admin/src/components/ContributionLink/ContributionLinkList.vue
+++ b/admin/src/components/ContributionLink/ContributionLinkList.vue
@@ -1,47 +1,47 @@
 <template>
   <div class="contribution-link-list">
-    <b-table :items="items" :fields="fields" striped hover stacked="lg">
+    <BTable :items="items" :fields="fields" striped hover stacked="lg">
       <template #cell(delete)="data">
-        <b-button
+        <BButton
           variant="danger"
           size="md"
           class="mr-2 test-delete-link"
           @click="deleteContributionLink(data.item.id, data.item.name)"
         >
-          <b-icon icon="trash" variant="light"></b-icon>
-        </b-button>
+          <IBiTrash />
+        </BButton>
       </template>
       <template #cell(edit)="data">
-        <b-button variant="success" size="md" class="mr-2" @click="editContributionLink(data.item)">
-          <b-icon icon="pencil" variant="light"></b-icon>
-        </b-button>
+        <BButton variant="success" size="md" class="mr-2" @click="editContributionLink(data.item)">
+          <IBiPencil />
+        </BButton>
       </template>
       <template #cell(show)="data">
-        <b-button
+        <BButton
           variant="info"
           size="md"
           class="mr-2 test-show"
           @click="showContributionLink(data.item)"
         >
-          <b-icon icon="eye" variant="light"></b-icon>
-        </b-button>
+          <IBiEye />
+        </BButton>
       </template>
-    </b-table>
+    </BTable>
 
-    <b-modal ref="my-modal" ok-only hide-header-close>
-      <b-card header-tag="header" footer-tag="footer">
+    <BModal ref="my-modal" ok-only hide-header-close>
+      <BCard header-tag="header" footer-tag="footer">
         <template #header>
           <h6 class="mb-0">{{ modalData ? modalData.name : '' }}</h6>
         </template>
-        <b-card-text>
+        <BCardText>
           {{ modalData.memo ? modalData.memo : '' }}
           <figure-qr-code :link="modalData ? modalData.link : ''" />
-        </b-card-text>
+        </BCardText>
         <template #footer>
           <em>{{ modalData ? modalData.link : '' }}</em>
         </template>
-      </b-card>
-    </b-modal>
+      </BCard>
+    </BModal>
   </div>
 </template>
 <script>
diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
index 5abbb0a33..21411d3b5 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
@@ -82,20 +82,25 @@ export default {
   float: right;
   width: 75%;
 }
+
 .is-moderator-message {
-  background-color: rgb(228, 237, 245);
+  background-color: rgb(228 237 245);
 }
+
 .is-moderator-hidden-message {
-  background-color: rgb(217, 161, 228);
+  background-color: rgb(217 161 228);
 }
+
 .is-user {
   clear: both;
   width: 75%;
 }
+
 .is-user-message {
-  background-color: rgb(236, 235, 213);
+  background-color: rgb(236 235 213);
 }
+
 .is-user-history-message {
-  background-color: rgb(235, 226, 57);
+  background-color: rgb(235 226 57);
 }
 </style>
diff --git a/admin/src/components/DeletedUserFormular.vue b/admin/src/components/DeletedUserFormular.vue
index 658d3eee8..cf39d9570 100644
--- a/admin/src/components/DeletedUserFormular.vue
+++ b/admin/src/components/DeletedUserFormular.vue
@@ -124,6 +124,6 @@ export default {
 </script>
 <style>
 .input-group-text {
-  background-color: rgb(255, 252, 205);
+  background-color: rgb(255 252 205);
 }
 </style>
diff --git a/admin/src/components/Federation/CommunityVisualizeItem.vue b/admin/src/components/Federation/CommunityVisualizeItem.vue
index c19f8862f..853fb7324 100644
--- a/admin/src/components/Federation/CommunityVisualizeItem.vue
+++ b/admin/src/components/Federation/CommunityVisualizeItem.vue
@@ -1,30 +1,30 @@
 <template>
   <div class="community-visualize-item">
-    <b-row @click="toggleDetails">
-      <b-col cols="1"><b-icon :icon="icon" :variant="variant" class="mr-4"></b-icon></b-col>
-      <b-col>
+    <BRow @click="toggleDetails">
+      <BCol cols="1"><b-icon :icon="icon" :variant="variant" class="mr-4"></b-icon></BCol>
+      <BCol>
         <div>
           <a :href="item.url" target="_blank">{{ item.url }}</a>
         </div>
         <small>{{ `${item.publicKey.substring(0, 26)}…` }}</small>
-      </b-col>
-      <b-col v-b-tooltip="item.description">{{ item.name }}</b-col>
-      <b-col cols="2">{{ lastAnnouncedAt }}</b-col>
-      <b-col cols="2">{{ createdAt }}</b-col>
-    </b-row>
-    <b-row v-if="details" class="details">
-      <b-col colspan="5">
-        <b-list-group>
-          <b-list-group-item v-if="item.uuid">
+      </BCol>
+      <BCol v-b-tooltip="item.description">{{ item.name }}</BCol>
+      <BCol cols="2">{{ lastAnnouncedAt }}</BCol>
+      <BCol cols="2">{{ createdAt }}</BCol>
+    </BRow>
+    <BRow v-if="details" class="details">
+      <BCol colspan="5">
+        <BListGroup>
+          <BListGroupItem v-if="item.uuid">
             {{ $t('federation.communityUuid') }}&nbsp;{{ item.uuid }}
-          </b-list-group-item>
-          <b-list-group-item v-if="item.authenticatedAt">
+          </BListGroupItem>
+          <BListGroupItem v-if="item.authenticatedAt">
             {{ $t('federation.authenticatedAt') }}&nbsp;{{ item.authenticatedAt }}
-          </b-list-group-item>
-          <b-list-group-item>
+          </BListGroupItem>
+          <BListGroupItem>
             {{ $t('federation.publicKey') }}&nbsp;{{ item.publicKey }}
-          </b-list-group-item>
-          <b-list-group-item v-if="!item.foreign">
+          </BListGroupItem>
+          <BListGroupItem v-if="!item.foreign">
             <editable-group
               :allow-edit="$store.state.moderator.roles.includes('ADMIN')"
               @save="handleUpdateHomeCommunity"
@@ -32,7 +32,7 @@
             >
               <template #view>
                 <label>{{ $t('federation.gmsApiKey') }}&nbsp;{{ gmsApiKey }}</label>
-                <b-form-group>
+                <BFormGroup>
                   {{ $t('federation.coordinates') }}
                   <span v-if="isValidLocation">
                     {{
@@ -42,7 +42,7 @@
                       })
                     }}
                   </span>
-                </b-form-group>
+                </BFormGroup>
               </template>
               <template #edit>
                 <editable-groupable-label
@@ -53,29 +53,29 @@
                 <coordinates v-model="location" />
               </template>
             </editable-group>
-          </b-list-group-item>
-          <b-list-group-item>
-            <b-list-group>
-              <b-row>
-                <b-col class="ml-1">{{ $t('federation.verified') }}</b-col>
-                <b-col>{{ $t('federation.apiVersion') }}</b-col>
-                <b-col>{{ $t('federation.createdAt') }}</b-col>
-                <b-col>{{ $t('federation.lastAnnouncedAt') }}</b-col>
-                <b-col>{{ $t('federation.verifiedAt') }}</b-col>
-                <b-col>{{ $t('federation.lastErrorAt') }}</b-col>
-              </b-row>
-              <b-list-group-item
+          </BListGroupItem>
+          <BListGroup-item>
+            <BListGroup>
+              <BRow>
+                <BCol class="ml-1">{{ $t('federation.verified') }}</BCol>
+                <BCol>{{ $t('federation.apiVersion') }}</BCol>
+                <BCol>{{ $t('federation.createdAt') }}</BCol>
+                <BCol>{{ $t('federation.lastAnnouncedAt') }}</BCol>
+                <BCol>{{ $t('federation.verifiedAt') }}</BCol>
+                <BCol>{{ $t('federation.lastErrorAt') }}</BCol>
+              </BRow>
+              <BListGroup-item
                 v-for="federation in item.federatedCommunities"
                 :key="federation.id"
                 :variant="!item.foreign ? 'primary' : 'warning'"
               >
                 <federation-visualize-item :item="federation" />
-              </b-list-group-item>
-            </b-list-group>
-          </b-list-group-item>
-        </b-list-group>
-      </b-col>
-    </b-row>
+              </BListGroup-item>
+            </BListGroup>
+          </BListGroup-item>
+        </BListGroup>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/admin/src/components/FigureQrCode.vue b/admin/src/components/FigureQrCode.vue
index 11a11d98c..353c0d87d 100644
--- a/admin/src/components/FigureQrCode.vue
+++ b/admin/src/components/FigureQrCode.vue
@@ -45,12 +45,13 @@ export default {
 <style scoped>
 .qrbox {
   padding: 20px;
-  background-color: rgb(255, 255, 255);
+  background-color: rgb(255 255 255);
 }
+
 .canvas {
   width: 90%;
   max-width: 300px;
   padding: 5px;
-  background-color: rgb(255, 255, 255);
+  background-color: rgb(255 255 255);
 }
 </style>
diff --git a/admin/src/components/NavBar.vue b/admin/src/components/NavBar.vue
index eec7f5e1f..c3c2978bb 100644
--- a/admin/src/components/NavBar.vue
+++ b/admin/src/components/NavBar.vue
@@ -9,7 +9,7 @@
         />
       </BNavbarBrand>
 
-      <BNavbarToggle target="navbar-toggle-collapse" />
+      <BNavbarToggle v-b-toggle.nav-collapse target="navbar-toggle-collapse" />
 
       <BCollapse id="nav-collapse" is-nav>
         <BNavbarNav>
@@ -48,6 +48,7 @@ import {
   BNavbarBrand,
   BBadge,
   BNavbarToggle,
+  vBToggle,
   vBColorMode,
 } from 'bootstrap-vue-next'
 
diff --git a/admin/src/components/NotFoundPage.vue b/admin/src/components/NotFoundPage.vue
index d9a3cde7d..6c49222ef 100755
--- a/admin/src/components/NotFoundPage.vue
+++ b/admin/src/components/NotFoundPage.vue
@@ -1249,21 +1249,23 @@ export default {
   transform-box: fill-box;
 }
 
-/*************swing************/
+/************* swing ************/
 @keyframes swing {
   0% {
     transform: rotate(10deg);
   }
+
   100% {
     transform: rotate(-10deg);
   }
 }
 
-/*************swing hair************/
+/************* swing hair ************/
 @keyframes swinghair {
   0% {
     transform: rotate(6deg);
   }
+
   100% {
     transform: rotate(-6deg);
   }
diff --git a/admin/src/components/Tables/StatisticTable.vue b/admin/src/components/Tables/StatisticTable.vue
index a533a2932..d5a62306c 100644
--- a/admin/src/components/Tables/StatisticTable.vue
+++ b/admin/src/components/Tables/StatisticTable.vue
@@ -15,7 +15,7 @@
             <b>{{ $t('statistic.totalUsers') }}</b>
           </BTd>
           <BTd class="text-right">
-            {{ modelValue.totalUsers }}
+            {{ props.statistics.totalUsers }}
           </BTd>
           <BTd></BTd>
         </BTr>
@@ -24,7 +24,7 @@
             <b>{{ $t('statistic.activeUsers') }}</b>
           </BTd>
           <BTd class="text-right">
-            {{ modelValue.activeUsers }}
+            {{ props.statistics.activeUsers }}
           </BTd>
           <BTd></BTd>
         </BTr>
@@ -33,7 +33,7 @@
             <b>{{ $t('statistic.deletedUsers') }}</b>
           </BTd>
           <BTd class="text-right">
-            {{ modelValue.deletedUsers }}
+            {{ props.statistics.deletedUsers }}
           </BTd>
           <BTd></BTd>
         </BTr>
@@ -42,11 +42,11 @@
             <b>{{ $t('statistic.totalGradidoCreated') }}</b>
           </BTd>
           <BTd class="text-right">
-            <!--            {{ $n(modelValue.totalGradidoCreated, 'decimal') }} {{ $t('GDD') }}-->
+            <!--            {{ $n(props.statistics.totalGradidoCreated, 'decimal') }} {{ $t('GDD') }}-->
             4500
           </BTd>
           <BTd class="text-right">
-            {{ modelValue.totalGradidoCreated }}
+            {{ props.statistics.totalGradidoCreated }}
           </BTd>
         </BTr>
         <BTr>
@@ -54,21 +54,19 @@
             <b>{{ $t('statistic.totalGradidoDecayed') }}</b>
           </BTd>
           <BTd class="text-right">
-            <!--            {{ $n(modelValue.totalGradidoDecayed, 'decimal') }} {{ $t('GDD') }}-->
-            100
+            {{ $n(parseFloat(props.statistics.totalGradidoDecayed), 'decimal') }} {{ $t('GDD') }}
           </BTd>
-          <BTd class="text-right">{{ modelValue.totalGradidoDecayed }}</BTd>
+          <BTd class="text-right">{{ props.statistics.totalGradidoDecayed }}</BTd>
         </BTr>
         <BTr>
           <BTd>
             <b>{{ $t('statistic.totalGradidoAvailable') }}</b>
           </BTd>
           <BTd class="text-right">
-            <!--            {{ $n(modelValue.totalGradidoAvailable, 'decimal') }} {{ $t('GDD') }}-->
-            500
+            {{ $n(parseFloat(props.statistics.totalGradidoAvailable), 'decimal') }} {{ $t('GDD') }}
           </BTd>
           <BTd class="text-right">
-            {{ modelValue.totalGradidoAvailable }}
+            {{ props.statistics.totalGradidoAvailable }}
           </BTd>
         </BTr>
         <BTr>
@@ -76,12 +74,10 @@
             <b>{{ $t('statistic.totalGradidoUnbookedDecayed') }}</b>
           </BTd>
           <BTd class="text-right">
-            <!--            {{ $n(modelValue.totalGradidoUnbookedDecayed, 'decimal') }} {{ $t('GDD') }}-->
-            600
-          </BTd>
-          <BTd class="text-right">
-            {{ modelValue.totalGradidoUnbookedDecayed }}
+            {{ $n(parseFloat(props.statistics.totalGradidoUnbookedDecayed), 'decimal') }}
+            {{ $t('GDD') }}
           </BTd>
+          <BTd class="text-right"> {{ props.statistics.totalGradidoUnbookedDecayed }} </BTd>
         </BTr>
       </BTbody>
     </BTableSimple>
@@ -89,10 +85,9 @@
 </template>
 <script setup>
 import { defineProps } from 'vue'
-import { BTableSimple, BThead, BTr, BTh, BTbody, BTd } from 'bootstrap-vue-next'
 
 const props = defineProps({
-  modelValue: {
+  statistics: {
     type: Object,
     required: true,
   },
diff --git a/admin/src/components/input/EditableGroup.vue b/admin/src/components/input/EditableGroup.vue
index 9f683fc06..37632721d 100644
--- a/admin/src/components/input/EditableGroup.vue
+++ b/admin/src/components/input/EditableGroup.vue
@@ -2,19 +2,20 @@
   <div>
     <slot v-if="!isEditing" :is-editing="isEditing" name="view"></slot>
     <slot v-else :is-editing="isEditing" name="edit" @input="valueChanged"></slot>
-    <b-form-group v-if="allowEdit && !isEditing">
-      <b-button :variant="variant" @click="enableEdit">
-        <b-icon icon="pencil-fill">{{ $t('edit') }}</b-icon>
-      </b-button>
-    </b-form-group>
-    <b-form-group v-else-if="allowEdit && isEditing">
-      <b-button :variant="variant" :disabled="!isValueChanged" class="save-button" @click="save">
+    <BFormGroup v-if="allowEdit && !isEditing">
+      <BButton :variant="variant" @click="enableEdit">
+        <IBiPencilFill />
+        {{ $t('edit') }}
+      </BButton>
+    </BFormGroup>
+    <BFormGroup v-else-if="allowEdit && isEditing">
+      <BButton :variant="variant" :disabled="!isValueChanged" class="save-button" @click="save">
         {{ $t('save') }}
-      </b-button>
-      <b-button variant="secondary" class="close-button" @click="close">
+      </BButton>
+      <BButton variant="secondary" class="close-button" @click="close">
         {{ $t('close') }}
-      </b-button>
-    </b-form-group>
+      </BButton>
+    </BFormGroup>
   </div>
 </template>
 
diff --git a/admin/src/components/input/EditableGroupableLabel.vue b/admin/src/components/input/EditableGroupableLabel.vue
index 21db33607..ca1208180 100644
--- a/admin/src/components/input/EditableGroupableLabel.vue
+++ b/admin/src/components/input/EditableGroupableLabel.vue
@@ -1,7 +1,7 @@
 <template>
-  <b-form-group :label="label" :label-for="idName">
-    <b-form-input :id="idName" v-model="inputValue" @input="updateValue" />
-  </b-form-group>
+  <BFormGroup :label="label" :label-for="idName">
+    <BFormInput :id="idName" v-model="inputValue" @input="updateValue" />
+  </BFormGroup>
 </template>
 
 <script>
diff --git a/admin/src/composables/useToast.js b/admin/src/composables/useToast.js
new file mode 100644
index 000000000..6bc4fb574
--- /dev/null
+++ b/admin/src/composables/useToast.js
@@ -0,0 +1,41 @@
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'bootstrap-vue-next'
+
+export function useAppToast() {
+  const { t } = useI18n()
+  const { show } = useToast()
+  const toastSuccess = (message) => {
+    toast(message, {
+      title: t('success'),
+      variant: 'success',
+    })
+  }
+
+  const toastError = (message) => {
+    toast(message, {
+      title: t('error'),
+      variant: 'danger',
+    })
+  }
+
+  const toast = (message, options = {}) => {
+    if (message.replace) message = message.replace(/^GraphQL error: /, '')
+    options = {
+      solid: true,
+      toaster: 'b-toaster-top-right',
+      headerClass: 'gdd-toaster-title',
+      bodyClass: 'gdd-toaster-body',
+      toastClass: 'gdd-toaster',
+      ...options,
+      body: message,
+    }
+
+    show({ props: { ...options } })
+  }
+
+  return {
+    toastSuccess,
+    toastError,
+    toast,
+  }
+}
diff --git a/admin/src/pages/CommunityStatistic.vue b/admin/src/pages/CommunityStatistic.vue
index 81e087b45..b72bdb5b0 100644
--- a/admin/src/pages/CommunityStatistic.vue
+++ b/admin/src/pages/CommunityStatistic.vue
@@ -1,44 +1,43 @@
 <template>
   <div class="community-statistic">
-    <statistic-table v-model="statistics" />
+    <statistic-table v-if="!loading" :statistics="statistics" />
   </div>
 </template>
-<script>
-import { communityStatistics } from '@/graphql/communityStatistics.js'
-import StatisticTable from '../components/Tables/StatisticTable'
 
-export default {
-  name: 'CommunityStatistic',
-  components: {
-    StatisticTable,
+<script setup>
+import { ref, watch } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
+import { communityStatistics } from '@/graphql/communityStatistics'
+import StatisticTable from '../components/Tables/StatisticTable'
+import { useAppToast } from '@/composables/useToast'
+
+const statistics = ref({
+  totalUsers: null,
+  activeUsers: null,
+  deletedUsers: null,
+  totalGradidoCreated: null,
+  totalGradidoDecayed: null,
+  totalGradidoAvailable: null,
+  totalGradidoUnbookedDecayed: null,
+})
+
+const { result, loading, error } = useQuery(communityStatistics, () => ({}))
+const { toastError } = useAppToast()
+
+watch(
+  result,
+  () => {
+    if (!result.value) return
+    const totals = { ...result.value.communityStatistics.dynamicStatisticsFields }
+    statistics.value = { ...result.value.communityStatistics, ...totals }
+    delete statistics.value.dynamicStatisticsFields
   },
-  data() {
-    return {
-      statistics: {
-        totalUsers: null,
-        activeUsers: null,
-        deletedUsers: null,
-        totalGradidoCreated: null,
-        totalGradidoDecayed: null,
-        totalGradidoAvailable: null,
-        totalGradidoUnbookedDecayed: null,
-      },
-    }
-  },
-  apollo: {
-    CommunityStatistics: {
-      query() {
-        return communityStatistics
-      },
-      update({ communityStatistics }) {
-        const totals = { ...communityStatistics.dynamicStatisticsFields }
-        this.statistics = { ...communityStatistics, ...totals }
-        delete this.statistics.dynamicStatisticsFields
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
-  },
-}
+  { immediate: true },
+)
+
+watch(error, () => {
+  if (error.value) {
+    toastError(error.value.message)
+  }
+})
 </script>
diff --git a/admin/src/pages/ContributionLinks.vue b/admin/src/pages/ContributionLinks.vue
index 02a148065..91eb06dcc 100644
--- a/admin/src/pages/ContributionLinks.vue
+++ b/admin/src/pages/ContributionLinks.vue
@@ -1,45 +1,31 @@
 <template>
   <div class="contribution-link">
-    <contribution-link
-      :items="items"
-      :count="count"
-      @get-contribution-links="getContributionLinks"
-    />
+    <contribution-link :items="items" :count="count" @get-contribution-links="refetch" />
   </div>
 </template>
-<script>
+
+<script setup>
+import { computed, watch } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
 import { listContributionLinks } from '@/graphql/listContributionLinks.js'
 import ContributionLink from '../components/ContributionLink/ContributionLink'
+import { useAppToast } from '@/composables/useToast'
 
-export default {
-  name: 'ContributionLinks',
-  components: {
-    ContributionLink,
-  },
-  data() {
-    return {
-      items: [],
-      count: 0,
-    }
-  },
-  created() {
-    this.getContributionLinks()
-  },
-  methods: {
-    getContributionLinks() {
-      this.$apollo
-        .query({
-          query: listContributionLinks,
-          fetchPolicy: 'network-only',
-        })
-        .then((result) => {
-          this.count = result.data.listContributionLinks.count
-          this.items = result.data.listContributionLinks.links
-        })
-        .catch(() => {
-          this.toastError('listContributionLinks has no result, use default data')
-        })
-    },
-  },
-}
+const { toastError } = useAppToast()
+
+const { result, error, refetch } = useQuery(listContributionLinks, null, {
+  fetchPolicy: 'network-only',
+})
+
+const items = computed(() => {
+  return result.value?.listContributionLinks?.links
+})
+
+const count = computed(() => {
+  return result.value?.listContributionLinks?.count
+})
+
+watch(error, () => {
+  toastError('listContributionLinks has no result, use default data')
+})
 </script>
diff --git a/admin/src/pages/CreationConfirm.vue b/admin/src/pages/CreationConfirm.vue
index ce9b3e06b..f88afe016 100644
--- a/admin/src/pages/CreationConfirm.vue
+++ b/admin/src/pages/CreationConfirm.vue
@@ -13,41 +13,46 @@
       </span>
     </p>
     <div>
-      <b-tabs v-model="tabIndex" content-class="mt-3" fill>
-        <b-tab active :title-link-attributes="{ 'data-test': 'open' }">
+      <BTabs v-model="tabIndex" content-class="mt-3" fill>
+        <BTab active :title-link-attributes="{ 'data-test': 'open' }">
           <template #title>
-            <b-icon icon="bell-fill" variant="primary"></b-icon>
+            <IBiBellFill />
+            <!--            <b-icon icon="bell-fill" variant="primary"></b-icon>-->
             {{ $t('contributions.open') }}
-            <b-badge v-if="$store.state.openCreations > 0" variant="danger">
+            <BBadge v-if="$store.state.openCreations > 0" variant="danger">
               {{ $store.state.openCreations }}
-            </b-badge>
+            </BBadge>
           </template>
-        </b-tab>
-        <b-tab :title-link-attributes="{ 'data-test': 'confirmed' }">
+        </BTab>
+        <BTab :title-link-attributes="{ 'data-test': 'confirmed' }">
           <template #title>
-            <b-icon icon="check" variant="success"></b-icon>
+            <IBiCheck />
+            <!--            <b-icon icon="check" variant="success"></b-icon>-->
             {{ $t('contributions.confirms') }}
           </template>
-        </b-tab>
-        <b-tab :title-link-attributes="{ 'data-test': 'denied' }">
+        </BTab>
+        <BTab :title-link-attributes="{ 'data-test': 'denied' }">
           <template #title>
-            <b-icon icon="x-circle" variant="warning"></b-icon>
+            <IBiXCircle />
+            <!--            <b-icon icon="x-circle" variant="warning"></b-icon>-->
             {{ $t('contributions.denied') }}
           </template>
-        </b-tab>
-        <b-tab :title-link-attributes="{ 'data-test': 'deleted' }">
+        </BTab>
+        <BTab :title-link-attributes="{ 'data-test': 'deleted' }">
           <template #title>
-            <b-icon icon="trash" variant="danger"></b-icon>
+            <IBiTrash />
+            <!--            <b-icon icon="trash" variant="danger"></b-icon>-->
             {{ $t('contributions.deleted') }}
           </template>
-        </b-tab>
-        <b-tab :title-link-attributes="{ 'data-test': 'all' }">
+        </BTab>
+        <BTab :title-link-attributes="{ 'data-test': 'all' }">
           <template #title>
-            <b-icon icon="list"></b-icon>
+            <IBiList />
+            <!--            <b-icon icon="list"></b-icon>-->
             {{ $t('contributions.all') }}
           </template>
-        </b-tab>
-      </b-tabs>
+        </BTab>
+      </BTabs>
     </div>
     <open-creations-table
       class="mt-4"
@@ -60,7 +65,7 @@
       @update-contributions="$apollo.queries.ListAllContributions.refetch()"
     />
 
-    <b-pagination
+    <BPagination
       v-model="currentPage"
       pills
       size="lg"
@@ -68,7 +73,7 @@
       :total-rows="rows"
       align="center"
       :hide-ellipsis="true"
-    ></b-pagination>
+    />
 
     <div v-if="overlay" id="overlay" @dblclick="overlay = false">
       <overlay :item="item" @overlay-cancel="overlay = false">
@@ -472,12 +477,9 @@ export default {
   align-items: center;
   width: 100%;
   height: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   padding-left: 5%;
-  background-color: rgba(12, 11, 11, 0.781);
+  background-color: rgb(12 11 11 / 78.1%);
   z-index: 1000000;
   cursor: pointer;
 }
diff --git a/admin/src/pages/FederationVisualize.vue b/admin/src/pages/FederationVisualize.vue
index cab8f0bae..2f87dd5aa 100644
--- a/admin/src/pages/FederationVisualize.vue
+++ b/admin/src/pages/FederationVisualize.vue
@@ -2,69 +2,57 @@
   <div class="federation-visualize">
     <div class="d-flex justify-content-between align-items-center mb-3">
       <span class="h2">{{ $t('federation.gradidoInstances') }}</span>
-      <b-button>
-        <b-icon
-          icon="arrow-clockwise"
-          font-scale="2"
-          :animation="animation"
-          data-test="federation-communities-refresh-btn"
-          @click="$apollo.queries.allCommunities.refresh()"
-        ></b-icon>
-      </b-button>
+      <BButton
+        :animation="animation"
+        data-test="federation-communities-refresh-btn"
+        @click="refetch"
+        font-scale="2"
+      >
+        <IBiArrowClockwise />
+        <!--        <b-icon-->
+        <!--          icon="arrow-clockwise"-->
+        <!--          font-scale="2"-->
+        <!--          :animation="animation"-->
+        <!--          data-test="federation-communities-refresh-btn"-->
+        <!--          @click="$apollo.queries.allCommunities.refresh()"-->
+        <!--        ></b-icon>-->
+      </BButton>
     </div>
-    <b-list-group>
-      <b-row>
-        <b-col cols="1" class="ml-1">{{ $t('federation.verified') }}</b-col>
-        <b-col class="ml-3">{{ $t('federation.url') }}</b-col>
-        <b-col class="ml-3">{{ $t('federation.name') }}</b-col>
-        <b-col cols="2">{{ $t('federation.lastAnnouncedAt') }}</b-col>
-        <b-col cols="2">{{ $t('federation.createdAt') }}</b-col>
-      </b-row>
-      <b-list-group-item
+    <BListGroup>
+      <BRow>
+        <BCol cols="1" class="ml-1">{{ $t('federation.verified') }}</BCol>
+        <BCol class="ml-3">{{ $t('federation.url') }}</BCol>
+        <BCol class="ml-3">{{ $t('federation.name') }}</BCol>
+        <BCol cols="2">{{ $t('federation.lastAnnouncedAt') }}</BCol>
+        <BCol cols="2">{{ $t('federation.createdAt') }}</BCol>
+      </BRow>
+      <BListGroupItem
         v-for="item in communities"
         :key="item.publicKey"
         :variant="!item.foreign ? 'primary' : 'warning'"
       >
         <community-visualize-item :item="item" />
-      </b-list-group-item>
-    </b-list-group>
+      </BListGroupItem>
+    </BListGroup>
   </div>
 </template>
-<script>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
 import { allCommunities } from '@/graphql/allCommunities'
+import { useAppToast } from '@/composables/useToast'
 
-import CommunityVisualizeItem from '../components/Federation/CommunityVisualizeItem.vue'
+const communities = ref([])
 
-export default {
-  name: 'FederationVisualize',
-  components: {
-    CommunityVisualizeItem,
-  },
-  data() {
-    return {
-      oldPublicKey: '',
-      communities: [],
-      icon: '',
-    }
-  },
-  computed: {
-    animation() {
-      return this.$apollo.queries.allCommunities.loading ? 'spin' : ''
-    },
-  },
-  apollo: {
-    allCommunities: {
-      fetchPolicy: 'network-only',
-      query() {
-        return allCommunities
-      },
-      update({ allCommunities }) {
-        this.communities = allCommunities
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
-  },
-}
+const { toastError } = useAppToast()
+
+const { result, loading, refetch, error } = useQuery(allCommunities, () => ({}), {
+  fetchPolicy: 'network-only',
+})
+
+result.value = allCommunities
+if (error) toastError(error.value.message)
+
+const animation = computed(() => (loading.value ? 'spin' : ''))
 </script>
diff --git a/admin/src/pages/Overview.vue b/admin/src/pages/Overview.vue
index 0c6ff86fd..7d4b279b8 100644
--- a/admin/src/pages/Overview.vue
+++ b/admin/src/pages/Overview.vue
@@ -11,6 +11,7 @@
       <BCardText>
         <BLink to="creation-confirm">
           <h1>{{ openCreations }}</h1>
+          <h1>Layout test</h1>
         </BLink>
       </BCardText>
     </BCard>
diff --git a/admin/src/pages/UserSearch.vue b/admin/src/pages/UserSearch.vue
index c4e4e4bff..72fa15934 100644
--- a/admin/src/pages/UserSearch.vue
+++ b/admin/src/pages/UserSearch.vue
@@ -51,6 +51,7 @@ import SearchUserTable from '../components/Tables/SearchUserTable'
 import UserQuery from '../components/UserQuery'
 import { BPagination, BButton } from 'bootstrap-vue-next'
 import { useI18n } from 'vue-i18n'
+import { useAppToast } from '@/composables/useToast'
 
 const { t } = useI18n()
 
@@ -66,6 +67,7 @@ const perPage = ref(25)
 const response = ref()
 
 const { creationLabel } = useCreationMonths()
+const { toastSuccess } = useAppToast()
 
 const { result, refetch } = useQuery(searchUsers, {
   query: criteria.value,
@@ -90,7 +92,7 @@ const updateRoles = (userId, roles) => {
 
 const updateDeletedAt = (userId, deletedAt) => {
   searchResult.value.find((obj) => obj.userId === userId).deletedAt = deletedAt
-  // toastSuccess(deletedAt ? $t('user_deleted') : $t('user_recovered'))
+  toastSuccess(deletedAt ? t('user_deleted') : t('user_recovered'))
 }
 
 const unconfirmedRegisterMails = () => {
@@ -152,6 +154,7 @@ watch(
 .user-search-first-div {
   text-align: right;
 }
+
 img,
 svg {
   vertical-align: text-bottom;
diff --git a/admin/vite.config.js b/admin/vite.config.js
index 11e0bec33..3075c110c 100644
--- a/admin/vite.config.js
+++ b/admin/vite.config.js
@@ -42,6 +42,7 @@ export default defineConfig({
     commonjs(),
   ],
   build: {
-    outDir: 'build',
+    outDir: path.resolve(__dirname, './build'),
   },
+  publicDir: '/admin',
 })
diff --git a/admin/yarn.lock b/admin/yarn.lock
index c790e069a..dcfd1011c 100644
--- a/admin/yarn.lock
+++ b/admin/yarn.lock
@@ -1083,6 +1083,45 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@csstools/css-parser-algorithms@^2.7.1":
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.7.1.tgz#6d93a8f7d8aeb7cd9ed0868f946e46f021b6aa70"
+  integrity sha512-2SJS42gxmACHgikc1WGesXLIT8d/q2l0UFM7TaEeIzdFCE/FPMtTiizcPGGJtlPo2xuQzY09OhrLTzRxqJqwGw==
+
+"@csstools/css-tokenizer@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.4.1.tgz#1d8b2e200197cf5f35ceb07ca2dade31f3a00ae8"
+  integrity sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg==
+
+"@csstools/media-query-list-parser@^2.1.13":
+  version "2.1.13"
+  resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.13.tgz#f00be93f6bede07c14ddf51a168ad2748e4fe9e5"
+  integrity sha512-XaHr+16KRU9Gf8XLi3q8kDlI18d5vzKSKCY510Vrtc9iNR0NJzbY9hhTmwhzYZj/ZwGL4VmB3TA9hJW0Um2qFA==
+
+"@csstools/selector-specificity@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz#63085d2995ca0f0e55aa8b8a07d69bfd48b844fe"
+  integrity sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==
+
+"@dual-bundle/import-meta-resolve@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz#519c1549b0e147759e7825701ecffd25e5819f7b"
+  integrity sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==
+
+"@esbuild/android-arm@0.15.18":
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.18.tgz#266d40b8fdcf87962df8af05b76219bc786b4f80"
+  integrity sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==
+
+"@esbuild/linux-loong64@0.15.18":
+  version "0.15.18"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.18.tgz#128b76ecb9be48b60cf5cfc1c63a4f00691a3239"
+  integrity sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==
+
+"@eslint-community/eslint-utils@^4.2.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
 "@csstools/selector-specificity@^2.0.2":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz#2cbcf822bf3764c9658c4d2e568bd0c0cb748016"
@@ -1964,11 +2003,19 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz#56e2cc26c397c038fab0e3a917a12d5c5909e901"
   integrity sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==
 
+"@types/prettier@^2.0.0", "@types/prettier@^2.1.5":
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f"
+  integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
 "@types/parse-json@^4.0.0":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
+"@types/semver@^7.3.12":
+  version "7.5.8"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
+  integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
 "@types/prettier@^2.0.0", "@types/prettier@^2.1.5":
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f"
@@ -3939,11 +3986,20 @@ core-js@^3.30.2:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.37.1.tgz#d21751ddb756518ac5a00e4d66499df981a62db9"
   integrity sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==
 
+cosmiconfig@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-9.0.0.tgz#34c3fc58287b915f3ae905ab6dc3de258b55ad9d"
+  integrity sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==
 cosmiconfig@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
   integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
   dependencies:
+    env-paths "^2.2.1"
+    import-fresh "^3.3.0"
+    js-yaml "^4.1.0"
+    parse-json "^5.2.0"
+
     "@types/parse-json" "^4.0.0"
     import-fresh "^3.2.1"
     parse-json "^5.0.0"
@@ -3977,11 +4033,23 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-functions-list@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.2.2.tgz#9a54c6dd8416ed25c1079cd88234e927526c1922"
+  integrity sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==
 css-functions-list@^3.1.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.2.2.tgz#9a54c6dd8416ed25c1079cd88234e927526c1922"
   integrity sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==
 
+css-tree@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
+  integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==
+  dependencies:
+    mdn-data "2.0.30"
+    source-map-js "^1.0.1"
+
 css@^2.1.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
@@ -4096,6 +4164,7 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+decamelize@^1.2.0:
 decamelize-keys@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.1.tgz#04a2d523b2f18d80d0158a43b895d56dff8d19d8"
@@ -4375,6 +4444,11 @@ entities@^4.2.0, entities@^4.4.0, entities@^4.5.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
+env-paths@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
+  integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -5141,6 +5215,13 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-entry-cache@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-9.0.0.tgz#4478e7ceaa5191fa9676a2daa7030211c31b1e7e"
+  integrity sha512-6MgEugi8p2tiUhqO7GnPsmbCCzj0YRCwwaTbpGRyKZesjRSzkqkAE9fPp7V2yMs5hwfgbQLgdvSSkGNg1s5Uvw==
+  dependencies:
+    flat-cache "^5.0.0"
+
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -5234,6 +5315,19 @@ flat-cache@^3.0.4:
     keyv "^4.5.3"
     rimraf "^3.0.2"
 
+flat-cache@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-5.0.0.tgz#26c4da7b0f288b408bb2b506b2cb66c240ddf062"
+  integrity sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==
+  dependencies:
+    flatted "^3.3.1"
+    keyv "^4.5.4"
+
+flatted@^3.2.9, flatted@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
+  integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
+
 flatted@^3.2.9:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
@@ -5655,6 +5749,10 @@ html-tags@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
   integrity sha512-+Il6N8cCo2wB/Vd3gqy/8TZhTD3QvcVeQLCnZiGkGCH3JP28IgGAY41giccp2W4R3jfyJPAP318FQTa1yU7K7g==
 
+html-tags@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
+  integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
 html-tags@^3.2.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
@@ -5727,6 +5825,10 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
+ignore@^5.0.5, ignore@^5.1.1, ignore@^5.2.0, ignore@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
+  integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 ignore@^5.0.5, ignore@^5.1.1, ignore@^5.2.0, ignore@^5.2.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
@@ -5737,6 +5839,7 @@ immutable@^4.0.0:
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
   integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
 
+import-fresh@^3.2.1, import-fresh@^3.3.0:
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -5866,6 +5969,10 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
+is-core-module@^2.13.0, is-core-module@^2.13.1:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.15.0.tgz#71c72ec5442ace7e76b306e9d48db361f22699ea"
+  integrity sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==
 is-core-module@^2.13.0, is-core-module@^2.13.1, is-core-module@^2.5.0:
   version "2.15.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.15.0.tgz#71c72ec5442ace7e76b306e9d48db361f22699ea"
@@ -7233,6 +7340,10 @@ jsonfile@^4.0.0:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+keyv@^4.5.3, keyv@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
 keyv@^4.5.3:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
@@ -7254,6 +7365,7 @@ kind-of@^4.0.0:
   dependencies:
     is-buffer "^1.1.5"
 
+kind-of@^6.0.2:
 kind-of@^6.0.2, kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
@@ -7264,11 +7376,19 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
+known-css-properties@^0.34.0:
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.34.0.tgz#ccd7e9f4388302231b3f174a8b1d5b1f7b576cea"
+  integrity sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==
 known-css-properties@^0.26.0:
   version "0.26.0"
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.26.0.tgz#008295115abddc045a9f4ed7e2a84dc8b3a77649"
   integrity sha512-5FZRzrZzNTBruuurWpvZnvP9pum+fe0HcK8z/ooo+U+Hmp4vtbyp1/QDsqmufirXy4egGzbaH/y2uCZf+6W5Kg==
 
+kolorist@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.8.0.tgz#edddbbbc7894bc13302cdf740af6374d4a04743c"
+  integrity sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==
 known-css-properties@^0.34.0:
   version "0.34.0"
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.34.0.tgz#ccd7e9f4388302231b3f174a8b1d5b1f7b576cea"
@@ -7468,11 +7588,21 @@ mathml-tag-names@^2.1.3:
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
   integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
 
+mdn-data@2.0.30:
+  version "2.0.30"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
+  integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
+meow@^13.2.0:
+  version "13.2.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-13.2.0.tgz#6b7d63f913f984063b3cc261b6e8800c4cd3474f"
+  integrity sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==
+
 meow@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
@@ -7530,6 +7660,10 @@ micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.7.tgz#33e8190d9fe474a9895525f5618eee136d46c2e5"
+  integrity sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==
 micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.7.tgz#33e8190d9fe474a9895525f5618eee136d46c2e5"
@@ -7560,6 +7694,10 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+minimatch@9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.1.tgz#8a555f541cf976c622daf078bb28f29fb927c253"
+  integrity sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -7579,6 +7717,10 @@ minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^9.0.4, minimatch@^9.0.5:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
 minimatch@^9.0.4, minimatch@^9.0.5:
   version "9.0.5"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
@@ -7591,9 +7733,7 @@ minimist-options@4.1.0:
   resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
   integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==
   dependencies:
-    arrify "^1.0.1"
-    is-plain-obj "^1.1.0"
-    kind-of "^6.0.3"
+    brace-expansion "^2.0.1"
 
 minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.8"
@@ -8198,11 +8338,25 @@ postcss-safe-parser@^6.0.0:
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz#bb4c29894171a94bc5c996b9a30317ef402adaa1"
   integrity sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==
 
+postcss-safe-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz#6273d4e5149e286db5a45bc6cf6eafcad464014a"
+  integrity sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==
 postcss-scss@^4.0.3, postcss-scss@^4.0.9:
   version "4.0.9"
   resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.9.tgz#a03c773cd4c9623cb04ce142a52afcec74806685"
   integrity sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==
 
+postcss-scss@^4.0.3, postcss-scss@^4.0.9:
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.9.tgz#a03c773cd4c9623cb04ce142a52afcec74806685"
+  integrity sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==
+
+postcss-selector-parser@^6.0.9, postcss-selector-parser@^6.1.0:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz#5be94b277b8955904476a2400260002ce6c56e38"
+  integrity sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==
+  dependencies:
 postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.9, postcss-selector-parser@^6.1.0:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz#5be94b277b8955904476a2400260002ce6c56e38"
@@ -8216,6 +8370,10 @@ postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@^8.4.0, postcss@^8.4.18, postcss@^8.4.38, postcss@^8.4.39, postcss@^8.4.8:
+  version "8.4.39"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.39.tgz#aa3c94998b61d3a9c259efa51db4b392e1bde0e3"
+  integrity sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==
 postcss@^8.4.0, postcss@^8.4.18, postcss@^8.4.19, postcss@^8.4.38, postcss@^8.4.39, postcss@^8.4.8:
   version "8.4.39"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.39.tgz#aa3c94998b61d3a9c259efa51db4b392e1bde0e3"
@@ -8371,6 +8529,7 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+randombytes@^2.1.0:
 quick-lru@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
@@ -8448,6 +8607,11 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+regenerate-unicode-properties@^10.1.0:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz#6b0e05489d9076b04c436f318d9b067bba459480"
+  integrity sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==
+  dependencies:
 redent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
@@ -8912,6 +9076,7 @@ side-channel@^1.0.4:
     get-intrinsic "^1.2.4"
     object-inspect "^1.13.1"
 
+signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
 signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
@@ -8976,6 +9141,10 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
@@ -9173,6 +9342,10 @@ strip-ansi@^3.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
+strip-ansi@^7.0.1, strip-ansi@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -9276,14 +9449,31 @@ stylelint-scss@^6.4.0:
     postcss-selector-parser "^6.1.0"
     postcss-value-parser "^4.2.0"
 
+stylelint@16.7.0:
+  version "16.7.0"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-16.7.0.tgz#5f6acf516aedecba7a6472ba0cc1ffc20e2be86b"
+  integrity sha512-Q1ATiXlz+wYr37a7TGsfvqYn2nSR3T/isw3IWlZQzFzCNoACHuGBb6xBplZXz56/uDRJHIygxjh7jbV/8isewA==
 stylelint@14.16.1:
   version "14.16.1"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.16.1.tgz#b911063530619a1bbe44c2b875fd8181ebdc742d"
   integrity sha512-ErlzR/T3hhbV+a925/gbfc3f3Fep9/bnspMiJPorfGEmcBbXdS+oo6LrVtoUZ/w9fqD6o6k7PtUlCOsCRdjX/A==
   dependencies:
+    "@csstools/css-parser-algorithms" "^2.7.1"
+    "@csstools/css-tokenizer" "^2.4.1"
+    "@csstools/media-query-list-parser" "^2.1.13"
+    "@csstools/selector-specificity" "^3.1.1"
+    "@dual-bundle/import-meta-resolve" "^4.1.0"
     "@csstools/selector-specificity" "^2.0.2"
     balanced-match "^2.0.0"
     colord "^2.9.3"
+    cosmiconfig "^9.0.0"
+    css-functions-list "^3.2.2"
+    css-tree "^2.3.1"
+    debug "^4.3.5"
+    fast-glob "^3.3.2"
+    fastest-levenshtein "^1.0.16"
+    file-entry-cache "^9.0.0"
+    colord "^2.9.3"
     cosmiconfig "^7.1.0"
     css-functions-list "^3.1.0"
     debug "^4.3.4"
@@ -9293,29 +9483,42 @@ stylelint@14.16.1:
     global-modules "^2.0.0"
     globby "^11.1.0"
     globjoin "^0.1.4"
+    html-tags "^3.3.1"
+    ignore "^5.3.1"
     html-tags "^3.2.0"
     ignore "^5.2.1"
     import-lazy "^4.0.0"
     imurmurhash "^0.1.4"
     is-plain-object "^5.0.0"
+    known-css-properties "^0.34.0"
     known-css-properties "^0.26.0"
     mathml-tag-names "^2.1.3"
+    meow "^13.2.0"
+    micromatch "^4.0.7"
     meow "^9.0.0"
     micromatch "^4.0.5"
     normalize-path "^3.0.0"
+    picocolors "^1.0.1"
+    postcss "^8.4.39"
     picocolors "^1.0.0"
     postcss "^8.4.19"
     postcss-media-query-parser "^0.2.3"
     postcss-resolve-nested-selector "^0.1.1"
+    postcss-safe-parser "^7.0.0"
+    postcss-selector-parser "^6.1.0"
     postcss-safe-parser "^6.0.0"
     postcss-selector-parser "^6.0.11"
     postcss-value-parser "^4.2.0"
     resolve-from "^5.0.0"
     string-width "^4.2.3"
+    strip-ansi "^7.1.0"
+    supports-hyperlinks "^3.0.0"
     strip-ansi "^6.0.1"
     style-search "^0.1.0"
     supports-hyperlinks "^2.3.0"
     svg-tags "^1.0.0"
+    table "^6.8.2"
+    write-file-atomic "^5.0.1"
     table "^6.8.1"
     v8-compile-cache "^2.3.0"
     write-file-atomic "^4.0.2"
@@ -9346,6 +9549,10 @@ supports-color@^8.0.0:
   dependencies:
     has-flag "^4.0.0"
 
+supports-hyperlinks@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz#3943544347c1ff90b15effb03fc14ae45ec10624"
+  integrity sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==
 supports-hyperlinks@^2.0.0, supports-hyperlinks@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz#3943544347c1ff90b15effb03fc14ae45ec10624"
@@ -9354,6 +9561,19 @@ supports-hyperlinks@^2.0.0, supports-hyperlinks@^2.3.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+supports-hyperlinks@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz#c711352a5c89070779b4dad54c05a2f14b15c94b"
+  integrity sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
@@ -9387,6 +9607,10 @@ synckit@^0.9.1:
     "@pkgr/core" "^0.1.0"
     tslib "^2.6.2"
 
+table@^6.8.2:
+  version "6.8.2"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.8.2.tgz#c5504ccf201213fa227248bdc8c5569716ac6c58"
+  integrity sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==
 table@^6.8.1:
   version "6.8.2"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.2.tgz#c5504ccf201213fa227248bdc8c5569716ac6c58"
@@ -9514,10 +9738,10 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
-trim-newlines@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"
-  integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
+ts-essentials@^9.4.0:
+  version "9.4.2"
+  resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-9.4.2.tgz#6d4bd23b46b61bf3e031816cc887e839eb62c33c"
+  integrity sha512-mB/cDhOvD7pg3YCLk2rOtejHjjdSi9in/IBYE13S+8WA5FBSraYf4V/ws55uvs0IvQ/l0wBOlXy5yBNZ9Bl8ZQ==
 
 ts-essentials@^9.4.0:
   version "9.4.2"
@@ -9587,11 +9811,6 @@ type-detect@4.0.8, type-detect@^4.0.8:
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
 
-type-fest@^0.18.0:
-  version "0.18.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
-  integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==
-
 type-fest@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
@@ -10170,13 +10389,17 @@ write-file-atomic@^3.0.0:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
+write-file-atomic@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-5.0.1.tgz#68df4717c55c6fa4281a7860b4c2ba0a6d2b11e7"
+  integrity sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==
 write-file-atomic@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.2.tgz#a9df01ae5b77858a027fd2e80768ee433555fcfd"
   integrity sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==
   dependencies:
     imurmurhash "^0.1.4"
-    signal-exit "^3.0.7"
+    signal-exit "^4.0.1"
 
 ws@^7.4.6:
   version "7.5.10"
@@ -10222,7 +10445,7 @@ yaml-eslint-parser@^0.5.0:
     lodash "^4.17.21"
     yaml "^1.10.2"
 
-yaml@^1.10.0, yaml@^1.10.2:
+yaml@^1.10.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
@@ -10235,7 +10458,7 @@ yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^20.2.2, yargs-parser@^20.2.3:
+yargs-parser@^20.2.2:
   version "20.2.9"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
diff --git a/deployment/bare_metal/start.sh b/deployment/bare_metal/start.sh
index 634f60c97..5bdf10547 100755
--- a/deployment/bare_metal/start.sh
+++ b/deployment/bare_metal/start.sh
@@ -214,6 +214,8 @@ echo 'Updating admin' >> $UPDATE_HTML
 cd $PROJECT_ROOT/admin
 # TODO maybe handle this differently?
 unset NODE_ENV
+nvm use
+npm i -g yarn
 yarn install
 yarn build
 # TODO maybe handle this differently?