From 81d7bf799e3c046d792538dbcbf2f529b2159f4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Micha=C5=82owski?=
 <mateusz.michalowski@monterail.com>
Date: Wed, 7 Aug 2024 16:18:25 +0200
Subject: [PATCH] fix(frontend): WiP migration

---
 frontend/src/assets/scss/gradido.scss         |   1 -
 frontend/src/components/Auth/AuthFooter.vue   |  12 +-
 frontend/src/components/ClipboardCopy.vue     |  10 +-
 frontend/src/components/CommunitySwitch.vue   | 218 ++++---
 .../ContributionMessagesFormular.vue          |  12 +-
 .../ContributionMessagesListItem.vue          |  36 +-
 .../ContributionMessages/ParseMessage.vue     |   2 +-
 .../Contributions/ContributionForm.vue        |   4 +-
 .../Contributions/ContributionListItem.vue    |  53 +-
 .../Contributions/OpenCreationsAmount.vue     |  44 +-
 .../DecayInformations/CollapseLinksList.vue   |  13 +-
 .../DecayInformation-Decay.vue                |  29 +-
 .../DecayInformation-DecayStartblock.vue      |  80 +--
 .../DecayInformation-Long.vue                 |  86 +--
 .../DecayInformation-Short.vue                |   2 +-
 .../GddSend/TransactionConfirmationLink.vue   |   8 +-
 .../GddSend/TransactionConfirmationSend.vue   | 103 ++--
 .../components/GddSend/TransactionForm.vue    | 572 +++++++++++-------
 .../GddSend/TransactionResultLink.vue         |   4 +-
 .../GddSend/TransactionResultSendError.vue    |   4 +-
 .../src/components/GddTransactionList.vue     |   6 +-
 .../src/components/GdtTransactionList.vue     |   6 +-
 .../src/components/Inputs/InputAmount.vue     | 203 ++++---
 .../src/components/Inputs/InputIdentifier.vue | 117 ++--
 .../Inputs/InputPasswordConfirmation.vue      |  16 +-
 .../src/components/Inputs/InputTextarea.vue   |  96 +--
 .../LinkInformations/RedeemInformation.vue    |   4 +-
 .../LinkInformations/RedeemLoggedOut.vue      |  12 +-
 frontend/src/components/Menu/Sidebar.vue      |   1 +
 .../src/components/SessionLogoutTimeout.vue   |   4 +
 .../Template/ContentHeader/GddAmount.vue      |   3 +-
 .../Template/RightSide/LastContributions.vue  |  10 +-
 .../Template/RightSide/LastTransactions.vue   |   2 +-
 frontend/src/components/Transaction.vue       | 253 +++++---
 .../src/components/TransactionCollapse.vue    |   2 +-
 .../TransactionLinks/TransactionLink.vue      | 232 ++++---
 .../TransactionRows/AmountAndNameRow.vue      |  14 +-
 .../TransactionRows/CollapseIcon.vue          |  12 +-
 .../components/TransactionRows/DateRow.vue    |  12 +-
 .../components/TransactionRows/DecayRow.vue   |  15 +-
 .../TransactionRows/DurationRow.vue           |  12 +-
 .../TransactionRows/LinkCountRow.vue          |  12 +-
 .../components/TransactionRows/MemoRow.vue    |  12 +-
 .../Transactions/TransactionCreation.vue      |  26 +-
 .../Transactions/TransactionDecay.vue         |  23 +-
 .../Transactions/TransactionLinkSummary.vue   |  28 +-
 .../Transactions/TransactionReceive.vue       |  32 +-
 .../Transactions/TransactionSend.vue          |  41 +-
 .../src/components/UserSettings/UserCard.vue  |  32 +-
 .../src/components/UserSettings/UserData.vue  |  48 +-
 .../components/UserSettings/UserLanguage.vue  |  38 +-
 .../src/components/UserSettings/UserName.vue  |  20 +-
 .../components/UserSettings/UserPassword.vue  |  24 +-
 frontend/src/components/skeleton/Overview.vue |  42 +-
 frontend/src/composables/useAuthLinks.js      |  19 +
 frontend/src/composables/useCopyLinks.js      |  53 ++
 frontend/src/filters/amount.js                |  36 +-
 frontend/src/i18n.js                          |   4 +-
 frontend/src/layouts/DashboardLayout.vue      |   2 +-
 frontend/src/main.js                          |  20 +-
 frontend/src/pages/Circles.vue                | 128 ++--
 frontend/src/pages/ForgotPassword.vue         |  27 +-
 frontend/src/pages/Register.vue               |  36 +-
 frontend/src/pages/RegisterCommunity.vue      |  32 +-
 frontend/src/pages/ResetPassword.vue          |   8 +-
 frontend/src/pages/Send.vue                   | 384 ++++++++----
 frontend/src/pages/Settings.vue               | 140 ++---
 frontend/src/pages/Transactions.vue           |   2 +-
 frontend/src/pages/UserSearch.vue             |   8 +-
 frontend/vite.config.js                       |  11 +-
 70 files changed, 2110 insertions(+), 1503 deletions(-)
 create mode 100644 frontend/src/composables/useAuthLinks.js
 create mode 100644 frontend/src/composables/useCopyLinks.js

diff --git a/frontend/src/assets/scss/gradido.scss b/frontend/src/assets/scss/gradido.scss
index 5139b9983..6d09e7cea 100644
--- a/frontend/src/assets/scss/gradido.scss
+++ b/frontend/src/assets/scss/gradido.scss
@@ -53,7 +53,6 @@
 @import "bootstrap/scss/bootstrap";
 
 // Bootstrap-vue (2.21.1) scss
-//@import "bootstrap-vue/src/index";
 @import "custom/variables";
 @import "gradido-template";
 @import "gradido-template-dark";
diff --git a/frontend/src/components/Auth/AuthFooter.vue b/frontend/src/components/Auth/AuthFooter.vue
index d74593e36..fe514f93c 100644
--- a/frontend/src/components/Auth/AuthFooter.vue
+++ b/frontend/src/components/Auth/AuthFooter.vue
@@ -1,7 +1,7 @@
 <template>
   <footer class="footer">
-    <b-row class="mt-lg-7 mt-md-6 mt-4">
-      <b-col class="col-12 col-md-12 col-lg-6">
+    <BRow class="mt-lg-7 mt-md-6 mt-4">
+      <BCol class="col-12 col-md-12 col-lg-6">
         <div
           class="d-flex justify-content-center justify-content-md-center justify-content-lg-start ml-3"
         >
@@ -14,8 +14,8 @@
             </b-nav-item>
           </b-nav>
         </div>
-      </b-col>
-      <b-col class="col-12 col-md-12 col-lg-6 mt-4 mb-4 mt-lg-0 mb-lg-0">
+      </BCol>
+      <BCol class="col-12 col-md-12 col-lg-6 mt-4 mb-4 mt-lg-0 mb-lg-0">
         <div class="text-center ml-3 ml-lg-0 text-lg-right pt-1">
           {{ $t('followUs') }}
           <b-link href="https://www.facebook.com/groups/Gradido/" target="_blank">
@@ -43,8 +43,8 @@
             </svg>
           </b-link>
         </div>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
   </footer>
 </template>
 
diff --git a/frontend/src/components/ClipboardCopy.vue b/frontend/src/components/ClipboardCopy.vue
index 4374f7182..b43c84418 100644
--- a/frontend/src/components/ClipboardCopy.vue
+++ b/frontend/src/components/ClipboardCopy.vue
@@ -10,9 +10,10 @@
         >
           {{ link }}
           <div>
-            <b-button class="p-4">
-              <b-icon icon="link45deg"></b-icon>
-            </b-button>
+            <BButton class="p-4">
+              <IBiLink45deg />
+              <!--              <b-icon icon="link45deg"></b-icon>-->
+            </BButton>
           </div>
         </div>
       </div>
@@ -26,7 +27,8 @@
           {{ linkText }}
           <div>
             <b-button class="p-4">
-              <b-icon icon="link45deg"></b-icon>
+              <IBiLink45deg />
+              <!--              <b-icon icon="link45deg"></b-icon>-->
             </b-button>
           </div>
         </div>
diff --git a/frontend/src/components/CommunitySwitch.vue b/frontend/src/components/CommunitySwitch.vue
index e46c94aaa..4f8741fd4 100644
--- a/frontend/src/components/CommunitySwitch.vue
+++ b/frontend/src/components/CommunitySwitch.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="community-switch">
     <div v-if="!validCommunityIdentifier">
-      <BDropdown no-flip :text="value.name">
+      <BDropdown no-flip :text="modelValue?.name">
         <BDropdownItem
           v-for="community in communities"
           @click.prevent="updateCommunity(community)"
           :key="community.id"
           :title="community.description"
-          :active="value.uuid === community.uuid"
+          :active="modelValue?.uuid === community.uuid"
         >
           {{ community.name }}
         </BDropdownItem>
@@ -15,78 +15,158 @@
     </div>
     <div v-else class="mb-4 mt-2">
       <BRow>
-        <BCol class="font-weight-bold" :title="value.description">{{ value.name }}</BCol>
+        <BCol class="font-weight-bold" :title="modelValue.description">{{ modelValue.name }}</BCol>
       </BRow>
     </div>
   </div>
 </template>
-<script>
-import { selectCommunities } from '@/graphql/queries'
+<!--<script>-->
+<!--import { selectCommunities } from '@/graphql/queries'-->
 
-export default {
-  name: 'CommunitySwitch',
-  props: {
-    value: {
-      type: Object,
-    },
-  },
-  data() {
-    return {
-      communities: [],
-      validCommunityIdentifier: false,
-    }
-  },
-  methods: {
-    updateCommunity(community) {
-      this.$emit('input', community)
-    },
-    setDefaultCommunity() {
-      // when we already get an identifier via url we choose this if the community exist
-      if (this.communityIdentifier && this.communities.length >= 1) {
-        const foundCommunity = this.communities.find((community) => {
-          if (
-            community.uuid === this.communityIdentifier ||
-            community.name === this.communityIdentifier
-          ) {
-            this.validCommunityIdentifier = true
-            return true
-          }
-          return false
-        })
-        if (foundCommunity) {
-          this.updateCommunity(foundCommunity)
-          return
-        }
-        this.toastError('invalid community identifier in url')
-      }
-      if (this.validCommunityIdentifier && !this.communityIdentifier) {
-        this.validCommunityIdentifier = false
-      }
-      // set default community, the only one which isn't foreign
-      // we assume it is only one entry with foreign = false
-      if (this.value.uuid === '' && this.communities.length) {
-        const foundCommunity = this.communities.find((community) => !community.foreign)
-        if (foundCommunity) {
-          this.updateCommunity(foundCommunity)
-        }
-      }
-    },
-  },
-  apollo: {
-    communities: {
-      query: selectCommunities,
-    },
-  },
-  computed: {
-    communityIdentifier() {
-      return this.$route.params && this.$route.params.communityIdentifier
-    },
-  },
-  updated() {
-    this.setDefaultCommunity()
-  },
-  mounted() {
-    this.setDefaultCommunity()
+<!--export default {-->
+<!--  name: 'CommunitySwitch',-->
+<!--  props: {-->
+<!--    value: {-->
+<!--      type: Object,-->
+<!--    },-->
+<!--  },-->
+<!--  data() {-->
+<!--    return {-->
+<!--      communities: [],-->
+<!--      validCommunityIdentifier: false,-->
+<!--    }-->
+<!--  },-->
+<!--  methods: {-->
+<!--    updateCommunity(community) {-->
+<!--      this.$emit('input', community)-->
+<!--    },-->
+<!--    setDefaultCommunity() {-->
+<!--      // when we already get an identifier via url we choose this if the community exist-->
+<!--      if (this.communityIdentifier && this.communities.length >= 1) {-->
+<!--        const foundCommunity = this.communities.find((community) => {-->
+<!--          if (-->
+<!--            community.uuid === this.communityIdentifier ||-->
+<!--            community.name === this.communityIdentifier-->
+<!--          ) {-->
+<!--            this.validCommunityIdentifier = true-->
+<!--            return true-->
+<!--          }-->
+<!--          return false-->
+<!--        })-->
+<!--        if (foundCommunity) {-->
+<!--          this.updateCommunity(foundCommunity)-->
+<!--          return-->
+<!--        }-->
+<!--        this.toastError('invalid community identifier in url')-->
+<!--      }-->
+<!--      if (this.validCommunityIdentifier && !this.communityIdentifier) {-->
+<!--        this.validCommunityIdentifier = false-->
+<!--      }-->
+<!--      // set default community, the only one which isn't foreign-->
+<!--      // we assume it is only one entry with foreign = false-->
+<!--      if (this.value.uuid === '' && this.communities.length) {-->
+<!--        const foundCommunity = this.communities.find((community) => !community.foreign)-->
+<!--        if (foundCommunity) {-->
+<!--          this.updateCommunity(foundCommunity)-->
+<!--        }-->
+<!--      }-->
+<!--    },-->
+<!--  },-->
+<!--  apollo: {-->
+<!--    communities: {-->
+<!--      query: selectCommunities,-->
+<!--    },-->
+<!--  },-->
+<!--  computed: {-->
+<!--    communityIdentifier() {-->
+<!--      return this.$route.params && this.$route.params.communityIdentifier-->
+<!--    },-->
+<!--  },-->
+<!--  updated() {-->
+<!--    this.setDefaultCommunity()-->
+<!--  },-->
+<!--  mounted() {-->
+<!--    this.setDefaultCommunity()-->
+<!--  },-->
+<!--}-->
+<!--</script>-->
+
+<script setup>
+import { ref, computed, watch, onMounted, onUpdated } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
+import { useRoute } from 'vue-router'
+import { selectCommunities } from '@/graphql/queries'
+import { useAppToast } from '@/composables/useToast'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({}),
   },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const route = useRoute()
+const { toastError } = useAppToast()
+
+const communities = ref([])
+const validCommunityIdentifier = ref(false)
+
+const { result } = useQuery(selectCommunities)
+
+watch(result, (data) => {
+  if (data) {
+    communities.value = data.communities
+    setDefaultCommunity()
+  }
+})
+
+const communityIdentifier = computed(() => route.params.communityIdentifier)
+
+function updateCommunity(community) {
+  emit('update:modelValue', community)
 }
+
+function setDefaultCommunity() {
+  if (communityIdentifier.value && communities.value.length >= 1) {
+    const foundCommunity = communities.value.find((community) => {
+      if (
+        community.uuid === communityIdentifier.value ||
+        community.name === communityIdentifier.value
+      ) {
+        validCommunityIdentifier.value = true
+        return true
+      }
+      return false
+    })
+    if (foundCommunity) {
+      updateCommunity(foundCommunity)
+      return
+    }
+    toastError('invalid community identifier in url')
+  }
+
+  if (validCommunityIdentifier.value && !communityIdentifier.value) {
+    validCommunityIdentifier.value = false
+  }
+
+  if (props.modelValue?.uuid === '' && communities.value.length) {
+    const foundCommunity = communities.value.find((community) => !community.foreign)
+    if (foundCommunity) {
+      updateCommunity(foundCommunity)
+    }
+  }
+}
+
+onMounted(setDefaultCommunity)
+onUpdated(setDefaultCommunity)
 </script>
+
+<style scoped lang="scss">
+.community-switch {
+  :deep(button) {
+    background-color: $secondary;
+  }
+}
+</style>
diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue b/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue
index e84f9273b..ab61f6a67 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue
@@ -9,16 +9,16 @@
           :placeholder="$t('form.memo')"
           rows="3"
         ></b-form-textarea>
-        <b-row class="mt-4 mb-4">
-          <b-col>
+        <BRow class="mt-4 mb-4">
+          <BCol>
             <b-button type="reset" variant="secondary">{{ $t('form.cancel') }}</b-button>
-          </b-col>
-          <b-col class="text-right">
+          </BCol>
+          <BCol class="text-right">
             <b-button type="submit" variant="gradido" :disabled="disabled">
               {{ $t('form.reply') }}
             </b-button>
-          </b-col>
-        </b-row>
+          </BCol>
+        </BRow>
       </b-form>
     </div>
   </div>
diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
index 60f0a0819..1e31ca02b 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="contribution-messages-list-item">
     <div v-if="message.type === 'HISTORY'">
-      <b-row class="mb-3 border border-197 p-1">
-        <b-col cols="10">
+      <BRow class="mb-3 border border-197 p-1">
+        <BCol cols="10">
           <small>{{ $d(new Date(message.createdAt), 'short') }}</small>
           <div class="font-weight-bold" data-test="username" v-if="isNotModerator">
             {{ storeName.username }} {{ $t('contribution.isEdited') }}
@@ -14,30 +14,30 @@
             {{ $t('contribution.oldContribution') }}
           </div>
           <parse-message v-bind="message" data-test="message" class="p-2"></parse-message>
-        </b-col>
-        <b-col cols="2">
+        </BCol>
+        <BCol cols="2">
           <avatar :username="storeName.username" :initials="storeName.initials"></avatar>
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
     </div>
     <div v-else-if="isNotModerator" class="text-right pr-4 pr-lg-0 is-not-moderator">
-      <b-row class="mb-3">
-        <b-col cols="10">
+      <BRow class="mb-3">
+        <BCol cols="10">
           <div class="font-weight-bold" data-test="username">{{ storeName.username }}</div>
           <div class="small" data-test="date">{{ $d(new Date(message.createdAt), 'short') }}</div>
           <parse-message v-bind="message" data-test="message"></parse-message>
-        </b-col>
-        <b-col cols="2">
+        </BCol>
+        <BCol cols="2">
           <avatar :username="storeName.username" :initials="storeName.initials"></avatar>
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
     </div>
     <div v-else>
-      <b-row class="mb-3 bg-f5 p-2 is-moderator">
-        <b-col cols="2">
+      <BRow class="mb-3 bg-f5 p-2 is-moderator">
+        <BCol cols="2">
           <avatar :username="moderationName.username" :initials="moderationName.initials"></avatar>
-        </b-col>
-        <b-col cols="10">
+        </BCol>
+        <BCol cols="10">
           <div class="font-weight-bold">
             <span data-test="username">{{ moderationName.username }}</span>
             <span class="ml-2 text-success small" data-test="moderator">
@@ -47,8 +47,8 @@
 
           <div class="small" data-test="date">{{ $d(new Date(message.createdAt), 'short') }}</div>
           <parse-message v-bind="message" data-test="message"></parse-message>
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/ContributionMessages/ParseMessage.vue b/frontend/src/components/ContributionMessages/ParseMessage.vue
index 20aecf842..0d2dbf448 100644
--- a/frontend/src/components/ContributionMessages/ParseMessage.vue
+++ b/frontend/src/components/ContributionMessages/ParseMessage.vue
@@ -8,7 +8,7 @@
       </span>
       <span v-else-if="type === 'amount'">
         <br />
-        {{ text | GDD }}
+        {{ $filters.GDD(text) }}
       </span>
       <span v-else>{{ text }}</span>
     </span>
diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index cc7a4f669..1649c8ffb 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -52,10 +52,10 @@
         <input-amount
           id="contribution-amount"
           v-model="form.amount"
-          :name="$t('form.amount')"
+          name="amount"
           :label="$t('form.amount')"
           placeholder="20"
-          :rules="{ required: true, gddSendAmount: [20, validMaxGDD] }"
+          :rules="{ required: true, gddSendAmount: { min: 20, max: validMaxGDD } }"
           typ="ContributionForm"
         ></input-amount>
 
diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue
index 0afa5546e..abf42dbe0 100644
--- a/frontend/src/components/Contributions/ContributionListItem.vue
+++ b/frontend/src/components/Contributions/ContributionListItem.vue
@@ -4,8 +4,8 @@
       class="contribution-list-item bg-white appBoxShadow gradido-border-radius pt-3 px-3"
       :class="status === 'IN_PROGRESS' && !allContribution ? 'pulse border border-205' : ''"
     >
-      <b-row>
-        <b-col cols="3" lg="2" md="2">
+      <BRow>
+        <BCol cols="3" lg="2" md="2">
           <avatar
             v-if="firstName"
             :username="username.username"
@@ -13,9 +13,9 @@
             color="#fff"
             class="font-weight-bold"
           ></avatar>
-          <b-avatar v-else :icon="icon" :variant="variant" size="3em"></b-avatar>
-        </b-col>
-        <b-col>
+          <BAvatar v-else :icon="icon" :variant="variant" size="3em"></BAvatar>
+        </BCol>
+        <BCol>
           <div v-if="firstName" class="mr-3 font-weight-bold">
             {{ firstName }} {{ lastName }}
             <b-icon :icon="icon" :variant="variant"></b-icon>
@@ -35,31 +35,32 @@
           >
             {{ $t('contribution.alert.answerQuestion') }}
           </div>
-        </b-col>
-        <b-col cols="9" lg="3" offset="3" offset-md="0" offset-lg="0">
+        </BCol>
+        <BCol cols="9" lg="3" offset="3" offset-md="0" offset-lg="0">
           <div class="small">
             {{ $t('creation') }} {{ $t('(') }}{{ amount / 20 }} {{ $t('h') }}{{ $t(')') }}
           </div>
           <div v-if="status === 'DENIED' && allContribution" class="font-weight-bold">
-            <b-icon icon="x-circle" variant="danger"></b-icon>
+            <!--            <b-icon icon="x-circle" variant="danger"></b-icon>-->
+            <IBiXCircle />
             {{ $t('contribution.alert.denied') }}
           </div>
           <div v-if="status === 'DELETED'" class="small">
             {{ $t('contribution.deleted') }}
           </div>
-          <div v-else class="font-weight-bold">{{ amount | GDD }}</div>
-        </b-col>
-        <b-col cols="12" md="1" lg="1" class="text-right align-items-center">
+          <div v-else class="font-weight-bold">{{ $filters.GDD(amount) }}</div>
+        </BCol>
+        <BCol cols="12" md="1" lg="1" class="text-right align-items-center">
           <div v-if="messagesCount > 0 && !moderatorId" @click="visible = !visible">
             <collapse-icon class="text-right" :visible="visible" />
           </div>
-        </b-col>
-      </b-row>
-      <b-row
+        </BCol>
+      </BRow>
+      <BRow
         v-if="(!['CONFIRMED', 'DELETED'].includes(status) && !allContribution) || messagesCount > 0"
         class="p-2"
       >
-        <b-col cols="3" class="mr-auto text-center">
+        <BCol cols="3" class="mr-auto text-center">
           <div
             v-if="!['CONFIRMED', 'DELETED'].includes(status) && !allContribution && !moderatorId"
             class="test-delete-contribution pointer mr-3"
@@ -69,8 +70,8 @@
 
             <div>{{ $t('delete') }}</div>
           </div>
-        </b-col>
-        <b-col cols="3" class="text-center">
+        </BCol>
+        <BCol cols="3" class="text-center">
           <div
             v-if="!['CONFIRMED', 'DELETED'].includes(status) && !allContribution && !moderatorId"
             class="test-edit-contribution pointer mr-3"
@@ -83,19 +84,21 @@
               })
             "
           >
