diff --git a/.eslintrc.json b/.eslintrc.json
index b160104..a0982f8 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -20,19 +20,19 @@
     ],
     "rules": {
         "indent": [
-            "warn",
-            "tab"
+            "error",
+			"tab"
         ],
         "linebreak-style": [
-            "warn",
+            "off",
             "unix"
         ],
         "quotes": [
-            "warn",
+            "error",
             "single"
         ],
         "semi": [
-            "warn",
+            "error",
             "never"
         ],
 		"vue/no-v-model-argument": "off"
diff --git a/package-lock.json b/package-lock.json
index e255780..a81f06a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,8 @@
         "naive-ui": "^2.23.2",
         "prettier": "^2.2.1",
         "sass": "^1.26.5",
-        "sass-loader": "^8.0.2"
+        "sass-loader": "^8.0.2",
+        "vfonts": "^0.1.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -12628,9 +12629,9 @@
       "dev": true
     },
     "node_modules/selfsigned": {
-      "version": "1.10.11",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.11.tgz",
-      "integrity": "sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==",
+      "version": "1.10.14",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.14.tgz",
+      "integrity": "sha512-lkjaiAye+wBZDCBsu5BGi0XiLRxeUlsGod5ZP924CRSEoGuZAw/f7y9RKu28rwTfiHVhdavhB0qH0INV6P1lEA==",
       "dev": true,
       "dependencies": {
         "node-forge": "^0.10.0"
@@ -25986,9 +25987,9 @@
       "dev": true
     },
     "selfsigned": {
-      "version": "1.10.11",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.11.tgz",
-      "integrity": "sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==",
+      "version": "1.10.14",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.14.tgz",
+      "integrity": "sha512-lkjaiAye+wBZDCBsu5BGi0XiLRxeUlsGod5ZP924CRSEoGuZAw/f7y9RKu28rwTfiHVhdavhB0qH0INV6P1lEA==",
       "dev": true,
       "requires": {
         "node-forge": "^0.10.0"
diff --git a/package.json b/package.json
index 694444e..7c9267b 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "naive-ui": "^2.23.2",
     "prettier": "^2.2.1",
     "sass": "^1.26.5",
-    "sass-loader": "^8.0.2"
+    "sass-loader": "^8.0.2",
+    "vfonts": "^0.1.0"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 95bc643..2b212fa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,46 +1,42 @@
 <template>
-  <n-config-provider :theme="null">
-    <n-message-provider>
-  <div id="nav">
-    <router-link to="/">Startseite</router-link> |
-    <router-link to="/about">Das sind wir</router-link>
-  </div>
-  <router-view />
-  </n-message-provider>
-  </n-config-provider>
+	<n-config-provider :theme="null">
+		<n-message-provider>
+			<NavBar v-if="!isHome" />
+			<router-view />
+		</n-message-provider>
+	</n-config-provider>
 </template>
 
 <script>
 import { defineComponent } from 'vue'
 import {darkTheme} from 'naive-ui'
 
+import NavBar from '@/components/NavBar'
+
 export default defineComponent({
-  setup() {
-    return { darkTheme }
-  }
+	components: {
+		NavBar,
+	},
+	data() {
+		return { darkTheme }
+	},
+	computed: {
+		isHome() {
+			return this.$route.name == 'Home'
+		}
+	}
 })
 </script>
 
 
 <style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+body,html {
+	margin: 0;
+	padding: 0;
 }
 
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+* {
+	font-family: v-sans;
+	font-weight: 400;
 }
 </style>
diff --git a/src/assets/images/home_bg.jpg b/src/assets/images/home_bg.jpg
new file mode 100644
index 0000000..586ea26
Binary files /dev/null and b/src/assets/images/home_bg.jpg differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503..0000000
Binary files a/src/assets/logo.png and /dev/null differ
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 74cec53..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <div class="hello">
-	<h1>{{ msg }}</h1>
-	<p>
-		Check me out, BOY!!!
-	</p>
-
-	<n-button type="primary" @click="showModal = true">Open Modal</n-button>
-	<n-modal
-		v-model:show="showModal"
-		:mask-closable="false"
-		preset="dialog"
-		title="Dialog"
-		content="Are you sure?"
-		positive-text="Confirm"
-		@positive-click="onPositiveClick"
-		@negative-click="onNegativeClick"
-		negative-text="Cancel"
-	/>
-
-	</div>
-</template>
-
-<script>
-import { useMessage } from 'naive-ui'
-
-export default {
-	name: 'HelloWorld',
-	props: {
-		msg: String,
-	},
-	data() { 
-		return {
-			message: useMessage(),
-			showModal: false
-		}
-	},
-	methods: {
-		onPositiveClick () {
-			this.message.success('Submit')
-			this.showModal = false
-		},
-		onNegativeClick () {
-			this.message.success('Cancel')
-			this.showModalRef = false
-		}
-	}
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-	margin: 40px 0 0;
-}
-ul {
-	list-style-type: none;
-	padding: 0;
-}
-li {
-	display: inline-block;
-	margin: 0 10px;
-}
-a {
-	color: #42b983;
-}
-</style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
new file mode 100644
index 0000000..2b45614
--- /dev/null
+++ b/src/components/NavBar.vue
@@ -0,0 +1,23 @@
+<template>
+	<nav>
+		<router-link :to="{name: 'Home'}">Home</router-link>
+		<router-link :to="{name: 'LogsList'}">All Logs</router-link>
+		<router-link :to="{name: 'CreateLog'}">+ New</router-link>
+	</nav>
+</template>
+
+<script>
+export default {
+	name: 'NavBar',
+	data() { 
+		return {}
+	}
+}
+</script>
+
+<style scoped>
+nav { 
+	width: 100%;
+	border-bottom: 1px solid gray;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index fa8fee4..49bf3fb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,10 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
 
-import naive from "naive-ui";
+import naive from 'naive-ui'
 
 var app = createApp(App).use(store).use(router)
-app.use(naive);
-app.mount("#app");
+app.use(naive)
+app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index 281f312..5792f42 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,26 +1,31 @@
-import { createRouter, createWebHistory } from "vue-router";
-import Home from "../views/Home.vue";
+import 'vfonts/FiraSans.css'
+
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/Home.vue'
+import LogsList from '../views/LogsList.vue'
+import CreateLog from '../views/CreateLog.vue'
 
 const routes = [
-  {
-    path: "/",
-    name: "Home",
-    component: Home,
-  },
-  {
-    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"),
-  },
-];
+	{
+		path: '/',
+		name: 'Home',
+		component: HomeView,
+	},
+	{
+		path: '/logs',
+		name: 'LogsList',
+		component: LogsList
+	},
+	{
+		path: '/logs/create',
+		name: 'CreateLog',
+		component: CreateLog
+	}
+]
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes,
-});
+	history: createWebHistory(),
+	routes,
+})
 
