diff --git a/components.d.ts b/components.d.ts
index 0c4628c..393d330 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,6 +7,9 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    NButton: typeof import('naive-ui')['NButton']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
     NInput: typeof import('naive-ui')['NInput']
   }
 }
diff --git a/package-lock.json b/package-lock.json
index d6835de..642b720 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@adonisjs/view": "^6.2.0",
         "@eidellev/inertia-adonisjs": "^8.0.1",
         "@inertiajs/vue3": "^1.0.9",
+        "@vue/compiler-sfc": "^3.3.4",
         "proxy-addr": "^2.0.7",
         "reflect-metadata": "^0.1.13",
         "source-map-support": "^0.5.21",
@@ -3681,9 +3682,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.3.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.2.tgz",
-      "integrity": "sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw=="
+      "version": "20.3.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.3.tgz",
+      "integrity": "sha512-wheIYdr4NYML61AjC8MKj/2jrR/kDQri/CIpVoZwldwhnIrD/j9jIU5bJ8yBKuB2VhpFV7Ab6G2XkBjv9r9Zzw=="
     },
     "node_modules/@types/pino": {
       "version": "6.3.12",
@@ -14578,6 +14579,42 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "dev": true
     },
+    "node_modules/ts-loader": {
+      "version": "9.4.4",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.4.tgz",
+      "integrity": "sha512-MLukxDHBl8OJ5Dk3y69IsKVFRA/6MwzEqBgh+OXMPB/OD01KQuWPFd1WAQP8a5PeSCAxfnkhiuWqfmFJzJQt9w==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "enhanced-resolve": "^5.0.0",
+        "micromatch": "^4.0.0",
+        "semver": "^7.3.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "typescript": "*",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/ts-loader/node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
@@ -18507,9 +18544,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "20.3.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.2.tgz",
-      "integrity": "sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw=="
+      "version": "20.3.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.3.tgz",
+      "integrity": "sha512-wheIYdr4NYML61AjC8MKj/2jrR/kDQri/CIpVoZwldwhnIrD/j9jIU5bJ8yBKuB2VhpFV7Ab6G2XkBjv9r9Zzw=="
     },
     "@types/pino": {
       "version": "6.3.12",
@@ -26784,6 +26821,34 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "dev": true
     },
+    "ts-loader": {
+      "version": "9.4.4",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.4.tgz",
+      "integrity": "sha512-MLukxDHBl8OJ5Dk3y69IsKVFRA/6MwzEqBgh+OXMPB/OD01KQuWPFd1WAQP8a5PeSCAxfnkhiuWqfmFJzJQt9w==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "enhanced-resolve": "^5.0.0",
+        "micromatch": "^4.0.0",
+        "semver": "^7.3.4"
+      },
+      "dependencies": {
+        "micromatch": {
+          "version": "4.0.5",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "braces": "^3.0.2",
+            "picomatch": "^2.3.1"
+          }
+        }
+      }
+    },
     "tslib": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
diff --git a/package.json b/package.json
index fbfb3fc..3dfb3ce 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "@adonisjs/view": "^6.2.0",
     "@eidellev/inertia-adonisjs": "^8.0.1",
     "@inertiajs/vue3": "^1.0.9",
+    "@vue/compiler-sfc": "^3.3.4",
     "proxy-addr": "^2.0.7",
     "reflect-metadata": "^0.1.13",
     "source-map-support": "^0.5.21",
diff --git a/resources/js/Layouts/BELayout.vue b/resources/js/Layouts/BELayout.vue
new file mode 100644
index 0000000..a010bba
--- /dev/null
+++ b/resources/js/Layouts/BELayout.vue
@@ -0,0 +1,10 @@
+<template>
+    <main class="bg-slate-100 flex justify-center h-screen">
+        <div class="m-auto bg-white p-4 border rounded space-y-4 drop-shadow">
+            <slot></slot>
+        </div>
+    </main>
+</template>
+
+<script lang="ts" setup>
+</script>
\ No newline at end of file
diff --git a/resources/js/pages/Events/List.vue b/resources/js/pages/Events/List.vue
new file mode 100644
index 0000000..2dbfb27
--- /dev/null
+++ b/resources/js/pages/Events/List.vue
@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup>
+
+import BELayout from '@/Layouts/BELayout.vue'
+
+defineOptions({ layout: BELayout })
+
+</script>
\ No newline at end of file
diff --git a/resources/js/pages/Login.vue b/resources/js/pages/Login.vue
index 9bbc2b1..afbda98 100644
--- a/resources/js/pages/Login.vue
+++ b/resources/js/pages/Login.vue
@@ -1,15 +1,42 @@
 <template>
