diff --git a/PoinCloudWeb.Web/public/index.html b/PoinCloudWeb.Web/public/index.html
index 3e5a139..b48df46 100644
--- a/PoinCloudWeb.Web/public/index.html
+++ b/PoinCloudWeb.Web/public/index.html
@@ -1,17 +1,23 @@
 <!DOCTYPE html>
 <html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
+</head>
+
+<body style="margin: 0px">
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/PoinCloudWeb.Web/src/App.vue b/PoinCloudWeb.Web/src/App.vue
index bd310b0..0a0f6af 100644
--- a/PoinCloudWeb.Web/src/App.vue
+++ b/PoinCloudWeb.Web/src/App.vue
@@ -1,11 +1,18 @@
 <template>
   <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
+    <Navbar />
     <router-view />
   </div>
 </template>
 
+<script>
+import Navbar from "@/components/Navbar.vue";
+export default {
+  setup() {},
+  components: { Navbar },
+};
+</script>
+
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -14,17 +21,4 @@
   text-align: center;
   color: #2c3e50;
 }
-
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
-</style>
+</style>
\ No newline at end of file
diff --git a/PoinCloudWeb.Web/src/components/Navbar.vue b/PoinCloudWeb.Web/src/components/Navbar.vue
new file mode 100644
index 0000000..6b68bdb
--- /dev/null
+++ b/PoinCloudWeb.Web/src/components/Navbar.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="navbar">
+    <router-link class="navbar-caption" :to="'/'">PointCloudWeb</router-link>
+    <div class="small-container">
+      <router-link class="navbar-button" :to="'/About'">About</router-link>
+      <router-link class="navbar-button" :to="'/scanner'">Scanner</router-link>
+      <router-link class="navbar-button" :to="'/map'">Map</router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NavBar",
+  //   methods: {
+  //     onClickMain: function () {
+  //       this.$router.push("/");
+  //     },
+  //     onClickScanner: function () {
+  //       this.$router.push("/scanner");
+  //     },
+  //     onClickMap: function () {
+  //       this.$router.push("/map");
+  //     },
+  //   },
+};
+</script>
+
+<style scoped>
+.navbar {
+  padding: 10px;
+  height: 2em;
+  border-bottom: 1px solid rgb(161, 161, 161);
+  color: rgb(145, 145, 145);
+  display: flex;
+  flex-direction: row-reverse;
+  vertical-align: middle;
+}
+.navbar-caption {
+  order: 99;
+  margin-right: auto;
+  font-size: 2em;
+  display: table;
+  vertical-align: middle;
+}
+
+.small-container {
+  display: table;
+  height: 2em;
+}
+
+.navbar-button {
+  display: table-cell;
+  width: 100px;
+  font-size: 1em;
+  vertical-align: middle;
+}
+
+a {
+  font-weight: bold;
+  color: #2c3e50;
+  text-decoration: none;
+}
+
+a.router-link-exact-active {
+  color: #42b983;
+}
+</style>
\ No newline at end of file
diff --git a/PoinCloudWeb.Web/src/components/ScanItem.vue b/PoinCloudWeb.Web/src/components/ScanItem.vue
new file mode 100644
index 0000000..2fc89cb
--- /dev/null
+++ b/PoinCloudWeb.Web/src/components/ScanItem.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <button>Test</button>
+    <md-icon>thumb_up</md-icon>
+    <!-- button(id="Visible" + scan.id, onclick="buttonVisibleClicked("+scan.id+")"
+    type="button", class="fa fa-eye") button(id="Edit" + scan.id, type="button",
+    class="fa fa-edit") p(id="Label" + scan.id)= scan.name -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ScanItem",
+  //   methods: {
+  //     onClickMain: function () {
+  //       this.$router.push("/");
+  //     },
+  //     onClickScanner: function () {
+  //       this.$router.push("/scanner");
+  //     },
+  //     onClickMap: function () {
+  //       this.$router.push("/map");
+  //     },
+  //   },
+};
+</script>
\ No newline at end of file
diff --git a/PoinCloudWeb.Web/src/main.js b/PoinCloudWeb.Web/src/main.js
index 3e79677..fa26040 100644
--- a/PoinCloudWeb.Web/src/main.js
+++ b/PoinCloudWeb.Web/src/main.js
@@ -2,4 +2,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 
-createApp(App).use(router).mount('#app')
+createApp(App)
+    .use(router)
+    .mount('#app')
diff --git a/PoinCloudWeb.Web/src/router/index.js b/PoinCloudWeb.Web/src/router/index.js
index 15988df..669349d 100644
--- a/PoinCloudWeb.Web/src/router/index.js
+++ b/PoinCloudWeb.Web/src/router/index.js
@@ -10,10 +10,22 @@ const routes = [
   {
     path: '/about',
     name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import('../views/About.vue')
+  },
+  {
+    path: '/scanner',
+    name: 'Scanner',
+    component: () => import('../views/Scanner.vue')
+  },
+  {
+    path: '/map',
+    name: 'Map',
+    component: () => import('../views/Map.vue')
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'Error',
+    component: () => import('../views/Error.vue')
   }
 ]
 
