diff --git a/next-ui/.eslintrc-auto-import.json b/next-ui/.eslintrc-auto-import.json
index e81c66d8..de13de7d 100644
--- a/next-ui/.eslintrc-auto-import.json
+++ b/next-ui/.eslintrc-auto-import.json
@@ -73,6 +73,8 @@
     "useModel": true,
     "useTemplateRef": true,
     "Slot": true,
-    "Slots": true
+    "Slots": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true
   }
 }
diff --git a/next-ui/.prettierignore b/next-ui/.prettierignore
new file mode 100644
index 00000000..ae34ffa2
--- /dev/null
+++ b/next-ui/.prettierignore
@@ -0,0 +1,3 @@
+dir2json.d.ts
+src/auto-imports.d.ts
+src/components.d.ts
diff --git a/next-ui/dir2json.d.ts b/next-ui/dir2json.d.ts
index 952f9965..62b99521 100644
--- a/next-ui/dir2json.d.ts
+++ b/next-ui/dir2json.d.ts
@@ -8,7 +8,7 @@ declare module "*i18n?dir2json&ext=.json&1" {
   export default json;
 }
 
-declare module '*dir2json' {
-  const json: any
-  export default json
-}
+declare module "*dir2json" {
+  const json: any;
+  export default json;
+}
\ No newline at end of file
diff --git a/next-ui/package.json b/next-ui/package.json
index d4944a5d..c0fc20f4 100644
--- a/next-ui/package.json
+++ b/next-ui/package.json
@@ -11,7 +11,7 @@
     "type-check": "vue-tsc --build --force",
     "lint": "eslint .",
     "lint:fix": "npm run lint -- --fix",
-    "prettier": "prettier --check \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
+    "prettier": "prettier --check \"**/*.{js,ts,vue,scss,html,md,json}\"",
     "prettier:fix": "npm run prettier -- --write",
     "openapi-generate": "npx tsx ./openapi-generator.mts",
     "i18n-extract": "formatjs extract \"src/**/*.{ts,tsx,vue}\" --ignore=\"**/*.d.ts\" --out-file i18n/en.json",
diff --git a/next-ui/src/auto-imports.d.ts b/next-ui/src/auto-imports.d.ts
index 3e3542f0..5c7eea85 100644
--- a/next-ui/src/auto-imports.d.ts
+++ b/next-ui/src/auto-imports.d.ts
@@ -1,94 +1,77 @@
 /* eslint-disable */
