diff --git a/admin/package.json b/admin/package.json
index 96015e1c0..0288f725b 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -23,7 +23,9 @@
     "@babel/core": "^7.15.8",
     "@babel/node": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
-    "@vue/cli-plugin-unit-jest": "^4.5.14",
+    "@vue/apollo-option": "^4.0.0",
+    "@vue/cli-plugin-unit-jest": "~5.0.8",
+    "@vue/compat": "3.4.31",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/test-utils": "^1.2.2",
     "apollo-boost": "^0.4.9",
@@ -32,8 +34,8 @@
     "babel-plugin-component": "^1.1.1",
     "babel-preset-env": "^1.7.0",
     "babel-preset-vue": "^2.0.2",
-    "bootstrap": "4.3.1",
-    "bootstrap-vue": "^2.21.2",
+    "bootstrap": "^5.3.3",
+    "bootstrap-vue-next": "^0.23.2",
     "core-js": "^3.6.5",
     "date-fns": "^2.29.3",
     "dotenv-webpack": "^7.0.3",
@@ -43,25 +45,26 @@
     "jest": "26.6.3",
     "jest-canvas-mock": "^2.3.1",
     "jest-environment-jsdom-sixteen": "^2.0.0",
-    "portal-vue": "^2.1.7",
+    "portal-vue": "3.0.0",
     "qrcanvas-vue": "2.1.1",
     "regenerator-runtime": "^0.13.9",
     "stats-webpack-plugin": "^0.7.0",