-            <b-icon icon="pencil"></b-icon>
+            <!--            <b-icon icon="pencil"></b-icon>-->
+            <IBiPencil />
             <div>{{ $t('edit') }}</div>
           </div>
-        </b-col>
-        <b-col cols="6" class="text-center">
+        </BCol>
+        <BCol cols="6" class="text-center">
           <div v-if="messagesCount > 0 && !moderatorId" class="pointer" @click="visible = !visible">
-            <b-icon icon="chat-dots"></b-icon>
+            <!--            <b-icon icon="chat-dots"></b-icon>-->
+            <IBiChatDots />
             <div>{{ $t('moderatorChat') }}</div>
           </div>
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
       <div v-else class="pb-3"></div>
-      <b-collapse :id="collapsId" class="mt-2" v-model="visible">
+      <BCollapse :id="collapsId" class="mt-2" v-model="visible">
         <contribution-messages-list
           :messages="messages_get"
           :status="status"
@@ -103,7 +106,7 @@
           @get-list-contribution-messages="getListContributionMessages"
           @update-status="updateStatus"
         />
-      </b-collapse>
+      </BCollapse>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/Contributions/OpenCreationsAmount.vue b/frontend/src/components/Contributions/OpenCreationsAmount.vue
index 5f49f5474..e1cdbd3ec 100644
--- a/frontend/src/components/Contributions/OpenCreationsAmount.vue
+++ b/frontend/src/components/Contributions/OpenCreationsAmount.vue
@@ -1,34 +1,34 @@
 <template>
   <div class="bg-white appBoxShadow gradido-border-radius p-3">
     <div class="pl-3">
-      <b-row class="small">
-        <b-col>{{ $t('time.months') }}</b-col>
-        <b-col class="d-none d-md-inline">{{ $t('status') }}</b-col>
-        <b-col class="d-none d-md-inline text-center">{{ $t('submitted') }}</b-col>
-        <b-col class="text-center">{{ $t('openHours') }}</b-col>
-      </b-row>
+      <BRow class="small">
+        <BCol>{{ $t('time.months') }}</BCol>
+        <BCol class="d-none d-md-inline">{{ $t('status') }}</BCol>
+        <BCol class="d-none d-md-inline text-center">{{ $t('submitted') }}</BCol>
+        <BCol class="text-center">{{ $t('openHours') }}</BCol>
+      </BRow>
 
-      <b-row class="font-weight-bold pt-3">
-        <b-col>{{ $d(new Date(minimalDate), 'monthAndYear') }}</b-col>
-        <b-col class="d-none d-md-inline">
+      <BRow class="font-weight-bold pt-3">
+        <BCol>{{ $d(new Date(minimalDate), 'monthAndYear') }}</BCol>
+        <BCol class="d-none d-md-inline">
           {{ maxGddLastMonth > 0 ? $t('contribution.submit') : $t('maxReached') }}
-        </b-col>
-        <b-col class="d-none d-md-inline text-197 text-center">
+        </BCol>
+        <BCol class="d-none d-md-inline text-197 text-center">
           {{ hoursSubmittedLastMonth }} {{ $t('h') }}
-        </b-col>
-        <b-col class="text-4 text-center">{{ hoursAvailableLastMonth }} {{ $t('h') }}</b-col>
-      </b-row>
+        </BCol>
+        <BCol class="text-4 text-center">{{ hoursAvailableLastMonth }} {{ $t('h') }}</BCol>
+      </BRow>
 
-      <b-row class="font-weight-bold">
-        <b-col>{{ $d(new Date(), 'monthAndYear') }}</b-col>
-        <b-col class="d-none d-md-inline">
+      <BRow class="font-weight-bold">
+        <BCol>{{ $d(new Date(), 'monthAndYear') }}</BCol>
+        <BCol class="d-none d-md-inline">
           {{ maxGddThisMonth > 0 ? $t('contribution.submit') : $t('maxReached') }}
-        </b-col>
-        <b-col class="d-none d-md-inline text-197 text-center">
+        </BCol>
+        <BCol class="d-none d-md-inline text-197 text-center">
           {{ hoursSubmittedThisMonth }} {{ $t('h') }}
-        </b-col>
-        <b-col class="text-4 text-center">{{ hoursAvailableThisMonth }} {{ $t('h') }}</b-col>
-      </b-row>
+        </BCol>
+        <BCol class="text-4 text-center">{{ hoursAvailableThisMonth }} {{ $t('h') }}</BCol>
+      </BRow>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/DecayInformations/CollapseLinksList.vue b/frontend/src/components/DecayInformations/CollapseLinksList.vue
index c580fa04a..2bc65bbd4 100644
--- a/frontend/src/components/DecayInformations/CollapseLinksList.vue
+++ b/frontend/src/components/DecayInformations/CollapseLinksList.vue
@@ -11,7 +11,7 @@
             @reset-transaction-link-list="resetTransactionLinkList"
           />
           <div class="mb-3">
-            <b-button
+            <BButton
               class="test-button-load-more"
               v-if="!pending && transactionLinks.length < transactionLinkCount"
               block
@@ -19,9 +19,10 @@
               @click="loadMoreLinks"
             >
               {{ buttonText }}
-            </b-button>
+            </BButton>
             <div class="text-center">
-              <b-icon v-if="pending" icon="three-dots" animation="cylon" font-scale="4"></b-icon>
+              <!--              <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>
         </div>
@@ -57,9 +58,9 @@ export default {
   computed: {
     buttonText() {
       const i = this.transactionLinkCount - this.transactionLinks.length
-      if (i === 1) return this.$tc('link-load', 0)
-      if (i <= this.pageSize) return this.$tc('link-load', 1, { n: i })
-      return this.$tc('link-load', 2, { n: this.pageSize })
+      if (i === 1) return this.$t('link-load', 0)
+      if (i <= this.pageSize) return this.$t('link-load', 1, { n: i })
+      return this.$t('link-load', 2, { n: this.pageSize })
     },
   },
 }
diff --git a/frontend/src/components/DecayInformations/DecayInformation-Decay.vue b/frontend/src/components/DecayInformations/DecayInformation-Decay.vue
index ce679fb30..1efff6629 100644
--- a/frontend/src/components/DecayInformations/DecayInformation-Decay.vue
+++ b/frontend/src/components/DecayInformations/DecayInformation-Decay.vue
@@ -1,26 +1,27 @@
 <template>
   <div class="decayinformation-decay">
     <div class="mb-3">
-      <b-icon icon="droplet-half" class="mr-2" />
+      <!--      <b-icon icon="droplet-half" class="mr-2" />-->
+      <IBiDropletHalf class="mr-2" />
       <b>{{ $t('decay.calculation_decay') }}</b>
     </div>
-    <b-row>
-      <b-col>
-        <b-row>
-          <b-col cols="12" lg="4" md="4">
+    <BRow>
+      <BCol>
+        <BRow>
+          <BCol cols="12" lg="4" md="4">
             <div>{{ $t('decay.decay') }}</div>
-          </b-col>
-          <b-col offset="1" offset-md="0" offset-lg="0">
+          </BCol>
+          <BCol offset="1" offset-md="0" offset-lg="0">
             <div>
-              {{ previousBalance | GDD }}
+              {{ $filters.GDD(previousBalance) }}
               {{ decay === '0' ? $t('math.minus') : '' }}
-              {{ decay | GDD }} {{ $t('math.equal') }}
-              <b>{{ balance | GDD }}</b>
+              {{ $filters.GDD(decay) }} {{ $t('math.equal') }}
+              <b>{{ $filters.GDD(balance) }}</b>
             </div>
-          </b-col>
-        </b-row>
-      </b-col>
-    </b-row>
+          </BCol>
+        </BRow>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue b/frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue
index 59a98c3ae..ee37343e1 100644
--- a/frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue
+++ b/frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue
@@ -1,68 +1,68 @@
 <template>
   <div class="decayinformation-startblock">
-    <b-row>
-      <b-col cols="12">
+    <BRow>
+      <BCol cols="12">
         <div class="text-center pb-3">
           <b-icon icon="droplet-half" class="mr-2" />
           <b>{{ $t('decay.Starting_block_decay') }}</b>
         </div>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col offset="1" cols="11">
-        <b-row>
-          <b-col cols="5">
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol offset="1" cols="11">
+        <BRow>
+          <BCol cols="5">
             <div class="text-right">
               <div>{{ $t('decay.decay_introduced') }}</div>
             </div>
-          </b-col>
-          <b-col cols="5">
+          </BCol>
+          <BCol cols="5">
             <div>
               <span v-if="decay.start">
                 {{ $d(new Date(decay.start), 'long') }}
               </span>
             </div>
-          </b-col>
-        </b-row>
+          </BCol>
+        </BRow>
         <duration-row :decayStart="decay.start" :decayEnd="decay.end" />
 
         <!-- Decay-->
-        <b-row>
-          <b-col cols="5" class="text-right">{{ $t('decay.decay') }}</b-col>
-          <b-col cols="7">{{ decay.decay | GDD }}</b-col>
-        </b-row>
-      </b-col>
-    </b-row>
+        <BRow>
+          <BCol cols="5" class="text-right">{{ $t('decay.decay') }}</BCol>
+          <BCol cols="7">{{ $filters.GDD(decay.decay) }}</BCol>
+        </BRow>
+      </BCol>
+    </BRow>
     <hr class="mt-3 mb-3" />
 
-    <b-row>
-      <b-col class="text-center pb-3">
+    <BRow>
+      <BCol class="text-center pb-3">
         <b>{{ $t('decay.calculation_total') }}</b>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
 
     <!-- Type-->
-    <b-row>
-      <b-col offset="1" cols="11">
-        <b-row>
+    <BRow>
+      <BCol offset="1" cols="11">
+        <BRow>
           <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-          <b-col cols="5" class="text-right">{{ $t(`decay.types.${typeId.toLowerCase()}`) }}</b-col>
-          <b-col cols="7">{{ amount | GDD }}</b-col>
-        </b-row>
+          <BCol cols="5" class="text-right">{{ $t(`decay.types.${typeId.toLowerCase()}`) }}</BCol>
+          <BCol cols="7">{{ $filters.GDD(amount) }}</BCol>
+        </BRow>
         <!-- Decay-->
-        <b-row>
-          <b-col cols="5" class="text-right">{{ $t('decay.decay') }}</b-col>
-          <b-col cols="7">{{ decay.decay | GDD }}</b-col>
-        </b-row>
+        <BRow>
+          <BCol cols="5" class="text-right">{{ $t('decay.decay') }}</BCol>
+          <BCol cols="7">{{ $filters.GDD(decay.decay) }}</BCol>
+        </BRow>
         <!-- Total-->
-        <b-row>
-          <b-col cols="5" class="text-right">{{ $t('decay.total') }}</b-col>
-          <b-col cols="7">
-            <b>{{ (Number(amount) + Number(decay.decay)) | GDD }}</b>
-          </b-col>
-        </b-row>
-      </b-col>
-    </b-row>
+        <BRow>
+          <BCol cols="5" class="text-right">{{ $t('decay.total') }}</BCol>
+          <BCol cols="7">
+            <b>{{ $filters.GDD(Number(amount) + Number(decay.decay)) }}</b>
+          </BCol>
+        </BRow>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/DecayInformations/DecayInformation-Long.vue b/frontend/src/components/DecayInformations/DecayInformation-Long.vue
index d4ff66af0..ea5b48e28 100644
--- a/frontend/src/components/DecayInformations/DecayInformation-Long.vue
+++ b/frontend/src/components/DecayInformations/DecayInformation-Long.vue
@@ -5,70 +5,70 @@
       <div class="">{{ memo }}</div>
     </div>
     <div class="mb-3">
-      <b-icon icon="droplet-half" class="mr-2" />
+      <IBiDropletHalf class="mr-2" />
       <b>{{ $t('decay.calculation_decay') }}</b>
     </div>
-    <b-row>
-      <b-col>
-        <b-row>
-          <b-col cols="6" lg="4" md="6" sm="6">
+    <BRow>
+      <BCol>
+        <BRow>
+          <BCol cols="6" lg="4" md="6" sm="6">
             <div>{{ $t('decay.last_transaction') }}</div>
-          </b-col>
-          <b-col offset="0" class="text-right mr-0">
+          </BCol>
+          <BCol offset="0" class="text-right mr-0">
             <div>
               <span>
                 {{ $d(new Date(decay.start), 'long') }}
               </span>
             </div>
-          </b-col>
-        </b-row>
+          </BCol>
+        </BRow>
         <duration-row :decayStart="decay.start" :decayEnd="decay.end" />
 
         <!-- Previous Balance -->
-        <b-row class="mt-2">
-          <b-col cols="6" lg="4" md="6" sm="6">
+        <BRow class="mt-2">
+          <BCol cols="6" lg="4" md="6" sm="6">
             <div>{{ $t('decay.old_balance') }}</div>
-          </b-col>
-          <b-col offset="0" class="text-right mr-0">
-            {{ previousBalance | GDD }}
-          </b-col>
-        </b-row>
+          </BCol>
+          <BCol offset="0" class="text-right mr-0">
+            {{ $filters.GDD(previousBalance) }}
+          </BCol>
+        </BRow>
 
         <!-- Decay-->
-        <b-row class="mt-0">
-          <b-col cols="6" lg="3" md="6" sm="6">
+        <BRow class="mt-0">
+          <BCol cols="6" lg="3" md="6" sm="6">
             <div>{{ $t('decay.decay') }}</div>
-          </b-col>
-          <b-col offset="0" class="text-right mr-0">
-            {{ decay.decay | GDD }}
-          </b-col>
-        </b-row>
-      </b-col>
-    </b-row>
+          </BCol>
+          <BCol offset="0" class="text-right mr-0">
+            {{ $filters.GDD(decay.decay) }}
+          </BCol>
+        </BRow>
+      </BCol>
+    </BRow>
     <!-- Type-->
-    <b-row>
-      <b-col>
-        <b-row class="mb-2">
+    <BRow>
+      <BCol>
+        <BRow class="mb-2">
           <!-- eslint-disable @intlify/vue-i18n/no-dynamic-keys-->
-          <b-col cols="6" lg="3" md="6" sm="6">
+          <BCol cols="6" lg="3" md="6" sm="6">
             {{ $t(`decay.types.${typeId.toLowerCase()}`) }}
-          </b-col>
+          </BCol>
           <!-- eslint-enable @intlify/vue-i18n/no-dynamic-keys-->
-          <b-col offset="0" class="text-right mr-0">
-            {{ amount | GDD }}
-          </b-col>
-        </b-row>
+          <BCol offset="0" class="text-right mr-0">
+            {{ $filters.GDD(amount) }}
+          </BCol>
+        </BRow>
         <!-- Total-->
-        <b-row class="border-top pt-2">
-          <b-col cols="6" lg="3" md="6" sm="6">
+        <BRow class="border-top pt-2">
+          <BCol cols="6" lg="3" md="6" sm="6">
             <div>{{ $t('decay.new_balance') }}</div>
-          </b-col>
-          <b-col offset="0" class="text-right mr-0">
-            <b>{{ balance | GDD }}</b>
-          </b-col>
-        </b-row>
-      </b-col>
-    </b-row>
+          </BCol>
+          <BCol offset="0" class="text-right mr-0">
+            <b>{{ $filters.GDD(balance) }}</b>
+          </BCol>
+        </BRow>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/DecayInformations/DecayInformation-Short.vue b/frontend/src/components/DecayInformations/DecayInformation-Short.vue
index ba1f16d72..fde349729 100644
--- a/frontend/src/components/DecayInformations/DecayInformation-Short.vue
+++ b/frontend/src/components/DecayInformations/DecayInformation-Short.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="decayinformation-short">
-    <span v-if="decay">{{ decay | GDD }}</span>
+    <span v-if="decay">{{ $filters.GDD(decay) }}</span>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/GddSend/TransactionConfirmationLink.vue b/frontend/src/components/GddSend/TransactionConfirmationLink.vue
index 984d27e2d..1a4d99045 100644
--- a/frontend/src/components/GddSend/TransactionConfirmationLink.vue
+++ b/frontend/src/components/GddSend/TransactionConfirmationLink.vue
@@ -9,7 +9,7 @@
         </BCol>
         <BCol cols="3">
           <div class="small">{{ $t('send_gdd') }}</div>
-          <div>{{ amount | GDD }}</div>
+          <div>{{ $filters.GDD(amount) }}</div>
         </BCol>
       </BRow>
 
@@ -21,19 +21,19 @@
       </BRow>
       <BRow class="pr-3" offset="2">
         <BCol offset="2">{{ $t('form.current_balance') }}</BCol>
-        <BCol>{{ balance | GDD }}</BCol>
+        <BCol>{{ $filters.GDD(balance) }}</BCol>
       </BRow>
       <BRow class="pr-3">
         <BCol offset="2">
           <strong>{{ $t('form.your_amount') }}</strong>
         </BCol>
         <BCol class="borderbottom">
-          <strong>{{ (amount * -1) | GDD }}</strong>
+          <strong>{{ $filters.GDD(amount * -1) }}</strong>
         </BCol>
       </BRow>
       <BRow class="pr-3">
         <BCol offset="2">{{ $t('form.new_balance') }}</BCol>
-        <BCol>{{ (balance - amount) | GDD }}</BCol>
+        <BCol>{{ $filters.GDD(balance - amount) }}</BCol>
       </BRow>
       <BRow class="mt-5">
         <BCol cols="12" md="6" lg="6">
diff --git a/frontend/src/components/GddSend/TransactionConfirmationSend.vue b/frontend/src/components/GddSend/TransactionConfirmationSend.vue
index 6b5105761..07d9b0571 100644
--- a/frontend/src/components/GddSend/TransactionConfirmationSend.vue
+++ b/frontend/src/components/GddSend/TransactionConfirmationSend.vue
@@ -2,66 +2,67 @@
   <div class="transaction-confirm-send">
     <div class="bg-white appBoxShadow gradido-border-radius p-3">
       <div class="h3 mb-4">{{ $t('form.send_check') }}</div>
-      <b-row class="mt-5">
-        <b-col cols="12">
-          <b-row class="mt-3">
-            <b-col class="h5">{{ $t('form.recipientCommunity') }}</b-col>
-            <b-col>{{ targetCommunity.name }}</b-col>
-          </b-row>
-          <b-row>
-            <b-col class="h5">{{ $t('form.recipient') }}</b-col>
-            <b-col>{{ userName ? userName : identifier }}</b-col>
-          </b-row>
-          <b-row>
-            <b-col class="h5">{{ $t('form.amount') }}</b-col>
-            <b-col>{{ amount | GDD }}</b-col>
-          </b-row>
-          <b-row>
-            <b-col class="h5">{{ $t('form.memo') }}</b-col>
-            <b-col>{{ memo }}</b-col>
-          </b-row>
-        </b-col>
-      </b-row>
+      <BRow class="mt-5">
+        <BCol cols="12">
+          <BRow class="mt-3">
+            <BCol class="h5">{{ $t('form.recipientCommunity') }}</BCol>
+            <BCol>{{ targetCommunity.name }}</BCol>
+          </BRow>
+          <BRow>
+            <BCol class="h5">{{ $t('form.recipient') }}</BCol>
+            <BCol>{{ userName ? userName : identifier }}</BCol>
+          </BRow>
+          <BRow>
+            <BCol class="h5">{{ $t('form.amount') }}</BCol>
+            <BCol>{{ $filters.GDD(amount) }}</BCol>
+          </BRow>
+          <BRow>
+            <BCol class="h5">{{ $t('form.memo') }}</BCol>
+            <BCol>{{ memo }}</BCol>
+          </BRow>
+        </BCol>
+      </BRow>
 
-      <b-row class="mt-5 text-color-gdd-yellow h3">
-        <b-col cols="2" class="text-right">
-          <b-icon class="text-color-gdd-yellow" icon="droplet-half"></b-icon>
-        </b-col>
-        <b-col>{{ $t('advanced-calculation') }}</b-col>
-      </b-row>
-      <b-row class="pr-3" offset="2">
-        <b-col offset="2">{{ $t('form.current_balance') }}</b-col>
-        <b-col>{{ balance | GDD }}</b-col>
-      </b-row>
-      <b-row class="pr-3">
-        <b-col offset="2">
+      <BRow class="mt-5 text-color-gdd-yellow h3">
+        <BCol cols="2" class="text-right">
+          <!--          <b-icon class="text-color-gdd-yellow" icon="droplet-half"></b-icon>-->
+          <IBiDropletHalf />
+        </BCol>
+        <BCol>{{ $t('advanced-calculation') }}</BCol>
+      </BRow>
+      <BRow class="pr-3" offset="2">
+        <BCol offset="2">{{ $t('form.current_balance') }}</BCol>
+        <BCol>{{ $filters.GDD(balance) }}</BCol>
+      </BRow>
+      <BRow class="pr-3">
+        <BCol offset="2">
           <strong>{{ $t('form.your_amount') }}</strong>
-        </b-col>
-        <b-col class="borderbottom">
-          <strong>{{ (amount * -1) | GDD }}</strong>
-        </b-col>
-      </b-row>
-      <b-row class="pr-3">
-        <b-col offset="2">{{ $t('form.new_balance') }}</b-col>
-        <b-col>{{ (balance - amount) | GDD }}</b-col>
-      </b-row>
-      <b-row class="mt-5">
-        <b-col cols="12" md="6" lg="6">
-          <b-button block @click="$emit('on-back')" class="mb-3 mb-md-0 mb-lg-0">
+        </BCol>
+        <BCol class="borderbottom">
+          <strong>{{ $filters.GDD(amount * -1) }}</strong>
+        </BCol>
+      </BRow>
+      <BRow class="pr-3">
+        <BCol offset="2">{{ $t('form.new_balance') }}</BCol>
+        <BCol>{{ $filters.GDD(balance - amount) }}</BCol>
+      </BRow>
+      <BRow class="mt-5">
+        <BCol cols="12" md="6" lg="6">
+          <BButton block @click="$emit('on-back')" class="mb-3 mb-md-0 mb-lg-0">
             {{ $t('back') }}