-export default router;
+export default router
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/CreateLog.vue b/src/views/CreateLog.vue
new file mode 100644
index 0000000..75dd1a6
--- /dev/null
+++ b/src/views/CreateLog.vue
@@ -0,0 +1,3 @@
+<template>
+	<h1>Create Log</h1>
+</template>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8e2edac..b35e84a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,18 +1,84 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Willkommen to MEINE Vue App" />
-  </div>
+	<div>
+		<div class="banner-bg">
+			<div>
+				<n-gradient-text :size="40" type="success">
+					Zierle-Training
+				</n-gradient-text>
+				<br>
+				<n-gradient-text :size="30" type="info">
+					Online Tools
+				</n-gradient-text>
+			</div>
+		</div>
+
+		<div class="home-menu">
+			<n-space justify="space-around" >
+				<n-space vertical>
+					<h2>Documents</h2>
+					<n-button type="primary">All Documents</n-button>
+				</n-space>
+				<n-space vertical>
+					<h2>Photo Logs</h2>
+					<n-space>
+						<router-link :to="{name: 'LogsList'}">
+							<n-button type="primary">All Logs</n-button>
+						</router-link>
+						<router-link :to="{name: 'CreateLog'}">
+							<n-button type="info">+ New</n-button>
+						</router-link>
+					</n-space>
+					<n-button>Crop Photos</n-button>
+				</n-space>
+			</n-space>
+		</div>
+	</div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
 
 export default {
-  name: "Home",
-  components: {
-    HelloWorld,
-  },
-};
+	name: 'HomeView'
+}
 </script>
+
+<style scoped>
+.home-menu {
+	margin: auto;
+	position: relative;
+	min-width: 30vw;
+	max-width: 60vw;
+	min-height: 20vh;
+	background-color: white;
+	z-index: 1;
+	margin-top: 30vh;
+	box-shadow: 0 0 50px rgba(0,0,0,0.25);
+	border: none;
+	border-radius: 0 2em;
+	padding: 1em;
+}
+
+.banner-bg {
+	background-image: url('../assets/images/home_bg.jpg');
+	background-size: cover;
+	background-position: center;
+	width: 100%;
+	height: 50%;
+	position: absolute;
+	top: 0;
+	z-index: -1;
+	border-bottom-left-radius: 100% 30%;
+	border-bottom-right-radius: 100% 30%;
+	box-shadow: 0 0 50px rgba(0,0,0,0.25);
+}
+
+.banner-bg div {
+	margin: auto;
+	text-align: center;
+	margin-top: 3em;
+}
+
+a {
+	text-decoration: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/LogsList.vue b/src/views/LogsList.vue
new file mode 100644
index 0000000..d5f7a1f
--- /dev/null
+++ b/src/views/LogsList.vue
@@ -0,0 +1,3 @@
+<template>
+	<h1>Logs List</h1>
+</template>
\ No newline at end of file