diff --git a/PoinCloudWeb.Web/src/views/About.vue b/PoinCloudWeb.Web/src/views/About.vue
index 3fa2807..dbbfed1 100644
--- a/PoinCloudWeb.Web/src/views/About.vue
+++ b/PoinCloudWeb.Web/src/views/About.vue
@@ -1,5 +1,18 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <img alt="Vue logo" src="../assets/logo.png" />
+    <HelloWorld msg="Welcome to Your Vue.js App" />
   </div>
 </template>
+
+<script>
+import HelloWorld from "@/components/HelloWorld.vue";
+// @ is an alias to /src
+
+export default {
+  name: "Home",
+  components: {
+    HelloWorld,
+  },
+};
+</script>
diff --git a/PoinCloudWeb.Web/src/views/Error.vue b/PoinCloudWeb.Web/src/views/Error.vue
new file mode 100644
index 0000000..19df320
--- /dev/null
+++ b/PoinCloudWeb.Web/src/views/Error.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>404 Not found</h1>
+  </div>
+</template>
\ No newline at end of file
diff --git a/PoinCloudWeb.Web/src/views/Home.vue b/PoinCloudWeb.Web/src/views/Home.vue
index 8bd6c57..d58d8f2 100644
--- a/PoinCloudWeb.Web/src/views/Home.vue
+++ b/PoinCloudWeb.Web/src/views/Home.vue
@@ -1,18 +1,15 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <h1>Welcome to PointCloudWeb</h1>
+    <p>With this tool the scanning and managing of Point Clouds is possible</p>
+    <p>Please select a feature in the Nav-Bar.</p>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
 
 export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
+  name: "Home",
+};
 </script>
diff --git a/PoinCloudWeb.Web/src/views/Map.vue b/PoinCloudWeb.Web/src/views/Map.vue
new file mode 100644
index 0000000..769303d
--- /dev/null
+++ b/PoinCloudWeb.Web/src/views/Map.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="map-grid-container">
+    <div id="map-settings">
+      <div class="map-settings-internal">
+        <h3>Scans</h3>
+        <ul>
+          <!-- each scan in [{id:123, name: "Test"}, {id:558, name: "Test 55"}]
+						li
+							+scan(scan) -->
+        </ul>
+        <ul v-for="item in items" :key="item">
+          <li>
+            <p>{{ item }}</p>
+            <ScanItem />
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div id="map" class="content-padding">
+      <h1>Place the Point Cloud visualization here</h1>
+      <ul v-for="item in items" :key="item">
+        <li>{{ item }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import ScanItem from "@/components/ScanItem";
+
+export default {
+  data: function () {
+    return {
+      items: [
+        1, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6,
+        7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6,
+        7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6,
+        7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6,
+      ],
+    };
+  },
+  components: { ScanItem },
+};
+</script>
+
+<style scoped>
+.map-grid-container {
+  text-align: left;
+}
+.content-padding {
+  padding: 10px;
+}
+
+ul {
+  padding-left: 0px;
+}
+
+li {
+  font-size: 1.4em;
+  list-style: none;
+}
+
+p {
+  display: inline-block;
+  margin: 0px;
+  margin-left: 10px;
+}
+
+h3 {
+  margin: 0px;
+}
+
+a {
+  text-decoration: none;
+}
+
+button {
+  display: inline-block;
+  border-top: 0px;
+  border-bottom: 0px;
+  border-left: 0px;
+  border-right: 0px;
+
+  background: none;
+  cursor: pointer;
+  color: grey;
+  font-size: inherit;
+}
+
+#map-settings {
+  grid-area: right;
+  border-left: 1px solid black;
+  height: 100%;
+  overflow-y: auto;
+}
+.map-settings-internal {
+  padding: 20px;
+}
+
+#map {
+  grid-area: main;
+  overflow-y: auto;
+}
+
+.map-grid-container {
+  display: grid;
+  grid-template-areas: "main right";
+  grid-template-columns: calc(100vw - 300px) 300px;
+  height: calc(
+    100vh - 2em - 20px - 1px
+  ); /*viewport height - height of navbar-button - padding - borderline*/
+  grid-gap: 0px;
+  padding: 0px;
+}
+</style>
\ No newline at end of file
diff --git a/PoinCloudWeb.Web/src/views/Scanner.vue b/PoinCloudWeb.Web/src/views/Scanner.vue
new file mode 100644
index 0000000..beebec2
--- /dev/null
+++ b/PoinCloudWeb.Web/src/views/Scanner.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>Welcome to PointCloudWeb</h1>
+    <h1>Scanner</h1>
+  </div>
+</template>
\ No newline at end of file