-          </b-button>
-        </b-col>
-        <b-col cols="12" md="6" lg="6" class="text-lg-right">
-          <b-button
+          </BButton>
+        </BCol>
+        <BCol cols="12" md="6" lg="6" class="text-lg-right">
+          <BButton
             block
             variant="gradido"
             :disabled="disabled"
             @click="$emit('send-transaction'), (disabled = true)"
           >
             {{ $t('form.send_now') }}
-          </b-button>
-        </b-col>
-      </b-row>
+          </BButton>
+        </BCol>
+      </BRow>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/GddSend/TransactionForm.vue b/frontend/src/components/GddSend/TransactionForm.vue
index ec240d714..9e9c0d6bd 100644
--- a/frontend/src/components/GddSend/TransactionForm.vue
+++ b/frontend/src/components/GddSend/TransactionForm.vue
@@ -3,141 +3,266 @@
     <BRow>
       <BCol cols="12">
         <BCard class="appBoxShadow gradido-border-radius" body-class="p-4">
-          <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
-            <BForm role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
-              <BFormRadioGroup v-model="radioSelected">
-                <BRow class="mb-4">
-                  <BCol cols="12" lg="6">
-                    <BRow class="bg-248 gradido-border-radius pt-lg-2 mr-lg-2">
-                      <BCol cols="10" @click="radioSelected = sendTypes.send" class="pointer">
-                        {{ $t('send_gdd') }}
-                      </BCol>
-                      <BCol cols="2">
-                        <b-form-radio
-                          name="shipping"
-                          size="lg"
-                          :value="sendTypes.send"
-                          stacked
-                          class="custom-radio-button pointer"
-                        ></b-form-radio>
-                      </BCol>
-                    </BRow>
-                  </BCol>
-                  <BCol>
-                    <BRow class="bg-248 gradido-border-radius pt-lg-2 ml-lg-2 mt-2 mt-lg-0">
-                      <BCol cols="10" @click="radioSelected = sendTypes.link" class="pointer">
-                        {{ $t('send_per_link') }}
-                      </BCol>
-                      <BCol cols="2" class="pointer">
-                        <BFormRadio
-                          name="shipping"
-                          :value="sendTypes.link"
-                          size="lg"
-                          class="custom-radio-button"
-                        />
-                      </BCol>
-                    </BRow>
-                  </BCol>
-                </BRow>
-              </BFormRadioGroup>
-              <div class="mt-4 mb-4" v-if="radioSelected === sendTypes.link">
-                <h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
-                <div>
-                  {{ $t('gdd_per_link.choose-amount') }}
-                </div>
-              </div>
-              <BRow>
+          <BForm role="form" @submit.prevent="onSubmit" @reset="onReset">
+            <pre>{{ radioSelected }}</pre>
+            <BFormRadioGroup
+              name="shipping"
+              :model-value="radioSelected"
+              @update:model-value="radioSelected = $event"
+            >
+              <BRow class="mb-4">
+                <BCol cols="12" lg="6">
+                  <BRow class="bg-248 gradido-border-radius pt-lg-2 mr-lg-2">
+                    <BFormRadio
+                      name="shipping"
+                      size="sm"
+                      reverse
+                      :value="SEND_TYPES.send"
+                      class="custom-radio-button pointer"
+                    >
+                      {{ $t('send_gdd') }}
+                    </BFormRadio>
+                  </BRow>
+                </BCol>
                 <BCol>
-                  <BRow>
-                    <BCol class="mb-4" cols="12" v-if="radioSelected === sendTypes.send">
-                      <BRow>
-                        <BCol>{{ $t('form.recipientCommunity') }}</BCol>
-                      </BRow>
-                      <BRow>
-                        <BCol class="font-weight-bold">
-                          <community-switch
-                            v-model="form.targetCommunity"
-                            :disabled="isBalanceDisabled"
-                          />
-                        </BCol>
-                      </BRow>
-                    </BCol>
-                    <BCol cols="12" v-if="radioSelected === sendTypes.send">
-                      <div v-if="!userIdentifier">
-                        <input-identifier
-                          :name="$t('form.recipient')"
-                          :label="$t('form.recipient')"
-                          :placeholder="$t('form.identifier')"
-                          v-model="form.identifier"
-                          :disabled="isBalanceDisabled"
-                          @onValidation="onValidation"
-                        />
-                      </div>
-                      <div v-else class="mb-4">
-                        <BRow>
-                          <BCol>{{ $t('form.recipient') }}</BCol>
-                        </BRow>
-                        <BRow>
-                          <BCol class="font-weight-bold">{{ userName }}</BCol>
-                        </BRow>
-                      </div>
-                    </BCol>
-                    <BCol cols="12" lg="6">
-                      <input-amount
-                        v-model="form.amount"
-                        :name="$t('form.amount')"
-                        :label="$t('form.amount')"
-                        :placeholder="'0.01'"
-                        :rules="{ required: true, gddSendAmount: [0.01, balance] }"
-                        typ="TransactionForm"
-                        :disabled="isBalanceDisabled"
-                      ></input-amount>
-                    </BCol>
+                  <BRow class="bg-248 gradido-border-radius pt-lg-2 ml-lg-2 mt-2 mt-lg-0">
+                    <BFormRadio
+                      name="shipping"
+                      :value="SEND_TYPES.link"
+                      size="sm"
+                      reverse
+                      class="custom-radio-button"
+                    >
+                      {{ $t('send_per_link') }}
+                    </BFormRadio>
                   </BRow>
                 </BCol>
               </BRow>
-
-              <BRow>
-                <BCol>
-                  <input-textarea
-                    v-model="form.memo"
-                    :name="$t('form.message')"
-                    :label="$t('form.message')"
-                    :placeholder="$t('form.message')"
-                    :rules="{ required: true, min: 5, max: 255 }"
-                    :disabled="isBalanceDisabled"
-                  />
-                </BCol>
-              </BRow>
-              <div v-if="!!isBalanceDisabled" class="text-danger mt-5">
-                {{ $t('form.no_gdd_available') }}
+            </BFormRadioGroup>
+            <div class="mt-4 mb-4" v-if="radioSelected === SEND_TYPES.link">
+              <h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
+              <div>
+                {{ $t('gdd_per_link.choose-amount') }}
               </div>
-              <BRow v-else class="test-buttons mt-3">
-                <BCol cols="12" md="6" lg="6">
-                  <b-button
-                    block
-                    type="reset"
-                    variant="secondary"
-                    @click="onReset"
-                    class="mb-3 mb-md-0 mb-lg-0"
-                  >
-                    {{ $t('form.reset') }}
-                  </b-button>
-                </BCol>
-                <BCol cols="12" md="6" lg="6" class="text-lg-right">
-                  <b-button block type="submit" variant="gradido">
-                    {{ $t('form.check_now') }}
-                  </b-button>
-                </BCol>
-              </BRow>
-            </BForm>
-          </validation-observer>
+            </div>
+            <BRow>
+              <BCol>
+                <BRow>
+                  <BCol class="mb-4" cols="12" v-if="radioSelected === SEND_TYPES.send">
+                    <BRow>
+                      <BCol>{{ $t('form.recipientCommunity') }}</BCol>
+                    </BRow>
+                    <BRow>
+                      <BCol class="font-weight-bold">
+                        <community-switch
+                          :disabled="isBalanceDisabled"
+                          :model-value="targetCommunity"
+                          @update:model-value="targetCommunity = $event"
+                        />
+                        <pre>{{ values }}</pre>
+                      </BCol>
+                    </BRow>
+                  </BCol>
+                  <BCol cols="12" v-if="radioSelected === SEND_TYPES.send">
+                    <div v-if="!userIdentifier">
+                      <input-identifier
+                        name="identifier"
+                        :label="$t('form.recipient')"
+                        :placeholder="$t('form.identifier')"
+                        :disabled="isBalanceDisabled"
+                      />
+                    </div>
+                    <div v-else class="mb-4">
+                      <BRow>
+                        <BCol>{{ $t('form.recipient') }}</BCol>
+                      </BRow>
+                      <BRow>
+                        <BCol class="font-weight-bold">{{ userName }}</BCol>
+                      </BRow>
+                    </div>
+                  </BCol>
+                  <BCol cols="12" lg="6">
+                    <input-amount
+                      name="amount"
+                      :label="$t('form.amount')"
+                      :placeholder="'0.01'"
+                      :rules="{ required: true, gddSendAmount: { min: 0.01, max: balance } }"
+                      :disabled="isBalanceDisabled"
+                    ></input-amount>
+                  </BCol>
+                </BRow>
+              </BCol>
+            </BRow>
+
+            <BRow>
+              <BCol>
+                <input-textarea
+                  name="memo"
+                  :label="$t('form.message')"
+                  :placeholder="$t('form.message')"
+                  :rules="{ required: true, min: 5, max: 255 }"
+                  :disabled="isBalanceDisabled"
+                />
+              </BCol>
+            </BRow>
+            <div v-if="!!isBalanceDisabled" class="text-danger mt-5">
+              {{ $t('form.no_gdd_available') }}
+            </div>
+            <BRow v-else class="test-buttons mt-3">
+              <BCol cols="12" md="6" lg="6">
+                <BButton
+                  block
+                  type="reset"
+                  variant="secondary"
+                  @click="onReset"
+                  class="mb-3 mb-md-0 mb-lg-0"
+                >
+                  {{ $t('form.reset') }}
+                </BButton>
+              </BCol>
+              <BCol cols="12" md="6" lg="6" class="text-lg-right">
+                <BButton block type="submit" variant="gradido">
+                  {{ $t('form.check_now') }}
+                </BButton>
+              </BCol>
+            </BRow>
+          </BForm>
         </BCard>
       </BCol>
     </BRow>
   </div>
 </template>
-<script>
+<!--<script>-->
+<!--import { SEND_TYPES } from '@/pages/Send'-->
+<!--import InputIdentifier from '@/components/Inputs/InputIdentifier'-->
+<!--import InputAmount from '@/components/Inputs/InputAmount'-->
+<!--import InputTextarea from '@/components/Inputs/InputTextarea'-->
+<!--import CommunitySwitch from '@/components/CommunitySwitch.vue'-->
+<!--import { user } from '@/graphql/queries'-->
+<!--import CONFIG from '@/config'-->
+
+<!--export default {-->
+<!--  name: 'TransactionForm',-->
+<!--  components: {-->
+<!--    InputIdentifier,-->
+<!--    InputAmount,-->
+<!--    InputTextarea,-->
+<!--    CommunitySwitch,-->
+<!--  },-->
+<!--  props: {-->
+<!--    balance: { type: Number, default: 0 },-->
+<!--    identifier: { type: String, default: '' },-->
+<!--    amount: { type: Number, default: 0 },-->
+<!--    memo: { type: String, default: '' },-->
+<!--    selected: { type: String, default: 'send' },-->
+<!--    targetCommunity: {-->
+<!--      type: Object,-->
+<!--      default: function () {-->
+<!--        return { uuid: '', name: CONFIG.COMMUNITY_NAME }-->
+<!--      },-->
+<!--    },-->
+<!--  },-->
+<!--  data() {-->
+<!--    return {-->
+<!--      form: {-->
+<!--        identifier: this.identifier,-->
+<!--        amount: this.amount ? String(this.amount) : '',-->
+<!--        memo: this.memo,-->
+<!--        targetCommunity: this.targetCommunity,-->
+<!--      },-->
+<!--      radioSelected: this.selected,-->
+<!--      userName: '',-->
+<!--      recipientCommunity: { uuid: '', name: '' },-->
+<!--    }-->
+<!--  },-->
+<!--  methods: {-->
+<!--    onValidation() {-->
+<!--      this.$refs.formValidator.validate()-->
+<!--    },-->
+<!--    onSubmit() {-->
+<!--      if (this.userIdentifier) this.form.identifier = this.userIdentifier.identifier-->
+<!--      this.$emit('set-transaction', {-->
+<!--        selected: this.radioSelected,-->
+<!--        identifier: this.form.identifier,-->
+<!--        amount: Number(this.form.amount.replace(',', '.')),-->
+<!--        memo: this.form.memo,-->
+<!--        userName: this.userName,-->
+<!--        targetCommunity: this.form.targetCommunity,-->
+<!--      })-->
+<!--    },-->
+<!--    onReset(event) {-->
+<!--      event.preventDefault()-->
+<!--      this.form.identifier = ''-->
+<!--      this.form.amount = ''-->
+<!--      this.form.memo = ''-->
+<!--      this.form.targetCommunity = { uuid: '', name: COMMUNITY_NAME }-->
+<!--      this.$refs.formValidator.validate()-->
+<!--      this.$router.replace('/send')-->
+<!--    },-->
+<!--  },-->
+<!--  apollo: {-->
+<!--    UserName: {-->
+<!--      query() {-->
+<!--        return user-->
+<!--      },-->
+<!--      fetchPolicy: 'network-only',-->
+<!--      variables() {-->
+<!--        return this.userIdentifier-->
+<!--      },-->
+<!--      skip() {-->
+<!--        return !this.userIdentifier-->
+<!--      },-->
+<!--      update({ user }) {-->
+<!--        this.userName = `${user.firstName} ${user.lastName}`-->
+<!--      },-->
+<!--      error({ message }) {-->
+<!--        this.toastError(message)-->
+<!--      },-->
+<!--    },-->
+<!--  },-->
+<!--  computed: {-->
+<!--    disabled() {-->
+<!--      if (-->
+<!--        this.form.identifier.length > 5 &&-->
+<!--        parseInt(this.form.amount) <= parseInt(this.balance) &&-->
+<!--        this.form.memo.length > 5 &&-->
+<!--        this.form.memo.length <= 255-->
+<!--      ) {-->
+<!--        return false-->
+<!--      }-->
+<!--      return true-->
+<!--    },-->
+<!--    isBalanceDisabled() {-->
+<!--      return this.balance <= 0 ? 'disabled' : false-->
+<!--    },-->
+<!--    sendTypes() {-->
+<!--      return SEND_TYPES-->
+<!--    },-->
+<!--    userIdentifier() {-->
+<!--      if (-->
+<!--        this.$route.params &&-->
+<!--        this.$route.params.userIdentifier &&-->
+<!--        this.$route.params.communityIdentifier-->
+<!--      ) {-->
+<!--        return {-->
+<!--          identifier: this.$route.params.userIdentifier,-->
+<!--          communityIdentifier: this.$route.params.communityIdentifier,-->
+<!--        }-->
+<!--      }-->
+<!--      return null-->
+<!--    },-->
+<!--  },-->
+<!--  mounted() {-->
+<!--    if (this.form.identifier !== '') this.$refs.formValidator.validate()-->
+<!--  },-->
+<!--}-->
+<!--</script>-->
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useQuery } from '@vue/apollo-composable'
+import { useForm } from 'vee-validate'
 import { SEND_TYPES } from '@/pages/Send'
 import InputIdentifier from '@/components/Inputs/InputIdentifier'
 import InputAmount from '@/components/Inputs/InputAmount'
@@ -145,123 +270,102 @@ import InputTextarea from '@/components/Inputs/InputTextarea'
 import CommunitySwitch from '@/components/CommunitySwitch.vue'
 import { user } from '@/graphql/queries'
 import CONFIG from '@/config'
+import { useAppToast } from '@/composables/useToast'
 
