diff --git a/app.vue b/app.vue
index 2b1be09..270cf64 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,93 @@
 <template>
-  <div>
-    <NuxtPage />
+  <div class="main-container">
+    <div class="sidenav">
+      <div class="sidenav-content">
+        <h1 class="menu-heading">
+          WebAdmin
+        </h1>
+        <p>
+          <router-link to="/">
+            Home
+          </router-link>
+          <router-link to="/adresses">
+            Adressverwaltung
+          </router-link>
+        </p>
+      </div>
+    </div>
+    <div class="container">
+      <router-view />
+    </div>
   </div>
 </template>
+
+<script></script>
+<style scoped>
+.main-container {
+  max-width: 70vw;
+  margin: auto;
+}
+
+/* Navigation */
+/* The side navigation menu */
+.sidenav {
+  height: 100%;
+  width: 250px;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #a5aeb5;
+  overflow-x: hidden;
+  padding-top: 20px;
+}
+
+.sidenav-content {
+  padding: 15px;
+}
+
+/* The menu title */
+.menu-heading {
+  color: #f1f1f1;
+  width: 200px;
+  height: 75px;
+  font-weight: 600;
+  font-size: 40px;
+}
+
+/* The navigation menu links */
+.sidenav a {
+  text-decoration: none;
+  font-size: 25px;
+  color: #e0e2e3;
+  display: block;
+  transition: 0.3s;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidenav a:hover {
+  color: #f1f1f1;
+}
+
+/* Position and style the close button (top right corner) */
+.sidenav .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
+#main {
+  transition: margin-left .5s;
+  padding: 20px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}
+
+</style>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e8f58d4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-witdh, initial-scale=1.0" />
+        <link rel="stylesheet" href="/main.css" />
+        <title>WebAdmin</title>
+    </head>
+    <body>
+        <div id="app">
+            <script type="module" src="/main.js"></script>
+        </div>
+    </body>
+</html>
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..e69de29
diff --git a/pages/adresses.vue b/pages/adresses.vue
new file mode 100644
index 0000000..b528df3
--- /dev/null
+++ b/pages/adresses.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="main-container">
+    <div class="heading">
+      <h1>
+        Willkommen in der Adressverwaltung
+      </h1>
+    </div>
+    <div class="content">
+      <p>fill this with content</p>
+    </div>
+  </div>
+</template>
diff --git a/pages/index.vue b/pages/index.vue
index 3d2a298..a395fc6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,195 +1,5 @@
 <template>
-  <div class="main-container">
-    <div class="heading">
-      <h1 class="heading__title">
-        Welcome to your new <span class="gradient__text">sidebase</span> app!
-      </h1>
-      <p class="heading__credits">
-        Read our documentation <a href="https://sidebase.io/sidebase/welcome" target="_blank">here</a>.
-        Get started in no time with the following amazing modules:
-      </p>
-    </div>
-    <div class="cards">
-      <div class="card prisma__card">
-        <div class="card__body">
-          <h2 class="card__title">
-            Prisma ORM
-          </h2>
-          <p>
-            Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.
-          </p>
-        </div>
-        <p class="card__action">
-          <a class="card__link" href="https://sidebase.io/sidebase/components/prisma" target="_blank">
-            TEST
-          </a>
-          <a class="card__link" href="/prisma" target="_blank">
-            See example
-          </a>
-        </p>
-      </div>
-      <div class="card trpc__card">
-        <div class="card__body">
-          <h2 class="card__title">
-            tRPC
-          </h2>
-          <p>
-            tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.
-          </p>
-        </div>
-        <p class="card__action">
-          <a class="card__link" href="https://sidebase.io/sidebase/components/trpc" target="_blank">
-            Read documentation
-          </a>
-          <a class="card__link" href="/trpc" target="_blank">
-            See example
-          </a>
-        </p>
-      </div>
-      <div class="card naiveui__card">
-        <div class="card__body">
-          <h2 class="card__title">
-            NaiveUI
-          </h2>
-          <p>
-            A Vue 3 Component Library. Complete, Customizable, Uses TypeScript, Fast.
-          </p>
-        </div>
-        <p class="card__action">
-          <a class="card__link" href="https://www.naiveui.com/en-US/os-theme" target="_blank">
-            Read documentation
-          </a>
-        </p>
-      </div>
-    </div>
+  <div class="index">
+    <h1>Willkommen</h1>
   </div>
 </template>