-// prettier-ignore
+/* prettier-ignore */
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 // biome-ignore lint: disable
 export {}
 declare global {
-  const EffectScope: (typeof import('vue'))['EffectScope']
-  const computed: (typeof import('vue'))['computed']
-  const createApp: (typeof import('vue'))['createApp']
-  const customRef: (typeof import('vue'))['customRef']
-  const defineAsyncComponent: (typeof import('vue'))['defineAsyncComponent']
-  const defineComponent: (typeof import('vue'))['defineComponent']
-  const effectScope: (typeof import('vue'))['effectScope']
-  const getCurrentInstance: (typeof import('vue'))['getCurrentInstance']
-  const getCurrentScope: (typeof import('vue'))['getCurrentScope']
-  const h: (typeof import('vue'))['h']
-  const inject: (typeof import('vue'))['inject']
-  const isProxy: (typeof import('vue'))['isProxy']
-  const isReactive: (typeof import('vue'))['isReactive']
-  const isReadonly: (typeof import('vue'))['isReadonly']
-  const isRef: (typeof import('vue'))['isRef']
-  const markRaw: (typeof import('vue'))['markRaw']
-  const nextTick: (typeof import('vue'))['nextTick']
-  const onActivated: (typeof import('vue'))['onActivated']
-  const onBeforeMount: (typeof import('vue'))['onBeforeMount']
-  const onBeforeRouteLeave: (typeof import('vue-router'))['onBeforeRouteLeave']
-  const onBeforeRouteUpdate: (typeof import('vue-router'))['onBeforeRouteUpdate']
-  const onBeforeUnmount: (typeof import('vue'))['onBeforeUnmount']
-  const onBeforeUpdate: (typeof import('vue'))['onBeforeUpdate']
-  const onDeactivated: (typeof import('vue'))['onDeactivated']
-  const onErrorCaptured: (typeof import('vue'))['onErrorCaptured']
-  const onMounted: (typeof import('vue'))['onMounted']
-  const onRenderTracked: (typeof import('vue'))['onRenderTracked']
-  const onRenderTriggered: (typeof import('vue'))['onRenderTriggered']
-  const onScopeDispose: (typeof import('vue'))['onScopeDispose']
-  const onServerPrefetch: (typeof import('vue'))['onServerPrefetch']
-  const onUnmounted: (typeof import('vue'))['onUnmounted']
-  const onUpdated: (typeof import('vue'))['onUpdated']
-  const onWatcherCleanup: (typeof import('vue'))['onWatcherCleanup']
-  const provide: (typeof import('vue'))['provide']
-  const reactive: (typeof import('vue'))['reactive']
-  const readonly: (typeof import('vue'))['readonly']
-  const ref: (typeof import('vue'))['ref']
-  const resolveComponent: (typeof import('vue'))['resolveComponent']
-  const shallowReactive: (typeof import('vue'))['shallowReactive']
-  const shallowReadonly: (typeof import('vue'))['shallowReadonly']
-  const shallowRef: (typeof import('vue'))['shallowRef']
-  const toRaw: (typeof import('vue'))['toRaw']
-  const toRef: (typeof import('vue'))['toRef']
-  const toRefs: (typeof import('vue'))['toRefs']
-  const toValue: (typeof import('vue'))['toValue']
-  const triggerRef: (typeof import('vue'))['triggerRef']
-  const unref: (typeof import('vue'))['unref']
-  const useAttrs: (typeof import('vue'))['useAttrs']
-  const useCssModule: (typeof import('vue'))['useCssModule']
-  const useCssVars: (typeof import('vue'))['useCssVars']
-  const useId: (typeof import('vue'))['useId']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
   const useLink: (typeof import('vue-router'))['useLink']
-  const useModel: (typeof import('vue'))['useModel']
-  const useRoute: (typeof import('vue-router/auto'))['useRoute']
-  const useRouter: (typeof import('vue-router/auto'))['useRouter']
-  const useSlots: (typeof import('vue'))['useSlots']
-  const useTemplateRef: (typeof import('vue'))['useTemplateRef']
-  const watch: (typeof import('vue'))['watch']
-  const watchEffect: (typeof import('vue'))['watchEffect']
-  const watchPostEffect: (typeof import('vue'))['watchPostEffect']
-  const watchSyncEffect: (typeof import('vue'))['watchSyncEffect']
+  const useModel: typeof import('vue')['useModel']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
 // for type re-export
 declare global {
   // @ts-ignore
-  export type {
-    Component,
-    Slot,
-    Slots,
-    ComponentPublicInstance,
-    ComputedRef,
-    DirectiveBinding,
-    ExtractDefaultPropTypes,
-    ExtractPropTypes,
-    ExtractPublicPropTypes,
-    InjectionKey,
-    PropType,
-    Ref,
-    MaybeRef,
-    MaybeRefOrGetter,
-    VNode,
-    WritableComputedRef,
-  } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
 
@@ -97,63 +80,65 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
-    readonly EffectScope: UnwrapRef<(typeof import('vue'))['EffectScope']>
-    readonly computed: UnwrapRef<(typeof import('vue'))['computed']>
-    readonly createApp: UnwrapRef<(typeof import('vue'))['createApp']>
-    readonly customRef: UnwrapRef<(typeof import('vue'))['customRef']>
-    readonly defineAsyncComponent: UnwrapRef<(typeof import('vue'))['defineAsyncComponent']>
-    readonly defineComponent: UnwrapRef<(typeof import('vue'))['defineComponent']>
-    readonly effectScope: UnwrapRef<(typeof import('vue'))['effectScope']>
-    readonly getCurrentInstance: UnwrapRef<(typeof import('vue'))['getCurrentInstance']>
-    readonly getCurrentScope: UnwrapRef<(typeof import('vue'))['getCurrentScope']>
-    readonly h: UnwrapRef<(typeof import('vue'))['h']>
-    readonly inject: UnwrapRef<(typeof import('vue'))['inject']>
-    readonly isProxy: UnwrapRef<(typeof import('vue'))['isProxy']>
-    readonly isReactive: UnwrapRef<(typeof import('vue'))['isReactive']>
-    readonly isReadonly: UnwrapRef<(typeof import('vue'))['isReadonly']>
-    readonly isRef: UnwrapRef<(typeof import('vue'))['isRef']>
-    readonly markRaw: UnwrapRef<(typeof import('vue'))['markRaw']>
-    readonly nextTick: UnwrapRef<(typeof import('vue'))['nextTick']>
-    readonly onActivated: UnwrapRef<(typeof import('vue'))['onActivated']>
-    readonly onBeforeMount: UnwrapRef<(typeof import('vue'))['onBeforeMount']>
-    readonly onBeforeUnmount: UnwrapRef<(typeof import('vue'))['onBeforeUnmount']>
-    readonly onBeforeUpdate: UnwrapRef<(typeof import('vue'))['onBeforeUpdate']>
-    readonly onDeactivated: UnwrapRef<(typeof import('vue'))['onDeactivated']>
-    readonly onErrorCaptured: UnwrapRef<(typeof import('vue'))['onErrorCaptured']>
-    readonly onMounted: UnwrapRef<(typeof import('vue'))['onMounted']>
-    readonly onRenderTracked: UnwrapRef<(typeof import('vue'))['onRenderTracked']>
-    readonly onRenderTriggered: UnwrapRef<(typeof import('vue'))['onRenderTriggered']>
-    readonly onScopeDispose: UnwrapRef<(typeof import('vue'))['onScopeDispose']>
-    readonly onServerPrefetch: UnwrapRef<(typeof import('vue'))['onServerPrefetch']>
-    readonly onUnmounted: UnwrapRef<(typeof import('vue'))['onUnmounted']>
-    readonly onUpdated: UnwrapRef<(typeof import('vue'))['onUpdated']>
-    readonly onWatcherCleanup: UnwrapRef<(typeof import('vue'))['onWatcherCleanup']>
-    readonly provide: UnwrapRef<(typeof import('vue'))['provide']>
-    readonly reactive: UnwrapRef<(typeof import('vue'))['reactive']>
-    readonly readonly: UnwrapRef<(typeof import('vue'))['readonly']>
-    readonly ref: UnwrapRef<(typeof import('vue'))['ref']>
-    readonly resolveComponent: UnwrapRef<(typeof import('vue'))['resolveComponent']>
-    readonly shallowReactive: UnwrapRef<(typeof import('vue'))['shallowReactive']>
-    readonly shallowReadonly: UnwrapRef<(typeof import('vue'))['shallowReadonly']>
-    readonly shallowRef: UnwrapRef<(typeof import('vue'))['shallowRef']>
-    readonly toRaw: UnwrapRef<(typeof import('vue'))['toRaw']>
-    readonly toRef: UnwrapRef<(typeof import('vue'))['toRef']>
-    readonly toRefs: UnwrapRef<(typeof import('vue'))['toRefs']>
-    readonly toValue: UnwrapRef<(typeof import('vue'))['toValue']>
-    readonly triggerRef: UnwrapRef<(typeof import('vue'))['triggerRef']>
-    readonly unref: UnwrapRef<(typeof import('vue'))['unref']>
-    readonly useAttrs: UnwrapRef<(typeof import('vue'))['useAttrs']>
-    readonly useCssModule: UnwrapRef<(typeof import('vue'))['useCssModule']>
-    readonly useCssVars: UnwrapRef<(typeof import('vue'))['useCssVars']>
-    readonly useId: UnwrapRef<(typeof import('vue'))['useId']>
-    readonly useModel: UnwrapRef<(typeof import('vue'))['useModel']>
-    readonly useRoute: UnwrapRef<(typeof import('vue-router/auto'))['useRoute']>
-    readonly useRouter: UnwrapRef<(typeof import('vue-router/auto'))['useRouter']>
-    readonly useSlots: UnwrapRef<(typeof import('vue'))['useSlots']>
-    readonly useTemplateRef: UnwrapRef<(typeof import('vue'))['useTemplateRef']>
-    readonly watch: UnwrapRef<(typeof import('vue'))['watch']>
-    readonly watchEffect: UnwrapRef<(typeof import('vue'))['watchEffect']>
-    readonly watchPostEffect: UnwrapRef<(typeof import('vue'))['watchPostEffect']>
-    readonly watchSyncEffect: UnwrapRef<(typeof import('vue'))['watchSyncEffect']>
+    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
+    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
+    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
+    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
+    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
+    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
+    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
+    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
+    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
+    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
+    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
+    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
+    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
+    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
+    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
+    readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
+    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useId: UnwrapRef<typeof import('vue')['useId']>
+    readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
+    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
   }
-}
+}
\ No newline at end of file
diff --git a/next-ui/src/components.d.ts b/next-ui/src/components.d.ts
index 9910b61c..ea8a0936 100644
--- a/next-ui/src/components.d.ts
+++ b/next-ui/src/components.d.ts
@@ -8,23 +8,23 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AppBar: typeof import('./components/app/bar/AppBar.vue')['default']
-    AppDrawer: typeof import('./components/app/drawer/AppDrawer.vue')['default']
-    AppDrawerFooter: typeof import('./components/app/drawer/AppDrawerFooter.vue')['default']
-    AppDrawerMenu: typeof import('./components/app/drawer/AppDrawerMenu.vue')['default']
-    AppDrawerMenuAccount: typeof import('./components/app/drawer/AppDrawerMenuAccount.vue')['default']
-    AppDrawerMenuHistory: typeof import('./components/app/drawer/AppDrawerMenuHistory.vue')['default']
-    AppDrawerMenuImport: typeof import('./components/app/drawer/AppDrawerMenuImport.vue')['default']
-    AppDrawerMenuLogout: typeof import('./components/app/drawer/AppDrawerMenuLogout.vue')['default']
-    AppDrawerMenuMedia: typeof import('./components/app/drawer/AppDrawerMenuMedia.vue')['default']
-    AppDrawerMenuServer: typeof import('./components/app/drawer/AppDrawerMenuServer.vue')['default']
+    AppBar: typeof import('./components/app/Bar.vue')['default']
+    AppDrawer: typeof import('./components/app/drawer/Drawer.vue')['default']
+    AppDrawerFooter: typeof import('./components/app/drawer/Footer.vue')['default']
+    AppDrawerMenu: typeof import('./components/app/drawer/menu/Menu.vue')['default']
+    AppDrawerMenuAccount: typeof import('./components/app/drawer/menu/Account.vue')['default']
+    AppDrawerMenuHistory: typeof import('./components/app/drawer/menu/History.vue')['default']
+    AppDrawerMenuImport: typeof import('./components/app/drawer/menu/Import.vue')['default']
+    AppDrawerMenuLogout: typeof import('./components/app/drawer/menu/Logout.vue')['default']
+    AppDrawerMenuMedia: typeof import('./components/app/drawer/menu/Media.vue')['default']
+    AppDrawerMenuServer: typeof import('./components/app/drawer/menu/Server.vue')['default']
     AppFooter: typeof import('./components/AppFooter.vue')['default']
     BuildCommit: typeof import('./components/BuildCommit.vue')['default']
     BuildVersion: typeof import('./components/BuildVersion.vue')['default']