-export default {
-  name: 'TransactionForm',
-  components: {
-    InputIdentifier,
-    InputAmount,
-    InputTextarea,
-    CommunitySwitch,
+const props = defineProps({
+  balance: { type: Number, default: 0 },
+  identifier: { type: String, default: '' },
+  amount: { type: Number, default: 0 },
+  memo: { type: String, default: '' },
+  selected: { type: String, default: 'send' },
+  targetCommunity: {
+    type: Object,
+    default: () => ({ uuid: '', name: CONFIG.COMMUNITY_NAME }),
   },
-  props: {
-    balance: { type: Number, default: 0 },
-    identifier: { type: String, default: '' },
-    amount: { type: Number, default: 0 },
-    memo: { type: String, default: '' },
-    selected: { type: String, default: 'send' },
-    targetCommunity: {
-      type: Object,
-      default: function () {
-        return { uuid: '', name: CONFIG.COMMUNITY_NAME }
-      },
-    },
+})
+
+const emit = defineEmits(['set-transaction'])
+
+const route = useRoute()
+const router = useRouter()
+const { toastError } = useAppToast()
+
+const radioSelected = ref(props.selected)
+const userName = ref('')
+const recipientCommunity = ref({ uuid: '', name: '' })
+
+// Use vee-validate's useForm
+const { handleSubmit, values, meta, resetForm, defineField } = useForm({
+  initialValues: {
+    identifier: props.identifier,
+    amount: props.amount ? String(props.amount) : '',
+    memo: props.memo,
+    targetCommunity: props.targetCommunity,
   },
-  data() {
+})
+
+const [targetCommunity, targetCommunityProps] = defineField('targetCommunity')
+
+const userIdentifier = computed(() => {
+  if (route.params.userIdentifier && route.params.communityIdentifier) {
     return {
-      form: {
-        identifier: this.identifier,
-        amount: this.amount ? String(this.amount) : '',
-        memo: this.memo,
-        targetCommunity: this.targetCommunity,
-      },
-      radioSelected: this.selected,
-      userName: '',
-      recipientCommunity: { uuid: '', name: '' },
+      identifier: route.params.userIdentifier,
+      communityIdentifier: route.params.communityIdentifier,
+    }
+  }
+  return null
+})
+
+const isBalanceDisabled = computed(() => props.balance <= 0)
+
+const { result: userResult, error: userError } = useQuery(
+  user,
+  () => userIdentifier.value,
+  () => ({ enabled: !!userIdentifier.value }),
+)
+
+watch(
+  () => userResult.value?.user,
+  (user) => {
+    if (user) {
+      userName.value = `${user.firstName} ${user.lastName}`
     }
   },
-  methods: {
-    onValidation() {
-      this.$refs.formValidator.validate()
-    },
-    onSubmit() {
-      if (this.userIdentifier) this.form.identifier = this.userIdentifier.identifier
-      this.$emit('set-transaction', {
-        selected: this.radioSelected,
-        identifier: this.form.identifier,
-        amount: Number(this.form.amount.replace(',', '.')),
-        memo: this.form.memo,
-        userName: this.userName,
-        targetCommunity: this.form.targetCommunity,
-      })
-    },
-    onReset(event) {
-      event.preventDefault()
-      this.form.identifier = ''
-      this.form.amount = ''
-      this.form.memo = ''
-      this.form.targetCommunity = { uuid: '', name: COMMUNITY_NAME }
-      this.$refs.formValidator.validate()
-      this.$router.replace('/send')
-    },
-  },
-  apollo: {
-    UserName: {
-      query() {
-        return user
-      },
-      fetchPolicy: 'network-only',
-      variables() {
-        return this.userIdentifier
-      },
-      skip() {
-        return !this.userIdentifier
-      },
-      update({ user }) {
-        this.userName = `${user.firstName} ${user.lastName}`
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
-  },
-  computed: {
-    disabled() {
-      if (
-        this.form.identifier.length > 5 &&
-        parseInt(this.form.amount) <= parseInt(this.balance) &&
-        this.form.memo.length > 5 &&
-        this.form.memo.length <= 255
-      ) {
-        return false
-      }
-      return true
-    },
-    isBalanceDisabled() {
-      return this.balance <= 0 ? 'disabled' : false
-    },
-    sendTypes() {
-      return SEND_TYPES
-    },
-    userIdentifier() {
-      if (
-        this.$route.params &&
-        this.$route.params.userIdentifier &&
-        this.$route.params.communityIdentifier
-      ) {
-        return {
-          identifier: this.$route.params.userIdentifier,
-          communityIdentifier: this.$route.params.communityIdentifier,
-        }
-      }
-      return null
-    },
-  },
-  mounted() {
-    if (this.form.identifier !== '') this.$refs.formValidator.validate()
-  },
+  { immediate: true },
+)
+
+watch(userError, (error) => {
+  if (error) {
+    toastError(error.message)
+  }
+})
+
+const onSubmit = handleSubmit((formValues) => {
+  console.log('????')
+  if (userIdentifier.value) formValues.identifier = userIdentifier.value.identifier
+  emit('set-transaction', {
+    selected: radioSelected.value,
+    ...formValues,
+    amount: Number(formValues.amount.replace(',', '.')),
+    userName: userName.value,
+  })
+})
+
+function onReset(event) {
+  event.preventDefault()
+  resetForm()
+  radioSelected.value = SEND_TYPES.send
+  router.replace('/send')
 }
+
+// Expose necessary methods and computed properties
+// defineExpose({
+//   sendTypes: SEND_TYPES,
+//   handleSubmit: onSubmit,
+//   onReset,
+// })
 </script>
+
 <style>
 span.errors {
   color: red;
diff --git a/frontend/src/components/GddSend/TransactionResultLink.vue b/frontend/src/components/GddSend/TransactionResultLink.vue
index 47fcd335a..ddf88e777 100644
--- a/frontend/src/components/GddSend/TransactionResultLink.vue
+++ b/frontend/src/components/GddSend/TransactionResultLink.vue
@@ -11,9 +11,9 @@
     <div class="text-center">
       <div><figure-qr-code :link="link" /></div>
       <div>
-        <b-button variant="secondary" @click="$emit('on-back')" class="mt-4" data-test="close-btn">
+        <BButton variant="secondary" @click="$emit('on-back')" class="mt-4" data-test="close-btn">
           {{ $t('form.close') }}
-        </b-button>
+        </BButton>
       </div>
     </div>
   </div>
diff --git a/frontend/src/components/GddSend/TransactionResultSendError.vue b/frontend/src/components/GddSend/TransactionResultSendError.vue
index 55fb3c8c5..707dd1f89 100644
--- a/frontend/src/components/GddSend/TransactionResultSendError.vue
+++ b/frontend/src/components/GddSend/TransactionResultSendError.vue
@@ -19,9 +19,9 @@
       <div v-else>{{ errorResult }}</div>
     </div>
     <p class="text-center mt-5">
-      <b-button variant="secondary" @click="$emit('on-back')">
+      <BButton variant="secondary" @click="$emit('on-back')">
         {{ $t('form.close') }}
-      </b-button>
+      </BButton>
     </p>
   </div>
 </template>
diff --git a/frontend/src/components/GddTransactionList.vue b/frontend/src/components/GddTransactionList.vue
index 092ff6a34..4b0193b60 100644
--- a/frontend/src/components/GddTransactionList.vue
+++ b/frontend/src/components/GddTransactionList.vue
@@ -2,13 +2,15 @@
   <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="mr-2" variant="danger"></b-icon>
+        <!--        <b-icon icon="exclamation-triangle" class="mr-2" variant="danger"></b-icon>-->
+        <IBiExclamationTriangle class="mr-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="mr-2" variant="danger"></b-icon>
+        <!--        <b-icon icon="exclamation-triangle" class="mr-2" variant="danger"></b-icon>-->
+        <IBiExclamationTriangle class="mr-2" />
         <small>{{ $t('error.empty-transactionlist') }}</small>
       </div>
 
diff --git a/frontend/src/components/GdtTransactionList.vue b/frontend/src/components/GdtTransactionList.vue
index 0c0186d0f..e099968fa 100644
--- a/frontend/src/components/GdtTransactionList.vue
+++ b/frontend/src/components/GdtTransactionList.vue
@@ -24,7 +24,7 @@
           :factor="factor"
           :gdt="gdt"
           :id="id"
-        ></transaction>
+        />
       </div>
     </div>
     <BPagination
@@ -56,7 +56,7 @@ export default {
     },
     transactionGdtCount: { type: Number, required: true },
     pageSize: { type: Number, required: true },
-    value: { type: Number, required: true },
+    modelValue: { type: Number, required: true },
   },
   data() {
     return {
@@ -66,7 +66,7 @@ export default {
   },
   watch: {
     currentPage() {
-      if (this.value !== this.currentPage) this.$emit('input', this.currentPage)
+      if (this.modelValue !== this.currentPage) this.$emit('input', this.currentPage)
     },
   },
 }
diff --git a/frontend/src/components/Inputs/InputAmount.vue b/frontend/src/components/Inputs/InputAmount.vue
index 3268a0ec1..21e43a83a 100644
--- a/frontend/src/components/Inputs/InputAmount.vue
+++ b/frontend/src/components/Inputs/InputAmount.vue
@@ -1,38 +1,41 @@
 <template>
   <div class="input-amount">
-    <validation-provider
-      v-if="typ === 'TransactionForm'"
-      tag="div"
-      :rules="rules"
-      :name="name"
-      v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
-    >
-      <b-form-group :label="label" :label-for="labelFor" data-test="input-amount">
-        <b-form-input
-          v-model="currentValue"
-          v-bind="ariaInput"
+    <!--    <validation-provider-->
+    <!--      v-if="typ === 'TransactionForm'"-->
+    <!--      tag="div"-->
+    <!--      :rules="rules"-->
+    <!--      :name="name"-->
+    <!--      v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"-->
+    <!--    >-->
+    <template v-if="typ === 'TransactionForm'">
+      <BFormGroup :label="label" :label-for="labelFor" data-test="input-amount">
+        <BFormInput
+          :model-value="value"
+          @update:model-value="normalizeAmount($event)"
           :id="labelFor"
           :class="$route.path === '/send' ? 'bg-248' : ''"
           :name="name"
           :placeholder="placeholder"
           type="text"
-          :state="validated ? valid : false"
+          :state="meta.valid"
           trim
           v-focus="amountFocused"
           @focus="amountFocused = true"
-          @blur="normalizeAmount(valid)"
+          @blur="normalizeAmount($event)"
           :disabled="disabled"
           autocomplete="off"
-        ></b-form-input>
+        ></BFormInput>
 
-        <b-form-invalid-feedback v-bind="ariaMsg">
-          {{ errors[0] }}
-        </b-form-invalid-feedback>
-      </b-form-group>
-    </validation-provider>
-    <b-input-group v-else append="GDD" :label="label" :label-for="labelFor">
-      <b-form-input
-        v-model="currentValue"
+        <BFormInvalidFeedback v-if="errorMessage">
+          {{ errorMessage }}
+        </BFormInvalidFeedback>
+      </BFormGroup>
+    </template>
+    <!--    </validation-provider>-->
+    <BInputGroup v-else append="GDD" :label="label" :label-for="labelFor">
+      <BFormInput
+        :model-value="value"
+        @update:model-value="normalizeAmount($event)"
         :id="labelFor"
         :name="name"
         :placeholder="placeholder"
@@ -41,57 +44,117 @@
         trim
         v-focus="amountFocused"
         @focus="amountFocused = true"
-        @blur="normalizeAmount(valid)"
-      ></b-form-input>
-    </b-input-group>
+        @blur="normalizeAmount($event)"
+      ></BFormInput>
+    </BInputGroup>
+    <pre>{{ value }}</pre>
   </div>
 </template>
-<script>
-export default {
-  name: 'InputAmount',
-  props: {
-    rules: {
-      type: Object,
-      default: () => {},
-    },
-    typ: { type: String, default: 'TransactionForm' },
-    name: { type: String, required: true, default: 'Amount' },
-    label: { type: String, required: true, default: 'Amount' },
-    placeholder: { type: String, required: true, default: 'Amount' },
-    value: { type: String, required: true },
-    balance: { type: Number, default: 0.0 },
-    disabled: { required: false, type: Boolean, default: false },
+<!--<script>-->
+
+<!--export default {-->
+<!--  name: 'InputAmount',-->
+<!--  props: {-->
+<!--    rules: {-->
+<!--      type: Object,-->
+<!--      default: () => {},-->
+<!--    },-->
+<!--    typ: { type: String, default: 'TransactionForm' },-->
+<!--    name: { type: String, required: true, default: 'Amount' },-->
+<!--    label: { type: String, required: true, default: 'Amount' },-->
+<!--    placeholder: { type: String, required: true, default: 'Amount' },-->
+<!--    value: { type: String, required: true },-->
+<!--    balance: { type: Number, default: 0.0 },-->
+<!--    disabled: { required: false, type: Boolean, default: false },-->
+<!--  },-->
+<!--  data() {-->
+<!--    return {-->
+<!--      currentValue: this.value,-->
+<!--      amountValue: 0.0,-->
+<!--      amountFocused: false,-->
+<!--    }-->
+<!--  },-->
+<!--  computed: {-->
+<!--    errorMessages() {-->
+<!--      return errorMessages-->
+<!--    },-->
+<!--    labelFor() {-->
+<!--      return this.name + '-input-field'-->
+<!--    },-->
+<!--  },-->
+<!--  watch: {-->
+<!--    currentValue() {-->
+<!--      this.$emit('input', this.currentValue)-->
+<!--    },-->
+<!--    value() {-->
+<!--      if (this.value !== this.currentValue) this.currentValue = this.value-->
+<!--    },-->
+<!--  },-->
+<!--  methods: {-->
+<!--    normalizeAmount(isValid) {-->
+<!--      this.amountFocused = false-->
+<!--      if (!isValid) return-->
+<!--      this.amountValue = this.currentValue.replace(',', '.')-->
+<!--      this.currentValue = this.$n(this.amountValue, 'ungroupedDecimal')-->
+<!--    },-->
+<!--  },-->
+<!--  mounted() {-->
+<!--    if (this.value !== '') this.normalizeAmount(true)-->
+<!--  },-->
+<!--}-->
+<!--</script>-->
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useField } from 'vee-validate'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  rules: {
+    type: Object,
+    default: () => ({}),
   },
-  data() {
-    return {
-      currentValue: this.value,
-      amountValue: 0.0,
-      amountFocused: false,
-    }
-  },
-  computed: {
-    labelFor() {
-      return this.name + '-input-field'
-    },
-  },
-  watch: {
-    currentValue() {
-      this.$emit('input', this.currentValue)
-    },
-    value() {
-      if (this.value !== this.currentValue) this.currentValue = this.value
-    },
-  },
-  methods: {
-    normalizeAmount(isValid) {
-      this.amountFocused = false
-      if (!isValid) return
-      this.amountValue = this.currentValue.replace(',', '.')
-      this.currentValue = this.$n(this.amountValue, 'ungroupedDecimal')
-    },
-  },
-  mounted() {
-    if (this.value !== '') this.normalizeAmount(true)
+  typ: { type: String, default: 'TransactionForm' },
+  name: { type: String, required: true, default: 'Amount' },
+  label: { type: String, required: true, default: 'Amount' },
+  placeholder: { type: String, required: true, default: 'Amount' },
+  balance: { type: Number, default: 0.0 },
+  disabled: { required: false, type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const route = useRoute()
+
+const { n } = useI18n()
+
+const { value, meta, errorMessage } = useField(props.name, props.rules)
+
+const amountFocused = ref(false)
+const amountValue = ref(0.0)
+
+const labelFor = computed(() => props.name + '-input-field')
+
+watch(value, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue !== value.value) value.value = newValue
   },
+)
+
+const normalizeAmount = (inputValue) => {
+  const oldValue = value.value
+  const amountPattern = /^\d+([,.]\d{1,2})?$/
+  amountFocused.value = false
+  // if (!meta.valid) return
+  // if (!amountPattern.test(inputValue)) {
+  //   value.value = oldValue
+  // } else {
+  value.value = inputValue.replace(',', '.')
+  // }
 }
 </script>
diff --git a/frontend/src/components/Inputs/InputIdentifier.vue b/frontend/src/components/Inputs/InputIdentifier.vue
index 27b301cb5..b9d1c9db0 100644
--- a/frontend/src/components/Inputs/InputIdentifier.vue
+++ b/frontend/src/components/Inputs/InputIdentifier.vue
@@ -1,68 +1,61 @@
 <template>
-  <validation-provider
-    tag="div"
-    :rules="rules"
-    :name="name"
-    v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
-  >
-    <b-form-group :label="label" :label-for="labelFor" data-test="input-identifier">
-      <b-form-input
-        v-model="currentValue"
-        v-bind="ariaInput"
-        :id="labelFor"
-        :name="name"
-        :placeholder="placeholder"
-        type="text"
-        :state="validated ? valid : false"
-        trim
-        class="bg-248"
-        :disabled="disabled"
-        autocomplete="off"
-      ></b-form-input>
-      <b-form-invalid-feedback v-bind="ariaMsg">
-        {{ errors[0] }}
-      </b-form-invalid-feedback>
-    </b-form-group>
-  </validation-provider>
+  <BFormGroup :label="label" :label-for="labelFor" data-test="input-identifier">
+    <BFormInput
+      :model-value="value"
+      @update:model-value="value = $event"
+      :id="labelFor"
+      :name="name"
+      :placeholder="placeholder"
+      type="text"
+      :state="meta.valid"
+      trim
+      class="bg-248"
+      :disabled="disabled"
+      autocomplete="off"
+    />
+    <BFormInvalidFeedback v-if="errorMessage">
+      {{ errorMessage }}
+    </BFormInvalidFeedback>
+  </BFormGroup>
 </template>
-<script>
-export default {
-  name: 'InputEmail',
-  props: {
-    rules: {
-      default: () => {
-        return {
-          required: true,
-          validIdentifier: true,
-        }
-      },
-    },
-    name: { type: String, required: true },
-    label: { type: String, required: true },
-    placeholder: { type: String, required: true },
-    value: { type: String, required: true },
-    disabled: { type: Boolean, required: false, default: false },
+<script setup>
+import { computed, watch } from 'vue'
+import { useField } from 'vee-validate'
+
+const props = defineProps({
+  rules: {
+    type: Object,
+    default: () => ({
+      required: true,
+      validIdentifier: true,
+    }),
   },
-  data() {
-    return {
-      currentValue: this.value,
+  name: { type: String, required: true },
+  label: { type: String, required: true },
+  placeholder: { type: String, required: true },
+  modelValue: { type: String },
+  disabled: { type: Boolean, required: false, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'onValidation'])
+
+const { value, meta, errorMessage } = useField(props.name, props.rules, {
+  initialValue: props.modelValue,
+})
+
+const labelFor = computed(() => props.name + '-input-field')
+
+watch(value, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue !== value.value) {
+      value.value = newValue
+      emit('onValidation')
     }
   },
-  computed: {
-    labelFor() {
-      return this.name + '-input-field'
-    },
-  },
-  watch: {
-    currentValue() {
-      this.$emit('input', this.currentValue)
-    },
-    value() {
-      if (this.value !== this.currentValue) {
-        this.currentValue = this.value
-      }
-      this.$emit('onValidation')
-    },
-  },
-}
+)
 </script>
diff --git a/frontend/src/components/Inputs/InputPasswordConfirmation.vue b/frontend/src/components/Inputs/InputPasswordConfirmation.vue
index 900cc0a0a..74038b959 100644
--- a/frontend/src/components/Inputs/InputPasswordConfirmation.vue
+++ b/frontend/src/components/Inputs/InputPasswordConfirmation.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <b-row class="mb-2">
-      <b-col>
+    <BRow class="mb-2">
+      <BCol>
         <input-password
           :rules="{
             required: true,
@@ -20,10 +20,10 @@
           :placeholder="register ? $t('form.password') : $t('form.password_new')"
           v-model="password"
         ></input-password>
-      </b-col>
-    </b-row>
-    <b-row class="mb-2">
-      <b-col>
+      </BCol>
+    </BRow>
+    <BRow class="mb-2">
+      <BCol>
         <input-password
           :rules="{
             required: true,
@@ -36,8 +36,8 @@
           :placeholder="register ? $t('form.passwordRepeat') : $t('form.password_new_repeat')"
           v-model="passwordRepeat"
         ></input-password>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/Inputs/InputTextarea.vue b/frontend/src/components/Inputs/InputTextarea.vue
index d6d8281cd..2705ebf93 100644
--- a/frontend/src/components/Inputs/InputTextarea.vue
+++ b/frontend/src/components/Inputs/InputTextarea.vue
@@ -1,36 +1,9 @@
 <template>
-  <!--  <validation-provider-->
-  <!--    tag="div"-->
-  <!--    :rules="rules"-->
-  <!--    :name="name"-->
-  <!--    v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"-->
-  <!--  >-->
-  <!--    <b-form-group :label="label" :label-for="labelFor" data-test="input-textarea">-->
-  <!--      <b-form-textarea-->
-  <!--        v-model="currentValue"-->
-  <!--        v-bind="ariaInput"-->
-  <!--        :id="labelFor"-->
-  <!--        class="bg-248"-->
-  <!--        :name="name"-->
-  <!--        :placeholder="placeholder"-->
-  <!--        :state="validated ? valid : false"-->
-  <!--        trim-->
-  <!--        rows="4"-->
-  <!--        max-rows="4"-->
-  <!--        :disabled="disabled"-->
-  <!--        no-resize-->
-  <!--      ></b-form-textarea>-->
-  <!--      <b-form-invalid-feedback v-bind="ariaMsg">-->
-  <!--        {{ errors[0] }}-->
-  <!--      </b-form-invalid-feedback>-->
-  <!--    </b-form-group>-->
-  <!--  </validation-provider>-->
   <div>
     <BFormGroup :label="label" :label-for="labelFor" data-test="input-textarea">
       <BFormTextarea
         :model-value="currentValue"
         @update:modelValue="currentValue = $event"
-        v-bind="ariaInput"
         :id="labelFor"
         class="bg-248"
         :name="name"
@@ -41,53 +14,18 @@
         max-rows="4"
         :disabled="disabled"
         no-resize
-      ></BFormTextarea>
-      <BFormInvalidFeedback v-bind="ariaMsg">
+      />
+      <BFormInvalidFeedback v-if="errorMessage">
         {{ errorMessage }}
       </BFormInvalidFeedback>
     </BFormGroup>
   </div>
 </template>
-<!--<script>-->
-<!--export default {-->
-<!--  name: 'InputTextarea',-->
-<!--  props: {-->
-<!--    rules: {-->
-<!--      type: Object,-->
-<!--      default: () => {},-->
-<!--    },-->
-<!--    name: { type: String, required: true },-->
-<!--    label: { type: String, required: true },-->
-<!--    placeholder: { type: String, required: true },-->
-<!--    value: { type: String, required: true },-->
-<!--    disabled: { required: false, type: Boolean, default: false },-->
-<!--  },-->
-<!--  data() {-->
-<!--    return {-->
-<!--      currentValue: this.value,-->
-<!--    }-->
-<!--  },-->
-<!--  computed: {-->
-<!--    labelFor() {-->
-<!--      return this.name + '-input-field'-->
-<!--    },-->
-<!--  },-->
-<!--  watch: {-->
-<!--    currentValue() {-->
-<!--      this.$emit('input', this.currentValue)-->
-<!--    },-->
-<!--    value() {-->
-<!--      if (this.value !== this.currentValue) this.currentValue = this.value-->
-<!--    },-->
-<!--  },-->
-<!--}-->
-<!--</script>-->
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { computed } from 'vue'
 import { useField } from 'vee-validate'
 
-// Props
 const props = defineProps({
   rules: {
     type: Object,
@@ -105,39 +43,13 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  modelValue: {
-    type: String,
-    required: true,
-  },
   disabled: {
     type: Boolean,
     default: false,
   },
 })
 
-// Emits
-const emit = defineEmits(['update:modelValue'])
+const { value: currentValue, errorMessage, meta } = useField(props.name, props.rules)
 
-// Use vee-validate's useField
-const { value: currentValue, errorMessage, meta } = useField(props.name, props.rules, {
-  initialValue: props.modelValue,
-})
-
-// Computed
 const labelFor = computed(() => `${props.name}-input-field`)
-
-// Watch for external value changes
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (newValue !== currentValue.value) {
-      currentValue.value = newValue
-    }
-  },
-)
-
-// Watch for internal value changes
-watch(currentValue, (newValue) => {
-  emit('update:modelValue', newValue)
-})
 </script>
diff --git a/frontend/src/components/LinkInformations/RedeemInformation.vue b/frontend/src/components/LinkInformations/RedeemInformation.vue
index 7a55c5c01..7fc313ab0 100644
--- a/frontend/src/components/LinkInformations/RedeemInformation.vue
+++ b/frontend/src/components/LinkInformations/RedeemInformation.vue
@@ -4,11 +4,11 @@
       <h1 v-if="amount === ''">{{ $t('gdd_per_link.redeemlink-error') }}</h1>
       <h1 v-if="isContributionLink && amount !== ''">
         {{ CONFIG.COMMUNITY_NAME }}
-        {{ $t('contribution-link.thanksYouWith') }} {{ amount | GDD }}
+        {{ $t('contribution-link.thanksYouWith') }} {{ $filters.GDD(amount) }}
       </h1>
       <h1 v-if="!isContributionLink && amount !== ''">
         {{ user.firstName }}
-        {{ $t('transaction-link.send_you') }} {{ amount | GDD }}
+        {{ $t('transaction-link.send_you') }} {{ $filters.GDD(amount) }}
       </h1>
       <b>{{ memo }}</b>
     </b-jumbotron>
diff --git a/frontend/src/components/LinkInformations/RedeemLoggedOut.vue b/frontend/src/components/LinkInformations/RedeemLoggedOut.vue
index 55ad0092c..0c2dc6990 100644
--- a/frontend/src/components/LinkInformations/RedeemLoggedOut.vue
+++ b/frontend/src/components/LinkInformations/RedeemLoggedOut.vue
@@ -7,18 +7,18 @@
         <h2>{{ $t('gdd_per_link.redeem') }}</h2>
       </div>
 
-      <b-row>
-        <b-col sm="12" md="6">
+      <BRow>
+        <BCol sm="12" md="6">
           <p>{{ $t('gdd_per_link.no-account') }}</p>
           <b-button variant="primary" :to="register">
             {{ $t('gdd_per_link.to-register') }}
           </b-button>
-        </b-col>
-        <b-col sm="12" md="6" class="mt-4 mt-lg-0">
+        </BCol>
+        <BCol sm="12" md="6" class="mt-4 mt-lg-0">
           <p>{{ $t('gdd_per_link.has-account') }}</p>
           <b-button variant="gradido" :to="login">{{ $t('gdd_per_link.to-login') }}</b-button>
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
     </b-jumbotron>
   </div>
 </template>
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index d98428013..e4be2bb7e 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -92,6 +92,7 @@ export default {
       return 'mb-3'
     },
     isHumhub() {
+      // return true
       return CONFIG.HUMHUB_ACTIVE === 'true'
     },
     isGMS() {
diff --git a/frontend/src/components/SessionLogoutTimeout.vue b/frontend/src/components/SessionLogoutTimeout.vue
index b30cae1cb..7d5b509ce 100644
--- a/frontend/src/components/SessionLogoutTimeout.vue
+++ b/frontend/src/components/SessionLogoutTimeout.vue
@@ -128,6 +128,10 @@ const tokenExpiresInSeconds = computed(() => {
   return remainingSecs <= 0 ? 0 : remainingSecs
 })
 
+const handleOk = async () => {
+  console.log('OK')
+}
+
 // const tokenExpires = () => {
 //   now.value = new Date().getTime()
 //   if (tokenExpiresInSeconds.value < 75 && timer.value.tokenExpires.time !== 1000) {
diff --git a/frontend/src/components/Template/ContentHeader/GddAmount.vue b/frontend/src/components/Template/ContentHeader/GddAmount.vue
index d1ff10c44..673013503 100644
--- a/frontend/src/components/Template/ContentHeader/GddAmount.vue
+++ b/frontend/src/components/Template/ContentHeader/GddAmount.vue
@@ -33,8 +33,7 @@
             {{ $t('asterisks') }}
           </span>
           <span v-else class="font-weight-bold gradido-global-color-accent">
-            <!--            {{ balance | GDD }}-->
-            {{ 'test' }}
+            {{ $filters.GDD(balance) }}
           </span>
         </BCol>
         <BCol cols="3" class="border-left border-light">
diff --git a/frontend/src/components/Template/RightSide/LastContributions.vue b/frontend/src/components/Template/RightSide/LastContributions.vue
index 1d50a0bc3..80e9cb7de 100644
--- a/frontend/src/components/Template/RightSide/LastContributions.vue
+++ b/frontend/src/components/Template/RightSide/LastContributions.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="last-contributions d-none d-lg-block">
-    <b-row class="mb-5">
-      <b-col class="h3">{{ $t('contribution.lastContribution') }}</b-col>
-      <b-col cols="1" class="text-right">
+    <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>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/Template/RightSide/LastTransactions.vue b/frontend/src/components/Template/RightSide/LastTransactions.vue
index d7c46b369..bab3472c1 100644
--- a/frontend/src/components/Template/RightSide/LastTransactions.vue
+++ b/frontend/src/components/Template/RightSide/LastTransactions.vue
@@ -36,7 +36,7 @@
               </div>
               <div class="d-flex mt-3">
                 <div class="small">
-                  {{ transaction.amount | GDD }}
+                  {{ $filters.GDD(transaction.amount) }}
                 </div>
                 <div class="small ml-3 text-right">
                   {{ $d(new Date(transaction.balanceDate), 'short') }}
diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue
index ba3e7796b..57047cc05 100644
--- a/frontend/src/components/Transaction.vue
+++ b/frontend/src/components/Transaction.vue
@@ -8,7 +8,7 @@
             variant="light"
             size="3em"
             :class="getLinesByType.iconclasses"
-          ></BAvatar>
+          />
         </BCol>
         <BCol>
           <!-- <div>
@@ -45,90 +45,181 @@
     </div>
   </div>
 </template>
-<script>
+<!--<script>-->
+<!--import CollapseIcon from './TransactionRows/CollapseIcon'-->
+<!--import TransactionCollapse from './TransactionCollapse'-->
+<!--import { GdtEntryType } from '../graphql/enums'-->
+
+<!--export default {-->
+<!--  name: 'Transaction',-->
+<!--  components: {-->
+<!--    CollapseIcon,-->
+<!--    TransactionCollapse,-->
+<!--  },-->
+<!--  props: {-->
+<!--    amount: { type: Number },-->
+<!--    date: { type: String },-->
+<!--    comment: { type: String },-->
+<!--    gdtEntryType: { type: String, default: GdtEntryType.FORM },-->
+<!--    factor: { type: Number },-->
+<!--    gdt: { type: Number },-->
+<!--    id: { type: Number },-->
+<!--  },-->
+<!--  data() {-->
+<!--    return {-->
+<!--      collapseStatus: [],-->
+<!--      visible: false,-->
+<!--    }-->
+<!--  },-->
+<!--  methods: {-->
+<!--    getCollapseState(id) {-->
+<!--      return this.collapseStatus.includes('gdt-collapse-' + id)-->
+<!--    },-->
+<!--  },-->
+<!--  computed: {-->
+<!--    collapseId() {-->
+<!--      return 'gdt-collapse-' + String(this.id)-->
+<!--    },-->
+<!--    isGlobalModificator() {-->
+<!--      return this.gdtEntryType === GdtEntryType.GLOBAL_MODIFICATOR-->
+<!--    },-->
+<!--    getLinesByType() {-->
+<!--      switch (this.gdtEntryType) {-->
+<!--        case GdtEntryType.FORM:-->
+<!--        case GdtEntryType.CVS:-->
+<!--        case GdtEntryType.ELOPAGE:-->
+<!--        case GdtEntryType.DIGISTORE:-->
+<!--        case GdtEntryType.CVS2: {-->
+<!--          return {-->
+<!--            icon: 'heart',-->
+<!--            iconclasses: 'gradido-global-color-accent',-->
+<!--            description: this.$t('gdt.contribution'),-->
+<!--            descriptiontext: this.$n(this.amount, 'decimal') + ' €',-->
+<!--            credittext: this.$n(this.gdt, 'decimal') + ' GDT',-->
+<!--          }-->
+<!--        }-->
+<!--        case GdtEntryType.ELOPAGE_PUBLISHER: {-->
+<!--          return {-->
+<!--            icon: 'person-check',-->
+<!--            iconclasses: 'gradido-global-color-accent',-->
+<!--            description: this.$t('gdt.recruited-member'),-->
+<!--            descriptiontext: '5%',-->
+<!--            credittext: this.$n(this.amount, 'decimal') + ' GDT',-->
+<!--          }-->
+<!--        }-->
+<!--        case GdtEntryType.GLOBAL_MODIFICATOR: {-->
+<!--          return {-->
+<!--            icon: 'gift',-->
+<!--            iconclasses: 'gradido-global-color-accent',-->
+<!--            description: this.$t('gdt.gdt-received'),-->
+<!--            descriptiontext: this.comment,-->
+<!--            credittext: this.$n(this.gdt, 'decimal') + ' GDT',-->
+<!--          }-->
+<!--        }-->
+<!--        default:-->
+<!--          throw new Error('no lines for this type: ' + this.gdtEntryType)-->
+<!--      }-->
+<!--    },-->
+<!--  },-->
+<!--  mounted() {-->
+<!--    this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {-->
+<!--      if (isJustShown) {-->
+<!--        this.collapseStatus.push(collapseId)-->
+<!--      } else {-->
+<!--        this.collapseStatus = this.collapseStatus.filter((id) => id !== collapseId)-->
+<!--      }-->
+<!--    })-->
+<!--  },-->
+<!--}-->
+<!--</script>-->
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import CollapseIcon from './TransactionRows/CollapseIcon'
 import TransactionCollapse from './TransactionCollapse'
 import { GdtEntryType } from '../graphql/enums'
 
-export default {
-  name: 'Transaction',
-  components: {
-    CollapseIcon,
-    TransactionCollapse,
-  },
-  props: {
-    amount: { type: Number },
-    date: { type: String },
-    comment: { type: String },
-    gdtEntryType: { type: String, default: GdtEntryType.FORM },
-    factor: { type: Number },
-    gdt: { type: Number },
-    id: { type: Number },
-  },
-  data() {
-    return {
-      collapseStatus: [],
-      visible: false,
-    }
-  },
-  methods: {
-    getCollapseState(id) {
-      return this.collapseStatus.includes('gdt-collapse-' + id)
-    },
-  },
-  computed: {
-    collapseId() {
-      return 'gdt-collapse-' + String(this.id)
-    },
-    isGlobalModificator() {
-      return this.gdtEntryType === GdtEntryType.GLOBAL_MODIFICATOR
-    },
-    getLinesByType() {
-      switch (this.gdtEntryType) {
-        case GdtEntryType.FORM:
-        case GdtEntryType.CVS:
-        case GdtEntryType.ELOPAGE:
-        case GdtEntryType.DIGISTORE:
-        case GdtEntryType.CVS2: {
-          return {
-            icon: 'heart',
-            iconclasses: 'gradido-global-color-accent',
-            description: this.$t('gdt.contribution'),
-            descriptiontext: this.$n(this.amount, 'decimal') + ' €',
-            credittext: this.$n(this.gdt, 'decimal') + ' GDT',
-          }
-        }
-        case GdtEntryType.ELOPAGE_PUBLISHER: {
-          return {
-            icon: 'person-check',
-            iconclasses: 'gradido-global-color-accent',
-            description: this.$t('gdt.recruited-member'),
-            descriptiontext: '5%',
-            credittext: this.$n(this.amount, 'decimal') + ' GDT',
-          }
-        }
-        case GdtEntryType.GLOBAL_MODIFICATOR: {
-          return {
-            icon: 'gift',
-            iconclasses: 'gradido-global-color-accent',
-            description: this.$t('gdt.gdt-received'),
-            descriptiontext: this.comment,
-            credittext: this.$n(this.gdt, 'decimal') + ' GDT',
-          }
-        }
-        default:
-          throw new Error('no lines for this type: ' + this.gdtEntryType)
-      }
-    },
-  },
-  mounted() {
-    this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {
-      if (isJustShown) {
-        this.collapseStatus.push(collapseId)
-      } else {
-        this.collapseStatus = this.collapseStatus.filter((id) => id !== collapseId)
-      }
-    })
+// Props
+const props = defineProps({
+  amount: Number,
+  date: String,
+  comment: String,
+  gdtEntryType: {
+    type: String,
+    default: GdtEntryType.FORM,
   },
+  factor: Number,
+  gdt: Number,
+  id: Number,
+})
+
+// Reactive state
+const collapseStatus = ref([])
+const visible = ref(false)
+
+// Composables
+const { t, n } = useI18n()
+
+// Methods
+const getCollapseState = (id) => {
+  return collapseStatus.value.includes('gdt-collapse-' + id)
 }
+
+// Computed properties
+const collapseId = computed(() => 'gdt-collapse-' + String(props.id))
+
+const isGlobalModificator = computed(() => props.gdtEntryType === GdtEntryType.GLOBAL_MODIFICATOR)
+
+const getLinesByType = computed(() => {
+  switch (props.gdtEntryType) {
+    case GdtEntryType.FORM:
+    case GdtEntryType.CVS:
+    case GdtEntryType.ELOPAGE:
+    case GdtEntryType.DIGISTORE:
+    case GdtEntryType.CVS2: {
+      return {
+        icon: 'heart',
+        iconclasses: 'gradido-global-color-accent',
+        description: t('gdt.contribution'),
+        descriptiontext: n(props.amount, 'decimal') + ' €',
+        credittext: n(props.gdt, 'decimal') + ' GDT',
+      }
+    }
+    case GdtEntryType.ELOPAGE_PUBLISHER: {
+      return {
+        icon: 'person-check',
+        iconclasses: 'gradido-global-color-accent',
+        description: t('gdt.recruited-member'),
+        descriptiontext: '5%',
+        credittext: n(props.amount, 'decimal') + ' GDT',
+      }
+    }
+    case GdtEntryType.GLOBAL_MODIFICATOR: {
+      return {
+        icon: 'gift',
+        iconclasses: 'gradido-global-color-accent',
+        description: t('gdt.gdt-received'),
+        descriptiontext: props.comment,
+        credittext: n(props.gdt, 'decimal') + ' GDT',
+      }
+    }
+    default:
+      throw new Error('no lines for this type: ' + props.gdtEntryType)
+  }
+})
+
+// Lifecycle hooks
+onMounted(() => {
+  // Note: This event listener setup might need to be adjusted for Vue 3
+  // You might want to use provide/inject or a global event bus instead
+  const root = getCurrentInstance().appContext.config.globalProperties
+  root.$on('bv::collapse::state', (collapseId, isJustShown) => {
+    if (isJustShown) {
+      collapseStatus.value.push(collapseId)
+    } else {
+      collapseStatus.value = collapseStatus.value.filter((id) => id !== collapseId)
+    }
+  })
+})
 </script>
diff --git a/frontend/src/components/TransactionCollapse.vue b/frontend/src/components/TransactionCollapse.vue
index 254fa8c89..7fb221ab6 100644
--- a/frontend/src/components/TransactionCollapse.vue
+++ b/frontend/src/components/TransactionCollapse.vue
@@ -20,7 +20,7 @@
   </div>
 </template>
 <script>
-import { GdtEntryType } from '../graphql/enums'
+import { GdtEntryType } from '@/graphql/enums'
 
 export default {
   name: 'TransactionCollapse',
diff --git a/frontend/src/components/TransactionLinks/TransactionLink.vue b/frontend/src/components/TransactionLinks/TransactionLink.vue
index ca8d2c2f7..859a810de 100644
--- a/frontend/src/components/TransactionLinks/TransactionLink.vue
+++ b/frontend/src/components/TransactionLinks/TransactionLink.vue
@@ -1,74 +1,131 @@
 <template>
   <div class="transaction-link gradido-custom-background">
-    <b-row :class="validLink ? '' : 'bg-muted text-light'" class="mb-2 pt-2 pb-2">
-      <b-col cols="1">
+    <BRow :class="validLink ? '' : 'bg-muted text-light'" class="mb-2 pt-2 pb-2">
+      <BCol cols="1">
         <type-icon color="text-danger" icon="link45deg" class="pt-4 pl-2" />
-      </b-col>
-      <b-col cols="11">
-        <b-row>
-          <b-col>
+      </BCol>
+      <BCol cols="11">
+        <BRow>
+          <BCol>
             <amount-and-name-row :amount="amount" :text="$t('form.amount')" />
             <memo-row :memo="memo" />
             <date-row :date="validUntil" :diffNow="true" :validLink="validLink" />
             <decay-row :decay="decay" />
-          </b-col>
-          <b-col cols="12" lg="1" md="1" class="text-center text-md-right pr-5 pr-lg-4">
-            <b-dropdown no-caret right aria-expanded="false" size="sm">
+          </BCol>
+          <BCol cols="12" lg="1" md="1" class="text-center text-md-right pr-5 pr-lg-4">
+            <BDropdown no-caret right aria-expanded="false" size="sm">
               <template #button-content>
-                <b-icon icon="three-dots-vertical"></b-icon>
+                <IBiThreeDotsVertical />
               </template>
 
-              <b-dropdown-item v-if="validLink" class="test-copy-link" @click="copyLink">
-                <b-icon icon="clipboard"></b-icon>
+              <BDropdownItem v-if="validLink" class="test-copy-link" @click="copyLink">
+                <IBiClipboard />
                 {{ $t('gdd_per_link.copy-link') }}
-              </b-dropdown-item>
-              <b-dropdown-item
-                v-if="validLink"
-                class="test-copy-text pt-3"
-                @click="copyLinkWithText"
-              >
-                <b-icon icon="clipboard-plus"></b-icon>
+              </BDropdownItem>
+              <BDropdownItem v-if="validLink" class="test-copy-text pt-3" @click="copyLinkWithText">
+                <IBiClipboardPlus />
                 {{ $t('gdd_per_link.copy-link-with-text') }}
-              </b-dropdown-item>
-              <b-dropdown-item
+              </BDropdownItem>
+              <BDropdownItem
                 v-if="validLink"
                 @click="$bvModal.show('modalPopover-' + id)"
                 class="pt-3 pb-3 test-qr-code"
               >
                 <b-img src="img/svg/qr-code.svg" width="18" class="filter"></b-img>
                 {{ $t('qrCode') }}
-              </b-dropdown-item>
-              <b-dropdown-item class="test-delete-link" @click="deleteLink()">
-                <b-icon icon="trash"></b-icon>
+              </BDropdownItem>
+              <BDropdownItem class="test-delete-link" @click="deleteLink()">
+                <IBiTrash />
                 {{ $t('delete') }}
-              </b-dropdown-item>
-            </b-dropdown>
-          </b-col>
-        </b-row>
-      </b-col>
-    </b-row>
-    <b-modal :id="'modalPopover-' + id" ok-only hide-header-close>
-      <b-card header-tag="header" footer-tag="footer">
+              </BDropdownItem>
+            </BDropdown>
+          </BCol>
+        </BRow>
+      </BCol>
+    </BRow>
+    <BModal :id="'modalPopover-' + id" ok-only hide-header-close>
+      <BCard header-tag="header" footer-tag="footer">
         <template #header>
           <h6 class="mb-0">{{ $t('qrCode') }}</h6>
         </template>
-        <b-card-text><figure-qr-code class="text-center" :link="link" /></b-card-text>
+        <BCardText><figure-qr-code class="text-center" :link="link" /></BCardText>
         <template #footer>
           <em>{{ link }}</em>
         </template>
-      </b-card>
-    </b-modal>
-    <b-modal :id="'modalPopoverCopyError' + id" ok-only hide-header-close>
-      <b-card header-tag="header" footer-tag="footer">
-        <b-card-text>
+      </BCard>
+    </BModal>
+    <BModal :id="'modalPopoverCopyError' + id" ok-only hide-header-close>
+      <BCard header-tag="header" footer-tag="footer">
+        <BCardText>
           <div class="alert-danger p-3">{{ $t('gdd_per_link.not-copied') }}</div>
           <div class="alert-muted h3 p-3">{{ link }}</div>
-        </b-card-text>
-      </b-card>
-    </b-modal>
+        </BCardText>
+      </BCard>
+    </BModal>
   </div>
 </template>
-<script>
+<!--<script>-->
+<!--import { deleteTransactionLink } from '@/graphql/mutations'-->
+<!--import TypeIcon from '../TransactionRows/TypeIcon'-->
+<!--import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'-->
+<!--import MemoRow from '../TransactionRows/MemoRow'-->
+<!--import DateRow from '../TransactionRows/DateRow'-->
+<!--import DecayRow from '../TransactionRows/DecayRow'-->
+<!--import FigureQrCode from '@/components/QrCode/FigureQrCode'-->
+<!--import { copyLinks } from '../../mixins/copyLinks'-->
+
+<!--export default {-->
+<!--  name: 'TransactionLink',-->
+<!--  mixins: [copyLinks],-->
+<!--  components: {-->
+<!--    TypeIcon,-->
+<!--    AmountAndNameRow,-->
+<!--    MemoRow,-->
+<!--    DateRow,-->
+<!--    DecayRow,-->
+<!--    FigureQrCode,-->
+<!--  },-->
+<!--  props: {-->
+<!--    holdAvailableAmount: { type: String, required: true },-->
+<!--    id: { type: Number, required: true },-->
+<!--  },-->
+<!--  methods: {-->
+<!--    deleteLink() {-->
+<!--      this.$bvModal.msgBoxConfirm(this.$t('gdd_per_link.delete-the-link')).then(async (value) => {-->
+<!--        if (value)-->
+<!--          await this.$apollo-->
+<!--            .mutate({-->
+<!--              mutation: deleteTransactionLink,-->
+<!--              variables: {-->
+<!--                id: this.id,-->
+<!--              },-->
+<!--            })-->
+<!--            .then(() => {-->
+<!--              this.toastSuccess(this.$t('gdd_per_link.deleted'))-->
+<!--              this.$emit('reset-transaction-link-list')-->
+<!--            })-->
+<!--            .catch((err) => {-->
+<!--              this.toastError(err.message)-->
+<!--            })-->
+<!--      })-->
+<!--    },-->
+<!--  },-->
+<!--  computed: {-->
+<!--    decay() {-->
+<!--      return `${this.amount - this.holdAvailableAmount}`-->
+<!--    },-->
+<!--    validLink() {-->
+<!--      return new Date(this.validUntil) > new Date()-->
+<!--    },-->
+<!--  },-->
+<!--}-->
+<!--</script>-->
+<script setup>
+import { computed } from 'vue'
+import { useMutation } from '@vue/apollo-composable'
+import { useI18n } from 'vue-i18n'
+import { useAppToast } from '@/composables/useToast'
+import { useCopyLinks } from '@/composables/useCopyLinks'
 import { deleteTransactionLink } from '@/graphql/mutations'
 import TypeIcon from '../TransactionRows/TypeIcon'
 import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
@@ -76,53 +133,54 @@ import MemoRow from '../TransactionRows/MemoRow'
 import DateRow from '../TransactionRows/DateRow'
 import DecayRow from '../TransactionRows/DecayRow'
 import FigureQrCode from '@/components/QrCode/FigureQrCode'
-import { copyLinks } from '../../mixins/copyLinks'
+import { useModal } from 'bootstrap-vue-next'
 
-export default {
-  name: 'TransactionLink',
-  mixins: [copyLinks],
-  components: {
-    TypeIcon,
-    AmountAndNameRow,
-    MemoRow,
-    DateRow,
-    DecayRow,
-    FigureQrCode,
-  },
-  props: {
-    holdAvailableAmount: { type: String, required: true },
-    id: { type: Number, required: true },
-  },
-  methods: {
-    deleteLink() {
-      this.$bvModal.msgBoxConfirm(this.$t('gdd_per_link.delete-the-link')).then(async (value) => {
-        if (value)
-          await this.$apollo
-            .mutate({
-              mutation: deleteTransactionLink,
-              variables: {
-                id: this.id,
-              },
-            })
-            .then(() => {
-              this.toastSuccess(this.$t('gdd_per_link.deleted'))
-              this.$emit('reset-transaction-link-list')
-            })
-            .catch((err) => {
-              this.toastError(err.message)
-            })
-      })
-    },
-  },
-  computed: {
-    decay() {
-      return `${this.amount - this.holdAvailableAmount}`
-    },
-    validLink() {
-      return new Date(this.validUntil) > new Date()
-    },
-  },
+const props = defineProps({
+  holdAvailableAmount: { type: String, required: true },
+  id: { type: Number, required: true },
+  amount: { type: Number, required: true },
+  validUntil: { type: String, required: true },
+  link: { type: String, required: true },
+  memo: { type: String, required: true },
+})
+
+const emit = defineEmits(['reset-transaction-link-list'])
+
+const { t } = useI18n()
+const { toastSuccess, toastError } = useAppToast()
+const { copyToClipboard } = useCopyLinks({
+  amount: props.amount,
+  validUntil: props.validUntil,
+  link: props.link,
+  memo: props.memo,
+})
+const { showConfirmModal } = useModal()
+
+const { mutate: deleteTransactionLinkMutation } = useMutation(deleteTransactionLink)
+
+const decay = computed(() => `${props.amount - props.holdAvailableAmount}`)
+const validLink = computed(() => new Date(props.validUntil) > new Date())
+
+async function deleteLink() {
+  const confirmed = await showConfirmModal(t('gdd_per_link.delete-the-link'))
+  if (confirmed) {
+    try {
+      await deleteTransactionLinkMutation({ id: props.id })
+      toastSuccess(t('gdd_per_link.deleted'))
+      emit('reset-transaction-link-list')
+    } catch (err) {
+      toastError(err.message)
+    }
+  }
 }
+
+// Expose necessary methods and computed properties
+// defineExpose({
+//   deleteLink,
+//   decay,
+//   validLink,
+//   copyToClipboard,
+// })
 </script>
 <style>
 .qr-button {
diff --git a/frontend/src/components/TransactionRows/AmountAndNameRow.vue b/frontend/src/components/TransactionRows/AmountAndNameRow.vue
index 530fdf0e8..48eea70de 100644
--- a/frontend/src/components/TransactionRows/AmountAndNameRow.vue
+++ b/frontend/src/components/TransactionRows/AmountAndNameRow.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="amount-and-name-row">
-    <b-row>
-      <b-col cols="5">
+    <BRow>
+      <BCol cols="5">
         <div class="text-right">
           <span class="gdd-transaction-list-item-amount">
-            {{ amount | GDD }}
+            {{ $filters.GDD(amount) }}
           </span>
         </div>
-      </b-col>
-      <b-col cols="7">
+      </BCol>
+      <BCol cols="7">
         <div class="gdd-transaction-list-item-name">
           <span>{{ text }}</span>
         </div>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/TransactionRows/CollapseIcon.vue b/frontend/src/components/TransactionRows/CollapseIcon.vue
index 2338e87cb..b8c83139f 100644
--- a/frontend/src/components/TransactionRows/CollapseIcon.vue
+++ b/frontend/src/components/TransactionRows/CollapseIcon.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="collapse-icon">
-    <b-icon
-      :icon="visible ? 'arrow-up-circle' : 'arrow-down-circle'"
-      :class="visible ? 'text-black' : 'text-muted'"
-      class="h1"
-    />
+    <!--    <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>
 </template>
 <script>
diff --git a/frontend/src/components/TransactionRows/DateRow.vue b/frontend/src/components/TransactionRows/DateRow.vue
index 5998be134..20a61e614 100644
--- a/frontend/src/components/TransactionRows/DateRow.vue
+++ b/frontend/src/components/TransactionRows/DateRow.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="date-row">
-    <b-row>
-      <b-col cols="5">
+    <BRow>
+      <BCol cols="5">
         <div class="text-right">
           {{ text }}
         </div>
-      </b-col>
-      <b-col cols="7">
+      </BCol>
+      <BCol cols="7">
         <div class="gdd-transaction-list-item-date">
           {{ $d(new Date(this.date), 'long') }}
         </div>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/TransactionRows/DecayRow.vue b/frontend/src/components/TransactionRows/DecayRow.vue
index f853d9f93..75ebf674e 100644
--- a/frontend/src/components/TransactionRows/DecayRow.vue
+++ b/frontend/src/components/TransactionRows/DecayRow.vue
@@ -1,17 +1,18 @@
 <template>
   <div class="decay-row">
-    <b-row v-if="decay">
-      <b-col cols="5">
+    <BRow v-if="decay">
+      <BCol cols="5">
         <div class="text-right">
-          <b-icon icon="droplet-half" height="15" class="mb-1" />
+          <!--          <b-icon icon="droplet-half" height="15" class="mb-1" />-->
+          <IBiDropletHalf height="15" class="mb-1" />
         </div>
-      </b-col>
-      <b-col cols="7">
+      </BCol>
+      <BCol cols="7">
         <div class="gdd-transaction-list-item-decay">
           <decay-information-short decaytyp="short" :decay="decay" />
         </div>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/TransactionRows/DurationRow.vue b/frontend/src/components/TransactionRows/DurationRow.vue
index 65f168c74..63cb0a970 100644
--- a/frontend/src/components/TransactionRows/DurationRow.vue
+++ b/frontend/src/components/TransactionRows/DurationRow.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="duration-row">
-    <b-row>
-      <b-col cols="6" lg="4" md="6" sm="6">
+    <BRow>
+      <BCol cols="6" lg="4" md="6" sm="6">
         <div>{{ $t('decay.past_time') }}</div>
-      </b-col>
-      <b-col offset="0" class="text-right mr-0">
+      </BCol>
+      <BCol offset="0" class="text-right mr-0">
         <span v-if="duration">{{ duration }}</span>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/TransactionRows/LinkCountRow.vue b/frontend/src/components/TransactionRows/LinkCountRow.vue
index 5535efde1..abba72363 100644
--- a/frontend/src/components/TransactionRows/LinkCountRow.vue
+++ b/frontend/src/components/TransactionRows/LinkCountRow.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="link-count-row">
-    <b-row>
-      <b-col cols="5">
+    <BRow>
+      <BCol cols="5">
         <div class="text-right">{{ $t('gdd_per_link.links_count') }}</div>
-      </b-col>
-      <b-col cols="7">
+      </BCol>
+      <BCol cols="7">
         <div class="gdd-transaction-list-link-count">{{ count }}</div>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/TransactionRows/MemoRow.vue b/frontend/src/components/TransactionRows/MemoRow.vue
index 26b421bf9..c16840b24 100644
--- a/frontend/src/components/TransactionRows/MemoRow.vue
+++ b/frontend/src/components/TransactionRows/MemoRow.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="memo-row">
-    <b-row>
-      <b-col cols="5">
+    <BRow>
+      <BCol cols="5">
         <div class="text-right">{{ $t('form.memo') }}</div>
-      </b-col>
-      <b-col cols="7">
+      </BCol>
+      <BCol cols="7">
         <div class="gdd-transaction-list-message">{{ memo }}</div>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/Transactions/TransactionCreation.vue b/frontend/src/components/Transactions/TransactionCreation.vue
index e398d601f..0fb818504 100644
--- a/frontend/src/components/Transactions/TransactionCreation.vue
+++ b/frontend/src/components/Transactions/TransactionCreation.vue
@@ -1,23 +1,23 @@
 <template>
   <div class="transaction-slot-creation">
-    <b-row @click="visible = !visible" class="align-items-center">
-      <b-col cols="3" lg="2" md="2">
+    <BRow @click="visible = !visible" class="align-items-center">
+      <BCol cols="3" lg="2" md="2">
         <b-avatar icon="gift" variant="success" :size="42"></b-avatar>
-      </b-col>
-      <b-col>
+      </BCol>
+      <BCol>
         <div class="font-weight-bold">{{ linkedUser.firstName }} {{ linkedUser.lastName }}</div>
         <span class="small">{{ this.$d(new Date(balanceDate), 'short') }}</span>
         <span class="ml-4 small">{{ this.$d(new Date(balanceDate), 'time') }}</span>
-      </b-col>
-      <b-col cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
+      </BCol>
+      <BCol cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
         <div class="small mb-2">{{ $t('decay.types.receive') }}</div>
-        <div class="font-weight-bold">{{ amount | GDD }}</div>
-      </b-col>
-      <b-col cols="12" md="1" lg="1" class="text-right">
+        <div class="font-weight-bold">{{ $filters.GDD(amount) }}</div>
+      </BCol>
+      <BCol cols="12" md="1" lg="1" class="text-right">
         <collapse-icon class="text-right" :visible="visible" />
-      </b-col>
-    </b-row>
-    <b-collapse class="pb-4 pt-lg-3" v-model="visible">
+      </BCol>
+    </BRow>
+    <BCollapse class="pb-4 pt-lg-3" v-model="visible">
       <decay-information
         :typeId="typeId"
         :decay="decay"
@@ -26,7 +26,7 @@
         :balance="balance"
         :previousBalance="previousBalance"
       />
-    </b-collapse>
+    </BCollapse>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/Transactions/TransactionDecay.vue b/frontend/src/components/Transactions/TransactionDecay.vue
index 9b6a957e4..369cf470a 100644
--- a/frontend/src/components/Transactions/TransactionDecay.vue
+++ b/frontend/src/components/Transactions/TransactionDecay.vue
@@ -1,22 +1,25 @@
 <template>
-  <div class="transaction-slot-decay">
-    <b-row @click="visible = !visible" class="text-color-gdd-yellow align-items-center">
-      <b-col cols="1"><type-icon color="text-color-gdd-yellow" icon="droplet-half" /></b-col>
-      <b-col>
+  <div @click="visible = !visible" class="transaction-slot-decay">
+    <BRow class="text-color-gdd-yellow align-items-center">
+      <BCol cols="1">
+        <!--        <type-icon color="text-color-gdd-yellow" icon="droplet-half" />-->
+        <IBiDropletHalf />
+      </BCol>
+      <BCol>
         {{ $t('decay.decay_since_last_transaction') }}
-      </b-col>
-      <b-col cols="12" md="1" lg="1" class="text-right">
+      </BCol>
+      <BCol cols="12" md="1" lg="1" class="text-right">
         <collapse-icon class="text-right" :visible="visible" />
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
 
-    <b-collapse class="pb-4 pt-5" v-model="visible">
+    <BCollapse class="pb-4 pt-5" :model-value="visible">
       <decay-information-decay
         :balance="balance"
         :decay="decay.decay"
         :previousBalance="previousBalance"
       />
-    </b-collapse>
+    </BCollapse>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/Transactions/TransactionLinkSummary.vue b/frontend/src/components/Transactions/TransactionLinkSummary.vue
index c3a62357b..47041bb74 100644
--- a/frontend/src/components/Transactions/TransactionLinkSummary.vue
+++ b/frontend/src/components/Transactions/TransactionLinkSummary.vue
@@ -1,22 +1,22 @@
 <template>
-  <div class="transaction-slot-link">
-    <b-row @click="showTransactionLinks()" class="align-items-center">
-      <b-col cols="3" lg="2" md="2">
+  <div @click="showTransactionLinks()" class="transaction-slot-link">
+    <BRow class="align-items-center">
+      <BCol cols="3" lg="2" md="2">
         <b-avatar icon="link" variant="light" :size="42"></b-avatar>
-      </b-col>
-      <b-col>
+      </BCol>
+      <BCol>
         <div>{{ $t('gdd_per_link.links_sum') }}</div>
         <div class="small">{{ transactionLinkCount }} {{ $t('gdd_per_link.links_sum') }}</div>
-      </b-col>
-      <b-col cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
+      </BCol>
+      <BCol cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
         <div class="small mb-2">{{ $t('send_per_link') }}</div>
-        <div class="font-weight-bold">{{ amount | GDD }}</div>
-      </b-col>
-      <b-col cols="12" md="1" lg="1" class="text-right">
+        <div class="font-weight-bold">{{ $filters.GDD(amount) }}</div>
+      </BCol>
+      <BCol cols="12" md="1" lg="1" class="text-right">
         <collapse-icon class="text-right" :visible="visible" />
-      </b-col>
-    </b-row>
-    <b-collapse v-model="visible">
+      </BCol>
+    </BRow>
+    <BCollapse :model-value="visible">
       <collapse-links-list
         v-model="currentPage"
         :pending="pending"
@@ -24,7 +24,7 @@
         :transactionLinkCount="transactionLinkCount"
         :transactionLinks="transactionLinks"
       />
-    </b-collapse>
+    </BCollapse>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/Transactions/TransactionReceive.vue b/frontend/src/components/Transactions/TransactionReceive.vue
index d6985ba16..8c8424907 100644
--- a/frontend/src/components/Transactions/TransactionReceive.vue
+++ b/frontend/src/components/Transactions/TransactionReceive.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="transaction-slot-receive">
-    <b-row @click="visible = !visible" class="align-items-center">
-      <b-col cols="3" lg="2" md="2">
+  <div @click="visible = !visible" class="transaction-slot-receive">
+    <BRow class="align-items-center">
+      <BCol cols="3" lg="2" md="2">
         <!-- <b-avatar :text="avatarText" variant="success" size="3em"></b-avatar> -->
         <avatar
           :username="username.username"
@@ -9,8 +9,8 @@
           :color="'#fff'"
           :size="42"
         ></avatar>
-      </b-col>
-      <b-col>
+      </BCol>
+      <BCol>
         <div>
           <name
             class="font-weight-bold"
@@ -19,15 +19,15 @@
             :linkId="linkId"
           />
         </div>
-        <span class="small">{{ this.$d(new Date(balanceDate), 'short') }}</span>
-        <span class="ml-4 small">{{ this.$d(new Date(balanceDate), 'time') }}</span>
-      </b-col>
-      <b-col cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
+        <span class="small">{{ $d(new Date(balanceDate), 'short') }}</span>
+        <span class="ml-4 small">{{ $d(new Date(balanceDate), 'time') }}</span>
+      </BCol>
+      <BCol cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
         <div class="small mb-2">
           {{ $t('decay.types.receive') }}
         </div>
         <div class="font-weight-bold gradido-global-color-accent" data-test="transaction-amount">
-          {{ amount | GDD }}
+          {{ $filters.GDD(amount) }}
         </div>
         <div v-if="linkId" class="small">
           {{ $t('via_link') }}
@@ -38,12 +38,12 @@
             :title="$t('gdd_per_link.redeemed-title')"
           />
         </div>
-      </b-col>
-      <b-col cols="12" md="1" lg="1" class="text-right">
+      </BCol>
+      <BCol cols="12" md="1" lg="1" class="text-right">
         <collapse-icon class="text-right" :visible="visible" />
-      </b-col>
-    </b-row>
-    <b-collapse class="pb-4 pt-lg-3" v-model="visible">
+      </BCol>
+    </BRow>
+    <BCollapse class="pb-4 pt-lg-3" :model-value="visible">
       <decay-information
         :typeId="typeId"
         :decay="decay"
@@ -52,7 +52,7 @@
         :balance="balance"
         :previousBalance="previousBalance"
       />
-    </b-collapse>
+    </BCollapse>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/Transactions/TransactionSend.vue b/frontend/src/components/Transactions/TransactionSend.vue
index f1af3e1df..d73c766c8 100644
--- a/frontend/src/components/Transactions/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="transaction-slot-send">
-    <b-row @click="visible = !visible" class="align-items-center">
-      <b-col cols="3" lg="2" md="2">
+    <BRow @click="visible = !visible" class="align-items-center">
+      <BCol cols="3" lg="2" md="2">
         <avatar
           :username="username.username"
           :initials="username.initials"
           :color="'#fff'"
           :size="42"
-        ></avatar>
-      </b-col>
-      <b-col>
+        />
+      </BCol>
+      <BCol>
         <div>
           <name
             class="font-weight-bold"
@@ -20,29 +20,30 @@
         </div>
         <span class="small">{{ this.$d(new Date(balanceDate), 'short') }}</span>
         <span class="ml-4 small">{{ this.$d(new Date(balanceDate), 'time') }}</span>
-      </b-col>
-      <b-col cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
+      </BCol>
+      <BCol cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
         <div class="small mb-2">
           {{ $t('decay.types.send') }}
         </div>
         <div class="font-weight-bold text-140" data-test="transaction-amount">
-          {{ amount | GDD }}
+          {{ $filters.GDD(amount) }}
         </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')"
-          />
+          <!--          <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')" />
         </div>
-      </b-col>
-      <b-col cols="12" md="1" lg="1" class="text-right">
+      </BCol>
+      <BCol cols="12" md="1" lg="1" class="text-right">
         <collapse-icon class="text-right" :visible="visible" />
-      </b-col>
-    </b-row>
-    <b-collapse class="pb-4 pt-lg-3" v-model="visible">
+      </BCol>
+    </BRow>
+    <BCollapse class="pb-4 pt-lg-3" v-model="visible">
       <decay-information
         :typeId="typeId"
         :decay="decay"
@@ -51,7 +52,7 @@
         :balance="balance"
         :previousBalance="previousBalance"
       />
-    </b-collapse>
+    </BCollapse>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/UserSettings/UserCard.vue b/frontend/src/components/UserSettings/UserCard.vue
index 9993f5980..5a43617d2 100755
--- a/frontend/src/components/UserSettings/UserCard.vue
+++ b/frontend/src/components/UserSettings/UserCard.vue
@@ -10,36 +10,36 @@
     </div>
 
     <div class="justify-content-center mt-5 mb-5">
-      <b-row align-v="stretch">
-        <b-col cols="4">
+      <BRow align-v="stretch">
+        <BCol cols="4">
           <div class="text-center font-weight-bold">
             {{ $n(balance, 'decimal') }}
           </div>
-        </b-col>
-        <b-col cols="4">
+        </BCol>
+        <BCol cols="4">
           <div class="text-center font-weight-bold">
             {{ transactionCount }}
           </div>
-        </b-col>
-        <b-col cols="4">
+        </BCol>
+        <BCol cols="4">
           <div class="text-center font-weight-bold">{{ CONFIG.COMMUNITY_NAME }}</div>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col cols="4">
+        </BCol>
+      </BRow>
+      <BRow>
+        <BCol cols="4">
           <div class="text-center">{{ $t('GDD') }}</div>
-        </b-col>
-        <b-col cols="4">
+        </BCol>
+        <BCol cols="4">
           <div class="text-center">
             {{ $t('navigation.transactions') }}
           </div>
-        </b-col>
-        <b-col cols="4">
+        </BCol>
+        <BCol cols="4">
           <div class="text-center">
             {{ $t('community.community') }}
           </div>
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/UserSettings/UserData.vue b/frontend/src/components/UserSettings/UserData.vue
index b7c3e8777..4c463c1fc 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>
-      <b-row class="mb-4 text-right">
-        <b-col class="text-right">
+      <BRow class="mb-4 text-right">
+        <BCol class="text-right">
           <a
             class="cursor-pointer"
             @click="showUserData ? (showUserData = !showUserData) : cancelEdit()"
@@ -11,41 +11,41 @@
             <b-icon v-if="showUserData" class="pointer ml-3" icon="pencil"></b-icon>
             <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
           </a>
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
     </div>
 
     <div>
       <b-form @keyup.prevent="loadSubmitButton">
-        <b-row class="mb-3">
-          <b-col class="col-12">
+        <BRow class="mb-3">
+          <BCol class="col-12">
             <small>
               <b>{{ $t('form.firstname') }}</b>
             </small>
-          </b-col>
-          <b-col v-if="showUserData" class="col-12">
+          </BCol>
+          <BCol v-if="showUserData" class="col-12">
             {{ form.firstName }}
-          </b-col>
-          <b-col v-else class="col-12">
+          </BCol>
+          <BCol v-else class="col-12">
             <b-input type="text" v-model="form.firstName"></b-input>
-          </b-col>
-        </b-row>
-        <b-row class="mb-3">
-          <b-col class="col-12">
+          </BCol>
+        </BRow>
+        <BRow class="mb-3">
+          <BCol class="col-12">
             <small>
               <b>{{ $t('form.lastname') }}</b>
             </small>
-          </b-col>
-          <b-col v-if="showUserData" class="col-12">
+          </BCol>
+          <BCol v-if="showUserData" class="col-12">
             {{ form.lastName }}
-          </b-col>
-          <b-col v-else class="col-12">
+          </BCol>
+          <BCol v-else class="col-12">
             <b-input type="text" v-model="form.lastName"></b-input>
-          </b-col>
-        </b-row>
+          </BCol>
+        </BRow>
 
-        <b-row class="text-right" v-if="!showUserData">
-          <b-col>
+        <BRow class="text-right" v-if="!showUserData">
+          <BCol>
             <div class="text-right" ref="submitButton">
               <b-button
                 :variant="loading ? 'light' : 'success'"
@@ -57,8 +57,8 @@
                 {{ $t('form.save') }}
               </b-button>
             </div>
-          </b-col>
-        </b-row>
+          </BCol>
+        </BRow>
       </b-form>
     </div>
   </b-card>
diff --git a/frontend/src/components/UserSettings/UserLanguage.vue b/frontend/src/components/UserSettings/UserLanguage.vue
index 39897184b..3bed3358a 100644
--- a/frontend/src/components/UserSettings/UserLanguage.vue
+++ b/frontend/src/components/UserSettings/UserLanguage.vue
@@ -1,8 +1,8 @@
 <template>
   <b-card id="formuserlanguage" class="card-border-radius card-background-gray">
     <div>
-      <b-row class="mb-4 text-right">
-        <b-col class="text-right">
+      <BRow class="mb-4 text-right">
+        <BCol class="text-right">
           <a
             class="cursor-pointer"
             @click="showLanguage ? (showLanguage = !showLanguage) : cancelEdit()"
@@ -11,38 +11,38 @@
             <b-icon v-if="showLanguage" class="pointer ml-3" icon="pencil"></b-icon>
             <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
           </a>
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
     </div>
 
     <div v-if="showLanguage">
-      <b-row class="mb-3">
-        <b-col class="col-12">
+      <BRow class="mb-3">
+        <BCol class="col-12">
           <small>
             <b>{{ $t('language') }}</b>
           </small>
-        </b-col>
+        </BCol>
         <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-        <b-col class="col-12">{{ $t(buildTagFromLanguageString()) }}</b-col>
-      </b-row>
+        <BCol class="col-12">{{ $t(buildTagFromLanguageString()) }}</BCol>
+      </BRow>
     </div>
 
     <div v-else>
       <div>
         <b-form @submit.stop.prevent="onSubmit">
-          <b-row class="mb-2">
-            <b-col class="col-12">
+          <BRow class="mb-2">
+            <BCol class="col-12">
               <small>
                 <b>{{ $t('language') }}</b>
               </small>
-            </b-col>
-            <b-col class="col-12">
+            </BCol>
+            <BCol class="col-12">
               <language-switch-select @update-language="updateLanguage" :language="language" />
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
 
-          <b-row class="text-right">
-            <b-col>
+          <BRow class="text-right">
+            <BCol>
               <div class="text-right" ref="submitButton">
                 <b-button
                   :variant="loading ? 'light' : 'success'"
@@ -53,8 +53,8 @@
                   {{ $t('form.save') }}
                 </b-button>
               </div>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
         </b-form>
       </div>
     </div>
diff --git a/frontend/src/components/UserSettings/UserName.vue b/frontend/src/components/UserSettings/UserName.vue
index 7f898bd2c..f061ecfd8 100644
--- a/frontend/src/components/UserSettings/UserName.vue
+++ b/frontend/src/components/UserSettings/UserName.vue
@@ -17,8 +17,8 @@
     <div v-else>
       <validation-observer ref="usernameObserver" v-slot="{ handleSubmit, invalid }">
         <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
-          <b-row class="mb-3">
-            <b-col class="col-12">
+          <BRow class="mb-3">
+            <BCol class="col-12">
               <input-username
                 v-model="username"
                 :name="$t('form.username')"
@@ -30,15 +30,15 @@
                 @set-is-edit="setIsEdit"
                 data-test="component-input-username"
               />
-            </b-col>
-            <b-col class="col-12">
+            </BCol>
+            <BCol class="col-12">
               <div v-if="!username" class="alert" data-test="username-alert">
                 {{ $t('settings.username.no-username') }}
               </div>
-            </b-col>
-          </b-row>
-          <b-row class="text-right" v-if="newUsername">
-            <b-col>
+            </BCol>
+          </BRow>
+          <BRow class="text-right" v-if="newUsername">
+            <BCol>
               <div class="text-right" ref="submitButton">
                 <b-button
                   :variant="disabled(invalid) ? 'light' : 'success'"
@@ -49,8 +49,8 @@
                   {{ $t('form.save') }}
                 </b-button>
               </div>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
         </b-form>
       </validation-observer>
     </div>
diff --git a/frontend/src/components/UserSettings/UserPassword.vue b/frontend/src/components/UserSettings/UserPassword.vue
index 9eeac80d4..dcf5f3b1b 100644
--- a/frontend/src/components/UserSettings/UserPassword.vue
+++ b/frontend/src/components/UserSettings/UserPassword.vue
@@ -1,8 +1,8 @@
 <template>
   <b-card id="change_pwd" class="card-border-radius card-background-gray">
     <div>
-      <b-row class="mb-4 text-right">
-        <b-col class="text-right">
+      <BRow class="mb-4 text-right">
+        <BCol class="text-right">
           <a
             class="cursor-pointer"
             @click="showPassword ? (showPassword = !showPassword) : cancelEdit()"
@@ -12,25 +12,25 @@
             <b-icon v-if="showPassword" class="pointer ml-3" icon="pencil"></b-icon>
             <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
           </a>
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
     </div>
 
     <div v-if="!showPassword">
       <validation-observer ref="observer" v-slot="{ handleSubmit, invalid }">
         <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
-          <b-row class="mb-2">
-            <b-col>
+          <BRow class="mb-2">
+            <BCol>
               <input-password
                 :label="$t('form.password_old')"
                 :placeholder="$t('form.password_old')"
                 v-model="form.password"
               ></input-password>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
           <input-password-confirmation v-model="form.newPassword" :register="register" />
-          <b-row class="text-right">
-            <b-col>
+          <BRow class="text-right">
+            <BCol>
               <div class="text-right">
                 <b-button
                   type="submit"
@@ -42,8 +42,8 @@
                   {{ $t('form.save') }}
                 </b-button>
               </div>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
         </b-form>
       </validation-observer>
     </div>
diff --git a/frontend/src/components/skeleton/Overview.vue b/frontend/src/components/skeleton/Overview.vue
index 06ae8075f..76b90b224 100644
--- a/frontend/src/components/skeleton/Overview.vue
+++ b/frontend/src/components/skeleton/Overview.vue
@@ -1,44 +1,44 @@
 <template>
   <div class="skeleton-overview h-100">
-    <b-row class="text-center">
-      <b-col>
+    <BRow class="text-center">
+      <BCol>
         <b-skeleton-img no-aspect animation="wave" height="118px"></b-skeleton-img>
-      </b-col>
-      <b-col cols="6">
+      </BCol>
+      <BCol cols="6">
         <b-skeleton animation="wave" class="mt-4 pt-5"></b-skeleton>
-      </b-col>
-      <b-col>
+      </BCol>
+      <BCol>
         <div class="b-right m-4">
-          <b-row>
-            <b-col><b-skeleton type="avatar"></b-skeleton></b-col>
-            <b-col>
+          <BRow>
+            <BCol><b-skeleton type="avatar"></b-skeleton></BCol>
+            <BCol>
               <b-skeleton></b-skeleton>
               <b-skeleton></b-skeleton>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
         </div>
-      </b-col>
-    </b-row>
-    <b-row class="text-center mt-5 pt-5">
-      <b-col cols="12" lg="">
+      </BCol>
+    </BRow>
+    <BRow class="text-center mt-5 pt-5">
+      <BCol cols="12" lg="">
         <b-skeleton animation="wave" width="85%"></b-skeleton>
         <b-skeleton animation="wave" width="55%"></b-skeleton>
         <b-skeleton animation="wave" width="70%"></b-skeleton>
-      </b-col>
-      <b-col cols="12" lg="6">
+      </BCol>
+      <BCol cols="12" lg="6">
         <b-skeleton animation="wave" width="85%"></b-skeleton>
         <b-skeleton animation="wave" width="55%"></b-skeleton>
         <b-skeleton animation="wave" width="70%"></b-skeleton>
         <b-skeleton animation="wave" width="85%"></b-skeleton>
         <b-skeleton animation="wave" width="55%"></b-skeleton>
         <b-skeleton animation="wave" width="70%"></b-skeleton>
-      </b-col>
-      <b-col cols="12" lg="">
+      </BCol>
+      <BCol cols="12" lg="">
         <b-skeleton animation="wave" width="85%"></b-skeleton>
         <b-skeleton animation="wave" width="55%"></b-skeleton>
         <b-skeleton animation="wave" width="70%"></b-skeleton>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
diff --git a/frontend/src/composables/useAuthLinks.js b/frontend/src/composables/useAuthLinks.js
new file mode 100644
index 000000000..769a1d7c2
--- /dev/null
+++ b/frontend/src/composables/useAuthLinks.js
@@ -0,0 +1,19 @@
+import { useRoute } from 'vue-router'
+
+export function useAuthLinks() {
+  const { params } = useRoute()
+
+  const login = () => {
+    if (params.code) return '/login/' + params.code
+    return '/login'
+  }
+  const register = () => {
+    if (params.code) return '/register/' + params.code
+    return '/register'
+  }
+
+  return {
+    login,
+    register,
+  }
+}
diff --git a/frontend/src/composables/useCopyLinks.js b/frontend/src/composables/useCopyLinks.js
new file mode 100644
index 000000000..c82be03f5
--- /dev/null
+++ b/frontend/src/composables/useCopyLinks.js
@@ -0,0 +1,53 @@
+import { ref } from 'vue'
+import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
+import { useAppToast } from '@/composables/useToast'
+
+export const useCopyLinks = ({ link, amount, memo, validUntil }) => {
+  const canCopyLink = ref(true)
+
+  const store = useStore()
+  const { toastSuccess, toastError } = useAppToast()
+  const { t, d } = useI18n()
+
+  const copyLink = () => {
+    navigator.clipboard
+      .writeText(link)
+      .then(() => {
+        toastSuccess(t('gdd_per_link.link-copied'))
+      })
+      .catch(() => {
+        canCopyLink.value = false
+        toastError(t('gdd_per_link.not-copied'))
+      })
+  }
+
+  const copyLinkWithText = () => {
+    navigator.clipboard
+      .writeText(linkText)
+      .then(() => {
+        toastSuccess(t('gdd_per_link.link-and-text-copied'))
+      })
+      .catch(() => {
+        canCopyLink.value = false
+        toastError(t('gdd_per_link.not-copied'))
+      })
+  }
+
+  const linkText = computed(() => {
+    return `${link}
+${store.state.firstName} ${t('transaction-link.send_you')} ${amount} Gradido.
+"${memo}"
+${t('gdd_per_link.credit-your-gradido')} ${t('gdd_per_link.validUntilDate', {
+      date: d(new Date(this.validUntil), 'short'),
+    })}
+${t('gdd_per_link.link-hint')}`
+  })
+
+  return {
+    canCopyLink,
+    copyLink,
+    copyLinkWithText,
+    linkText,
+  }
+}
diff --git a/frontend/src/filters/amount.js b/frontend/src/filters/amount.js
index 22adbefa1..badcb3ec4 100644
--- a/frontend/src/filters/amount.js
+++ b/frontend/src/filters/amount.js
@@ -1,18 +1,26 @@
-let i18n
+export const createFilters = (i18n) => {
+  const formatAmount = (value) => {
+    if (value === null || value === undefined) return ''
+    try {
+      const numValue = Number(value)
+      if (isNaN(numValue)) return ''
+      return i18n.global.n(numValue, 'decimal').replace('-', '− ')
+    } catch (error) {
+      console.error('Error formatting amount:', error)
+      return ''
+    }
+  }
 
-export const loadFilters = (_i18n) => {
-  i18n = _i18n
-  return { amount, GDD }
-}
+  const formatGDD = (value) => {
+    const formattedAmount = formatAmount(value)
+    if (formattedAmount === '') return ''
 
-const amount = (value) => {
-  if (!value && value !== 0) return ''
-  return i18n.global.n(value.toString(), 'decimal').replace('-', '− ')
-}
+    const numValue = Number(value)
+    if (isNaN(numValue)) return formattedAmount + ' GDD'
 
-const GDD = (value) => {
-  value = amount(value)
-  if (value === '') return ''
-  if (!value.match(/^− /) && !value.match(/^0[.,]00$/)) value = '+ ' + value
-  return value + ' GDD'
+    const prefix = numValue > 0 ? '+ ' : numValue < 0 ? '' : ''
+    return prefix + formattedAmount + ' GDD'
+  }
+
+  return { amount: formatAmount, GDD: formatGDD }
 }
diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js
index f73abe790..40b6e3366 100644
--- a/frontend/src/i18n.js
+++ b/frontend/src/i18n.js
@@ -74,7 +74,7 @@ const numberFormats = {
   },
 }
 
-const dateTimeFormats = {
+const datetimeFormats = {
   en: {
     short: {
       year: 'numeric',
@@ -239,5 +239,5 @@ export default createI18n({
   fallbackLocale: 'en',
   messages: { de, en, es, fr, tr, nl },
   numberFormats,
-  dateTimeFormats,
+  datetimeFormats,
 })
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index 60a438383..2827fd577 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -341,7 +341,7 @@ import LastTransactions from '@/components/Template/RightSide/LastTransactions'
 import { transactionsQuery, communityStatistics } from '@/graphql/queries'
 import { logout } from '@/graphql/mutations'
 import CONFIG from '@/config'
-import { useAppToast } from '../composables/useToast'
+import { useAppToast } from '@/composables/useToast'
 
 const store = useStore()
 const router = useRouter()
diff --git a/frontend/src/main.js b/frontend/src/main.js
index b496f7967..f842a9410 100755
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,15 +1,15 @@
 import { createApp } from 'vue'
 
+// import '@/assets/scss/gradido.scss'
+
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
 
-import '@/assets/scss/gradido.scss'
-
 // import DashboardPlugin from './plugins/dashboard-plugin'
 import App from './App'
 import i18n from './i18n.js'
 import { loadAllRules } from './validation-rules'
-import { loadFilters } from './filters/amount'
+import { createFilters } from './filters/amount'
 
 import 'regenerator-runtime'
 
@@ -25,15 +25,10 @@ import 'clipboard-polyfill/overwrite-globals'
 
 import { createBootstrap } from 'bootstrap-vue-next'
 
-// Add the necessary CSS
-// import 'bootstrap/dist/css/bootstrap.css'
-// import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
-
 // import GlobalComponents from '@/plugins/globalComponents'
 import GlobalDirectives from '@/plugins/globalDirectives'
 import PortalVue from 'portal-vue'
 import FlatPickr from 'vue-flatpickr-component'
-import VueApollo from 'vue-apollo'
 
 const app = createApp(App)
 
@@ -48,14 +43,15 @@ app.use(createBootstrap())
 app.use(GlobalDirectives)
 app.use(PortalVue)
 app.use(FlatPickr)
-// app.use(VueApollo)
 app.use(() => apolloProvider)
 // app.use(VueTimers)
 
 // app.mixin(toasters)
-const filters = loadFilters(i18n)
-app.filter('amount', filters.amount)
-app.filter('GDD', filters.GDD)
+const filters = createFilters(i18n)
+app.config.globalProperties.$filters = {
+  amount: filters.amount,
+  GDD: filters.GDD,
+}
 
 //TODO it will be used in future
 // app.config.globalProperties.$filters = {
diff --git a/frontend/src/pages/Circles.vue b/frontend/src/pages/Circles.vue
index 570a2fce8..fb24cb4e2 100644
--- a/frontend/src/pages/Circles.vue
+++ b/frontend/src/pages/Circles.vue
@@ -3,7 +3,7 @@
     <BContainer class="bg-white appBoxShadow gradido-border-radius p-4 mt--3">
       <div class="h3">{{ $t('circles.headline') }}</div>
       <div class="my-4 text-small">
-        <span v-for="(line, lineNumber) of $t('circles.text').split('\n')" v-bind:key="lineNumber">
+        <span v-for="(line, lineNumber) of $t('circles.text').split('\n')" :key="lineNumber">
           {{ line }}
           <br />
         </span>
@@ -12,10 +12,10 @@
         <BCol cols="12">
           <div class="text-lg-right">
             <BButton
-              :href="this.humhubUri"
-              v-if="this.humhubAllowed"
+              :href="humhubUri"
+              v-if="humhubAllowed"
               variant="gradido"
-              :disabled="this.enableButton === false"
+              :disabled="enableButton === false"
               target="_blank"
             >
               {{ $t('circles.button') }}
@@ -31,44 +31,90 @@
     </BContainer>
   </div>
 </template>
-<script>
+<!--<script>-->
+<!--import { authenticateHumhubAutoLogin } from '@/graphql/queries'-->
+<!--export default {-->
+<!--  name: 'Circles',-->
+<!--  data() {-->
+<!--    return {-->
+<!--      enableButton: false,-->
+<!--      humhubUri: '',-->
+<!--    }-->
+<!--  },-->
+<!--  computed: {-->
+<!--    humhubAllowed() {-->
+<!--      return this.$store.state.humhubAllowed-->
+<!--    },-->
+<!--  },-->
+<!--  methods: {-->
+<!--    async authenticateHumhubAutoLogin() {-->
+<!--      this.enableButton = false-->
+<!--      this.humhubUri = null-->
+<!--      this.$apollo-->
+<!--        .query({-->
+<!--          query: authenticateHumhubAutoLogin,-->
+<!--          fetchPolicy: 'network-only',-->
+<!--        })-->
+<!--        .then(async (result) => {-->
+<!--          this.humhubUri = result.data.authenticateHumhubAutoLogin-->
+<!--          this.enableButton = true-->
+<!--        })-->
+<!--        .catch(() => {-->
+<!--          this.enableButton = true-->
+<!--          this.humhubUri = ''-->
+<!--          // something went wrong with login link so we disable humhub-->
+<!--          this.$store.commit('humhubAllowed', false)-->
+<!--        })-->
+<!--    },-->
+<!--  },-->
+<!--  created() {-->
+<!--    this.authenticateHumhubAutoLogin()-->
+<!--  },-->
+<!--}-->
+<!--</script>-->
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
+import { useStore } from 'vuex'
 import { authenticateHumhubAutoLogin } from '@/graphql/queries'
-export default {
-  name: 'Circles',
-  data() {
-    return {
-      enableButton: false,
-      humhubUri: '',
-    }
-  },
-  computed: {
-    humhubAllowed() {
-      return this.$store.state.humhubAllowed
-    },
-  },
-  methods: {
-    async authenticateHumhubAutoLogin() {
-      this.enableButton = false
-      this.humhubUri = null
-      this.$apollo
-        .query({
-          query: authenticateHumhubAutoLogin,
-          fetchPolicy: 'network-only',
-        })
-        .then(async (result) => {
-          this.humhubUri = result.data.authenticateHumhubAutoLogin
-          this.enableButton = true
-        })
-        .catch(() => {
-          this.enableButton = true
-          this.humhubUri = ''
-          // something went wrong with login link so we disable humhub
-          this.$store.commit('humhubAllowed', false)
-        })
-    },
-  },
-  created() {
-    this.authenticateHumhubAutoLogin()
+
+const store = useStore()
+
+const enableButton = ref(false)
+const humhubUri = ref('')
+
+const humhubAllowed = computed(() => store.state.humhubAllowed)
+
+const { refetch: refetchAuthenticateHumhub, onResult, onError } = useQuery(
+  authenticateHumhubAutoLogin,
+  null,
+  {
+    fetchPolicy: 'network-only',
+    enabled: false,
   },
+)
+
+onResult(({ data }) => {
+  if (data) {
+    humhubUri.value = data.authenticateHumhubAutoLogin
+    enableButton.value = true
+  }
+})
+
+onError(() => {
+  enableButton.value = true
+  humhubUri.value = ''
+  store.commit('humhubAllowed', false)
+})
+
+const handleAuthenticateHumhubAutoLogin = async () => {
+  enableButton.value = false
+  humhubUri.value = null
+  await refetchAuthenticateHumhub()
 }
+
+onMounted(() => {
+  handleAuthenticateHumhubAutoLogin()
+})
 </script>
diff --git a/frontend/src/pages/ForgotPassword.vue b/frontend/src/pages/ForgotPassword.vue
index 80d07b9ff..82ac97c2b 100644
--- a/frontend/src/pages/ForgotPassword.vue
+++ b/frontend/src/pages/ForgotPassword.vue
@@ -3,8 +3,8 @@
   <div class="forgot-password">
     <b-container v-if="enterData">
       <div class="pb-5">{{ $t('site.forgotPassword.heading') }}</div>
-      <b-row class="justify-content-center">
-        <b-col>
+      <BRow class="justify-content-center">
+        <BCol>
           <validation-observer ref="observer" v-slot="{ handleSubmit, valid }">
             <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
               <input-email
@@ -13,17 +13,22 @@
                 :label="$t('form.email')"
                 :placeholder="$t('form.email')"
               ></input-email>
-              <b-row>
-                <b-col cols="12" lg="6">
-                <b-button type="submit" :variant="valid ? 'gradido' : 'gradido-disable'" block :disabled="!valid">
-                  {{ $t('settings.password.send_now') }}
-                </b-button>
-              </b-col>
-            </b-row>
+              <BRow>
+                <BCol cols="12" lg="6">
+                  <b-button
+                    type="submit"
+                    :variant="valid ? 'gradido' : 'gradido-disable'"
+                    block
+                    :disabled="!valid"
+                  >
+                    {{ $t('settings.password.send_now') }}
+                  </b-button>
+                </BCol>
+              </BRow>
             </b-form>
           </validation-observer>
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
     </b-container>
     <b-container v-else>
       <message
diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue
index 5f53b8ac1..dec731dec 100755
--- a/frontend/src/pages/Register.vue
+++ b/frontend/src/pages/Register.vue
@@ -4,8 +4,8 @@
       <div class="pb-5" align="center">{{ $t('gdd_per_link.isFree') }}</div>
       <validation-observer ref="observer" v-slot="{ handleSubmit }">
         <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-          <b-row>
-            <b-col sm="12" md="6">
+          <BRow>
+            <BCol sm="12" md="6">
               <validation-provider
                 :name="$t('form.firstname')"
                 :rules="{ required: true, min: 3 }"
@@ -30,8 +30,8 @@
                   </b-form-invalid-feedback>
                 </b-form-group>
               </validation-provider>
-            </b-col>
-            <b-col sm="12" md="6">
+            </BCol>
+            <BCol sm="12" md="6">
               <validation-provider
                 :name="$t('form.lastname')"
                 :rules="{ required: true, min: 2 }"
@@ -56,20 +56,20 @@
                   </b-form-invalid-feedback>
                 </b-form-group>
               </validation-provider>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
+            </BCol>
+          </BRow>
+          <BRow>
+            <BCol>
               <input-email
                 v-model="form.email"
                 :name="$t('form.email')"
                 :label="$t('form.email')"
                 :placeholder="$t('form.email')"
               ></input-email>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col cols="12" class="my-4">
+            </BCol>
+          </BRow>
+          <BRow>
+            <BCol cols="12" class="my-4">
               <b-form-checkbox
                 id="registerCheckbox"
                 v-model="form.agree"
@@ -78,10 +78,10 @@
                 <!-- eslint-disable-next-line @intlify/vue-i18n/no-v-html -->
                 <span class="text-muted" v-html="$t('site.signup.agree')"></span>
               </b-form-checkbox>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col cols="12" lg="6">
+            </BCol>
+          </BRow>
+          <BRow>
+            <BCol cols="12" lg="6">
               <b-button
                 block
                 type="submit"
@@ -90,8 +90,8 @@
               >
                 {{ $t('signup') }}
               </b-button>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
         </b-form>
       </validation-observer>
     </b-container>
diff --git a/frontend/src/pages/RegisterCommunity.vue b/frontend/src/pages/RegisterCommunity.vue
index 1acc0827e..5c781aeac 100644
--- a/frontend/src/pages/RegisterCommunity.vue
+++ b/frontend/src/pages/RegisterCommunity.vue
@@ -4,8 +4,8 @@
     <div class="p-3">
       <b-container>
         <div class="text-center mb-7 header">
-          <b-row class="justify-content-center">
-            <b-col xl="5" lg="6" md="8" class="px-2">
+          <BRow class="justify-content-center">
+            <BCol xl="5" lg="6" md="8" class="px-2">
               <h1>{{ CONFIG.COMMUNITY_NAME }}</h1>
               <p class="text-lead">
                 {{ CONFIG.COMMUNITY_DESCRIPTION }}
@@ -13,36 +13,36 @@
               <p class="text-lead community-location">
                 {{ CONFIG.COMMUNITY_URL }}
               </p>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col class="text-center">
+            </BCol>
+          </BRow>
+          <BRow>
+            <BCol class="text-center">
               <router-link to="/register">
                 <b-button variant="outline-secondary">
                   {{ $t('community.continue-to-registration') }}
                 </b-button>
               </router-link>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
 
           <hr />
-          <b-row>
-            <b-col class="text-center">
+          <BRow>
+            <BCol class="text-center">
               <router-link to="/select-community">
                 <b-button variant="outline-secondary">
                   {{ $t('community.choose-another-community') }}
                 </b-button>
               </router-link>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
           <hr />
-          <b-row>
-            <b-col class="text-center">
+          <BRow>
+            <BCol class="text-center">
               <router-link to="/login">
                 <b-button variant="outline-secondary">{{ $t('back') }}</b-button>
               </router-link>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
         </div>
       </b-container>
     </div>
diff --git a/frontend/src/pages/ResetPassword.vue b/frontend/src/pages/ResetPassword.vue
index 6fa76d994..50035d1dd 100644
--- a/frontend/src/pages/ResetPassword.vue
+++ b/frontend/src/pages/ResetPassword.vue
@@ -4,8 +4,8 @@
     <validation-observer ref="observer" v-slot="{ handleSubmit, valid }">
       <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
         <input-password-confirmation v-model="form" />
-        <b-row>
-          <b-col cols="12" lg="6">
+        <BRow>
+          <BCol cols="12" lg="6">
             <b-button
               block
               type="submit"
@@ -17,8 +17,8 @@
               <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
               {{ $t(displaySetup.button) }}
             </b-button>
-          </b-col>
-        </b-row>
+          </BCol>
+        </BRow>
       </b-form>
     </validation-observer>
   </div>
diff --git a/frontend/src/pages/Send.vue b/frontend/src/pages/Send.vue
index 550c30bf3..5045c2e42 100644
--- a/frontend/src/pages/Send.vue
+++ b/frontend/src/pages/Send.vue
@@ -49,7 +49,156 @@
     </gdd-send>
   </div>
 </template>
+<!--<script>-->
+<!--import GddSend, { TRANSACTION_STEPS } from '@/components/GddSend'-->
+<!--import TransactionForm from '@/components/GddSend/TransactionForm'-->
+<!--import TransactionConfirmationSend from '@/components/GddSend/TransactionConfirmationSend'-->
+<!--import TransactionConfirmationLink from '@/components/GddSend/TransactionConfirmationLink'-->
+<!--import TransactionResultSendSuccess from '@/components/GddSend/TransactionResultSendSuccess'-->
+<!--import TransactionResultSendError from '@/components/GddSend/TransactionResultSendError'-->
+<!--import TransactionResultLink from '@/components/GddSend/TransactionResultLink'-->
+<!--import { sendCoins, createTransactionLink } from '@/graphql/mutations.js'-->
+
+<!--const EMPTY_TRANSACTION_DATA = {-->
+<!--  identifier: '',-->
+<!--  amount: 0,-->
+<!--  memo: '',-->
+<!--}-->
+
+<!--export const SEND_TYPES = {-->
+<!--  send: 'send',-->
+<!--  link: 'link',-->
+<!--}-->
+
+<!--export default {-->
+<!--  name: 'Send',-->
+<!--  components: {-->
+<!--    GddSend,-->
+<!--    TransactionForm,-->
+<!--    TransactionConfirmationSend,-->
+<!--    TransactionConfirmationLink,-->
+<!--    TransactionResultSendSuccess,-->
+<!--    TransactionResultSendError,-->
+<!--    TransactionResultLink,-->
+<!--  },-->
+<!--  data() {-->
+<!--    return {-->
+<!--      transactionData: { ...EMPTY_TRANSACTION_DATA },-->
+<!--      error: false,-->
+<!--      errorResult: '',-->
+<!--      currentTransactionStep: TRANSACTION_STEPS.transactionForm,-->
+<!--      loading: false,-->
+<!--      link: null,-->
+<!--    }-->
+<!--  },-->
+<!--  props: {-->
+<!--    balance: { type: Number, default: 0 },-->
+<!--    GdtBalance: { type: Number, default: 0 },-->
+<!--    transactions: {-->
+<!--      default: () => [],-->
+<!--    },-->
+<!--    pending: {-->
+<!--      type: Boolean,-->
+<!--      default: true,-->
+<!--    },-->
+<!--  },-->
+<!--  methods: {-->
+<!--    setTransaction(data) {-->
+<!--      this.transactionData = { ...data }-->
+<!--      switch (data.selected) {-->
+<!--        case SEND_TYPES.send:-->
+<!--          this.currentTransactionStep = TRANSACTION_STEPS.transactionConfirmationSend-->
+<!--          break-->
+<!--        case SEND_TYPES.link:-->
+<!--          this.currentTransactionStep = TRANSACTION_STEPS.transactionConfirmationLink-->
+<!--          break-->
+<!--      }-->
+<!--    },-->
+<!--    async sendTransaction() {-->
+<!--      this.loading = true-->
+<!--      this.error = false-->
+<!--      switch (this.transactionData.selected) {-->
+<!--        case SEND_TYPES.send:-->
+<!--          this.$apollo-->
+<!--            .mutate({-->
+<!--              mutation: sendCoins,-->
+<!--              variables: {-->
+<!--                // from target community we need only the uuid-->
+<!--                recipientCommunityIdentifier: this.transactionData.targetCommunity.uuid,-->
+<!--                recipientIdentifier: this.transactionData.identifier,-->
+<!--                amount: this.transactionData.amount,-->
+<!--                memo: this.transactionData.memo,-->
+<!--              },-->
+<!--            })-->
+<!--            .then(() => {-->
+<!--              this.error = false-->
+<!--              this.$emit('set-tunneled-email', null)-->
+<!--              this.updateTransactions({})-->
+<!--              this.transactionData = { ...EMPTY_TRANSACTION_DATA }-->
+<!--              this.currentTransactionStep = TRANSACTION_STEPS.transactionResultSendSuccess-->
+<!--            })-->
+<!--            .catch((error) => {-->
+<!--              this.errorResult = error.message-->
+<!--              this.error = true-->
+<!--              this.currentTransactionStep = TRANSACTION_STEPS.transactionResultSendError-->
+<!--            })-->
+<!--          break-->
+<!--        case SEND_TYPES.link:-->
+<!--          this.$apollo-->
+<!--            .mutate({-->
+<!--              mutation: createTransactionLink,-->
+<!--              variables: { amount: this.transactionData.amount, memo: this.transactionData.memo },-->
+<!--            })-->
+<!--            .then((result) => {-->
+<!--              this.$emit('set-tunneled-email', null)-->
+<!--              const {-->
+<!--                data: {-->
+<!--                  createTransactionLink: { link, amount, memo, validUntil },-->
+<!--                },-->
+<!--              } = result-->
+<!--              this.link = link-->
+<!--              this.amount = amount-->
+<!--              this.memo = memo-->
+<!--              this.validUntil = validUntil-->
+<!--              this.transactionData = { ...EMPTY_TRANSACTION_DATA }-->
+<!--              this.currentTransactionStep = TRANSACTION_STEPS.transactionResultLink-->
+<!--              this.updateTransactions({})-->
+<!--            })-->
+<!--            .catch((error) => {-->
+<!--              this.toastError(error.message)-->
+<!--            })-->
+<!--          break-->
+<!--        default:-->
+<!--          throw new Error(`undefined transactionData.selected : ${this.transactionData.selected}`)-->
+<!--      }-->
+<!--      this.loading = false-->
+<!--      this.$router.push({ path: '/send' })-->
+<!--    },-->
+<!--    onBack() {-->
+<!--      this.currentTransactionStep = TRANSACTION_STEPS.transactionForm-->
+<!--      this.$mount()-->
+<!--    },-->
+<!--    updateTransactions(pagination) {-->
+<!--      this.$emit('update-transactions', pagination)-->
+<!--    },-->
+<!--  },-->
+<!--  created() {-->
+<!--    this.updateTransactions({})-->
+<!--  },-->
+<!--}-->
+<!--</script>-->
+
 <script>
+export const SEND_TYPES = {
+  send: 'send',
+  link: 'link',
+}
+</script>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { useMutation } from '@vue/apollo-composable'
 import GddSend, { TRANSACTION_STEPS } from '@/components/GddSend'
 import TransactionForm from '@/components/GddSend/TransactionForm'
 import TransactionConfirmationSend from '@/components/GddSend/TransactionConfirmationSend'
@@ -58,6 +207,7 @@ import TransactionResultSendSuccess from '@/components/GddSend/TransactionResult
 import TransactionResultSendError from '@/components/GddSend/TransactionResultSendError'
 import TransactionResultLink from '@/components/GddSend/TransactionResultLink'
 import { sendCoins, createTransactionLink } from '@/graphql/mutations.js'
+import { useAppToast } from '@/composables/useToast'
 
 const EMPTY_TRANSACTION_DATA = {
   identifier: '',
@@ -65,125 +215,125 @@ const EMPTY_TRANSACTION_DATA = {
   memo: '',
 }
 
-export const SEND_TYPES = {
-  send: 'send',
-  link: 'link',
+const props = defineProps({
+  balance: { type: Number, default: 0 },
+  GdtBalance: { type: Number, default: 0 },
+  transactions: {
+    type: Array,
+    default: () => [],
+  },
+  pending: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const emit = defineEmits(['set-tunneled-email', 'update-transactions'])
+
+const router = useRouter()
+const { toastError } = useAppToast()
+
+const transactionData = reactive({ ...EMPTY_TRANSACTION_DATA })
+const error = ref(false)
+const errorResult = ref('')
+const currentTransactionStep = ref(TRANSACTION_STEPS.transactionForm)
+const loading = ref(false)
+const link = ref(null)
+const amount = ref(0)
+const memo = ref('')
+const validUntil = ref(null)
+
+const { mutate: sendCoinsMutation } = useMutation(sendCoins)
+const { mutate: createTransactionLinkMutation } = useMutation(createTransactionLink)
+
+function setTransaction(data) {
+  Object.assign(transactionData, data)
+  currentTransactionStep.value =
+    data.selected === SEND_TYPES.send
+      ? TRANSACTION_STEPS.transactionConfirmationSend
+      : TRANSACTION_STEPS.transactionConfirmationLink
 }
 
-export default {
-  name: 'Send',
-  components: {
-    GddSend,
-    TransactionForm,
-    TransactionConfirmationSend,
-    TransactionConfirmationLink,
-    TransactionResultSendSuccess,
-    TransactionResultSendError,
-    TransactionResultLink,
-  },
-  data() {
-    return {
-      transactionData: { ...EMPTY_TRANSACTION_DATA },
-      error: false,
-      errorResult: '',
-      currentTransactionStep: TRANSACTION_STEPS.transactionForm,
-      loading: false,
-      link: null,
+async function sendTransaction() {
+  loading.value = true
+  error.value = false
+
+  try {
+    if (transactionData.selected === SEND_TYPES.send) {
+      await sendCoinsMutation({
+        recipientCommunityIdentifier: transactionData.targetCommunity.uuid,
+        recipientIdentifier: transactionData.identifier,
+        amount: transactionData.amount,
+        memo: transactionData.memo,
+      })
+
+      error.value = false
+      emit('set-tunneled-email', null)
+      updateTransactions({})
+      Object.assign(transactionData, EMPTY_TRANSACTION_DATA)
+      currentTransactionStep.value = TRANSACTION_STEPS.transactionResultSendSuccess
+    } else if (transactionData.selected === SEND_TYPES.link) {
+      const result = await createTransactionLinkMutation({
+        amount: transactionData.amount,
+        memo: transactionData.memo,
+      })
+
+      emit('set-tunneled-email', null)
+      const {
+        link: newLink,
+        amount: newAmount,
+        memo: newMemo,
+        validUntil: newValidUntil,
+      } = result.data.createTransactionLink
+      link.value = newLink
+      amount.value = newAmount
+      memo.value = newMemo
+      validUntil.value = newValidUntil
+      Object.assign(transactionData, EMPTY_TRANSACTION_DATA)
+      currentTransactionStep.value = TRANSACTION_STEPS.transactionResultLink
+      updateTransactions({})
+    } else {
+      throw new Error(`undefined transactionData.selected : ${transactionData.selected}`)
     }
-  },
-  props: {
-    balance: { type: Number, default: 0 },
-    GdtBalance: { type: Number, default: 0 },
-    transactions: {
-      default: () => [],
-    },
-    pending: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  methods: {
-    setTransaction(data) {
-      this.transactionData = { ...data }
-      switch (data.selected) {
-        case SEND_TYPES.send:
-          this.currentTransactionStep = TRANSACTION_STEPS.transactionConfirmationSend
-          break
-        case SEND_TYPES.link:
-          this.currentTransactionStep = TRANSACTION_STEPS.transactionConfirmationLink
-          break
-      }
-    },
-    async sendTransaction() {
-      this.loading = true
-      this.error = false
-      switch (this.transactionData.selected) {
-        case SEND_TYPES.send:
-          this.$apollo
-            .mutate({
-              mutation: sendCoins,
-              variables: {
-                // from target community we need only the uuid
-                recipientCommunityIdentifier: this.transactionData.targetCommunity.uuid,
-                recipientIdentifier: this.transactionData.identifier,
-                amount: this.transactionData.amount,
-                memo: this.transactionData.memo,
-              },
-            })
-            .then(() => {
-              this.error = false
-              this.$emit('set-tunneled-email', null)
-              this.updateTransactions({})
-              this.transactionData = { ...EMPTY_TRANSACTION_DATA }
-              this.currentTransactionStep = TRANSACTION_STEPS.transactionResultSendSuccess
-            })
-            .catch((error) => {
-              this.errorResult = error.message
-              this.error = true
-              this.currentTransactionStep = TRANSACTION_STEPS.transactionResultSendError
-            })
-          break
-        case SEND_TYPES.link:
-          this.$apollo
-            .mutate({
-              mutation: createTransactionLink,
-              variables: { amount: this.transactionData.amount, memo: this.transactionData.memo },
-            })
-            .then((result) => {
-              this.$emit('set-tunneled-email', null)
-              const {
-                data: {
-                  createTransactionLink: { link, amount, memo, validUntil },
-                },
-              } = result
-              this.link = link
-              this.amount = amount
-              this.memo = memo
-              this.validUntil = validUntil
-              this.transactionData = { ...EMPTY_TRANSACTION_DATA }
-              this.currentTransactionStep = TRANSACTION_STEPS.transactionResultLink
-              this.updateTransactions({})
-            })
-            .catch((error) => {
-              this.toastError(error.message)
-            })
-          break
-        default:
-          throw new Error(`undefined transactionData.selected : ${this.transactionData.selected}`)
-      }
-      this.loading = false
-      this.$router.push({ path: '/send' })
-    },
-    onBack() {
-      this.currentTransactionStep = TRANSACTION_STEPS.transactionForm
-      this.$mount()
-    },
-    updateTransactions(pagination) {
-      this.$emit('update-transactions', pagination)
-    },
-  },
-  created() {
-    this.updateTransactions({})
-  },
+  } catch (error) {
+    if (transactionData.selected === SEND_TYPES.send) {
+      errorResult.value = error.message
+      error.value = true
+      currentTransactionStep.value = TRANSACTION_STEPS.transactionResultSendError
+    } else {
+      toastError(error.message)
+    }
+  } finally {
+    loading.value = false
+    await router.push({ path: '/send' })
+  }
 }
+
+function onBack() {
+  currentTransactionStep.value = TRANSACTION_STEPS.transactionForm
+}
+
+function updateTransactions(pagination) {
+  emit('update-transactions', pagination)
+}
+
+// Equivalent to created hook
+updateTransactions({})
+
+// Expose necessary methods and reactive variables
+// defineExpose({
+//   setTransaction,
+//   sendTransaction,
+//   onBack,
+//   updateTransactions,
+//   transactionData,
+//   error,
+//   errorResult,
+//   currentTransactionStep,
+//   loading,
+//   link,
+//   amount,
+//   memo,
+//   validUntil,
+// })
 </script>
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index 2116bcdf9..c6381af3f 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -7,21 +7,21 @@
           {{ $t('settings.info') }}
         </div>
 
-        <b-row>
-          <b-col cols="12" md="6" lg="6">
+        <BRow>
+          <BCol cols="12" md="6" lg="6">
             <user-name />
-          </b-col>
-          <b-col cols="12" md="6" lg="6">
+          </BCol>
+          <BCol cols="12" md="6" lg="6">
             <b-form-group :label="$t('form.email')" :description="$t('settings.emailInfo')">
               <b-form-input v-model="email" readonly></b-form-input>
             </b-form-group>
-          </b-col>
-        </b-row>
+          </BCol>
+        </BRow>
 
         <hr />
         <b-form>
-          <b-row class="mt-3">
-            <b-col cols="12" md="6" lg="6">
+          <BRow class="mt-3">
+            <BCol cols="12" md="6" lg="6">
               <label>{{ $t('form.firstname') }}</label>
               <b-form-input
                 v-model="firstName"
@@ -29,8 +29,8 @@
                 data-test="firstname"
                 trim
               ></b-form-input>
-            </b-col>
-            <b-col cols="12" md="6" lg="6">
+            </BCol>
+            <BCol cols="12" md="6" lg="6">
               <label>{{ $t('form.lastname') }}</label>
               <b-form-input
                 v-model="lastName"
@@ -38,8 +38,8 @@
                 data-test="lastname"
                 trim
               ></b-form-input>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
           <div v-if="!isDisabled" class="mt-4 pt-4 text-center">
             <b-button
               type="submit"
@@ -52,19 +52,19 @@
           </div>
         </b-form>
         <hr />
-        <b-row>
-          <b-col cols="12" md="6" lg="6">{{ $t('language') }}</b-col>
-          <b-col cols="12" md="6" lg="6" class="text-right">
+        <BRow>
+          <BCol cols="12" md="6" lg="6">{{ $t('language') }}</BCol>
+          <BCol cols="12" md="6" lg="6" class="text-right">
             <user-language />
-          </b-col>
-        </b-row>
+          </BCol>
+        </BRow>
 
         <hr />
         <div class="mt-5">{{ $t('form.password') }}</div>
         <user-password />
         <hr />
-        <b-row class="mb-5">
-          <b-col cols="12" md="6" lg="6">
+        <BRow class="mb-5">
+          <BCol cols="12" md="6" lg="6">
             {{ $t('settings.newsletter.newsletter') }}
             <div class="text-small">
               {{
@@ -73,21 +73,21 @@
                   : $t('settings.newsletter.newsletterFalse')
               }}
             </div>
-          </b-col>
-          <b-col cols="12" md="6" lg="6" class="text-right">
+          </BCol>
+          <BCol cols="12" md="6" lg="6" class="text-right">
             <user-newsletter />
-          </b-col>
-        </b-row>
+          </BCol>
+        </BRow>
       </b-tab>
       <div v-if="isCommunityService">
         <b-tab class="community-service-tabs" :title="$t('settings.community')">
           <div class="h2">{{ $t('settings.allow-community-services') }}</div>
           <div v-if="isHumhub" class="mt-3">
-            <b-row>
-              <b-col cols="12" md="6" lg="6">
+            <BRow>
+              <BCol cols="12" md="6" lg="6">
                 <div class="h3">{{ $t('Humhub.title') }}</div>
-              </b-col>
-              <b-col cols="12" md="6" lg="6" class="text-right">
+              </BCol>
+              <BCol cols="12" md="6" lg="6" class="text-right">
                 <user-settings-switch
                   @valueChanged="humhubStateSwitch"
                   :initialValue="$store.state.humhubAllowed"
@@ -97,28 +97,28 @@
                   :disabledText="$t('settings.humhub.disabled')"
                   :notAllowedText="$t('settings.humhub.delete-disabled')"
                 />
-              </b-col>
-            </b-row>
+              </BCol>
+            </BRow>
             <div class="h4">{{ $t('Humhub.desc') }}</div>
-            <b-row v-if="humhubAllowed" class="mb-4 humhub-publish-name-row">
-              <b-col cols="12" md="6" lg="6">
+            <BRow v-if="humhubAllowed" class="mb-4 humhub-publish-name-row">
+              <BCol cols="12" md="6" lg="6">
                 {{ $t('settings.humhub.naming-format') }}
-              </b-col>
-              <b-col cols="12" md="6" lg="6">
+              </BCol>
+              <BCol cols="12" md="6" lg="6">
                 <user-naming-format
                   :initialValue="$store.state.humhubPublishName"
                   :attrName="'humhubPublishName'"
                   :successMessage="$t('settings.humhub.publish-name.updated')"
                 />
-              </b-col>
-            </b-row>
+              </BCol>
+            </BRow>
           </div>
           <div v-if="isGMS" class="mt-3">
-            <b-row>
-              <b-col cols="12" md="6" lg="6">
+            <BRow>
+              <BCol cols="12" md="6" lg="6">
                 <div class="h3">{{ $t('GMS.title') }}</div>
-              </b-col>
-              <b-col cols="12" md="6" lg="6" class="text-right">
+              </BCol>
+              <BCol cols="12" md="6" lg="6" class="text-right">
                 <user-settings-switch
                   @valueChanged="gmsStateSwitch"
                   :initialValue="$store.state.gmsAllowed"
@@ -126,61 +126,61 @@
                   :enabledText="$t('settings.GMS.enabled')"
                   :disabledText="$t('settings.GMS.disabled')"
                 />
-              </b-col>
-            </b-row>
+              </BCol>
+            </BRow>
             <div class="h4 mt-3">{{ $t('GMS.desc') }}</div>
             <div v-if="gmsAllowed">
-              <b-row class="mb-4">
-                <b-col cols="12" md="6" lg="6">
+              <BRow class="mb-4">
+                <BCol cols="12" md="6" lg="6">
                   {{ $t('settings.GMS.naming-format') }}
-                </b-col>
-                <b-col cols="12" md="6" lg="6">
+                </BCol>
+                <BCol cols="12" md="6" lg="6">
                   <user-naming-format
                     :initialValue="$store.state.gmsPublishName"
                     :attrName="'gmsPublishName'"
                     :successMessage="$t('settings.GMS.publish-name.updated')"
                   />
-                </b-col>
-              </b-row>
-              <b-row class="mb-4">
-                <b-col cols="12" md="6" lg="6">
+                </BCol>
+              </BRow>
+              <BRow class="mb-4">
+                <BCol cols="12" md="6" lg="6">
                   {{ $t('settings.GMS.location-format') }}
-                </b-col>
-                <b-col cols="12" md="6" lg="6">
+                </BCol>
+                <BCol cols="12" md="6" lg="6">
                   <user-g-m-s-location-format />
-                </b-col>
-              </b-row>
-              <b-row class="mb-5">
-                <b-col cols="12" md="6" lg="6">
+                </BCol>
+              </BRow>
+              <BRow class="mb-5">
+                <BCol cols="12" md="6" lg="6">
                   {{ $t('settings.GMS.location.label') }}
-                </b-col>
-                <b-col cols="12" md="6" lg="6">
+                </BCol>
+                <BCol cols="12" md="6" lg="6">
                   <user-g-m-s-location />
-                </b-col>
-              </b-row>
+                </BCol>
+              </BRow>
             </div>
           </div>
           <div v-else>
-            <b-row>
-              <b-col cols="12" md="6" lg="6">
+            <BRow>
+              <BCol cols="12" md="6" lg="6">
                 <div class="h3 text-muted">{{ $t('GMS.title') }}</div>
-              </b-col>
-              <b-col cols="12" md="6" lg="6" class="text-right">
+              </BCol>
+              <BCol cols="12" md="6" lg="6" class="text-right">
                 <user-settings-switch :disabled="true" />
-              </b-col>
-            </b-row>
+              </BCol>
+            </BRow>
             <div class="h4 mt-3 text-muted">{{ $t('GMS.desc') }}</div>
           </div>
         </b-tab>
       </div>
     </b-tabs>
 
-    <!-- TODO<b-row>
-      <b-col cols="12" md="6" lg="6">{{ $t('settings.darkMode') }}</b-col>
-      <b-col cols="12" md="6" lg="6" class="text-right">
+    <!-- TODO<BRow>
+      <BCol cols="12" md="6" lg="6">{{ $t('settings.darkMode') }}</BCol>
+      <BCol cols="12" md="6" lg="6" class="text-right">
         <b-form-checkbox v-model="darkMode" name="dark-mode" switch aligne></b-form-checkbox>
-      </b-col>
-    </b-row> -->
+      </BCol>
+    </BRow> -->
   </div>
 </template>
 <script>
diff --git a/frontend/src/pages/Transactions.vue b/frontend/src/pages/Transactions.vue
index d74045fe2..df321dcad 100644
--- a/frontend/src/pages/Transactions.vue
+++ b/frontend/src/pages/Transactions.vue
@@ -106,7 +106,7 @@ import { useLazyQuery } from '@vue/apollo-composable'
 import GddTransactionList from '@/components/GddTransactionList'
 import GdtTransactionList from '@/components/GdtTransactionList'
 import { listGDTEntriesQuery } from '@/graphql/queries'
-import { useAppToast } from '../composables/useToast'
+import { useAppToast } from '@/composables/useToast'
 
 const props = defineProps({
   gdt: { type: Boolean, default: false },
diff --git a/frontend/src/pages/UserSearch.vue b/frontend/src/pages/UserSearch.vue
index 070a96d7b..1cfd7ef40 100644
--- a/frontend/src/pages/UserSearch.vue
+++ b/frontend/src/pages/UserSearch.vue
@@ -11,15 +11,15 @@
           <br />
         </span>
       </div>
-      <b-row class="my-5">
-        <b-col cols="12">
+      <BRow class="my-5">
+        <BCol cols="12">
           <div class="text-lg-right">
             <b-button variant="gradido" :href="this.gmsUri" target="_blank">
               {{ $t('usersearch.button') }}
             </b-button>
           </div>
-        </b-col>
-      </b-row>
+        </BCol>
+      </BRow>
     </b-container>
   </div>
 </template>
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index af35dd2cb..bba1955bb 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,4 +1,6 @@
 import { defineConfig } from 'vite'
+// import { fileURLToPath, URL } from 'url';
+import path from 'path'
 import commonjs from 'vite-plugin-commonjs'
 import vue from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
@@ -7,7 +9,7 @@ import IconsResolve from 'unplugin-icons/resolver'
 
 import { BootstrapVueNextResolver } from 'bootstrap-vue-next'
 
-const path = require('path')
+// const path = require('path')
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -43,4 +45,11 @@ export default defineConfig({
     }),
     commonjs(),
   ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@/assets/scss/gradido.scss";`,
+      },
+    },
+  },
 })