diff --git a/resources/js_vue3/layouts/SettingTabs.vue b/resources/js_vue3/layouts/SettingTabs.vue
index e56293ec..10b86b4d 100644
--- a/resources/js_vue3/layouts/SettingTabs.vue
+++ b/resources/js_vue3/layouts/SettingTabs.vue
@@ -6,15 +6,15 @@
             'id'   : 'lnkTabOptions'
         },
         // {
-        //     'name' : wTrans('settings.account'),
-        //     'view' : 'settings.account',
-        //     'id'   : 'lnkTabAccount'
-        // },
-        // {
         //     'name' : wTrans('settings.oauth'),
         //     'view' : 'settings.oauth.tokens',
         //     'id'   : 'lnkTabOAuth'
         // },
+        {
+            'name' : trans('settings.account'),
+            'view' : 'settings.account',
+            'id'   : 'lnkTabAccount'
+        },
         {
             'name' : trans('settings.webauthn'),
             'view' : 'settings.webauthn.devices',
diff --git a/resources/js_vue3/router/index.js b/resources/js_vue3/router/index.js
index 1357cb2a..c138485e 100644
--- a/resources/js_vue3/router/index.js
+++ b/resources/js_vue3/router/index.js
@@ -20,8 +20,8 @@ import PasswordRequest  from '../views/auth/password/Request.vue'
 import WebauthnLost     from '../views/auth/webauthn/Lost.vue'
 // import WebauthnRecover  from './views/auth/webauthn/Recover.vue'
 import SettingsOptions  from '../views/settings/Options.vue'
-// import SettingsAccount  from './views/settings/Account.vue'
 // import SettingsOAuth    from './views/settings/OAuth.vue'
+import SettingsAccount  from '../views/settings/Account.vue'
 import SettingsWebAuthn from '../views/settings/WebAuthn.vue'
 import EditCredential   from '../views/settings/Credentials/Edit.vue'
 // import GeneratePAT      from './views/settings/PATokens/Create.vue'
@@ -48,9 +48,9 @@ const router = createRouter({
         // { path: '/group/:groupId/edit', name: 'editGroup', component: EditGroup, meta: { middlewares: [authGuard] }, props: true },
 
         { path: '/settings/options', name: 'settings.options', component: SettingsOptions, meta: { middlewares: [authGuard], showAbout: true } },
-        // { path: '/settings/account', name: 'settings.account', component: SettingsAccount, meta: { middlewares: [authGuard], showAbout: true } },
         // { path: '/settings/oauth', name: 'settings.oauth.tokens', component: SettingsOAuth, meta: { middlewares: [authGuard], showAbout: true } },
         // { path: '/settings/oauth/pat/create', name: 'settings.oauth.generatePAT', component: GeneratePAT, meta: { middlewares: [authGuard], showAbout: true } },
+        { path: '/settings/account', name: 'settings.account', component: SettingsAccount, meta: { middlewares: [authGuard], showAbout: true } },
         { path: '/settings/webauthn/:credentialId/edit', name: 'settings.webauthn.editCredential', component: EditCredential, meta: { middlewares: [authGuard], showAbout: true }, props: true },
         { path: '/settings/webauthn', name: 'settings.webauthn.devices', component: SettingsWebAuthn, meta: { middlewares: [authGuard], showAbout: true } },
 
diff --git a/resources/js_vue3/views/settings/Account.vue b/resources/js_vue3/views/settings/Account.vue
new file mode 100644
index 00000000..2567053c
--- /dev/null
+++ b/resources/js_vue3/views/settings/Account.vue
@@ -0,0 +1,160 @@
+<script setup>
+    import Form from '@/components/formElements/Form'
+    import SettingTabs from '@/layouts/SettingTabs.vue'
+    import { useUserStore } from '@/stores/user'
+    import { useNotifyStore } from '@/stores/notify'
+    import { UseColorMode } from '@vueuse/components'
+
+    const $2fauth = inject('2fauth')
+    const user = useUserStore()
+    const notify = useNotifyStore()
+    const router = useRouter()
+    const returnTo = useStorage($2fauth.prefix + 'returnTo', 'accounts')
+    
+    const formProfile = reactive(new Form({
+        name : user.name,
+        email : user.email,
+        password : '',
+    }))
+    const formPassword = reactive(new Form({
+        currentPassword : '',
+        password : '',
+        password_confirmation : '',
+    }))
+    const formDelete = reactive(new Form({
+        password : '',
+    }))
+
+    /**
+     * submit user profile changes
+     */
+    function submitProfile(e) {
+
+        formProfile.put('/user', {returnError: true})
+        .then(response => {
+            user.$patch({
+                name: response.data.name,
+                email: response.data.email,
+                isAdmin: response.data.is_admin,
+            })
+            notify.info({ text: trans('auth.forms.profile_saved') })
+        })
+        .catch(error => {
+            if( error.response.status === 400 ) {
+                notify.alert({ text: error.response.data.message })
+            }
+            else if( error.response.status !== 422 ) {
+                notify.error(error.response)
+            }
+        })
+    }
+
+    /**
+     * submit password change
+     */
+     function submitPassword(e) {
+
+        formPassword.patch('/user/password', {returnError: true})
+        .then(response => {
+            formPassword.password = ''
+            formPassword.formPassword = ''
+            formPassword.password_confirmation = ''
+            notify.info({ text: response.data.message })
+        })
+        .catch(error => {
+            if( error.response.status === 400 ) {
+                notify.alert({ text: error.response.data.message })
+            }
+            else if( error.response.status !== 422 ) {
+                notify.error(error.response)
+            }
+        })
+    }
+
+    /**
+     * submit user account deletion
+     */
+     function submitDelete(e) {
+
+        if(confirm(trans('auth.confirm.delete_account'))) {
+            formDelete.delete('/user', {returnError: true})
+            .then(response => {
+                notify.info({ text: trans('auth.forms.user_account_successfully_deleted') })
+                router.push({ name: 'register' });
+            })
+            .catch(error => {
+                if( error.response.status === 400 ) {
+                    notify.alert({ text: error.response.data.message })
+                }
+                else if( error.response.status !== 422 ) {
+                    notify.error(error.response)
+                }
+            })
+        }
+    }
+
+    onBeforeRouteLeave((to) => {
+        if (! to.name.startsWith('settings.') && to.name === 'login') {
+            notify.clear()
+        }
+    })
+</script>
+
+<template>
+    <div>
+        <SettingTabs :activeTab="'settings.account'" />
+        <div class="options-tabs">
+            <FormWrapper>
+                <div v-if="user.isAdmin" class="notification is-warning">
+                    {{ $t('settings.you_are_administrator') }}
+                </div>
+                <form @submit.prevent="submitProfile" @keydown="formProfile.onKeydown($event)">
+                    <div v-if="$2fauth.config.proxyAuth" class="notification is-warning has-text-centered" v-html="$t('auth.user_account_controlled_by_proxy')" />
+                    <h4 class="title is-4 has-text-grey-light">{{ $t('settings.profile') }}</h4>
+                    <fieldset :disabled="$2fauth.config.proxyAuth">
+                        <FormField v-model="formProfile.name" fieldName="name" :fieldError="formProfile.errors.get('name')" label="auth.forms.name" :maxLength="255" autofocus />
+                        <FormField v-model="formProfile.email" fieldName="email" :fieldError="formProfile.errors.get('email')" inputType="email" label="auth.forms.email" :maxLength="255" autofocus />
+                        <FormField v-model="formProfile.password" fieldName="password" :fieldError="formProfile.errors.get('password')" inputType="password" label="auth.forms.current_password.label" help="auth.forms.current_password.help" />
+                        <FormButtons :isBusy="formProfile.isBusy" caption="commons.update" />
+                    </fieldset>
+                </form>
+                <form @submit.prevent="submitPassword" @keydown="formPassword.onKeydown($event)">
+                    <h4 class="title is-4 pt-6 has-text-grey-light">{{ $t('settings.change_password') }}</h4>
+                    <fieldset :disabled="$2fauth.config.proxyAuth">
+                        <FormPasswordField v-model="formPassword.password" fieldName="password" :fieldError="formPassword.errors.get('password')" :autocomplete="'new-password'" :showRules="true" label="auth.forms.password" />
+                        <FormPasswordField v-model="formPassword.password_confirmation" :showRules="false" fieldName="password_confirmation" :fieldError="formPassword.errors.get('password_confirmation')" inputType="password" :autocomplete="'new-password'" label="auth.forms.confirm_new_password" />
+                        <FormField v-model="formPassword.currentPassword" fieldName="currentPassword" :fieldError="formPassword.errors.get('currentPassword')" inputType="password" label="auth.forms.current_password.label" help="auth.forms.current_password.help" />
+                        <FormButtons :isBusy="formPassword.isBusy" caption="auth.forms.change_password" />
+                    </fieldset>
+                </form>
+                <form id="frmDeleteAccount" @submit.prevent="submitDelete" @keydown="formDelete.onKeydown($event)">
+                    <h4 class="title is-4 pt-6 has-text-danger">{{ $t('auth.forms.delete_account') }}</h4>
+                    <div class="field is-size-7-mobile">
+                        {{ $t('auth.forms.delete_your_account_and_reset_all_data')}}
+                    </div>
+                    <fieldset :disabled="$2fauth.config.proxyAuth">
+                        <FormField v-model="formDelete.password" fieldName="password" :fieldError="formDelete.errors.get('password')" inputType="password" :autocomplete="'off'" label="auth.forms.current_password.label" help="auth.forms.current_password.help" />
+                        <FormButtons :isBusy="formDelete.isBusy" caption="auth.forms.delete_your_account" submitId="btnDeleteAccount" color="is-danger" />
+                    </fieldset>
+                </form>
+            </FormWrapper>
+        </div>
+        <VueFooter :showButtons="true">
+            <!-- close button -->
+            <p class="control">
+                <UseColorMode v-slot="{ mode }">
+                    <RouterLink
+                        id="btnClose"
+                        :to="{ name: returnTo }"
+                        class="button is-rounded"
+                        :class="{'is-dark' : mode === 'dark'}"
+                        tabindex="0"
+                        role="button"
+                        :aria-label="$t('commons.close_the_x_page', {pagetitle: $route.meta.title})">
+                        {{ $t('commons.close') }}
+                    </RouterLink>
+                </UseColorMode>
+            </p>
+        </VueFooter>
+    </div>
+</template>