-    DialogConfirm: typeof import('./components/dialogs/DialogConfirm.vue')['default']
-    DialogConfirmEdit: typeof import('./components/dialogs/DialogConfirmEdit.vue')['default']
-    FormUserChangePassword: typeof import('./components/forms/user/FormUserChangePassword.vue')['default']
-    FormUserEdit: typeof import('./components/forms/user/FormUserEdit.vue')['default']
+    DialogConfirm: typeof import('./components/dialog/Confirm.vue')['default']
+    DialogConfirmEdit: typeof import('./components/dialog/ConfirmEdit.vue')['default']
+    FormUserChangePassword: typeof import('./components/form/user/ChangePassword.vue')['default']
+    FormUserEdit: typeof import('./components/form/user/Edit.vue')['default']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     LocaleSelector: typeof import('./components/LocaleSelector.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/next-ui/src/components/app/bar/AppBar.vue b/next-ui/src/components/app/Bar.vue
similarity index 100%
rename from next-ui/src/components/app/bar/AppBar.vue
rename to next-ui/src/components/app/Bar.vue
diff --git a/next-ui/src/components/app/drawer/AppDrawer.vue b/next-ui/src/components/app/drawer/Drawer.vue
similarity index 100%
rename from next-ui/src/components/app/drawer/AppDrawer.vue
rename to next-ui/src/components/app/drawer/Drawer.vue
diff --git a/next-ui/src/components/app/drawer/AppDrawerFooter.vue b/next-ui/src/components/app/drawer/Footer.vue
similarity index 100%
rename from next-ui/src/components/app/drawer/AppDrawerFooter.vue
rename to next-ui/src/components/app/drawer/Footer.vue
diff --git a/next-ui/src/components/app/drawer/AppDrawerMenuAccount.vue b/next-ui/src/components/app/drawer/menu/Account.vue
similarity index 100%
rename from next-ui/src/components/app/drawer/AppDrawerMenuAccount.vue
rename to next-ui/src/components/app/drawer/menu/Account.vue
diff --git a/next-ui/src/components/app/drawer/AppDrawerMenuHistory.vue b/next-ui/src/components/app/drawer/menu/History.vue
similarity index 100%
rename from next-ui/src/components/app/drawer/AppDrawerMenuHistory.vue
rename to next-ui/src/components/app/drawer/menu/History.vue
diff --git a/next-ui/src/components/app/drawer/AppDrawerMenuImport.vue b/next-ui/src/components/app/drawer/menu/Import.vue
similarity index 100%
rename from next-ui/src/components/app/drawer/AppDrawerMenuImport.vue
rename to next-ui/src/components/app/drawer/menu/Import.vue
diff --git a/next-ui/src/components/app/drawer/AppDrawerMenuLogout.vue b/next-ui/src/components/app/drawer/menu/Logout.vue
similarity index 100%
rename from next-ui/src/components/app/drawer/AppDrawerMenuLogout.vue
rename to next-ui/src/components/app/drawer/menu/Logout.vue
diff --git a/next-ui/src/components/app/drawer/AppDrawerMenuMedia.vue b/next-ui/src/components/app/drawer/menu/Media.vue
similarity index 100%
rename from next-ui/src/components/app/drawer/AppDrawerMenuMedia.vue
rename to next-ui/src/components/app/drawer/menu/Media.vue
diff --git a/next-ui/src/components/app/drawer/AppDrawerMenu.vue b/next-ui/src/components/app/drawer/menu/Menu.vue
similarity index 100%
rename from next-ui/src/components/app/drawer/AppDrawerMenu.vue
rename to next-ui/src/components/app/drawer/menu/Menu.vue
diff --git a/next-ui/src/components/app/drawer/AppDrawerMenuServer.vue b/next-ui/src/components/app/drawer/menu/Server.vue
similarity index 100%
rename from next-ui/src/components/app/drawer/AppDrawerMenuServer.vue
rename to next-ui/src/components/app/drawer/menu/Server.vue
diff --git a/next-ui/src/components/dialogs/DialogConfirm.vue b/next-ui/src/components/dialog/Confirm.vue
similarity index 100%
rename from next-ui/src/components/dialogs/DialogConfirm.vue
rename to next-ui/src/components/dialog/Confirm.vue
diff --git a/next-ui/src/components/dialogs/DialogConfirmEdit.vue b/next-ui/src/components/dialog/ConfirmEdit.vue
similarity index 100%
rename from next-ui/src/components/dialogs/DialogConfirmEdit.vue
rename to next-ui/src/components/dialog/ConfirmEdit.vue
diff --git a/next-ui/src/components/forms/README.md b/next-ui/src/components/form/README.md
similarity index 100%
rename from next-ui/src/components/forms/README.md
rename to next-ui/src/components/form/README.md
diff --git a/next-ui/src/components/forms/user/FormUserChangePassword.vue b/next-ui/src/components/form/user/ChangePassword.vue
similarity index 100%
rename from next-ui/src/components/forms/user/FormUserChangePassword.vue
rename to next-ui/src/components/form/user/ChangePassword.vue
diff --git a/next-ui/src/components/forms/user/FormUserEdit.vue b/next-ui/src/components/form/user/Edit.vue
similarity index 100%
rename from next-ui/src/components/forms/user/FormUserEdit.vue
rename to next-ui/src/components/form/user/Edit.vue
diff --git a/next-ui/src/pages/login.vue b/next-ui/src/pages/login.vue
index a6433b64..07caf3db 100644
--- a/next-ui/src/pages/login.vue
+++ b/next-ui/src/pages/login.vue
@@ -56,6 +56,7 @@
                 id: '0YG9GQ',
               })
             "
