From 0f134c8a155125c7172b29871a9c612cd69d03fc Mon Sep 17 00:00:00 2001
From: MateuszMichalowski
 <79852198+MateuszMichalowski@users.noreply.github.com>
Date: Mon, 26 Aug 2024 08:41:28 +0200
Subject: [PATCH] fix(frontend): migration feedback fixes (#3359)

* fix(frontend): fixes after feedback

* fix(frontend): fixes after feedback

* fix(frontend): fixes after feedback
---
 .../src/components/ChangeUserRoleFormular.vue |   2 +-
 admin/src/components/ContentFooter.vue        |   2 +-
 .../ContributionLink/ContributionLink.vue     |   2 +-
 .../ContributionLink/ContributionLinkForm.vue |   4 +-
 .../ContributionLink/ContributionLinkList.vue |   6 +-
 .../ContributionMessagesFormular.vue          |   2 +-
 .../ContributionMessagesListItem.spec.js      |   8 +-
 .../slots/ContributionMessagesListItem.vue    |  22 +-
 admin/src/components/EditCreationFormular.vue |   6 +-
 .../Federation/CommunityVisualizeItem.vue     | 363 ++++++++++++------
 .../Federation/FederationVisualizeItem.vue    |  36 +-
 admin/src/components/NavBar.vue               |   2 +-
 admin/src/components/Overlay.vue              |   2 +-
 admin/src/components/RowDetails.vue           |   2 +-
 .../components/Tables/OpenCreationsTable.vue  |  10 +-
 .../src/components/Tables/SearchUserTable.vue |   8 +-
 .../src/components/Tables/StatisticTable.vue  |  26 +-
 admin/src/components/VariantIcon.vue          |  22 ++
 admin/src/main.js                             |   7 +-
 admin/src/pages/CreationConfirm.vue           |   6 +-
 admin/src/pages/FederationVisualize.vue       |  13 +-
 admin/src/pages/Overview.vue                  |  28 +-
 admin/src/router/guards.js                    |   2 +-
 .../custom/gradido-custom/_buttons-forms.scss |   2 +-
 .../scss/custom/gradido-custom/_buttons.scss  |   2 +-
 .../custom/gradido-custom/_custom-forms.scss  |   2 +-
 .../custom/gradido-custom/_datepicker.scss    |   2 +-
 .../scss/custom/gradido-custom/_input.scss    |   4 +-
 .../src/assets/scss/gradido-template.scss     |   8 +-
 frontend/src/components/Auth/AuthFooter.vue   |   5 +-
 frontend/src/components/ClipboardCopy.vue     |  14 +-
 .../ContributionMessagesFormular.vue          |   2 +-
 .../ContributionMessagesListItem.vue          |   2 +-
 .../Contributions/ContributionForm.vue        |   4 +-
 .../Contributions/ContributionList.vue        | 117 +++---
 .../Contributions/ContributionListItem.vue    |  36 +-
 .../DecayInformations/CollapseLinksList.vue   |   1 -
 .../DecayInformation-Decay.vue                |   9 +-
 .../DecayInformation-DecayStartblock.vue      |  10 +-
 .../DecayInformation-Long.vue                 |  10 +-
 .../GddSend/TransactionConfirmationLink.vue   |   6 +-
 .../GddSend/TransactionConfirmationSend.vue   |   4 +-
 .../components/GddSend/TransactionForm.vue    |  13 +-
 .../src/components/GddTransactionList.vue     |  25 +-
 .../src/components/GdtTransactionList.vue     |   3 +-
 .../src/components/Inputs/InputTextarea.vue   |  10 +-
 .../src/components/Inputs/InputUsername.vue   |  45 +--
 frontend/src/components/LanguageSwitch2.vue   |   2 +
 .../src/components/Overview/CommunityNews.vue |   4 +-
 frontend/src/components/Status.vue            |   2 +-
 .../Template/ContentHeader/GddAmount.vue      |   6 +-
 .../Template/ContentHeader/GdtAmount.vue      |  18 +-
 .../Template/RightSide/LastContributions.vue  |   4 +-
 .../Template/RightSide/LastTransactions.vue   |   5 +-
 frontend/src/components/Transaction.vue       |  11 +-
 .../TransactionLinks/TransactionLink.vue      |   5 +-
 .../TransactionRows/AmountAndNameRow.vue      |   2 +-
 .../TransactionRows/CollapseIcon.vue          |   5 -
 .../TransactionRows/DateRow.spec.js           |   2 +-
 .../components/TransactionRows/DateRow.vue    |   2 +-
 .../components/TransactionRows/DecayRow.vue   |   3 +-
 .../TransactionRows/DurationRow.vue           |   2 +-
 .../TransactionRows/LinkCountRow.vue          |   2 +-
 .../components/TransactionRows/MemoRow.vue    |   2 +-
 .../Transactions/TransactionCreation.vue      |  21 +-
 .../Transactions/TransactionDecay.vue         |  20 +-
 .../Transactions/TransactionLinkSummary.vue   |  17 +-
 .../Transactions/TransactionReceive.vue       |  11 +-
 .../Transactions/TransactionSend.vue          |  12 +-
 .../src/components/UserSettings/UserData.vue  |   8 +-
 .../components/UserSettings/UserLanguage.vue  |  15 +-
 .../src/components/UserSettings/UserName.vue  |  22 +-
 .../components/UserSettings/UserPassword.vue  |   8 +-
 .../UserSettings/UserSettingsSwitch.vue       |  18 +-
 frontend/src/components/VariantIcon.vue       |  35 ++
 frontend/src/layouts/AuthLayout.vue           |  16 +-
 .../layouts/templates/CommunityTemplate.vue   |  98 +++--
 frontend/src/locales/de.json                  |   2 +-
 frontend/src/locales/en.json                  |   2 +-
 frontend/src/locales/es.json                  |   1 +
 frontend/src/locales/fr.json                  |   1 +
 frontend/src/locales/nl.json                  |   1 +
 frontend/src/locales/tr.json                  |   1 +
 frontend/src/main.js                          |   2 -
 frontend/src/pages/Circles.vue                |   2 +-
 frontend/src/pages/Community.vue              |  11 +-
 frontend/src/pages/ResetPassword.vue          | 351 +++++++++++------
 frontend/src/pages/Settings.vue               |  12 +-
 frontend/src/pages/UserSearch.vue             |   2 +-
 frontend/src/validation-rules.js              |  26 +-
 frontend/vite.config.js                       |   1 +
 91 files changed, 1033 insertions(+), 677 deletions(-)
 create mode 100644 admin/src/components/VariantIcon.vue
 create mode 100644 frontend/src/components/VariantIcon.vue

diff --git a/admin/src/components/ChangeUserRoleFormular.vue b/admin/src/components/ChangeUserRoleFormular.vue
index 543cc1ca9..618dabbfc 100644
--- a/admin/src/components/ChangeUserRoleFormular.vue
+++ b/admin/src/components/ChangeUserRoleFormular.vue
@@ -8,7 +8,7 @@
         {{ $t('userRole.notChangeYourSelf') }}
       </div>
       <div v-else class="m-3">
-        <label for="role" class="mr-3">{{ $t('userRole.selectLabel') }}</label>
+        <label for="role" class="me-3">{{ $t('userRole.selectLabel') }}</label>
         <BFormSelect v-model="roleSelected" class="role-select" :options="roles" />
         <div class="mt-3 mb-5">
           <BButton variant="danger" @click="showModal">
diff --git a/admin/src/components/ContentFooter.vue b/admin/src/components/ContentFooter.vue
index 4e10c29de..d59796add 100644
--- a/admin/src/components/ContentFooter.vue
+++ b/admin/src/components/ContentFooter.vue
@@ -7,7 +7,7 @@
           {{ $t('footer.copyright.year', { year }) }}
           <a
             :href="`https://gradido.net/${$i18n.locale}`"
-            class="fw-bold ml-1 link-underline link-underline-opacity-0 link-underline-opacity-100-hover"
+            class="fw-bold ms-1 link-underline link-underline-opacity-0 link-underline-opacity-100-hover"
             target="_blank"
           >
             {{ $t('footer.copyright.link') }}
diff --git a/admin/src/components/ContributionLink/ContributionLink.vue b/admin/src/components/ContributionLink/ContributionLink.vue
index ee18bbee2..1bc8ef43b 100644
--- a/admin/src/components/ContributionLink/ContributionLink.vue
+++ b/admin/src/components/ContributionLink/ContributionLink.vue
@@ -19,7 +19,7 @@
 
       <BCollapse id="newContribution" v-model="visible" class="mt-2">
         <BCard>
-          <p class="h2 ml-5">{{ $t('contributionLink.contributionLinks') }}</p>
+          <p class="h2 ms-5">{{ $t('contributionLink.contributionLinks') }}</p>
           <contribution-link-form
             :contribution-link-data="contributionLinkData"
             :edit-contribution-link="editContributionLink"
diff --git a/admin/src/components/ContributionLink/ContributionLinkForm.vue b/admin/src/components/ContributionLink/ContributionLinkForm.vue
index af3c68327..20d78dc99 100644
--- a/admin/src/components/ContributionLink/ContributionLinkForm.vue
+++ b/admin/src/components/ContributionLink/ContributionLinkForm.vue
@@ -101,12 +101,12 @@
           </BFormGroup>
           -->
       <div class="mt-6">
-        <BButton type="submit" variant="primary">
+        <BButton type="submit" variant="primary" class="me-2">
           {{
             editContributionLink ? $t('contributionLink.saveChange') : $t('contributionLink.create')
           }}
         </BButton>
-        <BButton type="reset" variant="danger">
+        <BButton type="reset" variant="danger" class="me-2">
           {{ $t('contributionLink.clear') }}
         </BButton>
         <BButton @click.prevent="emit('close-contribution-form')">
diff --git a/admin/src/components/ContributionLink/ContributionLinkList.vue b/admin/src/components/ContributionLink/ContributionLinkList.vue
index beaa0c9ff..e95adc1b7 100644
--- a/admin/src/components/ContributionLink/ContributionLinkList.vue
+++ b/admin/src/components/ContributionLink/ContributionLinkList.vue
@@ -5,14 +5,14 @@
         <BButton
           variant="danger"
           size="md"
-          class="mr-2 test-delete-link"
+          class="me-2 test-delete-link"
           @click="handleDelete(data)"
         >
           <IBiTrash />
         </BButton>
       </template>
       <template #cell(edit)="data">
-        <BButton variant="success" size="md" class="mr-2" @click="editContributionLink(data.item)">
+        <BButton variant="success" size="md" class="me-2" @click="editContributionLink(data.item)">
           <IBiPencil />
         </BButton>
       </template>
@@ -20,7 +20,7 @@
         <BButton
           variant="info"
           size="md"
-          class="mr-2 test-show"
+          class="me-2 test-show"
           @click="showContributionLink(data.item)"
         >
           <IBiEye />
diff --git a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
index 48e46be63..af946fd56 100644
--- a/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
+++ b/admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
@@ -59,7 +59,7 @@
           <BCol>
             <BButton type="reset" variant="danger">{{ $t('form.cancel') }}</BButton>
           </BCol>
-          <BCol class="text-right">
+          <BCol class="text-end">
             <BButton
               type="submit"
               variant="primary"
diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
index 9f8ad5ba2..637c470be 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
@@ -55,8 +55,8 @@ describe('ContributionMessagesListItem', () => {
         wrapper = ModeratorItemWrapper()
       })
 
-      it('has a DIV .text-right.is-moderator', () => {
-        expect(wrapper.find('div.text-right.is-moderator').exists()).toBe(true)
+      it('has a DIV .text-end.is-moderator', () => {
+        expect(wrapper.find('div.text-end.is-moderator').exists()).toBe(true)
       })
 
       it('has the complete user name', () => {
@@ -110,8 +110,8 @@ describe('ContributionMessagesListItem', () => {
         wrapper = ItemWrapper()
       })
 
-      it('has a DIV .text-left.is-not-moderator', () => {
-        expect(wrapper.find('div.text-left.is-user').exists()).toBe(true)
+      it('has a DIV .text-start.is-not-moderator', () => {
+        expect(wrapper.find('div.text-start.is-user').exists()).toBe(true)
       })
 
       it('has the complete user name', () => {
diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
index f2261c074..22bbc6157 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
@@ -1,16 +1,18 @@
 <template>
   <div class="contribution-messages-list-item clearfix">
-    <div v-if="isModeratorMessage" class="text-right p-2 rounded-sm mb-3" :class="boxClass">
-      <small class="ml-4" data-test="moderator-label">
+    <div v-if="isModeratorMessage" class="text-end p-2 rounded-sm mb-3" :class="boxClass">
+      <small class="ms-4" data-test="moderator-label">
         {{ $t('moderator.moderator') }}
       </small>
-      <small class="ml-2" data-test="moderator-date">
+      <small class="ms-2" data-test="moderator-date">
         {{ $d(new Date(message.createdAt), 'short') }}
       </small>
-      <span class="ml-2 mr-2" data-test="moderator-name">
+      <span class="ms-2 me-2" data-test="moderator-name">
         {{ message.userFirstName }} {{ message.userLastName }}
       </span>
-      <BAvatar square variant="warning"></BAvatar>
+      <BAvatar square variant="warning">
+        <variant-icon icon="person-fill" variant="black" />
+      </BAvatar>
       <small v-if="isHistory">
         <hr />
         {{ $t('moderator.history') }}
@@ -22,12 +24,14 @@
         {{ $t('moderator.request') }}
       </small>
     </div>
-    <div v-else class="text-left p-2 rounded-sm mb-3" :class="boxClass">
-      <BAvatar variant="info"></BAvatar>
-      <span class="ml-2 mr-2" data-test="user-name">
+    <div v-else class="text-start p-2 rounded-sm mb-3" :class="boxClass">
+      <BAvatar variant="info">
+        <variant-icon icon="person-fill" variant="white" />
+      </BAvatar>
+      <span class="ms-2 me-2" data-test="user-name">
         {{ message.userFirstName }} {{ message.userLastName }}
       </span>
-      <small class="ml-2" data-test="user-date">
+      <small class="ms-2" data-test="user-date">
         {{ $d(new Date(message.createdAt), 'short') }}
       </small>
       <small v-if="isHistory">
diff --git a/admin/src/components/EditCreationFormular.vue b/admin/src/components/EditCreationFormular.vue
index 5998f160b..05d1f04de 100644
--- a/admin/src/components/EditCreationFormular.vue
+++ b/admin/src/components/EditCreationFormular.vue
@@ -2,7 +2,7 @@
   <div class="component-edit-creation-formular">
     <div class="shadow p-3 mb-5 bg-white rounded">
       <BForm ref="updateCreationForm">
-        <div class="ml-4">
+        <div class="ms-4">
           <label>{{ $t('creation_form.select_month') }}</label>
         </div>
         <BRow class="m-4">
@@ -48,13 +48,13 @@
           </div>
         </div>
         <BRow class="m-4">
-          <BCol class="text-left">
+          <BCol class="text-start">
             <BButton type="reset" variant="danger" @click="$refs.updateCreationForm.reset()">
               {{ $t('creation_form.reset') }}
             </BButton>
           </BCol>
           <BCol class="text-center">
-            <div class="text-right">
+            <div class="text-end">
               <BButton
                 type="button"
                 variant="success"
diff --git a/admin/src/components/Federation/CommunityVisualizeItem.vue b/admin/src/components/Federation/CommunityVisualizeItem.vue
index 853fb7324..021271d52 100644
--- a/admin/src/components/Federation/CommunityVisualizeItem.vue
+++ b/admin/src/components/Federation/CommunityVisualizeItem.vue
@@ -1,14 +1,18 @@
 <template>
   <div class="community-visualize-item">
-    <BRow @click="toggleDetails">
-      <BCol cols="1"><b-icon :icon="icon" :variant="variant" class="mr-4"></b-icon></BCol>
+    <BRow v-on="{ click: toggleDetails }">
+      <BCol cols="1">
+        <variant-icon :icon="icon" :variant="variant" />
+      </BCol>
       <BCol>
         <div>
           <a :href="item.url" target="_blank">{{ item.url }}</a>
         </div>
         <small>{{ `${item.publicKey.substring(0, 26)}…` }}</small>
       </BCol>
-      <BCol v-b-tooltip="item.description">{{ item.name }}</BCol>
+      <BCol>
+        <span v-b-tooltip="`${item.description}`">{{ item.name }}</span>
+      </BCol>
       <BCol cols="2">{{ lastAnnouncedAt }}</BCol>
       <BCol cols="2">{{ createdAt }}</BCol>
     </BRow>
@@ -57,7 +61,7 @@
           <BListGroup-item>
             <BListGroup>
               <BRow>
-                <BCol class="ml-1">{{ $t('federation.verified') }}</BCol>
+                <BCol class="ms-1">{{ $t('federation.verified') }}</BCol>
                 <BCol>{{ $t('federation.apiVersion') }}</BCol>
                 <BCol>{{ $t('federation.createdAt') }}</BCol>
                 <BCol>{{ $t('federation.lastAnnouncedAt') }}</BCol>
@@ -78,130 +82,249 @@
     </BRow>
   </div>
 </template>
-<script>
+
+<script setup>
+import { ref, computed, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useMutation } from '@vue/apollo-composable'
 import { formatDistanceToNow } from 'date-fns'
 import { de, enUS as en, fr, es, nl } from 'date-fns/locale'
-import EditableGroup from '@/components/input/EditableGroup'
+import EditableGroup from '@/components/input/EditableGroup.vue'
 import FederationVisualizeItem from './FederationVisualizeItem.vue'
-import { updateHomeCommunity } from '../../graphql/updateHomeCommunity'
+import { updateHomeCommunity } from '@/graphql/updateHomeCommunity'
 import Coordinates from '../input/Coordinates.vue'
 import EditableGroupableLabel from '../input/EditableGroupableLabel.vue'
+import { useAppToast } from '@/composables/useToast'
 
 const locales = { en, de, es, fr, nl }
 
-export default {
-  name: 'CommunityVisualizeItem',
-  components: {
-    Coordinates,
-    EditableGroup,
-    FederationVisualizeItem,
-    EditableGroupableLabel,
-  },
-  props: {
-    item: { type: Object },
-  },
-  data() {
-    return {
-      formatDistanceToNow,
-      locale: this.$i18n.locale,
-      details: false,
-      gmsApiKey: this.item.gmsApiKey,
-      location: this.item.location,
-      originalGmsApiKey: this.item.gmsApiKey,
-      originalLocation: this.item.location,
+const props = defineProps({
+  item: { type: Object, required: true },
+})
+
+const { item } = toRefs(props)
+
+const { t, locale } = useI18n()
+
+const { toastSuccess, toastError } = useAppToast()
+
+const details = ref(false)
+const gmsApiKey = ref(item.value.gmsApiKey)
+const location = ref(item.value.location)
+const originalGmsApiKey = ref(item.value.gmsApiKey)
+const originalLocation = ref(item.value.location)
+
+const { mutate: updateHomeCommunityMutation } = useMutation(updateHomeCommunity)
+
+const verified = computed(() => {
+  if (!item.value.federatedCommunities || item.value.federatedCommunities.length === 0) {
+    return false
+  }
+  return item.value.federatedCommunities.some(
+    (federatedCommunity) =>
+      new Date(federatedCommunity.verifiedAt) >= new Date(federatedCommunity.lastAnnouncedAt),
+  )
+})
+
+const icon = computed(() => (verified.value ? 'check' : 'x-circle'))
+const variant = computed(() => (verified.value ? 'success' : 'danger'))
+
+const lastAnnouncedAt = computed(() => {
+  if (!item.value.federatedCommunities || item.value.federatedCommunities.length === 0) return ''
+  const minDate = new Date(0)
+  const lastAnnouncedAt = item.value.federatedCommunities.reduce(
+    (lastAnnouncedAt, federateCommunity) => {
+      if (!federateCommunity.lastAnnouncedAt) return lastAnnouncedAt
+      const date = new Date(federateCommunity.lastAnnouncedAt)
+      return date > lastAnnouncedAt ? date : lastAnnouncedAt
+    },
+    minDate,
+  )
+  if (lastAnnouncedAt !== minDate) {
+    return formatDistanceToNow(lastAnnouncedAt, {
+      includeSecond: true,
+      addSuffix: true,
+      locale: locales[locale.value],
+    })
+  }
+  return ''
+})
+
+const createdAt = computed(() => {
+  if (item.value.createdAt) {
+    return formatDistanceToNow(new Date(item.value.createdAt), {
+      includeSecond: true,
+      addSuffix: true,
+      locale: locales[locale.value],
+    })
+  }
+  return ''
+})
+
+const isLocationChanged = computed(() => originalLocation.value !== location.value)
+const isGMSApiKeyChanged = computed(() => originalGmsApiKey.value !== gmsApiKey.value)
+const isValidLocation = computed(
+  () => location.value && location.value.latitude && location.value.longitude,
+)
+
+const toggleDetails = () => {
+  details.value = !details.value
+}
+
+const handleUpdateHomeCommunity = async () => {
+  try {
+    await updateHomeCommunityMutation({
+      variables: {
+        uuid: item.value.uuid,
+        gmsApiKey: gmsApiKey.value,
+        location: location.value,
+      },
+    })
+
+    if (isLocationChanged.value && isGMSApiKeyChanged.value) {
+      toastSuccess(t('federation.toast_gmsApiKeyAndLocationUpdated'))
+    } else if (isGMSApiKeyChanged.value) {
+      toastSuccess(t('federation.toast_gmsApiKeyUpdated'))
+    } else if (isLocationChanged.value) {
+      toastSuccess(t('federation.toast_gmsLocationUpdated'))
     }
-  },
-  computed: {
-    verified() {
-      if (!this.item.federatedCommunities || this.item.federatedCommunities.length === 0) {
-        return false
-      }
-      return (
-        this.item.federatedCommunities.filter(
-          (federatedCommunity) =>
-            new Date(federatedCommunity.verifiedAt) >= new Date(federatedCommunity.lastAnnouncedAt),
-        ).length > 0
-      )
-    },
-    icon() {
-      return this.verified ? 'check' : 'x-circle'
-    },
-    variant() {
-      return this.verified ? 'success' : 'danger'
-    },
-    lastAnnouncedAt() {
-      if (!this.item.federatedCommunities || this.item.federatedCommunities.length === 0) return ''
-      const minDate = new Date(0)
-      const lastAnnouncedAt = this.item.federatedCommunities.reduce(
-        (lastAnnouncedAt, federateCommunity) => {
-          if (!federateCommunity.lastAnnouncedAt) return lastAnnouncedAt
-          const date = new Date(federateCommunity.lastAnnouncedAt)
-          return date > lastAnnouncedAt ? date : lastAnnouncedAt
-        },
-        minDate,
-      )
-      if (lastAnnouncedAt !== minDate) {
-        return formatDistanceToNow(lastAnnouncedAt, {
-          includeSecond: true,
-          addSuffix: true,
-          locale: locales[this.locale],
-        })
-      }
-      return ''
-    },
-    createdAt() {
-      if (this.item.createdAt) {
-        return formatDistanceToNow(new Date(this.item.createdAt), {
-          includeSecond: true,
-          addSuffix: true,
-          locale: locales[this.locale],
-        })
-      }
-      return ''
-    },
-    isLocationChanged() {
-      return this.originalLocation !== this.location
-    },
-    isGMSApiKeyChanged() {
-      return this.originalGmsApiKey !== this.gmsApiKey
-    },
-    isValidLocation() {
-      return this.location && this.location.latitude && this.location.longitude
-    },
-  },
-  methods: {
-    toggleDetails() {
-      this.details = !this.details
-    },
-    handleUpdateHomeCommunity() {
-      this.$apollo
-        .mutate({
-          mutation: updateHomeCommunity,
-          variables: {
-            uuid: this.item.uuid,
-            gmsApiKey: this.gmsApiKey,
-            location: this.location,
-          },
-        })
-        .then(() => {
-          if (this.isLocationChanged && this.isGMSApiKeyChanged) {
-            this.toastSuccess(this.$t('federation.toast_gmsApiKeyAndLocationUpdated'))
-          } else if (this.isGMSApiKeyChanged) {
-            this.toastSuccess(this.$t('federation.toast_gmsApiKeyUpdated'))
-          } else if (this.isLocationChanged) {
-            this.toastSuccess(this.$t('federation.toast_gmsLocationUpdated'))
-          }
-          this.originalLocation = this.location
-          this.originalGmsApiKey = this.gmsApiKey
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
-    },
-    resetHomeCommunityEditable() {
-      this.location = this.originalLocation
-      this.gmsApiKey = this.originalGmsApiKey
-    },
-  },
+    originalLocation.value = location.value
+    originalGmsApiKey.value = gmsApiKey.value
+  } catch (error) {
+    toastError(error.message)
+  }
+}
+
+const resetHomeCommunityEditable = () => {
+  location.value = originalLocation.value
+  gmsApiKey.value = originalGmsApiKey.value
 }
 </script>
+
+<!--<script>-->
+<!--import { formatDistanceToNow } from 'date-fns'-->
+<!--import { de, enUS as en, fr, es, nl } from 'date-fns/locale'-->
+<!--import EditableGroup from '@/components/input/EditableGroup'-->
+<!--import FederationVisualizeItem from './FederationVisualizeItem.vue'-->
+<!--import { updateHomeCommunity } from '../../graphql/updateHomeCommunity'-->
+<!--import Coordinates from '../input/Coordinates.vue'-->
+<!--import EditableGroupableLabel from '../input/EditableGroupableLabel.vue'-->
+
+<!--const locales = { en, de, es, fr, nl }-->
+
+<!--export default {-->
+<!--  name: 'CommunityVisualizeItem',-->
+<!--  components: {-->
+<!--    Coordinates,-->
+<!--    EditableGroup,-->
+<!--    FederationVisualizeItem,-->
+<!--    EditableGroupableLabel,-->
+<!--  },-->
+<!--  props: {-->
+<!--    item: { type: Object },-->
+<!--  },-->
+<!--  data() {-->
+<!--    return {-->
+<!--      formatDistanceToNow,-->
+<!--      locale: this.$i18n.locale,-->
+<!--      details: false,-->
+<!--      gmsApiKey: this.item.gmsApiKey,-->
+<!--      location: this.item.location,-->
+<!--      originalGmsApiKey: this.item.gmsApiKey,-->
+<!--      originalLocation: this.item.location,-->
+<!--    }-->
+<!--  },-->
+<!--  computed: {-->
+<!--    verified() {-->
+<!--      if (!this.item.federatedCommunities || this.item.federatedCommunities.length === 0) {-->
+<!--        return false-->
+<!--      }-->
+<!--      return (-->
+<!--        this.item.federatedCommunities.filter(-->
+<!--          (federatedCommunity) =>-->
+<!--            new Date(federatedCommunity.verifiedAt) >= new Date(federatedCommunity.lastAnnouncedAt),-->
+<!--        ).length > 0-->
+<!--      )-->
+<!--    },-->
+<!--    icon() {-->
+<!--      return this.verified ? 'check' : 'x-circle'-->
+<!--    },-->
+<!--    variant() {-->
+<!--      return this.verified ? 'success' : 'danger'-->
+<!--    },-->
+<!--    lastAnnouncedAt() {-->
+<!--      if (!this.item.federatedCommunities || this.item.federatedCommunities.length === 0) return ''-->
+<!--      const minDate = new Date(0)-->
+<!--      const lastAnnouncedAt = this.item.federatedCommunities.reduce(-->
+<!--        (lastAnnouncedAt, federateCommunity) => {-->
+<!--          if (!federateCommunity.lastAnnouncedAt) return lastAnnouncedAt-->
+<!--          const date = new Date(federateCommunity.lastAnnouncedAt)-->
+<!--          return date > lastAnnouncedAt ? date : lastAnnouncedAt-->
+<!--        },-->
+<!--        minDate,-->
+<!--      )-->
+<!--      if (lastAnnouncedAt !== minDate) {-->
+<!--        return formatDistanceToNow(lastAnnouncedAt, {-->
+<!--          includeSecond: true,-->
+<!--          addSuffix: true,-->
+<!--          locale: locales[this.locale],-->
+<!--        })-->
+<!--      }-->
+<!--      return ''-->
+<!--    },-->
+<!--    createdAt() {-->
+<!--      if (this.item.createdAt) {-->
+<!--        return formatDistanceToNow(new Date(this.item.createdAt), {-->
+<!--          includeSecond: true,-->
+<!--          addSuffix: true,-->
+<!--          locale: locales[this.locale],-->
+<!--        })-->
+<!--      }-->
+<!--      return ''-->
+<!--    },-->
+<!--    isLocationChanged() {-->
+<!--      return this.originalLocation !== this.location-->
+<!--    },-->
+<!--    isGMSApiKeyChanged() {-->
+<!--      return this.originalGmsApiKey !== this.gmsApiKey-->
+<!--    },-->
+<!--    isValidLocation() {-->
+<!--      return this.location && this.location.latitude && this.location.longitude-->
+<!--    },-->
+<!--  },-->
+<!--  methods: {-->
+<!--    toggleDetails() {-->
+<!--      this.details = !this.details-->
+<!--    },-->
+<!--    handleUpdateHomeCommunity() {-->
+<!--      this.$apollo-->
+<!--        .mutate({-->
+<!--          mutation: updateHomeCommunity,-->
+<!--          variables: {-->
+<!--            uuid: this.item.uuid,-->
+<!--            gmsApiKey: this.gmsApiKey,-->
+<!--            location: this.location,-->
+<!--          },-->
+<!--        })-->
+<!--        .then(() => {-->
+<!--          if (this.isLocationChanged && this.isGMSApiKeyChanged) {-->
+<!--            this.toastSuccess(this.$t('federation.toast_gmsApiKeyAndLocationUpdated'))-->
+<!--          } else if (this.isGMSApiKeyChanged) {-->
+<!--            this.toastSuccess(this.$t('federation.toast_gmsApiKeyUpdated'))-->
+<!--          } else if (this.isLocationChanged) {-->
+<!--            this.toastSuccess(this.$t('federation.toast_gmsLocationUpdated'))-->
+<!--          }-->
+<!--          this.originalLocation = this.location-->
+<!--          this.originalGmsApiKey = this.gmsApiKey-->
+<!--        })-->
+<!--        .catch((error) => {-->
+<!--          this.toastError(error.message)-->
+<!--        })-->
+<!--    },-->
+<!--    resetHomeCommunityEditable() {-->
+<!--      this.location = this.originalLocation-->
+<!--      this.gmsApiKey = this.originalGmsApiKey-->
+<!--    },-->
+<!--  },-->
+<!--}-->
+<!--</script>-->
diff --git a/admin/src/components/Federation/FederationVisualizeItem.vue b/admin/src/components/Federation/FederationVisualizeItem.vue
index 9172f9a94..5f8ce3170 100644
--- a/admin/src/components/Federation/FederationVisualizeItem.vue
+++ b/admin/src/components/Federation/FederationVisualizeItem.vue
@@ -1,23 +1,43 @@
 <template>
   <div class="federation-visualize-item">
-    <b-row>
-      <b-col><b-icon :icon="icon" :variant="variant" class="mr-4"></b-icon></b-col>
-      <b-col class="ml-1">{{ item.apiVersion }}</b-col>
-      <b-col v-b-tooltip="item.createdAt">{{ distanceDate(item.createdAt) }}</b-col>
-      <b-col v-b-tooltip="item.lastAnnouncedAt">{{ distanceDate(item.lastAnnouncedAt) }}</b-col>
-      <b-col v-b-tooltip="item.verifiedAt">{{ distanceDate(item.verifiedAt) }}</b-col>
-      <b-col v-b-tooltip="item.lastErrorAt">{{ distanceDate(item.lastErrorAt) }}</b-col>
-    </b-row>
+    <BRow>
+      <BCol>
+        <variant-icon :icon="icon" :variant="variant" />
+      </BCol>
+      <BCol class="ml-1">{{ item.apiVersion }}</BCol>
+      <BCol>
+        <span v-b-tooltip="`${item.createdAt}`">
+          {{ distanceDate(item.createdAt) }}
+        </span>
+      </BCol>
+      <BCol>
+        <span v-b-tooltip="`${item.lastAnnouncedAt}`">
+          {{ distanceDate(item.lastAnnouncedAt) }}
+        </span>
+      </BCol>
+      <BCol>
+        <span v-b-tooltip="`${item.verifiedAt}`">
+          {{ distanceDate(item.verifiedAt) }}
+        </span>
+      </BCol>
+      <BCol>
+        <span v-b-tooltip="`${item.lastErrorAt}`">
+          {{ distanceDate(item.lastErrorAt) }}
+        </span>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
 import { formatDistanceToNow } from 'date-fns'
 import { de, enUS as en, fr, es, nl } from 'date-fns/locale'
+import VariantIcon from '@/components/VariantIcon.vue'
 
 const locales = { en, de, es, fr, nl }
 
 export default {
   name: 'FederationVisualizeItem',
+  components: { VariantIcon },
   props: {
     item: { type: Object },
   },
diff --git a/admin/src/components/NavBar.vue b/admin/src/components/NavBar.vue
index afbb31351..73cc7f0d5 100644
--- a/admin/src/components/NavBar.vue
+++ b/admin/src/components/NavBar.vue
@@ -4,7 +4,7 @@
       <BNavbarBrand class="mb-2" to="/">
         <img
           src="../../public/img/brand/gradido_logo_w.png"
-          class="navbar-brand-img pl-2"
+          class="navbar-brand-img ps-2"
           alt="..."
         />
       </BNavbarBrand>
diff --git a/admin/src/components/Overlay.vue b/admin/src/components/Overlay.vue
index 35cb61420..d6d905e00 100644
--- a/admin/src/components/Overlay.vue
+++ b/admin/src/components/Overlay.vue
@@ -46,7 +46,7 @@
               {{ $t('overlay.cancel') }}
             </BButton>
           </BCol>
-          <BCol class="text-right">
+          <BCol class="text-end">
             <slot name="submit-btn" />
           </BCol>
         </BRow>
diff --git a/admin/src/components/RowDetails.vue b/admin/src/components/RowDetails.vue
index de179e691..91c32c73c 100644
--- a/admin/src/components/RowDetails.vue
+++ b/admin/src/components/RowDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-card class="shadow-lg pl-3 pr-3 mb-5 bg-white rounded">
+  <b-card class="shadow-lg ps-3 pe-3 mb-5 bg-white rounded">
     <slot :name="slotName" />
     <b-button size="sm" @click="$emit('row-toggle-details', row, index)">
       <b-icon
diff --git a/admin/src/components/Tables/OpenCreationsTable.vue b/admin/src/components/Tables/OpenCreationsTable.vue
index 36f937ca4..540163640 100644
--- a/admin/src/components/Tables/OpenCreationsTable.vue
+++ b/admin/src/components/Tables/OpenCreationsTable.vue
@@ -21,7 +21,7 @@
           <BButton
             variant="danger"
             size="md"
-            class="mr-2"
+            class="me-2"
             @click="$emit('show-overlay', row.item, 'delete')"
           >
             <IBiTrash />
@@ -42,7 +42,7 @@
             variant="info"
             size="md"
             :index="0"
-            class="mr-2"
+            class="me-2"
             @click="rowToggleDetails(row, 0)"
           >
             <IBiX v-if="row.detailsShowing" />
@@ -58,7 +58,7 @@
               v-if="row.item.status === 'IN_PROGRESS' && row.item.messagesCount > 0"
               variant="warning"
               style="color: #ffc107"
-              class="pl-1"
+              class="ps-1"
             />
           </BButton>
         </div>
@@ -73,7 +73,7 @@
           <BButton
             variant="warning"
             size="md"
-            class="mr-2"
+            class="me-2"
             @click="$emit('show-overlay', row.item, 'deny')"
           >
             <IBiX />
@@ -85,7 +85,7 @@
           <BButton
             variant="success"
             size="md"
-            class="mr-2"
+            class="me-2"
             @click="$emit('show-overlay', row.item, 'confirm')"
           >
             <IBiCheck />
diff --git a/admin/src/components/Tables/SearchUserTable.vue b/admin/src/components/Tables/SearchUserTable.vue
index b31ff0c1a..5286e31e0 100644
--- a/admin/src/components/Tables/SearchUserTable.vue
+++ b/admin/src/components/Tables/SearchUserTable.vue
@@ -20,7 +20,7 @@
         <div class="d-flex gap-3 justify-content-end align-items-center">
           <div
             v-if="row.item.deletedAt"
-            class="mr-3 test-deleted-icon position-relative rounded-circle"
+            class="me-3 test-deleted-icon position-relative rounded-circle"
             style="width: 40px; height: 40px"
           >
             <img src="../../assets/icons/circle-slash.png" class="position-absolute" />
@@ -33,7 +33,7 @@
           <span v-if="!row.item.deletedAt" class="d-flex gap-2">
             <div
               v-if="!row.item.emailChecked"
-              class="mr-3 rounded-circle position-relative"
+              class="me-3 rounded-circle position-relative"
               style="background-color: #dc3545; width: 40px; height: 40px"
             >
               <img
@@ -45,7 +45,7 @@
             <div>
               <img
                 v-if="!row.item.hasElopage"
-                class="mr-3 rounded-circle bg-red-dark"
+                class="me-3 rounded-circle bg-red-dark"
                 src="../../assets/icons/elopage_favicon.png"
                 style="background-color: #dc3545; width: 40px; height: 40px"
               />
@@ -65,7 +65,7 @@
       </template>
 
       <template #row-details="row">
-        <BCard ref="rowDetails" class="shadow-lg pl-3 pr-3 mb-5 bg-white rounded">
+        <BCard ref="rowDetails" class="shadow-lg ps-3 pe-3 mb-5 bg-white rounded">
           <BTabs content-class="mt-3">
             <BTab :title="$t('creation')" active :disabled="row.item.deletedAt !== null">
               <creation-formular
diff --git a/admin/src/components/Tables/StatisticTable.vue b/admin/src/components/Tables/StatisticTable.vue
index 70ec861f5..25b10523d 100644
--- a/admin/src/components/Tables/StatisticTable.vue
+++ b/admin/src/components/Tables/StatisticTable.vue
@@ -5,8 +5,8 @@
       <BThead>
         <BTr>
           <BTh />
-          <BTh class="text-right">{{ $t('statistic.count') }}</BTh>
-          <BTh class="text-right">{{ $t('statistic.details') }}</BTh>
+          <BTh class="text-end">{{ $t('statistic.count') }}</BTh>
+          <BTh class="text-end">{{ $t('statistic.details') }}</BTh>
         </BTr>
       </BThead>
       <BTbody>
@@ -14,7 +14,7 @@
           <BTd>
             <b>{{ $t('statistic.totalUsers') }}</b>
           </BTd>
-          <BTd class="text-right">
+          <BTd class="text-end">
             {{ props.statistics.totalUsers }}
           </BTd>
           <BTd></BTd>
@@ -23,7 +23,7 @@
           <BTd>
             <b>{{ $t('statistic.activeUsers') }}</b>
           </BTd>
-          <BTd class="text-right">
+          <BTd class="text-end">
             {{ props.statistics.activeUsers }}
           </BTd>
           <BTd></BTd>
@@ -32,7 +32,7 @@
           <BTd>
             <b>{{ $t('statistic.deletedUsers') }}</b>
           </BTd>
-          <BTd class="text-right">
+          <BTd class="text-end">
             {{ props.statistics.deletedUsers }}
           </BTd>
           <BTd></BTd>
@@ -41,11 +41,11 @@
           <BTd>
             <b>{{ $t('statistic.totalGradidoCreated') }}</b>
           </BTd>
-          <BTd class="text-right">
+          <BTd class="text-end">
             <!--            {{ $n(props.statistics.totalGradidoCreated, 'decimal') }} {{ $t('GDD') }}-->
             4500
           </BTd>
-          <BTd class="text-right">
+          <BTd class="text-end">
             {{ props.statistics.totalGradidoCreated }}
           </BTd>
         </BTr>
@@ -53,19 +53,19 @@
           <BTd>
             <b>{{ $t('statistic.totalGradidoDecayed') }}</b>
           </BTd>
-          <BTd class="text-right">
+          <BTd class="text-end">
             {{ $n(parseFloat(props.statistics.totalGradidoDecayed), 'decimal') }} {{ $t('GDD') }}
           </BTd>
-          <BTd class="text-right">{{ props.statistics.totalGradidoDecayed }}</BTd>
+          <BTd class="text-end">{{ props.statistics.totalGradidoDecayed }}</BTd>
         </BTr>
         <BTr>
           <BTd>
             <b>{{ $t('statistic.totalGradidoAvailable') }}</b>
           </BTd>
-          <BTd class="text-right">
+          <BTd class="text-end">
             {{ $n(parseFloat(props.statistics.totalGradidoAvailable), 'decimal') }} {{ $t('GDD') }}
           </BTd>
-          <BTd class="text-right">
+          <BTd class="text-end">
             {{ props.statistics.totalGradidoAvailable }}
           </BTd>
         </BTr>
@@ -73,11 +73,11 @@
           <BTd>
             <b>{{ $t('statistic.totalGradidoUnbookedDecayed') }}</b>
           </BTd>
-          <BTd class="text-right">
+          <BTd class="text-end">
             {{ $n(parseFloat(props.statistics.totalGradidoUnbookedDecayed), 'decimal') }}
             {{ $t('GDD') }}
           </BTd>
-          <BTd class="text-right">{{ props.statistics.totalGradidoUnbookedDecayed }}</BTd>
+          <BTd class="text-end">{{ props.statistics.totalGradidoUnbookedDecayed }}</BTd>
         </BTr>
       </BTbody>
     </BTableSimple>
diff --git a/admin/src/components/VariantIcon.vue b/admin/src/components/VariantIcon.vue
new file mode 100644
index 000000000..4b05ea0d8
--- /dev/null
+++ b/admin/src/components/VariantIcon.vue
@@ -0,0 +1,22 @@
+<template>
+  <IBiCheck v-if="props.icon === 'check'" class="icon-variant" />
+  <IBiXCircle v-if="props.icon === 'x-circle'" class="icon-variant" />
+  <IBiPersonFill v-if="props.icon === 'person-fill'" class="icon-variant" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  icon: { type: String, default: '' },
+  variant: { type: String, default: 'success' },
+})
+
+const color = ref(`var(--bs-${props.variant}`)
+</script>
+
+<style scoped lang="scss">
+.icon-variant {
+  color: v-bind('color');
+}
+</style>
diff --git a/admin/src/main.js b/admin/src/main.js
index a7e76e9a0..dc3d65efc 100644
--- a/admin/src/main.js
+++ b/admin/src/main.js
@@ -29,6 +29,10 @@ const app = createApp(App)
 
 app.use(router)
 app.use(store)
+
+i18n.global.locale.value =
+  store.state.moderator && store.state.moderator.language ? store.state.moderator.language : 'en'
+
 app.use(i18n)
 app.use(PortalVue)
 app.use(createBootstrap())
@@ -39,7 +43,4 @@ app.mixin(toasters)
 
 addNavigationGuards(router, store, apolloProvider.defaultClient, i18n)
 
-i18n.locale =
-  store.state.moderator && store.state.moderator.language ? store.state.moderator.language : 'en'
-
 app.mount('#app')
diff --git a/admin/src/pages/CreationConfirm.vue b/admin/src/pages/CreationConfirm.vue
index 32e29996a..03a183cdf 100644
--- a/admin/src/pages/CreationConfirm.vue
+++ b/admin/src/pages/CreationConfirm.vue
@@ -4,11 +4,11 @@
     <user-query v-model="query" class="mb-2 mt-2" :placeholder="$t('user_memo_search')" />
     <p class="mb-2">
       <input v-model="noHashtag" type="checkbox" class="noHashtag" />
-      <span v-b-tooltip="$t('no_hashtag_tooltip')" class="ml-2">{{ $t('no_hashtag') }}</span>
+      <span v-b-tooltip="$t('no_hashtag_tooltip')" class="ms-2">{{ $t('no_hashtag') }}</span>
     </p>
     <p v-if="showResubmissionCheckbox" class="mb-4">
       <input v-model="hideResubmissionModel" type="checkbox" class="hideResubmission" />
-      <span v-b-tooltip="$t('hide_resubmission_tooltip')" class="ml-2">
+      <span v-b-tooltip="$t('hide_resubmission_tooltip')" class="ms-2">
         {{ $t('hide_resubmission') }}
       </span>
     </p>
@@ -82,7 +82,7 @@
           <p>{{ $t(overlayQuestion) }}</p>
         </template>
         <template #submit-btn>
-          <BButton size="md" :variant="overlayIcon" class="m-3 text-right" @click="overlayEvent">
+          <BButton size="md" :variant="overlayIcon" class="m-3 text-end" @click="overlayEvent">
             {{ $t(overlayBtnText) }}
           </BButton>
         </template>
diff --git a/admin/src/pages/FederationVisualize.vue b/admin/src/pages/FederationVisualize.vue
index 792f7834d..6be762d30 100644
--- a/admin/src/pages/FederationVisualize.vue
+++ b/admin/src/pages/FederationVisualize.vue
@@ -9,20 +9,13 @@
         @click="refetch"
       >
         <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>
     <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="1" class="ms-1">{{ $t('federation.verified') }}</BCol>
+        <BCol class="ms-3">{{ $t('federation.url') }}</BCol>
+        <BCol class="ms-3">{{ $t('federation.name') }}</BCol>
         <BCol cols="2">{{ $t('federation.lastAnnouncedAt') }}</BCol>
         <BCol cols="2">{{ $t('federation.createdAt') }}</BCol>
       </BRow>
diff --git a/admin/src/pages/Overview.vue b/admin/src/pages/Overview.vue
index 7d4b279b8..2e5a0a31a 100644
--- a/admin/src/pages/Overview.vue
+++ b/admin/src/pages/Overview.vue
@@ -11,7 +11,6 @@
       <BCardText>
         <BLink to="creation-confirm">
           <h1>{{ openCreations }}</h1>
-          <h1>Layout test</h1>
         </BLink>
       </BCardText>
     </BCard>
@@ -32,30 +31,31 @@
   </div>
 </template>
 <script setup>
-import { adminListContributions } from '../graphql/adminListContributions'
-import { ref, computed, onMounted } from 'vue'
+import { adminListContributions } from '@/graphql/adminListContributions'
+import { ref, computed } from 'vue'
 import { useStore } from 'vuex'
 import { useQuery } from '@vue/apollo-composable'
 import { BCard, BCardText, BLink } from 'bootstrap-vue-next'
+import { useAppToast } from '@/composables/useToast'
 
 const store = useStore()
 
 const statusFilter = ref(['IN_PROGRESS', 'PENDING'])
 
-const { result, error } = useQuery(adminListContributions, {
+const { toastError } = useAppToast()
+
+const { result, onResult, onError } = useQuery(adminListContributions, {
   statusFilter: statusFilter.value,
   hideResubmission: true,
 })
 
-const openCreations = computed(() => result.value?.adminListContributions.contributionCount || 0)
-
-onMounted(() => {
-  if (result.value) {
-    store.commit('setOpenCreations', openCreations.value)
-  }
-
-  if (error.value) {
-    // store.dispatch('toastError', error.value.message)
-  }
+onResult(({ data }) => {
+  store.commit('setOpenCreations', data.adminListContributions.contributionCount)
 })
+
+onError((error) => {
+  toastError(error.message)
+})
+
+const openCreations = computed(() => result.value?.adminListContributions.contributionCount || 0)
 </script>
diff --git a/admin/src/router/guards.js b/admin/src/router/guards.js
index 79e381478..0022cba86 100644
--- a/admin/src/router/guards.js
+++ b/admin/src/router/guards.js
@@ -14,7 +14,7 @@ const addNavigationGuards = (router, store, apollo, i18n) => {
         .then((result) => {
           const moderator = result.data.verifyLogin
           if (moderator.roles?.length) {
-            i18n.locale = moderator.language
+            i18n.global.locale.value = moderator.language
             store.commit('moderator', moderator)
             next({ path: '/' })
           } else {
diff --git a/frontend/src/assets/scss/custom/gradido-custom/_buttons-forms.scss b/frontend/src/assets/scss/custom/gradido-custom/_buttons-forms.scss
index 9ffc392fe..e9ab375a3 100644
--- a/frontend/src/assets/scss/custom/gradido-custom/_buttons-forms.scss
+++ b/frontend/src/assets/scss/custom/gradido-custom/_buttons-forms.scss
@@ -5,7 +5,7 @@ $input-btn-padding-x: 0.75rem ;
 $input-btn-line-height: $shape-height-base ;
 $input-btn-focus-width: 0 ;
 $input-btn-focus-color: rgba($component-active-bg, 1) ;
-$input-btn-focus-box-shadow: none ;
+$input-btn-focus-box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);
 $input-btn-padding-y-sm: 0.25rem ;
 $input-btn-padding-x-sm: 0.5rem ;
 $input-btn-line-height-sm: $shape-height-sm ;
diff --git a/frontend/src/assets/scss/custom/gradido-custom/_buttons.scss b/frontend/src/assets/scss/custom/gradido-custom/_buttons.scss
index a9a650c30..1d65173cf 100644
--- a/frontend/src/assets/scss/custom/gradido-custom/_buttons.scss
+++ b/frontend/src/assets/scss/custom/gradido-custom/_buttons.scss
@@ -17,7 +17,7 @@ $btn-box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%) ;
 $btn-hover-box-shadow: 0 7px 14px rgb(50 50 93 / 10%), 0 3px 6px rgb(0 0 0 / 8%) ;
 $btn-focus-box-shadow: $btn-hover-box-shadow ;
 $btn-focus-width: $input-btn-focus-width ;
-$btn-active-box-shadow: none;
+$btn-active-box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);;
 $btn-hover-translate-y: -1px ;
 
 
diff --git a/frontend/src/assets/scss/custom/gradido-custom/_custom-forms.scss b/frontend/src/assets/scss/custom/gradido-custom/_custom-forms.scss
index 01b2b6bd3..d9c3844f2 100644
--- a/frontend/src/assets/scss/custom/gradido-custom/_custom-forms.scss
+++ b/frontend/src/assets/scss/custom/gradido-custom/_custom-forms.scss
@@ -6,7 +6,7 @@ $custom-control-indicator-size: 1.25rem ;
 $custom-control-indicator-bg: $input-bg ;
 $custom-control-indicator-border-width: 1px ;
 $custom-control-indicator-border-color: $input-border-color ;
-$custom-control-indicator-box-shadow: none ;
+$custom-control-indicator-box-shadow: 0 0 0 0 rgb(255 255 255 / 0%); ;
 $custom-control-indicator-focus-box-shadow: $custom-control-indicator-box-shadow ;
 $custom-control-indicator-hover-color: $component-hover-color ;
 $custom-control-indicator-hover-bg: $component-hover-bg ;
diff --git a/frontend/src/assets/scss/custom/gradido-custom/_datepicker.scss b/frontend/src/assets/scss/custom/gradido-custom/_datepicker.scss
index 1c863df4c..036a62fe6 100644
--- a/frontend/src/assets/scss/custom/gradido-custom/_datepicker.scss
+++ b/frontend/src/assets/scss/custom/gradido-custom/_datepicker.scss
@@ -13,7 +13,7 @@ $datepicker-disabled-old-new-color: $gray-500 ;
 $datepicker-header-cell-border-radius: $border-radius ;
 $datepicker-active-color: $white ;
 $datepicker-active-background: $primary ;
-$datepicker-active-box-shadow: none ;
+$datepicker-active-box-shadow: 0 0 0 0 rgb(255 255 255 / 0%); ;
 $datepicker-range-background: $primary ;
 $datepicker-range-cell-focused-background: color.adjust($datepicker-range-background, $lightness: -5%);
 $datepicker-range-color: $white ;
diff --git a/frontend/src/assets/scss/custom/gradido-custom/_input.scss b/frontend/src/assets/scss/custom/gradido-custom/_input.scss
index e044b3e20..0b0d53c53 100644
--- a/frontend/src/assets/scss/custom/gradido-custom/_input.scss
+++ b/frontend/src/assets/scss/custom/gradido-custom/_input.scss
@@ -23,13 +23,13 @@ $input-focus-alternative-box-shadow: 0 4px 6px rgb(50 50 93 / 11%),0 1px 3px rgb
 $input-color: $gray-600 ;
 $input-border-color: #cad1d7 ;
 $input-border-width: $input-btn-border-width ;
-$input-box-shadow: none ; // 0 1px 3px 0 $gray-400 ;
+$input-box-shadow: 0 0 0 0 rgb(255 255 255 / 0%); // 0 1px 3px 0 $gray-400 ;
 
 $input-focus-bg: $white ;
 $input-focus-border-color: rgb(50 151 211 / 25%) ;
 $input-focus-color: $input-color ;
 $input-focus-width: 0 ;
-$input-focus-box-shadow: none ; // 0 1px 3px 0 $gray-500 ;
+$input-focus-box-shadow: 0 0 0 0 rgb(255 255 255 / 0%); // 0 1px 3px 0 $gray-500 ;
 
 $input-placeholder-color: $gray-500 ;
 $input-focus-placeholder-color: $gray-500 ;
diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss
index 35b6b8581..8701f7d98 100644
--- a/frontend/src/assets/scss/gradido-template.scss
+++ b/frontend/src/assets/scss/gradido-template.scss
@@ -42,7 +42,7 @@ html > body {
 }
 
 .app-box-shadow {
-  box-shadow: 20pt 20pt 50pt 0 #3838384f;
+  box-shadow: 20pt 20pt 50pt 0 #3838384f !important;
 }
 
 /* Navbar  */
@@ -280,7 +280,7 @@ a:hover,
 }
 
 .gradido-border-radius {
-  border-radius: 26px;
+  border-radius: 26px!important;
   overflow: hidden;
 }
 
@@ -341,3 +341,7 @@ a:hover,
 .text-color-gdd-yellow {
   color: rgb(197 141 56);
 }
+
+.gdd-toaster-body {
+  color: rgb(255 255 255);
+}
diff --git a/frontend/src/components/Auth/AuthFooter.vue b/frontend/src/components/Auth/AuthFooter.vue
index 232e66a3d..99ec027ab 100644
--- a/frontend/src/components/Auth/AuthFooter.vue
+++ b/frontend/src/components/Auth/AuthFooter.vue
@@ -16,18 +16,15 @@
         </div>
       </BCol>
       <BCol class="col-12 col-md-12 col-lg-6 mt-4 mb-4 mt-lg-0 mb-lg-0">
-        <div class="d-flex align-items-center ms-3 ms-lg-0 text-lg-right pt-1">
+        <div class="d-flex align-items-center ms-3 ms-lg-0 text-lg-end pt-1">
           {{ $t('followUs') }}
           <BLink href="https://www.facebook.com/groups/Gradido/" target="_blank">
-            <!--            <b-icon-facebook class="ml-3 me-3 c-grey" font-scale="1"></b-icon-facebook>-->
             <IBiFacebook class="ms-3 me-3 c-grey" />
           </BLink>
           <BLink href="https://twitter.com/gradido" target="_blank">
-            <!--            <b-icon-twitter class="me-3 c-grey" font-scale="1"></b-icon-twitter>-->
             <IBiTwitterX class="me-3 c-grey" font-scale="1" />
           </BLink>
           <BLink href="https://www.youtube.com/c/GradidoNet" target="_blank">
-            <!--            <b-icon-youtube class="me-3 c-grey" font-scale="1"></b-icon-youtube>-->
             <IBiYoutube class="me-3 c-grey" font-scale="1" />
           </BLink>
 
diff --git a/frontend/src/components/ClipboardCopy.vue b/frontend/src/components/ClipboardCopy.vue
index ff8984426..d6e0d6aff 100644
--- a/frontend/src/components/ClipboardCopy.vue
+++ b/frontend/src/components/ClipboardCopy.vue
@@ -4,13 +4,13 @@
       <div>
         <label>{{ $t('gdd_per_link.copy-link') }}</label>
         <div
-          class="pointer text-center bg-secondary gradido-border-radius p-3"
+          class="copy-link-card pointer text-center gradido-border-radius p-3"
           data-test="copyLink"
           @click="copyLink"
         >
           {{ link }}
           <div>
-            <BButton class="p-4">
+            <BButton class="p-4 gradido-border-radius">
               <IBiLink45deg />
             </BButton>
           </div>
@@ -19,13 +19,13 @@
       <div class="mt-5">
         <label>{{ $t('gdd_per_link.copy-link-with-text') }}</label>
         <div
-          class="pointer text-center bg-secondary gradido-border-radius p-3"
+          class="copy-link-card pointer text-center gradido-border-radius p-3"
           data-test="copyLinkWithText"
           @click="copyLinkWithText"
         >
           {{ linkText }}
           <div>
-            <BButton class="p-4">
+            <BButton class="p-4 gradido-border-radius">
               <IBiLink45deg />
             </BButton>
           </div>
@@ -51,8 +51,12 @@ const props = defineProps({
 const { copyLink, copyLinkWithText, linkText, canCopyLink } = useCopyLinks({ ...props })
 </script>
 
-<style>
+<style lang="scss">
 .svg {
   filter: brightness(0) invert(1);
 }
+
+.copy-link-card {
+  background-color: $secondary !important;
+}
 </style>
diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue b/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue
index eecafd3c6..e211b748e 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue
@@ -14,7 +14,7 @@
           <BCol>
             <BButton type="reset" variant="secondary">{{ $t('form.cancel') }}</BButton>
           </BCol>
-          <BCol class="text-right">
+          <BCol class="text-end">
             <BButton type="submit" variant="gradido" :disabled="disabled">
               {{ $t('form.reply') }}
             </BButton>
diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
index 779c1eef5..5f59d65d1 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
@@ -20,7 +20,7 @@
         </BCol>
       </BRow>
     </div>
-    <div v-else-if="isNotModerator" class="text-right pe-4 pe-lg-0 is-not-moderator">
+    <div v-else-if="isNotModerator" class="text-end pe-4 pe-lg-0 is-not-moderator">
       <BRow class="mb-3">
         <BCol cols="10">
           <div class="fw-bold" data-test="username">{{ storeName.username }}</div>
diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index 43b89b821..001ec485e 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -12,7 +12,7 @@
         :state="dataFieldMeta.valid"
         :locale="$i18n.locale"
         :max="getMaximalDate"
-        :min="minimalDate"
+        :min="minimalDate.toISOString().slice(0, 10)"
         class="mb-4 bg-248"
         reset-value=""
         :label-no-date-selected="$t('contribution.noDateSelected')"
@@ -69,7 +69,7 @@
               {{ $t('form.cancel') }}
             </BButton>
           </BCol>
-          <BCol cols="12" lg="6" class="text-right mt-4 mt-lg-0">
+          <BCol cols="12" lg="6" class="text-end mt-4 mt-lg-0">
             <BButton
               block
               type="submit"
diff --git a/frontend/src/components/Contributions/ContributionList.vue b/frontend/src/components/Contributions/ContributionList.vue
index fd05edf47..889bc8fd2 100644
--- a/frontend/src/components/Contributions/ContributionList.vue
+++ b/frontend/src/components/Contributions/ContributionList.vue
@@ -26,7 +26,7 @@
     </div>
     <BPagination
       v-if="isPaginationVisible"
-      v-model="currentPage"
+      :model-value="currentPage"
       class="mt-3"
       pills
       size="lg"
@@ -34,70 +34,73 @@
       :total-rows="contributionCount"
       align="center"
       :hide-ellipsis="true"
+      @update:model-value="currentPage = $event"
     />
   </div>
 </template>
-<script>
-import ContributionListItem from '@/components/Contributions/ContributionListItem'
+<script setup>
+import { ref, computed, watch } from 'vue'
+import ContributionListItem from '@/components/Contributions/ContributionListItem.vue'
 
-export default {
-  name: 'ContributionList',
-  components: {
-    ContributionListItem,
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
   },
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-    contributionCount: {
-      type: Number,
-      required: true,
-    },
-    showPagination: {
-      type: Boolean,
-      required: true,
-    },
-    pageSize: { type: Number, default: 25 },
-    allContribution: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
+  contributionCount: {
+    type: Number,
+    required: true,
   },
-  data() {
-    return {
-      currentPage: 1,
-      messages: [],
-    }
+  showPagination: {
+    type: Boolean,
+    required: true,
   },
-  computed: {
-    isPaginationVisible() {
-      return this.showPagination && this.pageSize < this.contributionCount
-    },
+  pageSize: {
+    type: Number,
+    default: 25,
   },
-  watch: {
-    currentPage() {
-      this.updateListContributions()
-    },
-  },
-  methods: {
-    updateListContributions() {
-      this.$emit('update-list-contributions', {
-        currentPage: this.currentPage,
-        pageSize: this.pageSize,
-      })
-      window.scrollTo(0, 0)
-    },
-    updateContributionForm(item) {
-      this.$emit('update-contribution-form', item)
-    },
-    deleteContribution(item) {
-      this.$emit('delete-contribution', item)
-    },
-    updateStatus(id) {
-      this.$emit('update-status', id)
-    },
+  allContribution: {
+    type: Boolean,
+    required: false,
+    default: false,
   },
+})
+
+const emit = defineEmits([
+  'update-list-contributions',
+  'update-contribution-form',
+  'delete-contribution',
+  'update-status',
+])
+
+const currentPage = ref(1)
+const messages = ref([])
+
+const isPaginationVisible = computed(() => {
+  return props.showPagination && props.pageSize < props.contributionCount
+})
+
+watch(currentPage, () => {
+  updateListContributions()
+})
+
+const updateListContributions = () => {
+  emit('update-list-contributions', {
+    currentPage: currentPage.value,
+    pageSize: props.pageSize,
+  })
+  window.scrollTo(0, 0)
+}
+
+const updateContributionForm = (item) => {
+  emit('update-contribution-form', item)
+}
+
+const deleteContribution = (item) => {
+  emit('delete-contribution', item)
+}
+
+const updateStatus = (id) => {
+  emit('update-status', id)
 }
 </script>
diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue
index b8ff84428..566cefe4c 100644
--- a/frontend/src/components/Contributions/ContributionListItem.vue
+++ b/frontend/src/components/Contributions/ContributionListItem.vue
@@ -13,22 +13,14 @@
             color="#fff"
             class="fw-bold"
           ></avatar>
-          <BAvatar v-else rounded="lg" :variant="variant" size="4em">
-            <IBiTrash v-if="deletedAt" />
-            <IBiXCircle v-else-if="deniedAt" />
-            <IBiCheck v-else-if="confirmedAt" />
-            <IBiQuestion v-else-if="status === 'IN_PROGRESS'" />
-            <IBiBellFill v-else style="width: 36px; height: 36px" />
+          <BAvatar v-else rounded="lg" :variant="variant" size="4.55em">
+            <variant-icon :icon="icon" variant="white" />
           </BAvatar>
         </BCol>
         <BCol>
           <div v-if="firstName" class="me-3 fw-bold">
             {{ firstName }} {{ lastName }}
-            <IBiTrash v-if="deletedAt" />
-            <IBiXCircle v-else-if="deniedAt" />
-            <IBiCheck v-else-if="confirmedAt" />
-            <IBiQuestion v-else-if="status === 'IN_PROGRESS'" />
-            <IBiBellFill v-else />
+            <variant-icon :icon="icon" variant="white" />
           </div>
           <div class="small">
             {{ $d(new Date(contributionDate), 'short') }}
@@ -51,8 +43,7 @@
             {{ $t('creation') }} {{ $t('(') }}{{ amount / 20 }} {{ $t('h') }}{{ $t(')') }}
           </div>
           <div v-if="status === 'DENIED' && allContribution" class="fw-bold">
-            <!--            <b-icon icon="x-circle" variant="danger"></b-icon>-->
-            <IBiXCircle />
+            <variant-icon icon="x-circle" variant="danger" />
             {{ $t('contribution.alert.denied') }}
           </div>
           <div v-if="status === 'DELETED'" class="small">
@@ -60,9 +51,9 @@
           </div>
           <div v-else class="fw-bold">{{ $filters.GDD(amount) }}</div>
         </BCol>
-        <BCol cols="12" md="1" lg="1" class="text-right align-items-center">
+        <BCol cols="12" md="1" lg="1" class="text-end align-items-center">
           <div v-if="messagesCount > 0 && !moderatorId" @click="visible = !visible">
-            <collapse-icon class="text-right" :visible="visible" />
+            <collapse-icon class="text-end" :visible="visible" />
           </div>
         </BCol>
       </BRow>
@@ -217,6 +208,14 @@ const variant = computed(() => {
   return 'primary'
 })
 
+const icon = computed(() => {
+  if (props.deletedAt) return 'trash'
+  if (props.deniedAt) return 'x-circle'
+  if (props.confirmedAt) return 'check'
+  if (props.status === 'IN_PROGRESS') return 'question'
+  return 'bell-fill'
+})
+
 const date = computed(() => props.createdAt)
 
 const collapseId = computed(() => 'collapse' + String(props.id))
@@ -280,3 +279,10 @@ function updateStatus(id) {
 
 const emit = defineEmits(['delete-contribution', 'close-all-open-collapse', 'update-status'])
 </script>
+
+<style lang="scss" scoped>
+:deep(.b-avatar-custom > svg) {
+  width: 2.5em;
+  height: 2.5em;
+}
+</style>
diff --git a/frontend/src/components/DecayInformations/CollapseLinksList.vue b/frontend/src/components/DecayInformations/CollapseLinksList.vue
index 801dd3d67..73f1963fa 100644
--- a/frontend/src/components/DecayInformations/CollapseLinksList.vue
+++ b/frontend/src/components/DecayInformations/CollapseLinksList.vue
@@ -21,7 +21,6 @@
               {{ buttonText }}
             </BButton>
             <div class="text-center">
-              <!--              <b-icon v-if="pending" icon="three-dots" animation="cylon" font-scale="4"></b-icon>-->
               <IBiThreeDots v-if="pending" animation="cylon" font-scale="4" />
             </div>
           </div>
diff --git a/frontend/src/components/DecayInformations/DecayInformation-Decay.vue b/frontend/src/components/DecayInformations/DecayInformation-Decay.vue
index 315909475..76777bd51 100644
--- a/frontend/src/components/DecayInformations/DecayInformation-Decay.vue
+++ b/frontend/src/components/DecayInformations/DecayInformation-Decay.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="decayinformation-decay">
-    <div class="mb-3">
+    <div class="mb-3 d-flex align-items-center">
       <IBiDropletHalf class="me-2" />
       <b>{{ $t('decay.calculation_decay') }}</b>
     </div>
@@ -42,3 +42,10 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+:deep(svg.me-2) {
+  width: 1rem;
+  height: 1rem;
+}
+</style>
diff --git a/frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue b/frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue
index 8492574ff..86468b389 100644
--- a/frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue
+++ b/frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue
@@ -12,7 +12,7 @@
       <BCol offset="1" cols="11">
         <BRow>
           <BCol cols="5">
-            <div class="text-right">
+            <div class="text-end">
               <div>{{ $t('decay.decay_introduced') }}</div>
             </div>
           </BCol>
@@ -28,7 +28,7 @@
 
         <!-- Decay-->
         <BRow>
-          <BCol cols="5" class="text-right">{{ $t('decay.decay') }}</BCol>
+          <BCol cols="5" class="text-end">{{ $t('decay.decay') }}</BCol>
           <BCol cols="7">{{ $filters.GDD(decay.decay) }}</BCol>
         </BRow>
       </BCol>
@@ -46,17 +46,17 @@
       <BCol offset="1" cols="11">
         <BRow>
           <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-          <BCol cols="5" class="text-right">{{ $t(`decay.types.${typeId.toLowerCase()}`) }}</BCol>
+          <BCol cols="5" class="text-end">{{ $t(`decay.types.${typeId.toLowerCase()}`) }}</BCol>
           <BCol cols="7">{{ $filters.GDD(amount) }}</BCol>
         </BRow>
         <!-- Decay-->
         <BRow>
-          <BCol cols="5" class="text-right">{{ $t('decay.decay') }}</BCol>
+          <BCol cols="5" class="text-end">{{ $t('decay.decay') }}</BCol>
           <BCol cols="7">{{ $filters.GDD(decay.decay) }}</BCol>
         </BRow>
         <!-- Total-->
         <BRow>
-          <BCol cols="5" class="text-right">{{ $t('decay.total') }}</BCol>
+          <BCol cols="5" class="text-end">{{ $t('decay.total') }}</BCol>
           <BCol cols="7">
             <b>{{ $filters.GDD(Number(amount) + Number(decay.decay)) }}</b>
           </BCol>
diff --git a/frontend/src/components/DecayInformations/DecayInformation-Long.vue b/frontend/src/components/DecayInformations/DecayInformation-Long.vue
index 482e9da4a..46f9051a5 100644
--- a/frontend/src/components/DecayInformations/DecayInformation-Long.vue
+++ b/frontend/src/components/DecayInformations/DecayInformation-Long.vue
@@ -14,7 +14,7 @@
           <BCol cols="6" lg="4" md="6" sm="6">
             <div>{{ $t('decay.last_transaction') }}</div>
           </BCol>
-          <BCol offset="0" class="text-right me-0">
+          <BCol offset="0" class="text-end me-0">
             <div>
               <span>
                 {{ $d(new Date(decay.start), 'long') }}
@@ -29,7 +29,7 @@
           <BCol cols="6" lg="4" md="6" sm="6">
             <div>{{ $t('decay.old_balance') }}</div>
           </BCol>
-          <BCol offset="0" class="text-right me-0">
+          <BCol offset="0" class="text-end me-0">
             {{ $filters.GDD(previousBalance) }}
           </BCol>
         </BRow>
@@ -39,7 +39,7 @@
           <BCol cols="6" lg="3" md="6" sm="6">
             <div>{{ $t('decay.decay') }}</div>
           </BCol>
-          <BCol offset="0" class="text-right me-0">
+          <BCol offset="0" class="text-end me-0">
             {{ $filters.GDD(decay.decay) }}
           </BCol>
         </BRow>
@@ -54,7 +54,7 @@
             {{ $t(`decay.types.${typeId.toLowerCase()}`) }}
           </BCol>
           <!-- eslint-enable @intlify/vue-i18n/no-dynamic-keys-->
-          <BCol offset="0" class="text-right me-0">
+          <BCol offset="0" class="text-end me-0">
             {{ $filters.GDD(amount) }}
           </BCol>
         </BRow>
@@ -63,7 +63,7 @@
           <BCol cols="6" lg="3" md="6" sm="6">
             <div>{{ $t('decay.new_balance') }}</div>
           </BCol>
-          <BCol offset="0" class="text-right me-0">
+          <BCol offset="0" class="text-end me-0">
             <b>{{ $filters.GDD(balance) }}</b>
           </BCol>
         </BRow>
diff --git a/frontend/src/components/GddSend/TransactionConfirmationLink.vue b/frontend/src/components/GddSend/TransactionConfirmationLink.vue
index a6fa7432f..f31d043a0 100644
--- a/frontend/src/components/GddSend/TransactionConfirmationLink.vue
+++ b/frontend/src/components/GddSend/TransactionConfirmationLink.vue
@@ -14,8 +14,8 @@
       </BRow>
 
       <BRow class="mt-5 pe-3 text-color-gdd-yellow h3">
-        <BCol cols="2" class="text-right">
-          <b-icon class="text-color-gdd-yellow" icon="droplet-half"></b-icon>
+        <BCol cols="2" class="text-end">
+          <variant-icon icon="droplet-half" variant="gold" />
         </BCol>
         <BCol>{{ $t('advanced-calculation') }}</BCol>
       </BRow>
@@ -41,7 +41,7 @@
             {{ $t('back') }}
           </BButton>
         </BCol>
-        <BCol cols="12" md="6" lg="6" class="text-lg-right">
+        <BCol cols="12" md="6" lg="6" class="text-lg-end">
           <BButton
             block
             class="send-button"
diff --git a/frontend/src/components/GddSend/TransactionConfirmationSend.vue b/frontend/src/components/GddSend/TransactionConfirmationSend.vue
index bb3dda557..e3473b0a4 100644
--- a/frontend/src/components/GddSend/TransactionConfirmationSend.vue
+++ b/frontend/src/components/GddSend/TransactionConfirmationSend.vue
@@ -24,7 +24,7 @@
       </BRow>
 
       <BRow class="mt-5 text-color-gdd-yellow h3">
-        <BCol cols="2" class="text-right">
+        <BCol cols="2" class="text-end">
           <IBiDropletHalf />
         </BCol>
         <BCol>{{ $t('advanced-calculation') }}</BCol>
@@ -51,7 +51,7 @@
             {{ $t('back') }}
           </BButton>
         </BCol>
-        <BCol cols="12" md="6" lg="6" class="text-lg-right">
+        <BCol cols="12" md="6" lg="6" class="text-lg-end">
           <BButton
             block
             variant="gradido"
diff --git a/frontend/src/components/GddSend/TransactionForm.vue b/frontend/src/components/GddSend/TransactionForm.vue
index 9e680b56b..3f26cbd7d 100644
--- a/frontend/src/components/GddSend/TransactionForm.vue
+++ b/frontend/src/components/GddSend/TransactionForm.vue
@@ -9,7 +9,7 @@
               :model-value="radioSelected"
               @update:model-value="radioSelected = $event"
             >
-              <BRow class="mb-4">
+              <BRow class="mb-4 gap-5">
                 <BCol>
                   <BRow class="bg-248 gradido-border-radius position-relative">
                     <BFormRadio
@@ -118,7 +118,7 @@
                   {{ $t('form.reset') }}
                 </BButton>
               </BCol>
-              <BCol cols="12" md="6" lg="6" class="text-lg-right">
+              <BCol cols="12" md="6" lg="6" class="text-lg-end">
                 <BButton block type="submit" variant="gradido">
                   {{ $t('form.check_now') }}
                 </BButton>
@@ -284,6 +284,8 @@ label {
   margin-right: 0;
   margin-bottom: 0;
   position: relative;
+  display: flex !important;
+  justify-content: space-between;
 
   > input {
     position: absolute;
@@ -293,3 +295,10 @@ label {
   }
 }
 </style>
+
+<style scoped>
+:deep(label.form-check-label) {
+  width: 100%;
+  cursor: pointer;
+}
+</style>
diff --git a/frontend/src/components/GddTransactionList.vue b/frontend/src/components/GddTransactionList.vue
index 8caab0f08..b0cd1bd5e 100644
--- a/frontend/src/components/GddTransactionList.vue
+++ b/frontend/src/components/GddTransactionList.vue
@@ -1,16 +1,14 @@
 <template>
   <div class="gdd-transaction-list">
     <div class="list-group">
-      <div v-if="!transactions" class="test-no-transactionlist text-right">
-        <!--        <b-icon icon="exclamation-triangle" class="me-2" variant="danger"></b-icon>-->
-        <IBiExclamationTriangle class="me-2" />
+      <div v-if="!transactions" class="test-no-transactionlist text-end">
+        <variant-icon icon="exclamation-triangle" variant="danger" class="me-2" />
         <small>
           {{ $t('error.no-transactionlist') }}
         </small>
       </div>
-      <div v-if="transactionCount < 0" class="test-empty-transactionlist text-right">
-        <!--        <b-icon icon="exclamation-triangle" class="me-2" variant="danger"></b-icon>-->
-        <IBiExclamationTriangle class="me-2" />
+      <div v-if="transactionCount < 0" class="test-empty-transactionlist text-end">
+        <variant-icon icon="exclamation-triangle" variant="danger" class="me-2" />
         <small>{{ $t('error.empty-transactionlist') }}</small>
       </div>
 
@@ -55,9 +53,9 @@
         </div>
       </div>
     </div>
-    <b-pagination
+    <BPagination
       v-if="isPaginationVisible"
-      v-model="currentPage"
+      :model-value="currentPage"
       class="mt-3"
       pills
       size="lg"
@@ -65,10 +63,10 @@
       :total-rows="transactionCount"
       align="center"
       :hide-ellipsis="true"
-    ></b-pagination>
-
+      @update:model-value="currentPage = $event"
+    />
     <div v-if="transactionCount <= 0" class="mt-4 text-center">
-      <b-icon v-if="pending" icon="three-dots" animation="cylon"></b-icon>
+      <IBiThreeDots v-if="pending" />
       <div v-else>{{ $t('transaction.nullTransactions') }}</div>
     </div>
   </div>
@@ -133,11 +131,6 @@ export default {
 </script>
 
 <style>
-collaps-icon {
-  width: 95%;
-  position: absolute;
-}
-
 .el-table .cell {
   padding-left: 0;
   padding-right: 0;
diff --git a/frontend/src/components/GdtTransactionList.vue b/frontend/src/components/GdtTransactionList.vue
index 8e23f1b7f..046482753 100644
--- a/frontend/src/components/GdtTransactionList.vue
+++ b/frontend/src/components/GdtTransactionList.vue
@@ -29,7 +29,7 @@
     </div>
     <BPagination
       v-if="transactionGdtCount > pageSize"
-      v-model="currentPage"
+      :model-value="currentPage"
       class="mt-3"
       pills
       size="lg"
@@ -37,6 +37,7 @@
       :total-rows="transactionGdtCount"
       align="center"
       :hide-ellipsis="true"
+      @update:model-value="currentPage = $event"
     />
   </div>
 </template>
diff --git a/frontend/src/components/Inputs/InputTextarea.vue b/frontend/src/components/Inputs/InputTextarea.vue
index edbe4e97d..2d1d2a12e 100644
--- a/frontend/src/components/Inputs/InputTextarea.vue
+++ b/frontend/src/components/Inputs/InputTextarea.vue
@@ -9,8 +9,8 @@
         :placeholder="placeholder"
         :state="meta.valid"
         trim
-        rows="4"
-        max-rows="4"
+        :rows="4"
+        :max-rows="4"
         :disabled="disabled"
         no-resize
         @update:modelValue="currentValue = $event"
@@ -53,3 +53,9 @@ const { value: currentValue, errorMessage, meta } = useField(props.name, props.r
 
 const labelFor = computed(() => `${props.name}-input-field`)
 </script>
+
+<style lang="scss" scoped>
+:deep(.form-control) {
+  height: unset;
+}
+</style>
diff --git a/frontend/src/components/Inputs/InputUsername.vue b/frontend/src/components/Inputs/InputUsername.vue
index 67ef49fcb..d3944a961 100644
--- a/frontend/src/components/Inputs/InputUsername.vue
+++ b/frontend/src/components/Inputs/InputUsername.vue
@@ -4,31 +4,32 @@
       <BFormGroup :label="$t('form.username')" :description="$t('settings.usernameInfo')">
         <BInputGroup>
           <BFormInput
-            v-bind="ariaInput"
             :id="labelFor"
-            :model-value="currentValue"
+            :model-value="usernameValue"
             :name="name"
             :placeholder="placeholder"
             type="text"
-            :state="validated ? valid : false"
+            :state="usernameMeta.valid"
             autocomplete="off"
             data-test="username"
-            @update:modelValue="updateValue"
+            @update:modelValue="usernameValue = $event"
           />
           <BButton size="md" text="Button" variant="secondary" append @click="emitSetIsEdit">
             <IBiXCircle style="height: 17px; width: 17px" />
           </BButton>
         </BInputGroup>
-        <BFormInvalidFeedback v-bind="ariaMsg">
-          <div v-if="showAllErrors">
-            <span v-for="error in errors" :key="error">
-              {{ error }}
-              <br />
-            </span>
-          </div>
-          <div v-else>
-            {{ errors?.[0] }}
-          </div>
+        <BFormInvalidFeedback v-if="usernameError || usernameErrors.length" force-show>
+          <template #default>
+            <div v-if="props.showAllErrors">
+              <span v-for="error in usernameErrors" :key="error">
+                {{ error }}
+                <br />
+              </span>
+            </div>
+            <div v-else>
+              {{ usernameErrors?.[0] }}
+            </div>
+          </template>
         </BFormInvalidFeedback>
       </BFormGroup>
     </div>
@@ -43,7 +44,7 @@ import {
   BFormInvalidFeedback,
 } from 'bootstrap-vue-next'
 import { ref, computed, watch, defineProps, defineEmits } from 'vue'
-import { useForm } from 'vee-validate'
+import { useField, useForm } from 'vee-validate'
 
 const props = defineProps({
   isEdit: { type: Boolean, default: false },
@@ -59,8 +60,13 @@ const props = defineProps({
 
 const currentValue = ref(props?.modelValue)
 
-const { errors, valid, validated, ariaInput, ariaMsg } = useForm({
-  initialValues: currentValue.value,
+const {
+  meta: usernameMeta,
+  errors: usernameErrors,
+  value: usernameValue,
+  errorMessage: usernameError,
+} = useField(props.name, props.rules, {
+  initialValue: currentValue,
 })
 
 const emit = defineEmits(['update:modelValue', 'set-is-edit'])
@@ -70,9 +76,4 @@ const labelFor = computed(() => `${props.name}-input-field`)
 const emitSetIsEdit = (bool) => {
   emit('set-is-edit', bool)
 }
-
-const updateValue = (e) => {
-  currentValue.value = e
-  emit('update:modelValue', e)
-}
 </script>
diff --git a/frontend/src/components/LanguageSwitch2.vue b/frontend/src/components/LanguageSwitch2.vue
index 23dad6cad..92534fd43 100644
--- a/frontend/src/components/LanguageSwitch2.vue
+++ b/frontend/src/components/LanguageSwitch2.vue
@@ -47,6 +47,7 @@ import { useAppToast } from '@/composables/useToast'
 import locales from '@/locales/'
 import { onMounted, ref, computed } from 'vue'
 import { updateUserInfos } from '@/graphql/mutations'
+import { setLocale as setValidationI18nLocale } from '@vee-validate/i18n'
 
 const store = useStore()
 const { t, locale } = useI18n()
@@ -68,6 +69,7 @@ const saveLocale = async (newLocale) => {
   if (locale.value === newLocale) return
 
   setLocale(newLocale)
+  setValidationI18nLocale(newLocale)
   if (store.state.gradidoID) {
     try {
       await mutate({ locale: newLocale })
diff --git a/frontend/src/components/Overview/CommunityNews.vue b/frontend/src/components/Overview/CommunityNews.vue
index a49ea0b98..7074c9a27 100644
--- a/frontend/src/components/Overview/CommunityNews.vue
+++ b/frontend/src/components/Overview/CommunityNews.vue
@@ -25,8 +25,8 @@
           </BRow>
 
           <BRow class="my-5">
-            <BCol cols="12">
-              <div class="text-lg-right">
+            <BCol cols="12" class="d-flex">
+              <div class="ms-auto">
                 <BButton v-if="item.url" variant="gradido" :href="item.url" target="_blank">
                   {{ item.button }}
                 </BButton>
diff --git a/frontend/src/components/Status.vue b/frontend/src/components/Status.vue
index 14d470fb3..c92e5560f 100644
--- a/frontend/src/components/Status.vue
+++ b/frontend/src/components/Status.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="gdd-status">
     <div class="p-0 gdd-status-div">
-      <b-icon v-if="pending" icon="three-dots" animation="cylon" class="test-pending-icon"></b-icon>
+      <IBiThreeDots v-if="pending" animation="cylon" font-scale="4" class="test-pending-icon" />
       <div v-else>
         {{ pending || balance === null ? $t('em-dash') : $n(balance, 'decimal') }} {{ statusText }}
       </div>
diff --git a/frontend/src/components/Template/ContentHeader/GddAmount.vue b/frontend/src/components/Template/ContentHeader/GddAmount.vue
index 48c587cf0..8e12b8779 100644
--- a/frontend/src/components/Template/ContentHeader/GddAmount.vue
+++ b/frontend/src/components/Template/ContentHeader/GddAmount.vue
@@ -24,11 +24,7 @@
 
       <BRow>
         <BCol cols="9">
-          <!--          <b-icon-->
-          <!--            icon="layers"-->
-          <!--            class="me-3 gradido-global-border-color-accent d-none d-lg-inline"-->
-          <!--          ></b-icon>-->
-          <IBiLayers class="me-3 gradido-global-border-color-accent" />
+          <IBiLayers class="me-3 gradido-global-border-color-accent d-none d-lg-inline" />
           <span v-if="hideAmount" class="fw-bold gradido-global-color-accent">
             {{ $t('asterisks') }}
           </span>
diff --git a/frontend/src/components/Template/ContentHeader/GdtAmount.vue b/frontend/src/components/Template/ContentHeader/GdtAmount.vue
index d29372226..27a96cb06 100644
--- a/frontend/src/components/Template/ContentHeader/GdtAmount.vue
+++ b/frontend/src/components/Template/ContentHeader/GdtAmount.vue
@@ -19,11 +19,7 @@
       </BRow>
       <BRow>
         <BCol cols="9">
-          <!--          <b-icon-->
-          <!--            icon="layers"-->
-          <!--            class="me-3 gradido-global-border-color-accent d-none d-lg-inline"-->
-          <!--          ></b-icon>-->
-          <IBiLayers />
+          <IBiLayers class="me-3 gradido-global-border-color-accent d-none d-lg-inline" />
           <span v-if="hideAmount" class="fw-bold gradido-global-color-accent">
             {{ t('asterisks') }}
           </span>
@@ -32,14 +28,12 @@
           </span>
         </BCol>
         <BCol cols="3" class="border-start border-dark">
-          <!--          <b-icon-->
-          <!--            :icon="hideAmount ? 'eye-slash' : 'eye'"-->
-          <!--            class="me-3 gradido-global-border-color-accent pointer hover-icon"-->
-          <!--            @click="updateHideAmountGDT"-->
-          <!--          ></b-icon>-->
           <button class="transparent-button" @click="updateHideAmountGDT">
-            <IBiEyeSlash v-if="hideAmount" />
-            <IBiEye v-else />
+            <IBiEyeSlash
+              v-if="hideAmount"
+              class="me-3 gradido-global-border-color-accent pointer hover-icon"
+            />
+            <IBiEye v-else class="me-3 gradido-global-border-color-accent pointer hover-icon" />
           </button>
         </BCol>
       </BRow>
diff --git a/frontend/src/components/Template/RightSide/LastContributions.vue b/frontend/src/components/Template/RightSide/LastContributions.vue
index 80e9cb7de..91accf133 100644
--- a/frontend/src/components/Template/RightSide/LastContributions.vue
+++ b/frontend/src/components/Template/RightSide/LastContributions.vue
@@ -2,8 +2,8 @@
   <div class="last-contributions d-none d-lg-block">
     <BRow class="mb-5">
       <BCol class="h3">{{ $t('contribution.lastContribution') }}</BCol>
-      <BCol cols="1" class="text-right">
-        <b-icon icon="three-dots-vertical"></b-icon>
+      <BCol cols="1" class="text-end">
+        <IBiThreeDotsVertical />
       </BCol>
     </BRow>
   </div>
diff --git a/frontend/src/components/Template/RightSide/LastTransactions.vue b/frontend/src/components/Template/RightSide/LastTransactions.vue
index a454d153a..624e1cd06 100644
--- a/frontend/src/components/Template/RightSide/LastTransactions.vue
+++ b/frontend/src/components/Template/RightSide/LastTransactions.vue
@@ -2,9 +2,6 @@
   <div class="rightside-last-transactions d-none d-lg-block">
     <BRow class="mb-3">
       <BCol class="h3">{{ $t('transaction.lastTransactions') }}</BCol>
-      <!-- <BCol cols="1" class="text-right">
-        <b-icon icon="three-dots-vertical"></b-icon>
-      </BCol> -->
     </BRow>
 
     <div v-for="(transaction, index) in transactions" :key="transaction.id">
@@ -38,7 +35,7 @@
                 <div class="small">
                   {{ $filters.GDD(transaction.amount) }}
                 </div>
-                <div class="small ms-3 text-right">
+                <div class="small ms-3 text-end">
                   {{ $d(new Date(transaction.balanceDate), 'short') }}
                 </div>
               </div>
diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue
index 5476d2343..87412b848 100644
--- a/frontend/src/components/Transaction.vue
+++ b/frontend/src/components/Transaction.vue
@@ -8,7 +8,9 @@
             variant="light"
             size="3em"
             :class="getLinesByType.iconclasses"
-          />
+          >
+            <variant-icon :icon="getLinesByType.icon" :variant="getLinesByType.iconColor" />
+          </BAvatar>
         </BCol>
         <BCol>
           <div>
@@ -26,8 +28,8 @@
           <div class="small mb-2">{{ $t('gdt.credit') }}</div>
           <div class="fw-bold">{{ getLinesByType.credittext }}</div>
         </BCol>
-        <BCol cols="12" md="1" lg="1" class="text-right">
-          <collapse-icon class="text-right" :visible="visible" />
+        <BCol cols="12" md="1" lg="1" class="text-end">
+          <collapse-icon class="text-end" :visible="visible" />
         </BCol>
       </BRow>
 
@@ -80,6 +82,7 @@ const getLinesByType = computed(() => {
       return {
         icon: 'heart',
         iconclasses: 'gradido-global-color-accent',
+        iconColor: '4',
         description: t('gdt.contribution'),
         descriptiontext: n(props.amount, 'decimal') + ' €',
         credittext: n(props.gdt, 'decimal') + ' GDT',
@@ -89,6 +92,7 @@ const getLinesByType = computed(() => {
       return {
         icon: 'person-check',
         iconclasses: 'gradido-global-color-accent',
+        iconColor: '4',
         description: t('gdt.recruited-member'),
         descriptiontext: '5%',
         credittext: n(props.amount, 'decimal') + ' GDT',
@@ -98,6 +102,7 @@ const getLinesByType = computed(() => {
       return {
         icon: 'gift',
         iconclasses: 'gradido-global-color-accent',
+        iconColor: '4',
         description: t('gdt.gdt-received'),
         descriptiontext: props.comment,
         credittext: n(props.gdt, 'decimal') + ' GDT',
diff --git a/frontend/src/components/TransactionLinks/TransactionLink.vue b/frontend/src/components/TransactionLinks/TransactionLink.vue
index b2f126b22..359ebd760 100644
--- a/frontend/src/components/TransactionLinks/TransactionLink.vue
+++ b/frontend/src/components/TransactionLinks/TransactionLink.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="transaction-link gradido-custom-background">
-    <BRow :class="validLink ? '' : 'bg-muted text-light'" class="mb-2 pt-2 pb-2">
+    <BRow :class="validLink ? '' : 'bg-muted text-dark'" class="mb-2 pt-2 pb-2">
       <BCol cols="1">
-        <type-icon color="text-danger" icon="link45deg" class="pt-4 ps-2" />
+        <variant-icon icon="link45deg" variant="danger" class="pt-4 ps-2" />
       </BCol>
       <BCol cols="11">
         <BRow>
@@ -88,6 +88,7 @@ import DateRow from '../TransactionRows/DateRow'
 import DecayRow from '../TransactionRows/DecayRow'
 import AppModal from '@/components/AppModal'
 import FigureQrCode from '@/components/QrCode/FigureQrCode'
+import VariantIcon from '@/components/VariantIcon.vue'
 
 const props = defineProps({
   holdAvailableAmount: { type: String, required: true },
diff --git a/frontend/src/components/TransactionRows/AmountAndNameRow.vue b/frontend/src/components/TransactionRows/AmountAndNameRow.vue
index 48eea70de..27e580b11 100644
--- a/frontend/src/components/TransactionRows/AmountAndNameRow.vue
+++ b/frontend/src/components/TransactionRows/AmountAndNameRow.vue
@@ -2,7 +2,7 @@
   <div class="amount-and-name-row">
     <BRow>
       <BCol cols="5">
-        <div class="text-right">
+        <div class="text-end">
           <span class="gdd-transaction-list-item-amount">
             {{ $filters.GDD(amount) }}
           </span>
diff --git a/frontend/src/components/TransactionRows/CollapseIcon.vue b/frontend/src/components/TransactionRows/CollapseIcon.vue
index b8c83139f..57b5c219c 100644
--- a/frontend/src/components/TransactionRows/CollapseIcon.vue
+++ b/frontend/src/components/TransactionRows/CollapseIcon.vue
@@ -1,10 +1,5 @@
 <template>
   <div class="collapse-icon">
-    <!--    <b-icon-->
-    <!--      :icon="visible ? 'arrow-up-circle' : 'arrow-down-circle'"-->
-    <!--      :class="visible ? 'text-black' : 'text-muted'"-->
-    <!--      class="h1"-->
-    <!--    />-->
     <IBiArrowUpCircle v-if="visible" class="text-black h1" />
     <IBiArrowDownCircle v-else class="text-muted h1" />
   </div>
diff --git a/frontend/src/components/TransactionRows/DateRow.spec.js b/frontend/src/components/TransactionRows/DateRow.spec.js
index e55107363..2e2ab53b8 100644
--- a/frontend/src/components/TransactionRows/DateRow.spec.js
+++ b/frontend/src/components/TransactionRows/DateRow.spec.js
@@ -32,7 +32,7 @@ describe('DateRow', () => {
     })
 
     it('shows the expiration text', () => {
-      expect(wrapper.find('div.text-right').text()).toBe('form.date')
+      expect(wrapper.find('div.text-end').text()).toBe('form.date')
     })
 
     it.skip('shows the date in long format', () => {
diff --git a/frontend/src/components/TransactionRows/DateRow.vue b/frontend/src/components/TransactionRows/DateRow.vue
index 4ea4f28d1..8c14faab9 100644
--- a/frontend/src/components/TransactionRows/DateRow.vue
+++ b/frontend/src/components/TransactionRows/DateRow.vue
@@ -2,7 +2,7 @@
   <div class="date-row">
     <BRow>
       <BCol cols="5">
-        <div class="text-right">
+        <div class="text-end">
           {{ text }}
         </div>
       </BCol>
diff --git a/frontend/src/components/TransactionRows/DecayRow.vue b/frontend/src/components/TransactionRows/DecayRow.vue
index 75ebf674e..536501fa7 100644
--- a/frontend/src/components/TransactionRows/DecayRow.vue
+++ b/frontend/src/components/TransactionRows/DecayRow.vue
@@ -2,8 +2,7 @@
   <div class="decay-row">
     <BRow v-if="decay">
       <BCol cols="5">
-        <div class="text-right">
-          <!--          <b-icon icon="droplet-half" height="15" class="mb-1" />-->
+        <div class="text-end">
           <IBiDropletHalf height="15" class="mb-1" />
         </div>
       </BCol>
diff --git a/frontend/src/components/TransactionRows/DurationRow.vue b/frontend/src/components/TransactionRows/DurationRow.vue
index b59033ae1..b1ea1bb65 100644
--- a/frontend/src/components/TransactionRows/DurationRow.vue
+++ b/frontend/src/components/TransactionRows/DurationRow.vue
@@ -4,7 +4,7 @@
       <BCol cols="6" lg="4" md="6" sm="6">
         <div>{{ $t('decay.past_time') }}</div>
       </BCol>
-      <BCol offset="0" class="text-right me-0">
+      <BCol offset="0" class="text-end me-0">
         <span v-if="duration">{{ duration }}</span>
       </BCol>
     </BRow>
diff --git a/frontend/src/components/TransactionRows/LinkCountRow.vue b/frontend/src/components/TransactionRows/LinkCountRow.vue
index abba72363..ef8edf833 100644
--- a/frontend/src/components/TransactionRows/LinkCountRow.vue
+++ b/frontend/src/components/TransactionRows/LinkCountRow.vue
@@ -2,7 +2,7 @@
   <div class="link-count-row">
     <BRow>
       <BCol cols="5">
-        <div class="text-right">{{ $t('gdd_per_link.links_count') }}</div>
+        <div class="text-end">{{ $t('gdd_per_link.links_count') }}</div>
       </BCol>
       <BCol cols="7">
         <div class="gdd-transaction-list-link-count">{{ count }}</div>
diff --git a/frontend/src/components/TransactionRows/MemoRow.vue b/frontend/src/components/TransactionRows/MemoRow.vue
index c16840b24..f59cb506a 100644
--- a/frontend/src/components/TransactionRows/MemoRow.vue
+++ b/frontend/src/components/TransactionRows/MemoRow.vue
@@ -2,7 +2,7 @@
   <div class="memo-row">
     <BRow>
       <BCol cols="5">
-        <div class="text-right">{{ $t('form.memo') }}</div>
+        <div class="text-end">{{ $t('form.memo') }}</div>
       </BCol>
       <BCol cols="7">
         <div class="gdd-transaction-list-message">{{ memo }}</div>
diff --git a/frontend/src/components/Transactions/TransactionCreation.vue b/frontend/src/components/Transactions/TransactionCreation.vue
index d218b040a..86e09772d 100644
--- a/frontend/src/components/Transactions/TransactionCreation.vue
+++ b/frontend/src/components/Transactions/TransactionCreation.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="transaction-slot-creation">
-    <BRow class="align-items-center" @click="visible = !visible">
+  <div class="transaction-slot-creation" @click="visible = !visible">
+    <BRow class="align-items-center">
       <BCol cols="3" lg="2" md="2">
-        <b-avatar icon="gift" variant="success" :size="42"></b-avatar>
+        <BAvatar :size="42">
+          <variant-icon icon="gift" variant="success" />
+        </BAvatar>
       </BCol>
       <BCol>
         <div class="fw-bold">{{ linkedUser.firstName }} {{ linkedUser.lastName }}</div>
@@ -13,11 +15,11 @@
         <div class="small mb-2">{{ $t('decay.types.receive') }}</div>
         <div class="fw-bold">{{ $filters.GDD(amount) }}</div>
       </BCol>
-      <BCol cols="12" md="1" lg="1" class="text-right">
-        <collapse-icon class="text-right" :visible="visible" />
+      <BCol cols="12" md="1" lg="1" class="text-end">
+        <collapse-icon class="text-end" :visible="visible" />
       </BCol>
     </BRow>
-    <BCollapse v-model="visible" class="pb-4 pt-lg-3">
+    <BCollapse :model-value="visible" class="pb-4 pt-lg-3">
       <decay-information
         :type-id="typeId"
         :decay="decay"
@@ -84,3 +86,10 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.b-avatar-custom > svg) {
+  height: 2em;
+  width: 2em;
+}
+</style>
diff --git a/frontend/src/components/Transactions/TransactionDecay.vue b/frontend/src/components/Transactions/TransactionDecay.vue
index 9f5a52f7e..eadfccbbc 100644
--- a/frontend/src/components/Transactions/TransactionDecay.vue
+++ b/frontend/src/components/Transactions/TransactionDecay.vue
@@ -2,14 +2,13 @@
   <div class="transaction-slot-decay" @click="visible = !visible">
     <BRow class="text-color-gdd-yellow align-items-center">
       <BCol cols="1">
-        <!--        <type-icon color="text-color-gdd-yellow" icon="droplet-half" />-->
-        <IBiDropletHalf />
+        <variant-icon icon="droplet-half" variant="gold" />
       </BCol>
       <BCol>
         {{ $t('decay.decay_since_last_transaction') }}
       </BCol>
-      <BCol cols="12" md="1" lg="1" class="text-right">
-        <collapse-icon class="text-right" :visible="visible" />
+      <BCol cols="12" md="1" lg="1" class="text-end">
+        <collapse-icon class="text-end" :visible="visible" />
       </BCol>
     </BRow>
 
@@ -24,7 +23,6 @@
 </template>
 <script>
 import CollapseIcon from '../TransactionRows/CollapseIcon'
-// import TypeIcon from '../TransactionRows/TypeIcon'
 import DecayInformationDecay from '../DecayInformations/DecayInformation-Decay'
 
 export default {
@@ -60,3 +58,15 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+:deep(.collapse.show) {
+  padding-top: 3rem;
+  padding-bottom: 1.5rem;
+}
+
+:deep(.col-1 > svg.icon-variant) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+</style>
diff --git a/frontend/src/components/Transactions/TransactionLinkSummary.vue b/frontend/src/components/Transactions/TransactionLinkSummary.vue
index d710f9ad1..d349c6b74 100644
--- a/frontend/src/components/Transactions/TransactionLinkSummary.vue
+++ b/frontend/src/components/Transactions/TransactionLinkSummary.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="transaction-slot-link" @click="showTransactionLinks">
     <BRow class="align-items-center">
-      <BCol cols="3" lg="2" md="2">
-        <BAvatar icon="link" variant="light" :size="42"></BAvatar>
+      <BCol id="transaction-link-summary-avatar" cols="3" lg="2" md="2">
+        <BAvatar icon="link" variant="light" :size="42">
+          <variant-icon icon="link" />
+        </BAvatar>
       </BCol>
       <BCol>
         <div>{{ $t('gdd_per_link.links_sum') }}</div>
@@ -12,8 +14,8 @@
         <div class="small mb-2">{{ $t('send_per_link') }}</div>
         <div class="fw-bold">{{ $filters.GDD(amount) }}</div>
       </BCol>
-      <BCol cols="12" md="1" lg="1" class="text-right">
-        <collapse-icon class="text-right" :visible="visible" />
+      <BCol cols="12" md="1" lg="1" class="text-end">
+        <collapse-icon class="text-end" :visible="visible" />
       </BCol>
     </BRow>
     <BCollapse :model-value="visible">
@@ -107,3 +109,10 @@ async function updateListTransactionLinks() {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.b-avatar-custom > svg) {
+  height: 2em;
+  width: 2em;
+}
+</style>
diff --git a/frontend/src/components/Transactions/TransactionReceive.vue b/frontend/src/components/Transactions/TransactionReceive.vue
index ecba641c4..0c24bcce0 100644
--- a/frontend/src/components/Transactions/TransactionReceive.vue
+++ b/frontend/src/components/Transactions/TransactionReceive.vue
@@ -26,16 +26,11 @@
         </div>
         <div v-if="linkId" class="small">
           {{ $t('via_link') }}
-          <b-icon
-            icon="link45deg"
-            variant="muted"
-            class="m-mb-1"
-            :title="$t('gdd_per_link.redeemed-title')"
-          />
+          <variant-icon icon="link45deg" variant="muted" class="m-mb-1" />
         </div>
       </BCol>
-      <BCol cols="12" md="1" lg="1" class="text-right">
-        <collapse-icon class="text-right" :visible="visible" />
+      <BCol cols="12" md="1" lg="1" class="text-end">
+        <collapse-icon class="text-end" :visible="visible" />
       </BCol>
     </BRow>
     <BCollapse class="pb-4 pt-lg-3" :model-value="visible">
diff --git a/frontend/src/components/Transactions/TransactionSend.vue b/frontend/src/components/Transactions/TransactionSend.vue
index f2684a03c..1f8f6baaa 100644
--- a/frontend/src/components/Transactions/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@@ -25,17 +25,11 @@
         </div>
         <div v-if="linkId" class="small">
           {{ $t('via_link') }}
-          <!--          <b-icon-->
-          <!--            icon="link45deg"-->
-          <!--            variant="muted"-->
-          <!--            class="m-mb-1"-->
-          <!--            :title="$t('gdd_per_link.redeemed-title')"-->
-          <!--          />-->
-          <IBiLink45deg variant="muted" class="m-mb-1" :title="$t('gdd_per_link.redeemed-title')" />
+          <variant-icon icon="link45deg" variant="muted" class="m-mb-1" />
         </div>
       </BCol>
-      <BCol cols="12" md="1" lg="1" class="text-right">
-        <collapse-icon class="text-right" :visible="visible" />
+      <BCol cols="12" md="1" lg="1" class="text-end">
+        <collapse-icon class="text-end" :visible="visible" />
       </BCol>
     </BRow>
     <BCollapse :model-value="visible" class="pb-4 pt-lg-3">
diff --git a/frontend/src/components/UserSettings/UserData.vue b/frontend/src/components/UserSettings/UserData.vue
index eea6a123f..a153de1d0 100644
--- a/frontend/src/components/UserSettings/UserData.vue
+++ b/frontend/src/components/UserSettings/UserData.vue
@@ -1,8 +1,8 @@
 <template>
   <b-card id="userdata_form" class="card-border-radius card-background-gray">
     <div>
-      <BRow class="mb-4 text-right">
-        <BCol class="text-right">
+      <BRow class="mb-4 text-end">
+        <BCol class="text-end">
           <a
             class="cursor-pointer"
             @click="showUserData ? (showUserData = !showUserData) : cancelEdit()"
@@ -44,9 +44,9 @@
           </BCol>
         </BRow>
 
-        <BRow v-if="!showUserData" class="text-right">
+        <BRow v-if="!showUserData" class="text-end">
           <BCol>
-            <div ref="submitButton" class="text-right">
+            <div ref="submitButton" class="text-end">
               <b-button
                 :variant="loading ? 'light' : 'success'"
                 type="submit"
diff --git a/frontend/src/components/UserSettings/UserLanguage.vue b/frontend/src/components/UserSettings/UserLanguage.vue
index afb1da5d4..0711d0d7e 100644
--- a/frontend/src/components/UserSettings/UserLanguage.vue
+++ b/frontend/src/components/UserSettings/UserLanguage.vue
@@ -1,15 +1,18 @@
 <template>
   <b-card id="formuserlanguage" class="card-border-radius card-background-gray">
     <div>
-      <BRow class="mb-4 text-right">
-        <BCol class="text-right">
+      <BRow class="mb-4 text-end">
+        <BCol class="text-end">
           <a
             class="cursor-pointer"
             @click="showLanguage ? (showLanguage = !showLanguage) : cancelEdit()"
           >
             <span class="pointer me-3">{{ $t('settings.language.changeLanguage') }}</span>
-            <b-icon v-if="showLanguage" class="pointer ms-3" icon="pencil"></b-icon>
-            <b-icon v-else icon="x-circle" class="pointer ms-3" variant="danger"></b-icon>
+            <variant-icon
+              class="pointer ms-3"
+              :icon="showLanguage ? 'pencil' : 'x-circle'"
+              :variant="showLanguage ? 'primary' : 'danger'"
+            />
           </a>
         </BCol>
       </BRow>
@@ -41,9 +44,9 @@
             </BCol>
           </BRow>
 
-          <BRow class="text-right">
+          <BRow class="text-end">
             <BCol>
-              <div ref="submitButton" class="text-right">
+              <div ref="submitButton" class="text-end">
                 <b-button
                   :variant="loading ? 'light' : 'success'"
                   type="submit"
diff --git a/frontend/src/components/UserSettings/UserName.vue b/frontend/src/components/UserSettings/UserName.vue
index 813486843..e36cd7dfa 100644
--- a/frontend/src/components/UserSettings/UserName.vue
+++ b/frontend/src/components/UserSettings/UserName.vue
@@ -22,9 +22,9 @@
             <BCol class="col-12">
               <input-username
                 :model-value="username"
-                :name="$t('form.username')"
+                name="username"
                 :placeholder="$t('form.username-placeholder')"
-                :show-all-errors="true"
+                show-all-errors
                 :unique="true"
                 :rules="rules"
                 :is-edit="isEdit"
@@ -34,14 +34,18 @@
               />
             </BCol>
             <BCol class="col-12">
-              <div v-if="!username" class="alert" data-test="username-alert">
+              <div
+                v-if="!store.state.username"
+                class="alert gradido-border-radius"
+                data-test="username-alert"
+              >
                 {{ $t('settings.username.no-username') }}
               </div>
             </BCol>
           </BRow>
-          <BRow v-if="newUsername" class="text-right">
+          <BRow v-if="newUsername" class="text-end">
             <BCol>
-              <div ref="submitButton" class="text-right">
+              <div ref="submitButton" class="text-end">
                 <BButton
                   :variant="disabled(errors) ? 'light' : 'success'"
                   type="submit"
@@ -75,7 +79,7 @@ const { toastError, toastSuccess } = useAppToast()
 const { t } = useI18n()
 
 const isEdit = ref(false)
-const username = ref(store.state.username || '123')
+const username = ref(store.state.username || '')
 const usernameUnique = ref(false)
 const rules = {
   required: true,
@@ -86,14 +90,12 @@ const rules = {
   usernameUnique: true,
 }
 
-const { handleSubmit, errors } = useForm({
-  initialValues: username.value,
-})
+const { handleSubmit, errors, values } = useForm()
 const { mutate: updateUserInfo } = useMutation(updateUserInfos)
 
 const onSubmit = handleSubmit(async () => {
   try {
-    await updateUserInfo({ alias: username.value })
+    await updateUserInfo({ alias: values.username })
     store.commit('username', username.value)
     toastSuccess(t('settings.username.change-success'))
   } catch (error) {
diff --git a/frontend/src/components/UserSettings/UserPassword.vue b/frontend/src/components/UserSettings/UserPassword.vue
index 6cef379f9..c59a25fec 100644
--- a/frontend/src/components/UserSettings/UserPassword.vue
+++ b/frontend/src/components/UserSettings/UserPassword.vue
@@ -1,8 +1,8 @@
 <template>
   <BCard id="change_pwd" class="card-border-radius card-background-gray">
     <div>
-      <BRow class="mb-4 text-right">
-        <BCol class="text-right">
+      <BRow class="mb-4 text-end">
+        <BCol class="text-end">
           <BButton
             class="change-password-form-opener"
             data-test="open-password-change-form"
@@ -35,9 +35,9 @@
           :register="register"
           @update:modelValue="form.newPassword = $event"
         />
-        <BRow class="text-right">
+        <BRow class="text-end">
           <BCol>
-            <div class="text-right">
+            <div class="text-end">
               <BButton
                 type="submit"
                 :variant="invalid ? 'light' : 'success'"
diff --git a/frontend/src/components/UserSettings/UserSettingsSwitch.vue b/frontend/src/components/UserSettings/UserSettingsSwitch.vue
index e25496b08..84a56ddc3 100644
--- a/frontend/src/components/UserSettings/UserSettingsSwitch.vue
+++ b/frontend/src/components/UserSettings/UserSettingsSwitch.vue
@@ -5,7 +5,8 @@
       name="check-button"
       :disabled="disabled"
       switch
-      @change="onChange"
+      :model-value="props.initialValue"
+      @update:model-value="onChange"
     />
   </div>
 </template>
@@ -37,16 +38,15 @@ const isDisabled = computed(() => {
 
 const { mutate: updateUserData } = useMutation(updateUserInfos)
 
-const onChange = async () => {
+const onChange = async (evtPayload) => {
   if (isDisabled.value) return
   const variables = []
-  variables[props.attrName] = value.value
-
+  variables[props.attrName] = evtPayload
   try {
-    await updateUserData({ variables })
-    store.commit(props.attrName, value.value)
-    emit('valueChanged', value.value)
-    toastSuccess(value.value ? props.enabledText : props.disabledText)
+    await updateUserData({ ...variables })
+    store.commit(props.attrName, evtPayload)
+    emit('value-changed', evtPayload)
+    toastSuccess(evtPayload ? props.enabledText : props.disabledText)
   } catch (error) {
     value.value = props.initialValue
     toastError(error.message)
@@ -59,5 +59,5 @@ const onClick = () => {
   }
 }
 
-const emit = defineEmits(['valueChanged'])
+const emit = defineEmits(['value-changed'])
 </script>
diff --git a/frontend/src/components/VariantIcon.vue b/frontend/src/components/VariantIcon.vue
new file mode 100644
index 000000000..374a90919
--- /dev/null
+++ b/frontend/src/components/VariantIcon.vue
@@ -0,0 +1,35 @@
+<template>
+  <IBiCheck v-if="props.icon === 'check'" class="icon-variant" />
+  <IBiXCircle v-if="props.icon === 'x-circle'" class="icon-variant" />
+  <IBiLink45deg v-if="props.icon === 'link45deg'" class="icon-variant" />
+  <IBiLink v-if="props.icon === 'link'" class="icon-variant" />
+  <IBiDropletHalf v-if="props.icon === 'droplet-half'" class="icon-variant" />
+  <IBiTrash v-if="props.icon === 'trash'" class="icon-variant" />
+  <IBiQuestion v-if="props.icon === 'question'" class="icon-variant" />
+  <IBiBellFill v-if="props.icon === 'bell-fill'" class="icon-variant" />
+  <IBiExclamationTriangle v-if="props.icon === 'exclamation-triangle'" class="icon-variant" />
+  <IBiHeart v-if="props.icon === 'heart'" class="icon-variant" />
+  <IBiPersonCheck v-if="props.icon === 'person-check'" class="icon-variant" />
+  <IBiGift v-if="props.icon === 'gift'" class="icon-variant" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  icon: { type: String, default: '' },
+  variant: { type: String, default: 'gray-dark' },
+})
+
+const color = ref(`var(--bs-${props.variant})`)
+</script>
+
+<style scoped lang="scss">
+:root {
+  --bs-gold: #c58d38;
+}
+
+.icon-variant {
+  color: v-bind('color');
+}
+</style>
diff --git a/frontend/src/layouts/AuthLayout.vue b/frontend/src/layouts/AuthLayout.vue
index d74859a88..f86a9b264 100644
--- a/frontend/src/layouts/AuthLayout.vue
+++ b/frontend/src/layouts/AuthLayout.vue
@@ -29,12 +29,8 @@
                 <div class="h1 mb-0">{{ communityName }}</div>
                 <div class="mb-0">{{ $t('1000thanks') }}</div>
               </BCol>
-              <BCol cols="3" class="text-right d-none d-sm-none d-md-inline">
-                <BAvatar
-                  src="/img/brand/gradido_coin●.png"
-                  size="6rem"
-                  variant="transparent"
-                ></BAvatar>
+              <BCol cols="3" class="text-end d-none d-sm-none d-md-inline">
+                <BAvatar src="/img/brand/gradido_coin●.png" size="6rem" />
               </BCol>
             </BRow>
             <BCard ref="pageFontSize" no-body class="border-0 mt-4 gradido-custom-background">
@@ -42,7 +38,7 @@
                 <BCol cols="10">
                   <language-switch-2 class="ms-3" />
                 </BCol>
-                <BCol cols="2" class="text-right">
+                <BCol cols="2" class="text-end">
                   <div id="popover-target-1" class="pointer">
                     <BImg src="/img/svg/type.svg" width="19" class="svg-type"></BImg>
                   </div>
@@ -119,7 +115,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 /* left  */
 .left-content-box {
   width: 40%;
@@ -170,4 +166,8 @@ export default {
 .login-size-controller {
   background-color: #212529;
 }
+
+:deep(.b-avatar.text-bg-secondary) {
+  background-color: transparent !important;
+}
 </style>
diff --git a/frontend/src/layouts/templates/CommunityTemplate.vue b/frontend/src/layouts/templates/CommunityTemplate.vue
index 9c00c85bc..85213c972 100644
--- a/frontend/src/layouts/templates/CommunityTemplate.vue
+++ b/frontend/src/layouts/templates/CommunityTemplate.vue
@@ -1,7 +1,7 @@
 <template>
   <contribution-info>
     <template #contribute>
-      <div show fade variant="secondary" class="text-dark">
+      <div class="text-dark">
         <div>
           <h3>{{ $t('contribution.formText.yourContribution') }}</h3>
           {{ $t('contribution.formText.bringYourTalentsTo') }}
@@ -13,79 +13,71 @@
       </div>
     </template>
     <template #contributions>
-      <div show fade variant="secondary" class="text-dark">
+      <div class="text-dark">
         <h4 class="alert-heading">{{ $t('community.myContributions') }}</h4>
         <p>
           {{ $t('contribution.alert.myContributionNoteList') }}
         </p>
         <ul>
-          <li>
-            <!--            <b-icon icon="bell-fill" variant="primary"></b-icon>-->
-            <IBiBellFill />
-            {{ $t('contribution.alert.pending') }}
-          </li>
-          <li>
-            <!--            <b-icon icon="question" variant="205"></b-icon>-->
-            <IBiQuestion />
-            {{ $t('contribution.alert.in_progress') }}
-          </li>
-          <li>
-            <!--            <b-icon icon="check" variant="success"></b-icon>-->
-            <IBiCheck />
-            {{ $t('contribution.alert.confirm') }}
-          </li>
-          <li>
-            <!--            <b-icon icon="x-circle" variant="warning"></b-icon>-->
-            <IBiXCircle />
-            {{ $t('contribution.alert.denied') }}
-          </li>
-          <li>
-            <!--            <b-icon icon="trash" variant="danger"></b-icon>-->
-            <IBiTrash />
-            {{ $t('contribution.alert.deleted') }}
+          <li v-for="descriptionData in contributionInfoDescriptions" :key="descriptionData.icon">
+            <variant-icon :icon="descriptionData.icon" :variant="descriptionData.variant" />
+            {{ descriptionData.description }}
           </li>
         </ul>
       </div>
     </template>
     <template #community>
-      <div show fade variant="secondary" class="text-dark">
+      <div class="text-dark">
         <h4 class="alert-heading">{{ $t('navigation.community') }}</h4>
         <p>
           {{ $t('contribution.alert.communityNoteList') }}
         </p>
         <ul>
-          <li>
-            <!--            <b-icon icon="bell-fill" variant="primary"></b-icon>-->
-            <IBiBellFill />
-            {{ $t('contribution.alert.pending') }}
-          </li>
-          <li>
-            <!--            <b-icon icon="question" variant="205"></b-icon>-->
-            <IBiQuestion />
-            {{ $t('contribution.alert.in_progress') }}
-          </li>
-          <li>
-            <!--            <b-icon icon="check" variant="success"></b-icon>-->
-            <IBiCheck />
-            {{ $t('contribution.alert.confirm') }}
-          </li>
-          <li>
-            <!--            <b-icon icon="x-circle" variant="warning"></b-icon>-->
-            <IBiXCircle />
-            {{ $t('contribution.alert.denied') }}
-          </li>
+          <template
+            v-for="descriptionData in contributionInfoDescriptions"
+            :key="descriptionData.icon"
+          >
+            <li v-if="descriptionData.icon !== 'trash'">
+              <variant-icon :icon="descriptionData.icon" :variant="descriptionData.variant" />
+              {{ descriptionData.description }}
+            </li>
+          </template>
         </ul>
       </div>
     </template>
   </contribution-info>
 </template>
-<script>
+<script setup>
 import ContributionInfo from '@/components/Template/RightSide/ContributionInfo.vue'
+import { useI18n } from 'vue-i18n'
 
-export default {
-  name: 'CommunityTemplate',
-  components: {
-    ContributionInfo,
+const { t } = useI18n()
+
+const contributionInfoDescriptions = [
+  {
+    icon: 'bell-fill',
+    variant: 'primary',
+    description: t('contribution.alert.pending'),
   },
-}
+  {
+    icon: 'question',
+    variant: '205',
+    description: t('contribution.alert.in_progress'),
+  },
+  {
+    icon: 'check',
+    variant: 'success',
+    description: t('contribution.alert.confirm'),
+  },
+  {
+    icon: 'x-circle',
+    variant: 'warning',
+    description: t('contribution.alert.denied'),
+  },
+  {
+    icon: 'trash',
+    variant: 'danger',
+    description: t('contribution.alert.deleted'),
+  },
+]
 </script>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 64ca9b281..2bf551953 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -187,6 +187,7 @@
       "gddCreationTime": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens einer Nachkommastelle sein",
       "gddSendAmount": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens zwei Nachkommastellen sein",
       "is-not": "Du kannst dir selbst keine Gradidos überweisen",
+      "requiredField": "{fieldName} ist ein Pflichtfeld",
       "username-allowed-chars": "Der Nutzername darf nur aus Buchstaben (ohne Umlaute), Zahlen, Binde- oder Unterstrichen bestehen.",
       "username-hyphens": "Binde- oder Unterstriche müssen zwischen Buchstaben oder Zahlen stehen.",
       "username-unique": "Der Nutzername ist bereits vergeben.",
@@ -221,7 +222,6 @@
     "redeem": "Einlösen",
     "redeemed": "Erfolgreich eingelöst! Deinem Konto wurden {n} GDD gutgeschrieben.",
     "redeemed-at": "Der Link wurde bereits am {date} eingelöst.",
-    "redeemed-title": "eingelöst",
     "redeemlink-error": "Dieser Einlöse-Link ist nicht vollständig.",
     "to-login": "Log dich ein",
     "to-register": "Registriere ein neues Konto.",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 315653e0c..cb4214e40 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -187,6 +187,7 @@
       "gddCreationTime": "The field {_field_} must be a number between {min} and {max} with at most one decimal place.",
       "gddSendAmount": "The {_field_} field must be a number between {min} and {max} with at most two digits after the decimal point",
       "is-not": "You cannot send Gradidos to yourself",
+      "requiredField": "The {fieldName} field is required",
       "username-allowed-chars": "The username may only contain letters, numbers, hyphens or underscores.",
       "username-hyphens": "Hyphens or underscores must be in between letters or numbers.",
       "username-unique": "This username is already taken.",
@@ -221,7 +222,6 @@
     "redeem": "Redeem",
     "redeemed": "Successfully redeemed! Your account has been credited with {n} GDD.",
     "redeemed-at": "The link was already redeemed on {date}.",
-    "redeemed-title": "redeemed",
     "redeemlink-error": "This redemption link is not complete.",
     "to-login": "Log in",
     "to-register": "Register a new account.",
diff --git a/frontend/src/locales/es.json b/frontend/src/locales/es.json
index df3ac3440..7ef3d0226 100644
--- a/frontend/src/locales/es.json
+++ b/frontend/src/locales/es.json
@@ -155,6 +155,7 @@
     "validation": {
       "gddSendAmount": "El campo {_field_} debe ser un número entre {min} y {max} con un máximo de dos decimales",
       "is-not": "No es posible  transferirte Gradidos a ti mismo",
+      "requiredField": "El campo {fieldName} es obligatorio",
       "usernmae-regex": "El nombre de usuario debe comenzar con una letra seguida de al menos dos caracteres alfanuméricos.",
       "usernmae-unique": "Este nombre de usuario ya está adjudicado."
     },
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
index f09c7471d..81827c9c6 100644
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -161,6 +161,7 @@
       "gddCreationTime": "Le champ {_field_} doit comprendre un nombre entre {min} et {max} avec un maximum de une décimale.",
       "gddSendAmount": "Le champ {_field_} doit comprendre un nombre entre {min} et {max} avec un maximum de deux chiffres après la virgule",
       "is-not": "Vous ne pouvez pas vous envoyer de Gradido à vous-même",
+      "requiredField": "Le champ {fieldName} est obligatoire",
       "usernmae-regex": "Le nom d'utilisateur doit commencer par une lettre, suivi d'au moins deux caractères alphanumériques.",
       "usernmae-unique": "Ce nom d'utilisateur est déjà pris."
     },
diff --git a/frontend/src/locales/nl.json b/frontend/src/locales/nl.json
index 8dfd8f9f8..2201f0712 100644
--- a/frontend/src/locales/nl.json
+++ b/frontend/src/locales/nl.json
@@ -155,6 +155,7 @@
     "validation": {
       "gddSendAmount": "Het veld {_field_} moet een getal tussen {min} en {max} met maximaal twee cijfers achter de komma zijn",
       "is-not": "Je kunt geen Gradidos aan jezelf overmaken",
+      "requiredField": "{fieldName} is verplicht",
       "usernmae-regex": "De gebruikersnaam moet met een letter beginnen, waarop minimaal twee alfanumerieke tekens dienen te volgen.",
       "usernmae-unique": "De gebruikersnaam is al bezet."
     },
diff --git a/frontend/src/locales/tr.json b/frontend/src/locales/tr.json
index 7e7fc6f97..f3860f095 100644
--- a/frontend/src/locales/tr.json
+++ b/frontend/src/locales/tr.json
@@ -146,6 +146,7 @@
     "validation": {
       "gddSendAmount": "Bu alan {_field_} {min}  {max} arasında ondalık noktadan sonra en fazla iki basamaklı bir sayı olmalıdır",
       "is-not": "Gradidoları kendine gönderemezsin",
+      "requiredField": "{fieldName} alanı zorunludur",
       "usernmae-regex": "Kullanıcı adı bir harfle başlamalı, ardından en az iki alfasayısal karakter gelmelidir.",
       "usernmae-unique": "Bu kullanıcı adı zaten alınmış."
     },
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 05b328a1c..ff96f262d 100755
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -52,8 +52,6 @@ app.config.globalProperties.$filters = {
 
 loadAllRules(i18n.global, apolloProvider.defaultClient)
 
-loadAllRules(i18n.global, apolloProvider.defaultClient)
-
 addNavigationGuards(router, store, apolloProvider.defaultClient)
 
 if (!store) {
diff --git a/frontend/src/pages/Circles.vue b/frontend/src/pages/Circles.vue
index 7e7faf9d1..7dc315342 100644
--- a/frontend/src/pages/Circles.vue
+++ b/frontend/src/pages/Circles.vue
@@ -10,7 +10,7 @@
       </div>
       <BRow class="my-5">
         <BCol cols="12">
-          <div class="text-lg-right">
+          <div class="text-lg-end">
             <BButton
               v-if="humhubAllowed"
               :href="humhubUri"
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index 3a4653725..064aee33c 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -31,7 +31,7 @@
               :show-pagination="true"
               :page-size="pageSize"
               @close-all-open-collapse="closeAllOpenCollapse"
-              @update-list-contributions="handleUpdateListContributions"
+              @update-list-contributions="handleUpdateListAllContributions"
               @update-contribution-form="handleUpdateContributionForm"
               @delete-contribution="handleDeleteContribution"
               @update-status="updateStatus"
@@ -49,8 +49,8 @@
               :show-pagination="true"
               :page-size="pageSizeAll"
               :all-contribution="true"
-              @update-list-contributions="updateListAllContributions"
-              @update-contribution-form="updateContributionForm"
+              @update-list-contributions="handleUpdateListAllContributions"
+              @update-contribution-form="handleUpdateContributionForm"
             />
           </div>
         </BTab>
@@ -254,7 +254,10 @@ const handleDeleteContribution = async (data) => {
 const handleUpdateListAllContributions = (pagination) => {
   currentPageAll.value = pagination.currentPage
   pageSizeAll.value = pagination.pageSize
-  refetchAllContributions()
+  refetchAllContributions({
+    currentPage: currentPage.value,
+    pageSize: pageSize.value,
+  })
 }
 
 const handleUpdateListContributions = (pagination) => {
diff --git a/frontend/src/pages/ResetPassword.vue b/frontend/src/pages/ResetPassword.vue
index 1eb648ee1..dbffa8d66 100644
--- a/frontend/src/pages/ResetPassword.vue
+++ b/frontend/src/pages/ResetPassword.vue
@@ -1,42 +1,167 @@
 <template>
   <div v-if="enterData" class="resetpwd-form">
     <div class="pb-5">{{ $t('site.resetPassword.heading') }}</div>
-    <validation-observer ref="observer" v-slot="{ handleSubmit, valid }">
-      <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-        <input-password-confirmation v-model="form" />
-        <BRow>
-          <BCol cols="12" lg="6">
-            <b-button
-              block
-              type="submit"
-              :variant="valid ? 'gradido' : 'gradido-disable'"
-              class="mt-4"
-              data-test="submit-new-password-btn"
-              :disabled="!valid"
-            >
-              <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-              {{ $t(displaySetup.button) }}
-            </b-button>
-          </BCol>
-        </BRow>
-      </b-form>
-    </validation-observer>
+    <BForm role="form" @submit.prevent="onSubmit">
+      <input-password-confirmation :model-value="form" register @update:modelValue="form" />
+      <BRow>
+        <BCol cols="12" lg="6">
+          <BButton
+            block
+            type="submit"
+            :variant="formMeta.valid ? 'gradido' : 'gradido-disable'"
+            class="mt-4"
+            data-test="submit-new-password-btn"
+            :disabled="!formMeta.valid"
+          >
+            <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
+            {{ $t(displaySetup.button) }}
+          </BButton>
+        </BCol>
+      </BRow>
+    </BForm>
   </div>
   <div v-else>
     <message
       :headline="messageHeadline"
       :subtitle="messageSubtitle"
       :button-text="messageButtonText"
-      :link-to="messageButtonLinktTo"
+      :link-to="messageButtonLinkTo"
     />
   </div>
 </template>
 
-<script>
+<!--<script>-->
+<!--import { setPassword } from '@/graphql/mutations'-->
+<!--import { queryOptIn } from '@/graphql/queries'-->
+<!--import InputPasswordConfirmation from '@/components/Inputs/InputPasswordConfirmation'-->
+<!--import Message from '@/components/Message/Message'-->
+
+<!--const textFields = {-->
+<!--  reset: {-->
+<!--    title: 'settings.password.change-password',-->
+<!--    text: 'settings.password.reset-password.text',-->
+<!--    button: 'settings.password.change-password',-->
+<!--    linkTo: '/login',-->
+<!--  },-->
+<!--  checkEmail: {-->
+<!--    title: 'settings.password.set',-->
+<!--    text: 'settings.password.set-password.text',-->
+<!--    button: 'settings.password.set',-->
+<!--    linkTo: '/login',-->
+<!--  },-->
+<!--}-->
+
+<!--export default {-->
+<!--  name: 'ResetPassword',-->
+<!--  components: {-->
+<!--    InputPasswordConfirmation,-->
+<!--    Message,-->
+<!--  },-->
+<!--  data() {-->
+<!--    return {-->
+<!--      form: {-->
+<!--        password: '',-->
+<!--        passwordRepeat: '',-->
+<!--      },-->
+<!--      displaySetup: {},-->
+<!--      showPageMessage: false,-->
+<!--      messageHeadline: null,-->
+<!--      messageSubtitle: null,-->
+<!--      messageButtonText: null,-->
+<!--      messageButtonLinkTo: null,-->
+<!--    }-->
+<!--  },-->
+<!--  computed: {-->
+<!--    enterData() {-->
+<!--      return !this.showPageMessage-->
+<!--    },-->
+<!--  },-->
+<!--  created() {-->
+<!--    this.$emit('set-mobile-start', false)-->
+<!--    this.setDisplaySetup()-->
+<!--  },-->
+<!--  methods: {-->
+<!--    async onSubmit() {-->
+<!--      this.$apollo-->
+<!--        .mutate({-->
+<!--          mutation: setPassword,-->
+<!--          variables: {-->
+<!--            code: this.$route.params.optin,-->
+<!--            password: this.form.password,-->
+<!--          },-->
+<!--        })-->
+<!--        .then(() => {-->
+<!--          this.form.password = ''-->
+<!--          this.form.passwordRepeat = ''-->
+
+<!--          this.showPageMessage = true-->
+<!--          this.messageHeadline = this.$t('message.title')-->
+<!--          this.messageSubtitle = this.$route.path.includes('checkEmail')-->
+<!--            ? this.$t('message.checkEmail')-->
+<!--            : this.$t('message.reset')-->
+<!--          this.messageButtonText = this.$t('login')-->
+<!--          if (this.$route.params.code) {-->
+<!--            this.messageButtonLinkTo = `/login/${this.$route.params.code}`-->
+<!--          } else {-->
+<!--            this.messageButtonLinkTo = '/login'-->
+<!--          }-->
+<!--        })-->
+<!--        .catch((error) => {-->
+<!--          let errorMessage-->
+<!--          if (-->
+<!--            error.message.match(-->
+<!--              /email was sent more than ([0-9]+ hours)?( and )?([0-9]+ minutes)? ago/,-->
+<!--            )-->
+<!--          ) {-->
+<!--            errorMessage = error.message-->
+<!--          } else {-->
+<!--            errorMessage = error.message-->
+<!--          }-->
+<!--          this.showPageMessage = true-->
+<!--          this.messageHeadline = this.$t('message.errorTitle')-->
+<!--          this.messageSubtitle = errorMessage-->
+<!--          this.messageButtonText = this.$t('settings.password.reset')-->
+<!--          this.messageButtonLinkTo = '/forgot-password/resetPassword'-->
+<!--          this.toastError(errorMessage)-->
+<!--        })-->
+<!--    },-->
+<!--    checkOptInCode() {-->
+<!--      this.$apollo-->
+<!--        .query({-->
+<!--          query: queryOptIn,-->
+<!--          variables: {-->
+<!--            optIn: this.$route.params.optin,-->
+<!--          },-->
+<!--        })-->
+<!--        .then()-->
+<!--        .catch((error) => {-->
+<!--          this.toastError(error.message)-->
+<!--          this.$router.push('/forgot-password/resetPassword')-->
+<!--        })-->
+<!--    },-->
+<!--    setDisplaySetup() {-->
+<!--      this.checkOptInCode()-->
+<!--      if (this.$route.path.includes('checkEmail')) {-->
+<!--        this.displaySetup = textFields.checkEmail-->
+<!--      }-->
+<!--      if (this.$route.path.includes('reset-password')) {-->
+<!--        this.displaySetup = textFields.reset-->
+<!--      }-->
+<!--    },-->
+<!--  },-->
+<!--}-->
+<!--</script>-->
+<script setup>
+import { ref, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useLazyQuery, useMutation, useQuery } from '@vue/apollo-composable'
 import { setPassword } from '@/graphql/mutations'
 import { queryOptIn } from '@/graphql/queries'
-import InputPasswordConfirmation from '@/components/Inputs/InputPasswordConfirmation'
-import Message from '@/components/Message/Message'
+import InputPasswordConfirmation from '@/components/Inputs/InputPasswordConfirmation.vue'
+import Message from '@/components/Message/Message.vue'
+import { useAppToast } from '@/composables/useToast'
+import { useForm } from 'vee-validate'
 
 const textFields = {
   reset: {
@@ -53,105 +178,89 @@ const textFields = {
   },
 }
 
-export default {
-  name: 'ResetPassword',
-  components: {
-    InputPasswordConfirmation,
-    Message,
-  },
-  data() {
-    return {
-      form: {
-        password: '',
-        passwordRepeat: '',
-      },
-      displaySetup: {},
-      showPageMessage: false,
-      messageHeadline: null,
-      messageSubtitle: null,
-      messageButtonText: null,
-      messageButtonLinktTo: null,
-    }
-  },
-  computed: {
-    enterData() {
-      return !this.showPageMessage
-    },
-  },
-  created() {
-    this.$emit('set-mobile-start', false)
-    this.setDisplaySetup()
-  },
-  methods: {
-    async onSubmit() {
-      this.$apollo
-        .mutate({
-          mutation: setPassword,
-          variables: {
-            code: this.$route.params.optin,
-            password: this.form.password,
-          },
-        })
-        .then(() => {
-          this.form.password = ''
-          this.form.passwordRepeat = ''
+const router = useRouter()
+const route = useRoute()
+const { t } = useI18n()
 
-          this.showPageMessage = true
-          this.messageHeadline = this.$t('message.title')
-          this.messageSubtitle = this.$route.path.includes('checkEmail')
-            ? this.$t('message.checkEmail')
-            : this.$t('message.reset')
-          this.messageButtonText = this.$t('login')
-          if (this.$route.params.code) {
-            this.messageButtonLinktTo = `/login/${this.$route.params.code}`
-          } else {
-            this.messageButtonLinktTo = '/login'
-          }
-        })
-        .catch((error) => {
-          let errorMessage
-          if (
-            error.message.match(
-              /email was sent more than ([0-9]+ hours)?( and )?([0-9]+ minutes)? ago/,
-            )
-          ) {
-            errorMessage = error.message
-          } else {
-            errorMessage = error.message
-          }
-          this.showPageMessage = true
-          this.messageHeadline = this.$t('message.errorTitle')
-          this.messageSubtitle = errorMessage
-          this.messageButtonText = this.$t('settings.password.reset')
-          this.messageButtonLinktTo = '/forgot-password/resetPassword'
-          this.toastError(errorMessage)
-        })
-    },
-    checkOptInCode() {
-      this.$apollo
-        .query({
-          query: queryOptIn,
-          variables: {
-            optIn: this.$route.params.optin,
-          },
-        })
-        .then()
-        .catch((error) => {
-          this.toastError(error.message)
-          this.$router.push('/forgot-password/resetPassword')
-        })
-    },
-    setDisplaySetup() {
-      this.checkOptInCode()
-      if (this.$route.path.includes('checkEmail')) {
-        this.displaySetup = textFields.checkEmail
-      }
-      if (this.$route.path.includes('reset-password')) {
-        this.displaySetup = textFields.reset
-      }
-    },
-  },
+const form = ref({
+  password: '',
+  passwordRepeat: '',
+})
+
+const displaySetup = ref({})
+const showPageMessage = ref(false)
+const messageHeadline = ref(null)
+const messageSubtitle = ref(null)
+const messageButtonText = ref(null)
+const messageButtonLinkTo = ref(null)
+
+const enterData = computed(() => !showPageMessage.value)
+
+const emit = defineEmits(['set-mobile-start'])
+
+const { mutate: setPasswordMutation } = useMutation(setPassword)
+const { load: queryOptInQuery } = useLazyQuery(queryOptIn)
+
+const { toastError } = useAppToast()
+
+const { meta: formMeta, values: formValues, setFieldValue } = useForm()
+
+const onSubmit = async () => {
+  try {
+    await setPasswordMutation({
+      code: route.params.optin,
+      password: formValues.newPassword,
+    })
+
+    setFieldValue('newPassword', '')
+    setFieldValue('newPasswordRepeat', '')
+
+    showPageMessage.value = true
+    messageHeadline.value = t('message.title')
+    messageSubtitle.value = route.path.includes('checkEmail')
+      ? t('message.checkEmail')
+      : t('message.reset')
+    messageButtonText.value = t('login')
+    messageButtonLinkTo.value = route.params.code ? `/login/${route.params.code}` : '/login'
+  } catch (error) {
+    const errorMessage = error.message.match(
+      /email was sent more than ([0-9]+ hours)?( and )?([0-9]+ minutes)? ago/,
+    )
+      ? error.message
+      : error.message
+
+    showPageMessage.value = true
+    messageHeadline.value = t('message.errorTitle')
+    messageSubtitle.value = errorMessage
+    messageButtonText.value = t('settings.password.reset')
+    messageButtonLinkTo.value = '/forgot-password/resetPassword'
+    toastError(errorMessage)
+  }
 }
+
+const checkOptInCode = async () => {
+  try {
+    await queryOptInQuery(queryOptIn, {
+      optIn: route.params.optin,
+    })
+  } catch (error) {
+    toastError(error.message)
+    await router.push('/forgot-password/resetPassword')
+  }
+}
+
+const setDisplaySetup = () => {
+  checkOptInCode()
+  if (route.path.includes('checkEmail')) {
+    displaySetup.value = textFields.checkEmail
+  }
+  if (route.path.includes('reset-password')) {
+    displaySetup.value = textFields.reset
+  }
+}
+
+emit('set-mobile-start', false)
+setDisplaySetup()
 </script>
 <style scoped>
 .btn-gradido {
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index 01c716ae7..4a6a38247 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -56,7 +56,7 @@
         <hr />
         <BRow>
           <BCol cols="12" md="6" lg="6">{{ $t('language') }}</BCol>
-          <BCol cols="12" md="6" lg="6" class="text-right">
+          <BCol cols="12" md="6" lg="6" class="text-end">
             <user-language />
           </BCol>
         </BRow>
@@ -76,7 +76,7 @@
               }}
             </div>
           </BCol>
-          <BCol cols="12" md="6" lg="6" class="text-right">
+          <BCol cols="12" md="6" lg="6" class="text-end">
             <user-newsletter />
           </BCol>
         </BRow>
@@ -89,7 +89,7 @@
               <BCol cols="12" md="6" lg="6">
                 <div class="h3">{{ $t('Humhub.title') }}</div>
               </BCol>
-              <BCol cols="12" md="6" lg="6" class="text-right">
+              <BCol cols="12" md="6" lg="6" class="text-end">
                 <user-settings-switch
                   :initial-value="$store.state.humhubAllowed"
                   :attr-name="'humhubAllowed'"
@@ -120,7 +120,7 @@
               <BCol cols="12" md="6" lg="6">
                 <div class="h3">{{ $t('GMS.title') }}</div>
               </BCol>
-              <BCol cols="12" md="6" lg="6" class="text-right">
+              <BCol cols="12" md="6" lg="6" class="text-end">
                 <user-settings-switch
                   :initial-value="$store.state.gmsAllowed"
                   :attr-name="'gmsAllowed'"
@@ -167,7 +167,7 @@
               <BCol cols="12" md="6" lg="6">
                 <div class="h3 text-muted">{{ $t('GMS.title') }}</div>
               </BCol>
-              <BCol cols="12" md="6" lg="6" class="text-right">
+              <BCol cols="12" md="6" lg="6" class="text-end">
                 <user-settings-switch :disabled="true" />
               </BCol>
             </BRow>
@@ -179,7 +179,7 @@
 
     <!-- TODO<BRow>
       <BCol cols="12" md="6" lg="6">{{ $t('settings.darkMode') }}</BCol>
-      <BCol cols="12" md="6" lg="6" class="text-right">
+      <BCol cols="12" md="6" lg="6" class="text-end">
         <BForm-checkbox v-model="darkMode" name="dark-mode" switch aligne></BForm-checkbox>
       </BCol>
     </BRow> -->
diff --git a/frontend/src/pages/UserSearch.vue b/frontend/src/pages/UserSearch.vue
index 29ae90066..8f114b3b6 100644
--- a/frontend/src/pages/UserSearch.vue
+++ b/frontend/src/pages/UserSearch.vue
@@ -10,7 +10,7 @@
       </div>
       <BRow class="my-5">
         <BCol cols="12">
-          <div class="text-lg-right">
+          <div class="text-lg-end">
             <b-button variant="gradido" :href="gmsUri" target="_blank">
               {{ $t('usersearch.button') }}
             </b-button>
diff --git a/frontend/src/validation-rules.js b/frontend/src/validation-rules.js
index 0dbcf2f1d..6a15aa67b 100644
--- a/frontend/src/validation-rules.js
+++ b/frontend/src/validation-rules.js
@@ -9,6 +9,7 @@ import es from '@vee-validate/i18n/dist/locale/es.json'
 import fr from '@vee-validate/i18n/dist/locale/fr.json'
 import nl from '@vee-validate/i18n/dist/locale/nl.json'
 import tr from '@vee-validate/i18n/dist/locale/tr.json'
+import { useI18n } from 'vue-i18n'
 
 // Email and username regex patterns remain the same
 const EMAIL_REGEX =
@@ -17,14 +18,23 @@ const USERNAME_REGEX = /^(?=.{3,20}$)[a-zA-Z0-9]+(?:[_-][a-zA-Z0-9]+?)*$/
 
 export const loadAllRules = (i18nCallback, apollo) => {
   configure({
-    generateMessage: localize({
-      en,
-      de,
-      es,
-      fr,
-      nl,
-      tr,
-    }),
+    generateMessage: (context) => {
+      const { t } = i18nCallback || useI18n()
+
+      const translationKey = `form.${context.name}`
+      if (context.rule.name === 'required') {
+        // eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys
+        return t('form.validation.requiredField', { fieldName: t(translationKey) })
+      }
+      return localize({
+        en,
+        de,
+        es,
+        fr,
+        nl,
+        tr,
+      })(context)
+    },
     validateOnBlur: true,
     validateOnChange: true,
     validateOnInput: false,
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 9f656789b..b56e00d50 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -73,6 +73,7 @@ export default defineConfig({
     commonjs(),
   ],
   css: {
+    extract: true,
     preprocessorOptions: {
       scss: {
         additionalData: `@import "@/assets/scss/gradido.scss";`,