-    <main class="bg-slate-50 h-screen flex justify-center">
-        <div class="m-auto bg-white p-4 border rounded space-y-4 drop-shadow">
-            <h1 class="text-center text-lg font-bold">Login</h1>
-            <n-input>
-
-            </n-input>
-
-            <n-input>
-
-            </n-input>
-    </div>
-    </main>
+    <h1 class="text-center text-lg font-bold">Login</h1>
     
-</template>
\ No newline at end of file
+    <n-form  
+        label-placement="top"
+        :model="formValue"
+        ref="formRef"
+        :rules="rules"
+    >
+        <n-form-item label="Benutzername" path="user">
+            <n-input v-model:value="formValue.user" placeholder="Benutzername" />
+        </n-form-item>
+        <n-form-item label="Passwort" path="password">
+            <n-input v-model:value="formValue.password" placeholder="Passwort"></n-input>
+        </n-form-item>
+        <div class="flex justify-center">
+            <n-button class="bg-[#18A058]" type="success" @click="onClickLogin">Einloggen</n-button>
+        </div>
+    </n-form>
+</template>
+
+<script setup>
+    import { ref } from 'vue'
+    import { router } from '@inertiajs/vue3'
+    import BELayout from '@/Layouts/BELayout.vue'
+
+    defineOptions({ layout: BELayout })
+
+    const formRef = ref(null)
+    const formValue = ref({
+        user: '',
+        password: ''
+    })
+    
+    const rules = ref(undefined)
+
+    function onClickLogin(){
+        router.get(
+            '/Events'
+        )
+    }
+</script>
\ No newline at end of file
diff --git a/resources/views/welcome.edge b/resources/views/welcome.edge
deleted file mode 100644
index 79cc317..0000000
--- a/resources/views/welcome.edge
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AdonisJS - A fully featured web framework for Node.js</title>
-  @entryPointStyles('app')
-  @entryPointScripts('app')
-</head>
-<body>
-
-  <main>
-    <div>
-      <h1 class="title"> It Works! </h1>
-      <p class="subtitle">
-        Congratulations, you have just created your first AdonisJS app.
-      </p>
-
-      <ul>
-        <li>
-          The route for this page is defined inside <code>start/routes.ts</code> file
-        </li>
-
-        <li>
-          You can update this page by editing <code>resources/views/welcome.edge</code> file
-        </li>
-
-        <li>
-          If you run into problems, you can reach us on <a href="https://discord.gg/vDcEjq6?">Discord</a> or the <a href="https://forum.adonisjs.com/">Forum</a>.
-        </li>
-      </ul>
-    </div>
-  </main>
-</body>
-</html>
diff --git a/start/routes.ts b/start/routes.ts
index 1a4ead2..40e5cd7 100644
--- a/start/routes.ts
+++ b/start/routes.ts
@@ -26,4 +26,8 @@ Route.get('/', async ({ inertia }) => {
 
 Route.get('/Login', async({inertia}) =>{
   return inertia.render('Login')
+})
+
+Route.get('/Events', async({inertia})=> {
+  return inertia.render('Events/List')
 })
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index f742a23..23135bf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -33,7 +33,7 @@
       "@adonisjs/view",
       "@adonisjs/shield",
       "@japa/preset-adonis/build/adonis-typings",
-      "@eidellev/inertia-adonisjs"
+      "@eidellev/inertia-adonisjs",
     ]
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 6520d19..169339e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -187,16 +187,15 @@ Encore.enableVueLoader(() => {}, {
   version: 3,
   runtimeCompilerBuild: false,
   useJsx: false
-})
-
-Encore.addPlugin( Components({
+}).addAliases({
+  '@': join(__dirname, 'resources/js')
+}).configureDefinePlugin(options => {
+  options['__VUE_OPTIONS_API__'] = true
+  options['__VUE_PROD_DEVTOOLS__'] = false
+}).addPlugin( Components({
   resolvers: [NaiveUiResolver()]
 }))
 
-Encore.addAliases({
-  '@': resolve(__dirname, 'resources/js')
-})
-
 /*
 |--------------------------------------------------------------------------
 | Configure logging
@@ -209,10 +208,11 @@ Encore.addAliases({
 */
 const config = Encore.getWebpackConfig()
 config.infrastructureLogging = {
-  level: 'warn',
+  level: 'info',
 }
 config.stats = 'errors-warnings'
 
+
 /*
 |--------------------------------------------------------------------------
 | Export config