diff --git a/zero.Web.UI/app.js b/zero.Web.UI/app.js
index 592f1efe..1a8f5912 100644
--- a/zero.Web.UI/app.js
+++ b/zero.Web.UI/app.js
@@ -1,23 +1,25 @@
 import { createApp } from 'vue';
-import App from './app.vue';
+import App from '@zero/app.vue';
 
 zero.apps = {
   shared: true
 };
 
-import registerDirectives from './directives/register.js';
-import Router from './config/router.config.js';
-import registerComponents from './components/register.js';
-//import registerRenderers from './renderers/register.js';
+import registerDirectives from '@zero/directives/register.js';
+//import Router from '@zero/config/router.config.js';
+//import registerComponents from '@zero/components/register.js';
+//import registerRenderers from '@zero/renderers/register.js';
 
 //import '@zero/config/zero.plugins.js';
 //import ZeroPlugin from '@zero/plugin.js';
 
 const app = createApp(App);
-app.use(Router);
+//app.use(Router);
 
 registerDirectives(app);
-registerComponents(app);
+//registerComponents(app);
 //registerRenderers(app);
 
+console.info(app);
+
 app.mount('#app');
\ No newline at end of file
diff --git a/zero.Web.UI/app.vue b/zero.Web.UI/app.vue
index 972ad756..ce8715fa 100644
--- a/zero.Web.UI/app.vue
+++ b/zero.Web.UI/app.vue
@@ -15,14 +15,14 @@
 
 <script>
   import './sass/app.scss'
-  import AppNavigation from './navigation.vue'
-  import AppLogin from './pages/login/login.vue'
-  import AppOverlays from './components/overlays/overlay-holder.vue'
-  import AppNotifications from './components/notifications/notification-holder.vue'
-  import AuthApi from './services/auth.js'
-  import EventHub from './services/eventhub.js'
-  import './config/zero.config.js'
-  import './config/axios.config.js'
+  import AppNavigation from '@zero/navigation.vue'
+  import AppLogin from '@zero/pages/login/login.vue'
+  import AppOverlays from '@zero/components/overlays/overlay-holder.vue'
+  import AppNotifications from '@zero/components/notifications/notification-holder.vue'
+  import AuthApi from '@zero/services/auth.js'
+  import EventHub from '@zero/services/eventhub.js'
+  import '@zero/config/zero.config.js'
+  import '@zero/config/axios.config.js'
 
   export default {
     name: 'app',
diff --git a/zero.Web.UI/components/forms/error.vue b/zero.Web.UI/components/forms/error.vue
index fb7aa10c..7377f2ce 100644
--- a/zero.Web.UI/components/forms/error.vue
+++ b/zero.Web.UI/components/forms/error.vue
@@ -1,5 +1,4 @@
 <template>
-  formData: {{formData}}
   <div class="ui-error" v-if="visible">
     <ui-message v-for="error in errors" :key="error.id" type="error" :text="error.message" :title="error.field" />
   </div>
@@ -32,8 +31,6 @@
       errors: []
     }),
 
-    inject: [ 'formData' ],
-
     mounted ()
     {
       
diff --git a/zero.Web.UI/components/forms/form.vue b/zero.Web.UI/components/forms/form.vue
index 91b45fae..23c8f885 100644
--- a/zero.Web.UI/components/forms/form.vue
+++ b/zero.Web.UI/components/forms/form.vue
@@ -13,7 +13,6 @@
   import Overlay from '@zero/services/overlay.js'
   import Notification from '@zero/services/notification.js'
   import { isArray as _isArray, filter as _filter, groupBy as _groupBy, each as _each, difference as _difference } from 'underscore'
-  import { computed } from 'vue'
 
   export default {
     name: 'uiForm',
@@ -50,10 +49,6 @@
       submitBlocked: false
     }),
 