-    "vue": "^2.6.11",
-    "vue-apollo": "^3.0.8",
-    "vue-i18n": "^8.26.5",
-    "vue-jest": "^3.0.7",
-    "vue-router": "^3.5.3",
-    "vuex": "^3.6.2",
-    "vuex-persistedstate": "^4.1.0"
+    "vue": "3.4.31",
+    "vue-apollo": "3.1.2",
+    "vue-i18n": "9.13.1",
+    "vue-jest": "3.0.7",
+    "vue-router": "4.4.0",
+    "vuex": "4.1.0",
+    "vuex-persistedstate": "4.1.0"
   },
   "devDependencies": {
-    "@apollo/client": "^3.7.1",
+    "@apollo/client": "^3.10.8",
     "@babel/eslint-parser": "^7.15.8",
     "@intlify/eslint-plugin-vue-i18n": "^1.4.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "3.4.31",
     "babel-eslint": "^10.1.0",
     "babel-plugin-transform-require-context": "^0.1.1",
     "cross-env": "^7.0.3",
@@ -75,6 +78,7 @@
     "eslint-plugin-prettier": "3.3.1",
     "eslint-plugin-promise": "^5.1.1",
     "eslint-plugin-vue": "^7.20.0",
+    "jest": "^27.1.0",
     "mock-apollo-client": "^1.2.1",
     "postcss": "^8.4.8",
     "postcss-html": "^1.3.0",
@@ -82,8 +86,8 @@
     "stylelint": "^14.5.3",
     "stylelint-config-recommended-vue": "^1.3.0",
     "stylelint-config-standard-scss": "^3.0.0",
-    "vue-cli-plugin-i18n": "^2.3.1",
-    "vue-template-compiler": "^2.6.11"
+    "unplugin-vue-components": "^0.27.2",
+    "vue-cli-plugin-i18n": "~2.3.2"
   },
   "browserslist": [
     "> 1%",
diff --git a/admin/src/components/NavBar.vue b/admin/src/components/NavBar.vue
index 4191290f3..3bec6ee68 100644
--- a/admin/src/components/NavBar.vue
+++ b/admin/src/components/NavBar.vue
@@ -1,41 +1,42 @@
 <template>
   <div class="component-nabvar">
-    <b-navbar toggleable="lg" type="dark" class="bg-dark">
-      <b-navbar-brand class="mb-2" to="/">
+    <BNavbar toggleable="lg" type="dark" class="bg-dark">
+      <BNavbarBrand class="mb-2" to="/">
         <img src="img/brand/gradido_logo_w.png" class="navbar-brand-img pl-2" alt="..." />
-      </b-navbar-brand>
+      </BNavbarBrand>
 
-      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+      <BNavbarToggle target="nav-collapse"></BNavbarToggle>
 
-      <b-collapse id="nav-collapse" is-nav>
-        <b-navbar-nav>
-          <b-nav-item to="/user">{{ $t('navbar.user_search') }}</b-nav-item>
-          <b-nav-item class="bg-color-creation" to="/creation-confirm">
+      <BCollapse id="nav-collapse" is-nav>
+        <BNavbarNav>
+          <BNavItem to="/user">{{ $t('navbar.user_search') }}</BNavItem>
+          <BNavItem class="bg-color-creation" to="/creation-confirm">
             {{ $t('creation') }}
-            <b-badge v-show="$store.state.openCreations > 0" variant="danger">
+            <BBadge v-show="$store.state.openCreations > 0" variant="danger">
               {{ $store.state.openCreations }}
-            </b-badge>
-          </b-nav-item>
-          <b-nav-item to="/contribution-links">
+            </BBadge>
+          </BNavItem>
+          <BNavItem to="/contribution-links">
             {{ $t('navbar.automaticContributions') }}
-          </b-nav-item>
-          <b-nav-item to="/federation">
+          </BNavItem>
+          <BNavItem to="/federation">
             {{ $t('navbar.instances') }}
-          </b-nav-item>
-          <b-nav-item to="/statistic">{{ $t('navbar.statistic') }}</b-nav-item>
-          <b-nav-item @click="wallet">{{ $t('navbar.my-account') }}</b-nav-item>
-          <b-nav-item @click="logout">{{ $t('navbar.logout') }}</b-nav-item>
-        </b-navbar-nav>
-      </b-collapse>
-    </b-navbar>
+          </BNavItem>
+          <BNavItem to="/statistic">{{ $t('navbar.statistic') }}</BNavItem>
+          <BNavItem @click="wallet">{{ $t('navbar.my-account') }}</BNavItem>
+          <BNavItem @click="logout">{{ $t('navbar.logout') }}</BNavItem>
+        </BNavbarNav>
+      </BCollapse>
+    </BNavbar>
   </div>
 </template>
 <script>
 import CONFIG from '../config'
 import { logout } from '../graphql/logout'
-
+import { BNavbar, BCollapse, BNavbarNav, BNavItem, BNavbarBrand, BBadge } from 'bootstrap-vue-next'
 export default {
   name: 'navbar',
+  components: { BNavbar, BCollapse, BNavbarNav, BNavItem, BNavbarBrand, BBadge },
   methods: {
     async logout() {
       window.location.assign(CONFIG.WALLET_LOGIN_URL)
diff --git a/admin/src/components/Tables/StatisticTable.vue b/admin/src/components/Tables/StatisticTable.vue
index a72e007a3..ef842425a 100644
--- a/admin/src/components/Tables/StatisticTable.vue
+++ b/admin/src/components/Tables/StatisticTable.vue
@@ -1,84 +1,100 @@
 <!-- eslint-disable vue/no-static-inline-styles -->
 <template>
   <div class="statistic-table">
-    <b-table-simple style="width: auto" class="mt-5" striped stacked="md">
-      <b-thead>
-        <b-tr>
-          <b-th></b-th>
-          <b-th class="text-right">{{ $t('statistic.count') }}</b-th>
-          <b-th class="text-right">{{ $t('statistic.details') }}</b-th>
-        </b-tr>
-      </b-thead>
-      <b-tbody>
-        <b-tr>
-          <b-td>
+    <BTableSimple style="width: auto" class="mt-5" striped stacked="md">
+      <BThead>
+        <BTr>
+          <BTh />
+          <BTh class="text-right">{{ $t('statistic.count') }}</BTh>
+          <BTh class="text-right">{{ $t('statistic.details') }}</BTh>
+        </BTr>
+      </BThead>
+      <BTbody>
+        <BTr>
+          <BTd>
             <b>{{ $t('statistic.totalUsers') }}</b>
-          </b-td>
-          <b-td class="text-right">{{ value.totalUsers }}</b-td>
-          <b-td></b-td>
-        </b-tr>
-        <b-tr>
-          <b-td>
+          </BTd>
+          <BTd class="text-right">
+            {{ value.totalUsers }}
+          </BTd>
+          <BTd></BTd>
+        </BTr>
+        <BTr>
+          <BTd>
             <b>{{ $t('statistic.activeUsers') }}</b>
-          </b-td>
-          <b-td class="text-right">{{ value.activeUsers }}</b-td>
-          <b-td></b-td>
-        </b-tr>
-        <b-tr>
-          <b-td>
+          </BTd>
+          <BTd class="text-right">
+            {{ value.activeUsers }}
+          </BTd>
+          <BTd></BTd>
+        </BTr>
+        <BTr>
+          <BTd>
             <b>{{ $t('statistic.deletedUsers') }}</b>
-          </b-td>
-          <b-td class="text-right">{{ value.deletedUsers }}</b-td>
-          <b-td></b-td>
-        </b-tr>
-        <b-tr>
-          <b-td>
+          </BTd>
+          <BTd class="text-right">
+            {{ value.deletedUsers }}
+          </BTd>
+          <BTd></BTd>
+        </BTr>
+        <BTr>
+          <BTd>
             <b>{{ $t('statistic.totalGradidoCreated') }}</b>
-          </b-td>
-          <b-td class="text-right">
-            {{ $n(value.totalGradidoCreated, 'decimal') }} {{ $t('GDD') }}
-          </b-td>
-          <b-td class="text-right">{{ value.totalGradidoCreated }}</b-td>
-        </b-tr>
-        <b-tr>
-          <b-td>
+          </BTd>
+          <BTd class="text-right">
+            <!--            {{ $n(value.totalGradidoCreated, 'decimal') }} {{ $t('GDD') }}-->
+            4500
+          </BTd>
+          <BTd class="text-right">
+            {{ value.totalGradidoCreated }}
+          </BTd>
+        </BTr>
+        <BTr>
+          <BTd>
             <b>{{ $t('statistic.totalGradidoDecayed') }}</b>
-          </b-td>
-          <b-td class="text-right">
-            {{ $n(value.totalGradidoDecayed, 'decimal') }} {{ $t('GDD') }}
-          </b-td>
-          <b-td class="text-right">{{ value.totalGradidoDecayed }}</b-td>
-        </b-tr>
-        <b-tr>
-          <b-td>
+          </BTd>
+          <BTd class="text-right">
+            <!--            {{ $n(value.totalGradidoDecayed, 'decimal') }} {{ $t('GDD') }}-->
+            100
+          </BTd>
+          <BTd class="text-right">{{ value.totalGradidoDecayed }}</BTd>
+        </BTr>
+        <BTr>
+          <BTd>
             <b>{{ $t('statistic.totalGradidoAvailable') }}</b>
-          </b-td>
-          <b-td class="text-right">
-            {{ $n(value.totalGradidoAvailable, 'decimal') }} {{ $t('GDD') }}
-          </b-td>
-          <b-td class="text-right">{{ value.totalGradidoAvailable }}</b-td>
-        </b-tr>
-        <b-tr>
-          <b-td>
+          </BTd>
+          <BTd class="text-right">
+            <!--            {{ $n(value.totalGradidoAvailable, 'decimal') }} {{ $t('GDD') }}-->
+            500
+          </BTd>
+          <BTd class="text-right">
+            {{ value.totalGradidoAvailable }}
+          </BTd>
+        </BTr>
+        <BTr>
+          <BTd>
             <b>{{ $t('statistic.totalGradidoUnbookedDecayed') }}</b>
-          </b-td>
-          <b-td class="text-right">
-            {{ $n(value.totalGradidoUnbookedDecayed, 'decimal') }} {{ $t('GDD') }}
-          </b-td>
-          <b-td class="text-right">{{ value.totalGradidoUnbookedDecayed }}</b-td>
-        </b-tr>
-      </b-tbody>
-    </b-table-simple>
+          </BTd>
+          <BTd class="text-right">
+            <!--            {{ $n(value.totalGradidoUnbookedDecayed, 'decimal') }} {{ $t('GDD') }}-->
+            600
+          </BTd>
+          <BTd class="text-right">
+            {{ value.totalGradidoUnbookedDecayed }}
+          </BTd>
+        </BTr>
+      </BTbody>
+    </BTableSimple>
   </div>
 </template>
-<script>
-export default {
-  name: 'StatisticTable',
-  props: {
-    value: {
-      type: Object,
-      required: true,
-    },
+<script setup>
+import { defineProps } from 'vue'
+import { BTableSimple, BThead, BTr, BTh, BTbody, BTd } from 'bootstrap-vue-next'
+
+const props = defineProps({
+  value: {
+    type: Object,
+    required: true,
   },
-}
+})
 </script>
diff --git a/admin/src/i18n.js b/admin/src/i18n.js
index b2bb08074..c0e6ffedb 100644
--- a/admin/src/i18n.js
+++ b/admin/src/i18n.js
@@ -1,7 +1,4 @@
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
-
-Vue.use(VueI18n)
+import { createI18n } from 'vue-i18n'
 
 const loadLocaleMessages = () => {
   const locales = require.context('./locales/', true, /[A-Za-z0-9-_,\s]+\.json$/i)
@@ -45,7 +42,7 @@ const numberFormats = {
   },
 }
 
-const dateTimeFormats = {
+const datetimeFormats = {
   en: {
     short: {
       year: 'numeric',
@@ -96,12 +93,13 @@ const dateTimeFormats = {
   },
 }
 
-const i18n = new VueI18n({
+const i18n = createI18n({
   locale: 'en',
+  legacy: false,
   fallbackLocale: 'en',
   messages: loadLocaleMessages(),
   numberFormats,
-  dateTimeFormats,
+  datetimeFormats,
 })
 
 export default i18n
diff --git a/admin/src/main.js b/admin/src/main.js
index 6a8b017c5..d9bfebe9e 100644
--- a/admin/src/main.js
+++ b/admin/src/main.js
@@ -1,5 +1,5 @@
-import Vue from 'vue'
-import App from './App'
+import { createApp } from 'vue'
+import App from './App.vue'
 
 // without this async calls are not working
 import 'regenerator-runtime'
@@ -15,32 +15,32 @@ import VueApollo from 'vue-apollo'
 
 import PortalVue from 'portal-vue'
 
-import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import { createBootstrap } from 'bootstrap-vue-next'
+
+// Add the necessary CSS
 import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
+import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
 
 import { toasters } from './mixins/toaster'
 
 import { apolloProvider } from './plugins/apolloProvider'
 
-Vue.use(PortalVue)
-Vue.use(BootstrapVue)
+const app = createApp(App)
 
-Vue.use(IconsPlugin)
+app.use(router)
+app.use(store)
+app.use(i18n)
+app.use(PortalVue)
+app.use(createBootstrap())
 
-Vue.use(VueApollo)
+app.use(VueApollo)
+app.use(apolloProvider)
 
-Vue.mixin(toasters)
+app.mixin(toasters)
 
 addNavigationGuards(router, store, apolloProvider.defaultClient, i18n)
 
 i18n.locale =
   store.state.moderator && store.state.moderator.language ? store.state.moderator.language : 'en'
 
-new Vue({
-  router,
-  store,
-  i18n,
-  apolloProvider,
-  render: (h) => h(App),
-}).$mount('#app')
+app.mount('#app')
diff --git a/admin/src/pages/Overview.vue b/admin/src/pages/Overview.vue
index f921d2bc3..1e72f6a3b 100644
--- a/admin/src/pages/Overview.vue
+++ b/admin/src/pages/Overview.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="admin-overview">
-    <b-card
+    <BCard
       v-show="$store.state.openCreations > 0"
       border-variant="primary"
       :header="$t('open_creations')"
@@ -13,8 +13,8 @@
           <h1>{{ $store.state.openCreations }}</h1>
         </b-link>
       </b-card-text>
-    </b-card>
-    <b-card
+    </BCard>
+    <BCard
       v-show="$store.state.openCreations < 1"
       border-variant="success"
       :header="$t('not_open_creations')"
@@ -22,19 +22,21 @@
       header-text-variant="white"
       align="center"
     >
-      <b-card-text>
-        <b-link to="creation-confirm">
+      <BCardText>
+        <BLink to="creation-confirm">
           <h1 data-test="open-creation">{{ $store.state.openCreations }}</h1>
-        </b-link>
-      </b-card-text>
-    </b-card>
+        </BLink>
+      </BCardText>
+    </BCard>
   </div>
 </template>
 <script>
 import { adminListContributions } from '../graphql/adminListContributions'
+import { BCard, BCardText } from 'bootstrap-vue-next'
 
 export default {
   name: 'overview',
+  components: { BCard, BCardText },
   data() {
     return {
       statusFilter: ['IN_PROGRESS', 'PENDING'],
diff --git a/admin/src/plugins/apolloProvider.js b/admin/src/plugins/apolloProvider.js
index 122857031..e50d3857f 100644
--- a/admin/src/plugins/apolloProvider.js
+++ b/admin/src/plugins/apolloProvider.js
@@ -1,9 +1,9 @@
-import { ApolloClient, ApolloLink, InMemoryCache, HttpLink } from 'apollo-boost'
-import VueApollo from 'vue-apollo'
+import { ApolloClient, ApolloLink, InMemoryCache, createHttpLink } from '@apollo/client/core'
+import { createApolloProvider } from '@vue/apollo-option'
 import CONFIG from '../config'
 import store from '../store/store'
 
-const httpLink = new HttpLink({ uri: CONFIG.GRAPHQL_URI })
+const httpLink = createHttpLink({ uri: CONFIG.GRAPHQL_URI })
 
 const authLink = new ApolloLink((operation, forward) => {
   const token = store.state.token
@@ -30,6 +30,6 @@ const apolloClient = new ApolloClient({
   cache: new InMemoryCache(),
 })
 
-export const apolloProvider = new VueApollo({
+export const apolloProvider = createApolloProvider({
   defaultClient: apolloClient,
 })
diff --git a/admin/src/router/router.js b/admin/src/router/router.js
index dbad9ac6b..f867e2eb6 100644
--- a/admin/src/router/router.js
+++ b/admin/src/router/router.js
@@ -1,14 +1,10 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import routes from './routes'
 
-Vue.use(VueRouter)
-
-const router = new VueRouter({
-  base: '/admin',
+const router = createRouter({
   routes,
   linkActiveClass: 'active',
-  mode: 'history',
+  history: createWebHistory('/admin/'),
   scrollBehavior: (to, from, savedPosition) => {
     if (savedPosition) {
       return savedPosition
@@ -16,7 +12,7 @@ const router = new VueRouter({
     if (to.hash) {
       return { selector: to.hash }
     }
-    return { x: 0, y: 0 }
+    return { left: 0, top: 0 }
   },
 })
 
diff --git a/admin/src/router/routes.js b/admin/src/router/routes.js
index d26fdfd96..c343db253 100644
--- a/admin/src/router/routes.js
+++ b/admin/src/router/routes.js
@@ -27,14 +27,15 @@ const routes = [
     path: '/contribution-links',
     component: () => import('@/pages/ContributionLinks.vue'),
   },
-  {
-    path: '*',
-    component: () => import('@/components/NotFoundPage.vue'),
-  },
   {
     path: '/federation',
     component: () => import('@/pages/FederationVisualize.vue'),
   },
+  {
+    path: '/:catchAll(.*)',
+    name: 'NotFound',
+    component: () => import('@/components/NotFoundPage.vue'),
+  },
 ]
 
 export default routes
diff --git a/admin/src/store/store.js b/admin/src/store/store.js
index 0263cf33f..4ba414e6b 100644
--- a/admin/src/store/store.js
+++ b/admin/src/store/store.js
@@ -1,10 +1,7 @@
-import Vuex from 'vuex'
-import Vue from 'vue'
+import { createStore } from 'vuex'
 import createPersistedState from 'vuex-persistedstate'
 import CONFIG from '../config'
 
-Vue.use(Vuex)
-
 export const mutations = {
   openCreationsPlus: (state, i) => {
     state.openCreations += i
@@ -34,7 +31,7 @@ export const actions = {
   },
 }
 
-const store = new Vuex.Store({
+const store = createStore({
   plugins: [
     createPersistedState({
       key: 'gradido-admin',
diff --git a/admin/vue.config.js b/admin/vue.config.js
index a92b26419..909c2256d 100644
--- a/admin/vue.config.js
+++ b/admin/vue.config.js
@@ -20,6 +20,23 @@ module.exports = {
   },
   lintOnSave: true,
   publicPath: '/admin',
+  chainWebpack: (config) => {
+    config.resolve.alias.set('vue', '@vue/compat')
+
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap((options) => {
+        return {
+          ...options,
+          compilerOptions: {
+            compatConfig: {
+              MODE: 2,
+            },
+          },
+        }
+      })
+  },
   configureWebpack: {
     // Set up all the aliases we use in our app.
     resolve: {
@@ -42,7 +59,7 @@ module.exports = {
       new StatsPlugin('webpack.stats.json'),
     ],
     infrastructureLogging: {
-      level: 'warn', // 'none' | 'error' | 'warn' | 'info' | 'log' | 'verbose'
+      level: 'info', // 'none' | 'error' | 'warn' | 'info' | 'log' | 'verbose'
     },
   },
   css: {