-
-<style scoped>
-  * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    background-color: #eefbfc;
-    color: #484848;
-  }
-
-  .main-container {
-    max-width: 45vw;
-    margin: auto;
-    padding-top: 60px;
-  }
-
-  /* HEADING */
-
-  .heading {
-    text-align: center;
-  }
-
-  .heading__title {
-    font-weight: 600;
-    font-size: 40px;
-  }
-
-  .gradient__text {
-    background: linear-gradient(to right, #7bceb6 10%, #12a87b 40%, #0FCF97 60%, #7bceb6 90%);
-    background-size: 200% auto;
-    color: #000;
-    background-clip: text;
-    text-fill-color: transparent;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    animation: shine 1s linear infinite;
-  }
-
-  @keyframes shine {
-    to {
-        background-position: 200% center;
-    }
-  }
-
-  .heading__credits {
-    color: #888888;
-    font-size: 25px;
-    transition: all 0.5s;
-  }
-
-  .heading__credits a {
-    text-decoration: underline;
-  }
-
-  /* CARDS */
-  .cards {
-    display: grid;
-    gap: 20px;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    margin-top: 30px;
-  }
-
-  .card {
-    padding: 20px;
-    width: 100%;
-    min-height: 200px;
-    display: grid;
-    grid-template-rows: 20px 50px 1fr 50px;
-    border-radius: 10px;
-    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
-    transition: all 0.2s;
-    cursor: default;
-  }
-
-  .card:hover {
-    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
-    transform: scale(1.01);
-  }
-
-  .card__link {
-    position: relative;
-    text-decoration: underline;
-    color: rgba(255, 255, 255, 0.9);
-  }
-
-  .card__title {
-    font-weight: 400;
-    color: #ffffff;
-    font-size: 30px;
-  }
-
-  .card__body {
-    grid-row: 2/4;
-  }
-
-  .card__body p {
-    color: #ffffff;
-  }
-
-  .card__action {
-    grid-row: 5/6;
-    align-self: center;
-    display: flex;
-    gap: 20px
-  }
-
-  /* RESPONSIVE */
-
-  @media (max-width: 1600px) {
-    .main-container {
-        max-width: 100vw;
-        padding: 50px;
-    }
-
-    .cards {
-        justify-content: center;
-        grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-  }
-
-    .prisma__card { background: radial-gradient(#3fbafe, #5A67D8FF); }
-    .trpc__card { background: radial-gradient(#a07ccf, #926dc2); }
-    .naiveui__card { background: radial-gradient(#ad6434, #995020); }
-</style>
diff --git a/pages/prisma.vue b/pages/prisma.vue
deleted file mode 100644
index 8aecc62..0000000
--- a/pages/prisma.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const { data: examples } = useFetch('/api/examples')
-</script>
-
-<template>
-  <div>
-    Prisma ORM Data from the database, received {{ examples?.length || 0 }} records: <pre>{{ examples }}</pre>
-  </div>
-</template>
diff --git a/pages/trpc.vue b/pages/trpc.vue
deleted file mode 100644
index 38b4072..0000000
--- a/pages/trpc.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-const { $client } = useNuxtApp()
-
-const hello = await $client.hello.useQuery({ text: 'client' })
-</script>
-
-<template>
-  <div>
-    <!-- As `superjson` is already pre-configured, we can use `time` as a `Date` object without further deserialization 🎉 -->
-    tRPC Data: "{{ hello.data.value?.greeting }}" send at "{{ hello.data.value?.time.toLocaleDateString('en-EN') }}".
-  </div>
-</template>
diff --git a/public/main.css b/public/main.css
new file mode 100644
index 0000000..92de306
--- /dev/null
+++ b/public/main.css
@@ -0,0 +1,68 @@
+.main-container {
+  max-width: 45vw;
+  margin: auto;
+  padding-top: 60px;
+}
+
+/* The side navigation menu */
+.sidenav {
+  height: 100%;
+  width: 250px;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #a5aeb5;
+  overflow-x: hidden;
+  padding-top: 20px;
+}
+
+.sidenav-content {
+  padding: 15px;
+}
+
+/* The menu title */
+.menu-heading {
+  color: #f1f1f1;
+  width: 200px;
+  height: 75px;
+  font-weight: 600;
+  font-size: 40px;
+}
+
+/* The navigation menu links */
+.sidenav a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #e0e2e3;
+  display: block;
+  transition: 0.3s;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidenav a:hover {
+  color: #f1f1f1;
+}
+
+/* Position and style the close button (top right corner) */
+.sidenav .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
+#main {
+  transition: margin-left .5s;
+  padding: 20px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}
+
diff --git a/router/index.js b/router/index.js
new file mode 100644
index 0000000..ea75dea
--- /dev/null
+++ b/router/index.js
@@ -0,0 +1,19 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import index from '@/pages/index.vue'
+import adresses from '@/pages/adresses.vue'
+
+const routes = [
+  { path: '/', name: 'Home', component: index },
+  { path: '/adresses', name: 'Adressverwaltung', component: adresses }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+const app = createApp({})
+
+app.use(router)
+
+export default router