-    provide: () => ({
-      formData: 'my-state'
-    }),
-
     watch: {
       '$route': function ()
       {
diff --git a/zero.Web.UI/components/modules/module-preview.vue b/zero.Web.UI/components/modules/module-preview.vue
index 8d719a32..ecf21518 100644
--- a/zero.Web.UI/components/modules/module-preview.vue
+++ b/zero.Web.UI/components/modules/module-preview.vue
@@ -2,7 +2,7 @@
   <div class="ui-module-item" v-if="!loading" :data-module="alias" :class="{'can-edit': canEdit }">
     <div class="ui-module-item-content" v-if="module" @click="emit('edit')">
       <span v-if="!hasPreviewSettings || renderer.preview.label !== false" class="ui-module-item-header">{{module.name}}</span>
-      <module-preview-inner v-if="tryRender" :template="renderer.preview.template" :value="value" />
+      <ui-module-preview-inner v-if="tryRender" :template="renderer.preview.template" :value="value" />
     </div>
     <div class="ui-module-item-content" v-else>
       <span class="ui-module-item-header is-error"><i class="fth-alert-circle"></i> {{alias}}</span>
@@ -29,15 +29,12 @@
 
 <script>
   import { find as _find } from 'underscore';
-  import ModulePreviewInner from './module-preview-inner.vue';
 
   export default {
     name: 'uiModulePreview',
 
     emits: ['edit', 'remove', 'isActive'],
 
-    components: { ModulePreviewInner },
-
     props: {
       value: {
         type: Object,
diff --git a/zero.Web.UI/components/modules/modules.vue b/zero.Web.UI/components/modules/modules.vue
index c5612e73..dcc211c3 100644
--- a/zero.Web.UI/components/modules/modules.vue
+++ b/zero.Web.UI/components/modules/modules.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="ui-modules-inner">
     <div v-if="items.length" class="ui-modules-inner-sortable" v-sortable="{ onUpdate: onSortingUpdated }">
-      <module-preview v-for="item in items" :key="item.id" :types="moduleTypes" :value="item" @edit="edit" @remove="remove" :disabled="disabled" />
+      <ui-module-preview v-for="item in items" :key="item.id" :types="moduleTypes" :value="item" @edit="edit" @remove="remove" :disabled="disabled" />
     </div>
-    <modules-select ref="moduleSelect" :types="moduleTypes" :value="value" v-if="canAdd" @selected="onAdd" />
+    <ui-modules-select ref="moduleSelect" :types="moduleTypes" :value="value" v-if="canAdd" @selected="onAdd" />
   </div>
 </template>
 
@@ -11,8 +11,6 @@
 <script>
   import ModulesApi from '@zero/resources/modules.js';
   import EditModuleOverlay from './edit-module.vue';
-  import ModulePreview from './module-preview.vue';
-  import ModulesSelect from './modules-select.vue';
   import Overlay from '@zero/services/overlay.js';
   import Arrays from '@zero/services/arrays.js';
 
@@ -21,8 +19,6 @@
 
     emits: ['input'],
 
-    components: { ModulePreview, ModulesSelect },
-
     props: {
       value: {
         type: Array,
diff --git a/zero.Web.UI/components/register.js b/zero.Web.UI/components/register.js
index c4d1eeee..6d53b7d5 100644
--- a/zero.Web.UI/components/register.js
+++ b/zero.Web.UI/components/register.js
@@ -1,91 +1,61 @@
-let imports = [
-  // buttons
-  () => import('./buttons/add-button.vue'),
-  () => import('./buttons/button.vue'),
-  () => import('./buttons/dot-button.vue'),
-  () => import('./buttons/icon-button.vue'),
-  () => import('./buttons/select-button.vue'),
-  () => import('./buttons/state-button.vue'),
+// Globally register all base components for convenience, because they
+// will be used very frequently. Components are registered using the
+// PascalCased version of their file name.
 
-  // forms
-  () => import('./forms/alias.vue'),
-  () => import('./forms/check-list.vue'),
-  () => import('./forms/error-view.vue'),
-  () => import('./forms/error.vue'),
-  () => import('./forms/form-header.vue'),
-  () => import('./forms/form.vue'),
-  () => import('./forms/input-list.vue'),
-  () => import('./forms/media-old.vue'),
-  () => import('./forms/property.vue'),
-  () => import('./forms/rte.vue'),
-  () => import('./forms/search.vue'),
-  () => import('./forms/tags.vue'),
-  () => import('./forms/toggle.vue'),
+let components = [];
+//const directories = ['buttons', 'forms', 'messages', 'tables', 'tabs'];
 
-  // modules
-  () => import('./modules/modules.vue'),
+// TODO this file will import all vue component files with subdirectories
+// if it contains a file "overlay.vue" it will create an "ui-overlay" component
+// if another folder contains a file "overlay.vue" it is not used anymore or overridden.
+// we don't want to add all files but only files where we define global component access in its settings
 
-  // overlays
-  () => import('./overlays/confirm.vue'),
-  () => import('./overlays/dropdown-button.vue'),
-  () => import('./overlays/dropdown-separator.vue'),
-  () => import('./overlays/dropdown.vue'),
-  () => import('./overlays/overlay-editor.vue'),
+// https://webpack.js.org/guides/dependency-management/#require-context
+const requireComponent = require.context(
+  // Look for files in the current directory
+  '.',
+  // Do look in subdirectories
+  true,
+  // .vue files
+  /[\w-]+\.vue$/
+);
 
-  // pickers
-  () => import('./pickers/colorPicker/colorpicker.vue'),
-  () => import('./pickers/countryPicker/countrypicker.vue'),
-  () => import('./pickers/datePicker/datepicker.vue'),
-  () => import('./pickers/dateRangePicker/daterangepicker.vue'),
-  () => import('./pickers/iconPicker/iconpicker.vue'),
-  () => import('./pickers/mediaPicker/mediapicker.vue'),
-  () => import('./pickers/userPicker/userpicker.vue'),
-  () => import('./pickers/pick.vue'),
-
-  // tables
-  () => import('./tables/table.vue'),
-  () => import('./tables/table-filter.vue'),
-
-  // tabs
-  () => import('./tabs/tab.vue'),
-  () => import('./tabs/tabs.vue'),
-  () => import('./tabs/inline-tabs.vue'),
-
-  // tabs
-  () => import('./tree/tree.vue'),
-  () => import('./tree/tree-item.vue'),
-
-  // misc
-  () => import('./datagrid/datagrid.vue'),
-  () => import('./messages/message.vue'),
-  () => import('./date.vue'),
-  () => import('./header-bar.vue'),
-  () => import('./loading.vue'),
-  () => import('./pagination.vue'),
-  () => import('./permissions.vue'),
-  () => import('./revisions.vue')
-];
-
-const resolveFilename = path =>
+// For each matching file name...
+requireComponent.keys().forEach((path) =>
 {
   let pathParts = path.split('/');
-  return 'ui' + pathParts[pathParts.length - 1]
+  let fileName = pathParts[pathParts.length - 1];
+
+  // Get the component config
+  const componentConfig = requireComponent(path);
+  // Get the PascalCase version of the component name
+  const componentName = 'ui' + fileName
+    // Remove the "./_" from the beginning
     .replace(/^\.\/_/, '')
+    // Remove the file extension from the end
     .replace(/\.\w+$/, '')
+    // Split up kebabs
     .split('-')
+    // Upper case
     .map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1))
+    // Concatenated
     .join('');
-};
+
+  if (componentName === 'uiOverlay')
+  {
+    return;
+  }
+
+  components.push({
+    name: componentName,
+    config: componentConfig.default || componentConfig
+  })
+});
 
 export default function (app)
 {
-  imports.forEach(path =>
+  components.forEach(component =>
   {
-    path().then(resolved =>
-    {
-      const config = resolved.default || resolved;
-      const name = config.name || resolveFilename(config.__hmrId);
-      app.component(name, config);
-    });
+    app.component(component.name, component.config);
   });
 };
\ No newline at end of file
diff --git a/zero.Web.UI/components/tabs/inline-tabs.vue b/zero.Web.UI/components/tabs/inline-tabs.vue
index fb5b3732..abea6fe7 100644
--- a/zero.Web.UI/components/tabs/inline-tabs.vue
+++ b/zero.Web.UI/components/tabs/inline-tabs.vue
@@ -17,7 +17,7 @@
 
 <script>
   export default {
-    name: 'uiInlineTabs',
+    name: 'uiTabs',
 
     props: {
       cache: {
diff --git a/zero.Web.UI/config/axios.config.js b/zero.Web.UI/config/axios.config.js
index 679db3f8..15843ff8 100644
--- a/zero.Web.UI/config/axios.config.js
+++ b/zero.Web.UI/config/axios.config.js
@@ -13,7 +13,7 @@ Axios.defaults.withCredentials = true;
 
 Axios.defaults.paramsSerializer = (params) =>
 {
-  return Qs.stringify(params, { allowDots: true });
+  return stringify(params, { allowDots: true });
 };
 
 Axios.interceptors.response.use(response => response, error =>
diff --git a/zero.Web.UI/config/router.config.js b/zero.Web.UI/config/router.config.js
index 24ef8d53..b834319a 100644
--- a/zero.Web.UI/config/router.config.js
+++ b/zero.Web.UI/config/router.config.js
@@ -32,13 +32,13 @@ zero.sections.forEach(section =>
 {
   if (!section.isExternal)
   {
-    addSection(section, () => import('@zero/pages/' + section.alias + '/' + section.alias + '.vue'));
+    addSection(section, () => import('@zero/pages/' + section.alias + '/' + section.alias));
 
     if (section.children.length > 0)
     {
       section.children.forEach(child =>
       {
-        addSection(child, () => import('@zero/pages/' + section.alias + '/' + section.alias + '/' + child.alias + '.vue'), section);
+        addSection(child, () => import('@zero/pages/' + section.alias + '/' + section.alias + '/' + child.alias), section);
       });
     }
   }
@@ -49,7 +49,7 @@ zero.sections.forEach(section =>
 
 routes.push({
   path: '/preview',
-  component: () => import('@zero/pages/preview.vue'),
+  component: () => import('@zero/pages/preview'),
   name: 'preview',
   meta: {
     name: '@preview.name'
@@ -120,7 +120,7 @@ let addRoutesPerContext = (context, isPlugin) =>
 
 // add fallback route (this should probably by 404 page)
 
-routes.push({ name: '404', path: '/:pathMatch(.*)*', component: () => import('@zero/pages/notfound.vue') });
+routes.push({ name: '404', path: '/:pathMatch(.*)*', component: () => import('@zero/pages/notfound') });
 
 
 
diff --git a/zero.Web.UI/index.html b/zero.Web.UI/index.html
index 80b29d5e..59983a00 100644
--- a/zero.Web.UI/index.html
+++ b/zero.Web.UI/index.html
@@ -12,8 +12,7 @@
     window.zero = window.zero || {};
     zero = {
       apiPath: '/zero/api/',
-      sections: [],
-      translations: {}
+      sections: []
     };
   </script>
   <script type="module" src="/app.js"></script>
diff --git a/zero.Web.UI/package.json b/zero.Web.UI/package.json
index 04274ed4..645538e8 100644
--- a/zero.Web.UI/package.json
+++ b/zero.Web.UI/package.json
@@ -26,6 +26,7 @@
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "3.0.0",
+    "glob": "^7.1.6",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
     "vite": "1.0.0-rc.4",
diff --git a/zero.Web.UI/pages/login/login.vue b/zero.Web.UI/pages/login/login.vue
index 8530bf72..91fc3f17 100644
--- a/zero.Web.UI/pages/login/login.vue
+++ b/zero.Web.UI/pages/login/login.vue
@@ -52,6 +52,7 @@
       onSubmit(form)
       {
         this.rejectReason = null;
+        console.info(form);
         form.handle(AuthApi.login(this.model)).then(res =>
         {
           window.location.reload();
diff --git a/zero.Web.UI/vite.config.js b/zero.Web.UI/vite.config.js
index 044c2f04..d6ccfa30 100644
--- a/zero.Web.UI/vite.config.js
+++ b/zero.Web.UI/vite.config.js
@@ -8,7 +8,7 @@ export default {
 
   outDir: 'Assets/',
 
-  base: 'zero-cli/',
+  base: '/zero/vue-cli',
 
   resolvers: [{
     alias(path)
@@ -20,11 +20,7 @@ export default {
           return path.replace(alias, resolved);
         }
       }
-    },
-    //resolveRelativeRequest(publicPath, relativePublicPath)
-    //{
-    //  console.info(publicPath + " | " + relativePublicPath);
-    //}
+    }
   }],
 
   optimizeDeps: {
diff --git a/zero.Web/Views/Shared/Index.cshtml b/zero.Web/Views/Shared/Index.cshtml
index 62ce7e40..c6cfd8bf 100644
--- a/zero.Web/Views/Shared/Index.cshtml
+++ b/zero.Web/Views/Shared/Index.cshtml
@@ -16,13 +16,13 @@
   </environment>
   <title>zero</title>
 </head>
-<body class="theme-light theme-rounded">
+<body class="theme-light theme-rounded x-test">
   <div id="app"></div>
   <script>
     window.zero = window.zero || {};
     zero = @Html.Raw(await Model.Vue.ConfigAsJson());
   </script>
-  <script type="module">import "/vite/client"</script>
-  <script type="module" src="~/app.js"></script>
+  <script src="~/zero/vue-cli/js/chunk-vendors.js" asp-append-version="true"></script>
+  <script src="~/zero/vue-cli/js/app.js" asp-append-version="true"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/zero.Web/ZeroApplicationBuilderExtensions.cs b/zero.Web/ZeroApplicationBuilderExtensions.cs
index e0328d44..28db8224 100644
--- a/zero.Web/ZeroApplicationBuilderExtensions.cs
+++ b/zero.Web/ZeroApplicationBuilderExtensions.cs
@@ -55,26 +55,16 @@ namespace zero.Web
             pattern: path + "/api/{controller}/{action}/{id?}"
           );
 
+          if (devPath != null)
+          {
+            endpoints.MapFallback(path + "/vue-cli/{**path}", CreateVueProxyDelegate(endpoints, new SpaOptions { SourcePath = devPath }));
+          }
+
           // fallbacks for SPA
           endpoints.MapFallbackToController(path + "/{**path}", "Index", "Index");
         });
       });
 
-
-      if (devPath != null)
-      {
-        app.UseWhen(ctx => !ctx.Request.Path.ToString().StartsWith(path), builder =>
-        {
-          builder.UseRouting();
-
-          builder.UseEndpoints(endpoints =>
-          {
-            RequestDelegate vueDelegate = CreateVueProxyDelegate(endpoints, new SpaOptions { SourcePath = devPath });
-            endpoints.MapFallback("/{**path}", vueDelegate);
-          });
-        });
-      }
-
       return app;
     }
 
@@ -98,7 +88,7 @@ namespace zero.Web
           opt.Options.StartupTimeout = options.StartupTimeout;
         }
 
-        opt.UseVueCli(npmScript: "vite-dev", port: 3000);
+        opt.UseVueCli();
       });
 
       return app.Build();