diff --git a/resources/js/app.js b/resources/js/app.js
index e10d4da8..a6114e8d 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -18,6 +18,7 @@ const $2fauth = {
     isTestingApp: window.isTestingApp,
     langs: window.appLocales,
     urls: window.urls,
+    context: 'webapp',
 }
 app.provide('2fauth', readonly($2fauth))
 
@@ -41,7 +42,6 @@ app.use(Notifications)
 // Global components registration
 import ResponsiveWidthWrapper from '@/layouts/ResponsiveWidthWrapper.vue'
 import FormWrapper from '@/layouts/FormWrapper.vue'
-import Footer from '@/layouts/Footer.vue'
 import Kicker           from '@/components/Kicker.vue'
 
 import {
@@ -57,6 +57,7 @@ import {
 } from '@2fauth/formcontrols'
 
 import {
+    VueFooter,
     Modal
 } from '@2fauth/ui'
 
@@ -64,7 +65,7 @@ app
     .component('FontAwesomeIcon', FontAwesomeIcon)
     .component('ResponsiveWidthWrapper', ResponsiveWidthWrapper)
     .component('FormWrapper', FormWrapper)
-    .component('VueFooter', Footer)
+    .component('VueFooter', VueFooter)
     .component('Modal', Modal)
     .component('VueButton', VueButton)
     .component('NavigationButton', NavigationButton)
@@ -92,6 +93,15 @@ app
 // App mounting
 app.mount('#app')
 
-// Theme
+// App inject for footer
+// TODO : Try to avoid those global injection
 import { useUserStore } from '@/stores/user'
-useUserStore().applyUserPrefs()
+import { useAppSettingsStore } from '@/stores/appSettings'
+
+const user = useUserStore()
+const appSettings = useAppSettingsStore()
+
+user.applyUserPrefs()
+
+app.provide('userStore', user)
+app.provide('appSettingsStore', appSettings)
diff --git a/resources/js/components/DestinationGroupSelector.vue b/resources/js/components/DestinationGroupSelector.vue
index 3e985916..a3432e50 100644
--- a/resources/js/components/DestinationGroupSelector.vue
+++ b/resources/js/components/DestinationGroupSelector.vue
@@ -57,12 +57,14 @@
                 </div>
             </div>
         </div>
-        <VueFooter :showButtons="true">
-            <!-- Move to selected group button -->
-            <p class="control">
-                <button type="button" class="button is-link is-rounded" @click="moveAccounts">{{ $t('message.move') }}</button>
-            </p>
-            <NavigationButton action="cancel" :useLinkTag="false" @canceled="$emit('update:showDestinationGroupSelector', false)" />
+        <VueFooter>
+            <template #default>
+                <!-- Move to selected group button -->
+                <p class="control">
+                    <button type="button" class="button is-link is-rounded" @click="moveAccounts">{{ $t('message.move') }}</button>
+                </p>
+                <NavigationButton action="cancel" :useLinkTag="false" @canceled="$emit('update:showDestinationGroupSelector', false)" />
+            </template>
         </VueFooter>
     </div>
 </template>
\ No newline at end of file
diff --git a/resources/js/components/GroupSwitch.vue b/resources/js/components/GroupSwitch.vue
index 4ddd12cd..7b8014eb 100644
--- a/resources/js/components/GroupSwitch.vue
+++ b/resources/js/components/GroupSwitch.vue
@@ -44,8 +44,10 @@
                 </div>
             </div>
         </div>
-        <VueFooter :showButtons="true">
-            <NavigationButton action="close" :useLinkTag="false" @closed="$emit('update:showGroupSwitch', false)" />
+        <VueFooter>
+            <template #default>
+                <NavigationButton action="close" :useLinkTag="false" @closed="$emit('update:showGroupSwitch', false)" />
+            </template>
         </VueFooter>
     </div>
 </template>
\ No newline at end of file
diff --git a/resources/js/layouts/Footer.vue b/resources/js/layouts/Footer.vue
deleted file mode 100644
index 7a417709..00000000
--- a/resources/js/layouts/Footer.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<script setup>
-    import { useAppSettingsStore } from '@/stores/appSettings'
-    import { useUserStore } from '@/stores/user'
-    import { UseColorMode } from '@vueuse/components'
-    import { useI18n } from 'vue-i18n'
-
-    const { t } = useI18n()
-    const appSettings = useAppSettingsStore()
-    const user = useUserStore()
-    const $2fauth = inject('2fauth')
-    const showMenu = ref(false)
-
-    const props = defineProps({
-        showButtons: true,
-        internalFooterType: {
-            type: String,
-            default: 'navLinks'
-        }
-    })
-
-    function logout() {
-        if(confirm(t('message.auth.confirm.logout'))) {
-            user.logout()
-        }
-    }
-</script>
-
-<template>
-    <footer class="main" :class="{ 'menu' : showMenu }">
-        <!-- action buttons -->
-        <div class="columns is-gapless" v-if="showButtons && ! showMenu">
-            <div class="column has-text-centered">
-                <div class="field is-grouped">
-                    <slot></slot>
-                </div>
-            </div>
-        </div>
-        <!-- sub-links -->
-        <div v-if="internalFooterType == 'doneButton'" class="content has-text-centered">
-            <!-- done link -->
-            <button type="button" id="lnkExitEdit" class="button is-ghost is-like-text" @click.stop="$emit('doneButtonClicked', true)">{{ $t('message.done') }}</button>
-        </div>
-        <div v-else-if="internalFooterType == 'modal'" class="content has-text-centered">
-            <!-- back to home link -->
-            <router-link v-if="$route.name != 'accounts'" id="lnkBackToHome" :to="{ name: 'accounts' }" class="has-text-grey">{{ $t('message.back_to_home') }}</router-link>
-            <span v-else>&nbsp;</span>
-        </div>
-        <div v-else class="content has-text-centered">
-            <div v-if="$route.meta.showAbout === true">
-                <!-- about link -->
-                <router-link v-if="$route.name != 'about'" id="lnkAbout" :to="{ name: 'about' }" class="has-text-grey">
-                    <span v-if="user.isAuthenticated && $route.meta.watchedByKicker" class="has-text-weight-bold">2FAuth – v{{ $2fauth.version }}</span>
-                    <span v-else class="">{{ $t('message.about') }}</span>
-                </router-link>
-                <span v-else>&nbsp;</span>
-            </div>
-            <!-- email + menu links -->
-            <div v-else-if="user.preferences.showEmailInFooter">
-                <ul v-if="showMenu == true" class="ml-0 mt-1">
-                    <!-- settings link -->
-                    <li class="column">
-                        <router-link id="lnkSettings" :to="{ name: 'settings.options' }">
-                            {{ $t('message.settings.settings') }}
-                        </router-link>
-                    </li>
-                    <!-- admin link -->
-                    <li v-if="user.isAdmin" class="column">
-                        <router-link id="lnkAdmin" :to="{ name: 'admin.appSetup' }" >
-                            <span v-if="appSettings.latestRelease && appSettings.checkForUpdate" class="release-flag"></span>
-                            {{ $t('message.admin.admin_panel') }}
-                        </router-link>
-                    </li>
-                    <!-- sign-out button -->
-                    <li v-if="!$2fauth.config.proxyAuth || ($2fauth.config.proxyAuth && $2fauth.config.proxyLogoutUrl)" class="column">
-                        <UseColorMode v-slot="{ mode }">
-                            <button type="button" id="lnkSignOut" class="button is-text is-like-text" :class="mode == 'dark' ? 'has-text-grey-lighter' : 'has-text-grey-darker'" @click="logout">
-                                {{ $t('message.auth.sign_out') }}
-                            </button>
-                        </UseColorMode>
-                    </li>
-                </ul>
-                <!-- email link -->
-                <button type="button" id="btnEmailMenu" @click="showMenu = !showMenu" class="button is-text is-like-text has-text-grey" style="width: 100%;">
-                    <span v-if="user.isAdmin && appSettings.latestRelease && appSettings.checkForUpdate" class="release-flag"></span>
-                    <span class="mx-2 has-ellipsis">{{ user.email }}</span>
-                    <FontAwesomeIcon v-if="!showMenu" :icon="['fas', 'bars']" class="mr-2" />
-                    <!-- <button v-else class="delete ml-3"></button> -->
-                    <FontAwesomeIcon v-else :icon="['fas', 'times']" class="mr-2" />
-                </button>
-            </div>
-            <!-- legacy links -->
-            <div v-else>
-                <!-- settings link -->
-                <router-link id="lnkSettings" :to="{ name: 'settings.options' }" class="has-text-grey">
-                    {{ $t('message.settings.settings') }}
-                </router-link>
-                <!-- admin link -->
-                <span v-if="user.isAdmin"> -
-                    <router-link id="lnkAdmin" :to="{ name: 'admin.appSetup' }" class="has-text-grey">
-                        {{ $t('message.admin.admin') }}<span v-if="appSettings.latestRelease && appSettings.checkForUpdate" class="release-flag"></span>
-                    </router-link>
-                </span>
-                <!-- sign-out button -->
-                <span v-if="!$2fauth.config.proxyAuth || ($2fauth.config.proxyAuth && $2fauth.config.proxyLogoutUrl)">
-                    - <button type="button" id="lnkSignOut" class="button is-text is-like-text has-text-grey" @click="logout">{{ $t('message.auth.sign_out') }}</button>
-                </span>
-            </div>
-        </div>
-    </footer>
-</template>
diff --git a/resources/js/views/About.vue b/resources/js/views/About.vue
index ee0bb0c5..ee4b9c46 100644
--- a/resources/js/views/About.vue
+++ b/resources/js/views/About.vue
@@ -64,8 +64,10 @@
             <li>{{ $t('message.logos_by') }}&nbsp;<a href="https://2fa.directory/">2FA Directory</a>&nbsp;<a class="is-size-7" href="https://github.com/2factorauth/twofactorauth/blob/master/LICENSE.md">(MIT License)</a></li>
         </ul>
         <!-- footer -->
-        <VueFooter :showButtons="true">
-            <NavigationButton action="back" @goback="router.push({ name: returnTo })" :previous-page-title="$t('title.' + returnTo)" />
+        <VueFooter>
+            <template #default>
+                <NavigationButton action="back" @goback="router.push({ name: returnTo })" :previous-page-title="$t('title.' + returnTo)" />
+            </template>
         </VueFooter>
     </UseColorMode>
     </ResponsiveWidthWrapper>
diff --git a/resources/js/views/Start.vue b/resources/js/views/Start.vue
index c5e06d2b..e345bee9 100644
--- a/resources/js/views/Start.vue
+++ b/resources/js/views/Start.vue
@@ -107,8 +107,10 @@
             </div>
         </div>
         <!-- Footer -->
-        <VueFooter :showButtons="true" >
-            <NavigationButton v-if="!twofaccounts.isEmpty" action="back" @goback="router.push({ name: 'accounts' })" :previous-page-title="$t('title.accounts')" />
+        <VueFooter >
+            <template #default>
+                <NavigationButton v-if="!twofaccounts.isEmpty" action="back" @goback="router.push({ name: 'accounts' })" :previous-page-title="$t('title.accounts')" />
+            </template>
         </VueFooter>
     </div>
 </template>
diff --git a/resources/js/views/admin/AppSetup.vue b/resources/js/views/admin/AppSetup.vue
index 43c563d2..f48b116f 100644
--- a/resources/js/views/admin/AppSetup.vue
+++ b/resources/js/views/admin/AppSetup.vue
@@ -147,8 +147,10 @@
                 </div>
             </FormWrapper>
         </div>
-        <VueFooter :showButtons="true">
-            <NavigationButton action="close" @closed="router.push({ name: returnTo })" :current-page-title="$t('title.admin.appSetup')" />
+        <VueFooter>
+            <template #default>
+                <NavigationButton action="close" @closed="router.push({ name: returnTo })" :current-page-title="$t('title.admin.appSetup')" />
+            </template>
         </VueFooter>
     </div>
 </template>
\ No newline at end of file
diff --git a/resources/js/views/admin/Auth.vue b/resources/js/views/admin/Auth.vue
index 2e3fb3f1..34db6e21 100644
--- a/resources/js/views/admin/Auth.vue
+++ b/resources/js/views/admin/Auth.vue
@@ -101,8 +101,10 @@
                 </form>
             </FormWrapper>
         </div>
-        <VueFooter :showButtons="true">
-            <NavigationButton action="close" @closed="router.push({ name: returnTo })" :current-page-title="$t('title.admin.auth')" />
+        <VueFooter>
+            <template #default>
+                <NavigationButton action="close" @closed="router.push({ name: returnTo })" :current-page-title="$t('title.admin.auth')" />
+            </template>
         </VueFooter>
     </div>
 </template>
diff --git a/resources/js/views/admin/Users.vue b/resources/js/views/admin/Users.vue
index cd3b3736..992102b5 100644
--- a/resources/js/views/admin/Users.vue
+++ b/resources/js/views/admin/Users.vue
@@ -173,8 +173,10 @@
                 </div>
                 <Spinner :isVisible="isFetching && users.length === 0" />
                 <!-- footer -->
-                <VueFooter :showButtons="true">
-                    <NavigationButton action="close" @closed="router.push({ name: returnTo })" :current-page-title="$t('title.admin.users')" />
+                <VueFooter>
+                    <template #default>
+                        <NavigationButton action="close" @closed="router.push({ name: returnTo })" :current-page-title="$t('title.admin.users')" />
+                    </template>
                 </VueFooter>
             </FormWrapper>
         </div>
diff --git a/resources/js/views/admin/logs/Access.vue b/resources/js/views/admin/logs/Access.vue
index 1e0006cd..feffe441 100644
--- a/resources/js/views/admin/logs/Access.vue
+++ b/resources/js/views/admin/logs/Access.vue
@@ -39,9 +39,11 @@
         </div>
         <AccessLogViewer :userId="props.userId" :lastOnly="false" :showSearch="true" :period="1" />
         <!-- footer -->
-        <VueFooter :showButtons="true">
-            <NavigationButton action="back" @goback="router.push({ name: 'admin.manageUser', params: { userId: props.userId }})" :previous-page-title="$t('title.admin.manageUser')" />
-            <NavigationButton action="close" @closed="router.push({ name: 'accounts' })" :current-page-title="$t('title.admin.logs.access')" />
+        <VueFooter>
+            <template #default>
+                <NavigationButton action="back" @goback="router.push({ name: 'admin.manageUser', params: { userId: props.userId }})" :previous-page-title="$t('title.admin.manageUser')" />
+                <NavigationButton action="close" @closed="router.push({ name: 'accounts' })" :current-page-title="$t('title.admin.logs.access')" />
+            </template>
         </VueFooter>
     </ResponsiveWidthWrapper>
 </template>
diff --git a/resources/js/views/admin/users/Manage.vue b/resources/js/views/admin/users/Manage.vue
index 65b07ca2..9ce51937 100644
--- a/resources/js/views/admin/users/Manage.vue
+++ b/resources/js/views/admin/users/Manage.vue
@@ -327,9 +327,11 @@
             </div>
         </div>
         <!-- footer -->
-        <VueFooter :showButtons="true">
-            <NavigationButton action="back" @goback="router.push({ name: 'admin.users' })" :previous-page-title="$t('title.admin.users')" />
-            <NavigationButton action="close" @closed="router.push({ name: 'accounts' })" :current-page-title="$t('title.admin.manageUser')" />
+        <VueFooter>
+            <template #default>
+                <NavigationButton action="back" @goback="router.push({ name: 'admin.users' })" :previous-page-title="$t('title.admin.users')" />
+                <NavigationButton action="close" @closed="router.push({ name: 'accounts' })" :current-page-title="$t('title.admin.manageUser')" />
+            </template>
         </VueFooter>
     </ResponsiveWidthWrapper>
     </UseColorMode>
diff --git a/resources/js/views/auth/Login.vue b/resources/js/views/auth/Login.vue
index 22ad9f91..fdf4c8e0 100644
--- a/resources/js/views/auth/Login.vue
+++ b/resources/js/views/auth/Login.vue
@@ -277,6 +277,5 @@
             </div>
         </div>
     </FormWrapper>
-    <!-- footer -->
-    <VueFooter/>
+    <VueFooter />
 </template>
diff --git a/resources/js/views/auth/Register.vue b/resources/js/views/auth/Register.vue
index ee5119b6..fdba80bc 100644
--- a/resources/js/views/auth/Register.vue
+++ b/resources/js/views/auth/Register.vue
@@ -116,7 +116,6 @@
                 <p>{{ $t('message.auth.forms.already_register') }}&nbsp;<RouterLink id="lnkSignIn" :to="{ name: 'login' }" class="is-link">{{ $t('message.auth.sign_in') }}</RouterLink></p>
             </div>
         </FormWrapper>
-        <!-- footer -->
         <VueFooter />
     </div>
 </template>
diff --git a/resources/js/views/groups/Groups.vue b/resources/js/views/groups/Groups.vue
index 4d2083b9..c41ffc7d 100644
--- a/resources/js/views/groups/Groups.vue
+++ b/resources/js/views/groups/Groups.vue
@@ -69,8 +69,10 @@
             </span>
         </div>
         <!-- footer -->
-        <VueFooter :showButtons="true">
-            <NavigationButton action="close" @closed="router.push({ name: 'accounts' })" :current-page-title="$t('title.groups')" />
+        <VueFooter>
+            <template #default>
+                <NavigationButton action="close" @closed="router.push({ name: 'accounts' })" :current-page-title="$t('title.groups')" />
+            </template>
         </VueFooter>
     </ResponsiveWidthWrapper>
 </template>
\ No newline at end of file
diff --git a/resources/js/views/settings/Account.vue b/resources/js/views/settings/Account.vue
index d674f4ef..6469d9be 100644
--- a/resources/js/views/settings/Account.vue
+++ b/resources/js/views/settings/Account.vue
@@ -159,8 +159,10 @@
                 </form>
             </FormWrapper>
         </div>
-        <VueFooter :showButtons="true">
-            <NavigationButton action="close" @closed="router.push({ name: returnTo })" :current-page-title="$t('title.settings.account')" />
+        <VueFooter>
+            <template #default>
+                <NavigationButton action="close" @closed="router.push({ name: returnTo })" :current-page-title="$t('title.settings.account')" />
+            </template>
         </VueFooter>
     </div>
 </template>
diff --git a/resources/js/views/settings/OAuth.vue b/resources/js/views/settings/OAuth.vue
index 2f7778ea..73315a30 100644
--- a/resources/js/views/settings/OAuth.vue
+++ b/resources/js/views/settings/OAuth.vue
@@ -197,8 +197,10 @@
                 </div>
                 <Spinner :isVisible="isFetching && tokens.length === 0" />
                 <!-- footer -->
-                <VueFooter :showButtons="true">
-                    <NavigationButton action="close" @closed="router.push({ name: returnTo })" :current-page-title="$t('title.settings.oauth.tokens')" />
+                <VueFooter>
+                    <template #default>
+                        <NavigationButton action="close" @closed="router.push({ name: returnTo })" :current-page-title="$t('title.settings.oauth.tokens')" />
+                    </template>
                 </VueFooter>
             </FormWrapper>
         </div>
diff --git a/resources/js/views/settings/Options.vue b/resources/js/views/settings/Options.vue
index 2cc692d7..20802f96 100644
--- a/resources/js/views/settings/Options.vue
+++ b/resources/js/views/settings/Options.vue
@@ -262,8 +262,10 @@
                 </form>
             </FormWrapper>
         </div>
-        <VueFooter :showButtons="true">
-            <NavigationButton action="close" @closed="router.push({ name: returnTo })" :current-page-title="$t('title.settings.options')" />
+        <VueFooter>
+            <template #default>
+                <NavigationButton action="close" @closed="router.push({ name: returnTo })" :current-page-title="$t('title.settings.options')" />
+            </template>
         </VueFooter>
     </div>
 </template>
\ No newline at end of file
diff --git a/resources/js/views/settings/WebAuthn.vue b/resources/js/views/settings/WebAuthn.vue
index 766c7e4e..54af35f6 100644
--- a/resources/js/views/settings/WebAuthn.vue
+++ b/resources/js/views/settings/WebAuthn.vue
@@ -180,8 +180,10 @@
                     />
                 </form>
                 <!-- footer -->
-                <VueFooter :showButtons="true">
-                    <NavigationButton action="close" @closed="router.push({ name: returnTo })" :current-page-title="$t('title.settings.webauthn.devices')" />
+                <VueFooter>
+                    <template #default>
+                        <NavigationButton action="close" @closed="router.push({ name: returnTo })" :current-page-title="$t('title.settings.webauthn.devices')" />
+                    </template>
                 </VueFooter>
             </FormWrapper>
         </div>
diff --git a/resources/js/views/twofaccounts/Accounts.vue b/resources/js/views/twofaccounts/Accounts.vue
index 63c4a21c..0cc52e0f 100644
--- a/resources/js/views/twofaccounts/Accounts.vue
+++ b/resources/js/views/twofaccounts/Accounts.vue
@@ -486,14 +486,24 @@
                     </div>
                 </span>
             </div>
-            <VueFooter :showButtons="true" :internalFooterType="bus.inManagementMode && !showDestinationGroupSelector ? 'doneButton' : 'navLinks'" @done-button-clicked="exitManagementMode">
-                <ActionButtons
-                    v-model:inManagementMode="bus.inManagementMode"
-                    :areDisabled="twofaccounts.hasNoneSelected"
-                    @move-button-clicked="showDestinationGroupSelector = true"
-                    @delete-button-clicked="deleteAccounts"
-                    @export-button-clicked="showExportFormatSelector = true">
-                </ActionButtons>
+            <VueFooter v-if="bus.inManagementMode && !showDestinationGroupSelector">
+                <template #default>
+                    <ActionButtons
+                        v-model:inManagementMode="bus.inManagementMode"
+                        :areDisabled="twofaccounts.hasNoneSelected"
+                        @move-button-clicked="showDestinationGroupSelector = true"
+                        @delete-button-clicked="deleteAccounts"
+                        @export-button-clicked="showExportFormatSelector = true">
+                    </ActionButtons>
+                </template>
+                <template #subpart>
+                    <button type="button" id="lnkExitEdit" class="button is-ghost is-like-text" @click.stop="exitManagementMode">{{ $t('message.done') }}</button>
+                </template>
+            </VueFooter>
+            <VueFooter v-else>
+                <template #default>
+                    <ActionButtons v-model:inManagementMode="bus.inManagementMode" />
+                </template>
             </VueFooter>
         </div>
     </div>
diff --git a/resources/js/views/twofaccounts/CreateUpdate.vue b/resources/js/views/twofaccounts/CreateUpdate.vue
index 6aa50517..ef03ad23 100644
--- a/resources/js/views/twofaccounts/CreateUpdate.vue
+++ b/resources/js/views/twofaccounts/CreateUpdate.vue
@@ -596,14 +596,16 @@
                         <FormProtectedField v-if="form.otp_type === 'hotp'" pattern="[0-9]{1,4}" :enableProtection="isEditMode" :isExpanded="false" v-model="form.counter" fieldName="counter" :errorMessage="form.errors.get('counter')" label="message.twofaccounts.forms.counter.label" :placeholder="$t('message.twofaccounts.forms.counter.placeholder')" :help="isEditMode ? 'message.twofaccounts.forms.counter.help_lock' : 'message.twofaccounts.forms.counter.help'" />
                     </div>
                 </div>
-                <VueFooter :showButtons="true">
-                    <p class="control">
-                        <VueButton nativeType="submit" :id="isEditMode ? 'btnUpdate' : 'btnCreate'" :isLoading="form.isBusy" class="is-rounded" >{{ isEditMode ? $t('message.save') : $t('message.create') }}</VueButton>
-                    </p>
-                    <p class="control" v-if="form.otp_type && form.secret">
-                        <button id="btnPreview" type="button" class="button is-success is-rounded" @click="previewOTP">{{ $t('message.twofaccounts.forms.test') }}</button>
-                    </p>
-                    <NavigationButton action="cancel" :useLinkTag="false" @canceled="cancelCreation" />
+                <VueFooter>
+                    <template #default>
+                        <p class="control">
+                            <VueButton nativeType="submit" :id="isEditMode ? 'btnUpdate' : 'btnCreate'" :isLoading="form.isBusy" class="is-rounded" >{{ isEditMode ? $t('message.save') : $t('message.create') }}</VueButton>
+                        </p>
+                        <p class="control" v-if="form.otp_type && form.secret">
+                            <button id="btnPreview" type="button" class="button is-success is-rounded" @click="previewOTP">{{ $t('message.twofaccounts.forms.test') }}</button>
+                        </p>
+                        <NavigationButton action="cancel" :useLinkTag="false" @canceled="cancelCreation" />
+                    </template>
                 </VueFooter>
             </form>
             <!-- modal -->
diff --git a/resources/js/views/twofaccounts/Import.vue b/resources/js/views/twofaccounts/Import.vue
index 25133a3f..b0c5dd8e 100644
--- a/resources/js/views/twofaccounts/Import.vue
+++ b/resources/js/views/twofaccounts/Import.vue
@@ -450,18 +450,20 @@
                 </div>
             </div>
             <!-- footer -->
-            <VueFooter :showButtons="true">
-                <!-- Import all button -->
-                <p class="control" v-if="importableCount > 0">
-                    <button type="button" class="button is-link is-rounded is-focus" @click="createAccounts">
-                        <span>{{ $t('message.twofaccounts.import.import_all') }} ({{ importableCount }})</span>
-                        <!-- <span class="icon is-small">
-                            <FontAwesomeIcon :icon="['fas', 'qrcode']" />
-                        </span> -->
-                    </button>
-                </p>
-                <NavigationButton v-if="importableCount > 0" action="cancel" @canceled="router.push({ name: 'accounts' })" />
-                <NavigationButton v-else action="close" @closed="router.push({ name: 'accounts' })" :current-page-title="$t('title.importAccounts')" />
+            <VueFooter>
+                <template #default>
+                    <!-- Import all button -->
+                    <p class="control" v-if="importableCount > 0">
+                        <button type="button" class="button is-link is-rounded is-focus" @click="createAccounts">
+                            <span>{{ $t('message.twofaccounts.import.import_all') }} ({{ importableCount }})</span>
+                            <!-- <span class="icon is-small">
+                                <FontAwesomeIcon :icon="['fas', 'qrcode']" />
+                            </span> -->
+                        </button>
+                    </p>
+                    <NavigationButton v-if="importableCount > 0" action="cancel" @canceled="router.push({ name: 'accounts' })" />
+                    <NavigationButton v-else action="close" @closed="router.push({ name: 'accounts' })" :current-page-title="$t('title.importAccounts')" />
+                </template>
             </VueFooter>
         </ResponsiveWidthWrapper>
         <!-- modal -->
diff --git a/resources/js/views/twofaccounts/QRcode.vue b/resources/js/views/twofaccounts/QRcode.vue
index 16d7b179..87b3e5e7 100644
--- a/resources/js/views/twofaccounts/QRcode.vue
+++ b/resources/js/views/twofaccounts/QRcode.vue
@@ -28,8 +28,15 @@
                 <Spinner :isVisible="!qrcode" :type="'raw'" class="is-size-1" />
             </p>
         </div>
-        <VueFooter :showButtons="true" :internalFooterType="'modal'">
-            <NavigationButton action="close" @closed="router.push({ name: 'accounts' })" :current-page-title="$t('title.showQRcode')" />
+        <VueFooter>
+            <template #default>
+                <NavigationButton action="close" @closed="router.push({ name: 'accounts' })" :current-page-title="$t('title.showQRcode')" />
+            </template>
+            <template #subpart>
+                <!-- we add a subpart to hide the default slot value -->
+                <router-link v-if="$route.name != 'accounts'" id="lnkBackToHome" :to="{ name: 'accounts' }" class="has-text-grey">{{ $t('message.back_to_home') }}</router-link>
+                <span v-else>&nbsp;</span>
+            </template>
         </VueFooter>
     </div>
 </template>
\ No newline at end of file