+            hide-details
           />
         </v-col>
       </v-row>
@@ -82,6 +83,7 @@
             v-model="showError"
             color="error"
             :text="showErrorText"
+            timer="red"
           >
             <template v-slot:actions>
               <v-btn
diff --git a/next-ui/src/pages/server/users.vue b/next-ui/src/pages/server/users.vue
index 6e2828d4..9fc6b19b 100644
--- a/next-ui/src/pages/server/users.vue
+++ b/next-ui/src/pages/server/users.vue
@@ -131,8 +131,8 @@ import {
   useUpdateUser,
   useUpdateUserPassword,
 } from '@/colada/mutations/update-user'
-import FormUserChangePassword from '@/components/forms/user/FormUserChangePassword.vue'
-import FormUserEdit from '@/components/forms/user/FormUserEdit.vue'
+import FormUserChangePassword from '@/components/form/user/ChangePassword.vue'
+import FormUserEdit from '@/components/form/user/Edit.vue'
 import type { Component } from 'vue'
 import { useLibraries } from '@/colada/queries/libraries'
 import { commonMessages } from '@/utils/i18n/common-messages'
diff --git a/next-ui/vite.config.mts b/next-ui/vite.config.mts
index 75e4f751..d8bd21ad 100644
--- a/next-ui/vite.config.mts
+++ b/next-ui/vite.config.mts
@@ -1,12 +1,13 @@
 // Plugins
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
-import ViteFonts from "unplugin-fonts/vite"
+import ViteFonts from 'unplugin-fonts/vite'
 import Layouts from 'vite-plugin-vue-layouts-next'
 import Vue from '@vitejs/plugin-vue'
 import VueRouter from 'unplugin-vue-router/vite'
