diff --git a/admin/src/components/NavBar.vue b/admin/src/components/NavBar.vue
index 3bec6ee68..bad81f79a 100644
--- a/admin/src/components/NavBar.vue
+++ b/admin/src/components/NavBar.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="component-nabvar">
-    <BNavbar toggleable="lg" type="dark" class="bg-dark">
+    <BNavbar toggleable="lg" variant="dark" v-b-color-mode="'light'">
       <BNavbarBrand class="mb-2" to="/">
         <img src="img/brand/gradido_logo_w.png" class="navbar-brand-img pl-2" alt="..." />
       </BNavbarBrand>
 
-      <BNavbarToggle target="nav-collapse"></BNavbarToggle>
+      <BNavbarToggle target="navbar-toggle-collapse" />
 
       <BCollapse id="nav-collapse" is-nav>
         <BNavbarNav>
@@ -13,7 +13,7 @@
           <BNavItem class="bg-color-creation" to="/creation-confirm">
             {{ $t('creation') }}
             <BBadge v-show="$store.state.openCreations > 0" variant="danger">
-              {{ $store.state.openCreations }}
+              {{ openCreations.value }}
             </BBadge>
           </BNavItem>
           <BNavItem to="/contribution-links">
@@ -23,38 +23,50 @@
             {{ $t('navbar.instances') }}
           </BNavItem>
           <BNavItem to="/statistic">{{ $t('navbar.statistic') }}</BNavItem>
-          <BNavItem @click="wallet">{{ $t('navbar.my-account') }}</BNavItem>
-          <BNavItem @click="logout">{{ $t('navbar.logout') }}</BNavItem>
+          <BNavItem @click="handleWallet">{{ $t('navbar.my-account') }}</BNavItem>
+          <BNavItem @click="handleLogout">{{ $t('navbar.logout') }}</BNavItem>
         </BNavbarNav>
       </BCollapse>
     </BNavbar>
   </div>
 </template>
-<script>
+<script setup>
 import CONFIG from '../config'
+import { useStore } from 'vuex'
+import { computed } from 'vue'
+import { useMutation } from '@vue/apollo-composable'
 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)
-      // window.location = CONFIG.WALLET_LOGIN_URL
-      this.$store.dispatch('logout')
-      await this.$apollo.mutate({
-        mutation: logout,
-      })
-    },
-    wallet() {
-      window.location = CONFIG.WALLET_AUTH_URL.replace('{token}', this.$store.state.token)
-      this.$store.dispatch('logout') // logout without redirect
-    },
-  },
+import {
+  BNavbar,
+  BCollapse,
+  BNavbarNav,
+  BNavItem,
+  BNavbarBrand,
+  BBadge,
+  BNavbarToggle,
+} from 'bootstrap-vue-next'
+
+const store = useStore()
+
+const openCreations = computed(() => store.state.openCreations)
+
+const { mutate: executeLogout } = useMutation(logout)
+
+const handleLogout = async () => {
+  window.location.assign(CONFIG.WALLET_LOGIN_URL)
+  // window.location = CONFIG.WALLET_LOGIN_URL
+  store.dispatch('logout')
+  await executeLogout()
+}
+
+const handleWallet = () => {
+  window.location = CONFIG.WALLET_AUTH_URL.replace('{token}', store.state.token)
+  store.dispatch('logout') // logout without redirect
 }
 </script>
-<style>
+<style lang="scss" scoped>
 .navbar-brand-img {
   height: 2rem;
+  padding-left: 10px;
 }
 </style>