+import { VueRouterAutoImports } from 'unplugin-vue-router'
 import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
-import dir2json from "vite-plugin-dir2json";
+import dir2json from 'vite-plugin-dir2json'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -20,12 +21,7 @@ export default defineConfig({
     }),
     Layouts(),
     AutoImport({
-      imports: [
-        'vue',
-        {
-          'vue-router/auto': ['useRoute', 'useRouter'],
-        }
-      ],
+      imports: ['vue', VueRouterAutoImports],
       dts: 'src/auto-imports.d.ts',
       eslintrc: {
         enabled: true,
@@ -34,6 +30,8 @@ export default defineConfig({
     }),
     Components({
       dts: 'src/components.d.ts',
+      directoryAsNamespace: true,
+      collapseSamePrefixes: true,
     }),
     Vue({
       template: { transformAssetUrls },
@@ -49,31 +47,23 @@ export default defineConfig({
       fontsource: {
         families: [
           {
-            name: "Roboto",
+            name: 'Roboto',
             weights: [100, 300, 400, 500, 700, 900],
-            styles: ["normal", "italic"],
+            styles: ['normal', 'italic'],
           },
         ],
       },
     }),
     dir2json({
-      dts: true
-    })
+      dts: true,
+    }),
   ],
   define: { 'process.env': {} },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
-    extensions: [
-      '.js',
-      '.json',
-      '.jsx',
-      '.mjs',
-      '.ts',
-      '.tsx',
-      '.vue',
-    ],
+    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
   },
   server: {
     port: 3000,