diff --git a/public/images/icons/logo.svg b/public/images/icons/logo.svg
new file mode 100644
index 000000000..445f04d39
--- /dev/null
+++ b/public/images/icons/logo.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="100%"
+    height="100%"
+    viewBox="0 0 1240 1240"
+    version="1.1"
+    xml:space="preserve"
+    style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+    id="svg110"
+    sodipodi:docname="logo.svg"
+    inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
+    xmlns="http://www.w3.org/2000/svg"
+><sodipodi:namedview
+   id="namedview112"
+   pagecolor="#505050"
+   bordercolor="#eeeeee"
+   borderopacity="1"
+   inkscape:pageshadow="0"
+   inkscape:pageopacity="0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   inkscape:zoom="0.67822581"
+   inkscape:cx="367.87158"
+   inkscape:cy="668.65636"
+   inkscape:window-width="1916"
+   inkscape:window-height="1041"
+   inkscape:window-x="0"
+   inkscape:window-y="442"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="svg110" />
+
+    <g
+        transform="matrix(82.716296,0,0,82.716296,-0.32663375,3.332e-6)"
+        id="g105">
+        <path
+            d="m 11.642,11.189 c 0.404,-0.415 0.622,-0.976 0.606,-1.555 L 12.041,2.407 C 12.004,1.067 10.907,0 9.566,0 H 7.499 5.434 C 4.093,0 2.995,1.067 2.957,2.407 L 2.751,9.634 c -0.017,0.579 0.201,1.14 0.605,1.555 0.146,0.15 0.311,0.276 0.49,0.375 l -0.937,3.427 h 1.386 l 0.357,-1.305 h 5.693 l 0.359,1.305 h 1.386 l -0.939,-3.427 c 0.181,-0.101 0.347,-0.225 0.491,-0.375 z m -1.533,-0.513 c -0.591,0 -1.073,-0.48 -1.073,-1.073 0,-0.592 0.482,-1.072 1.073,-1.072 0.593,0 1.073,0.48 1.073,1.072 10e-4,0.593 -0.48,1.073 -1.073,1.073 z M 6.14,1.076 c 0,-0.203 0.165,-0.368 0.367,-0.368 h 2.021 c 0.202,0 0.367,0.165 0.367,0.368 v 0.029 c 0,0.203 -0.165,0.367 -0.367,0.367 H 6.507 C 6.305,1.472 6.14,1.307 6.14,1.105 Z M 4.034,2.916 C 4.051,2.506 4.387,2.182 4.797,2.182 h 5.512 c 0.41,0 0.748,0.324 0.764,0.734 L 11.17,5.43 c 0.008,0.208 -0.068,0.41 -0.213,0.559 -0.145,0.149 -0.341,0.233 -0.551,0.233 H 4.699 C 4.492,6.222 4.292,6.138 4.148,5.989 4.004,5.84 3.927,5.638 3.935,5.43 Z m 0.854,5.615 c 0.593,0 1.073,0.48 1.073,1.072 0,0.593 -0.48,1.073 -1.073,1.073 -0.592,0 -1.072,-0.48 -1.072,-1.073 0,-0.592 0.48,-1.072 1.072,-1.072 z M 4.86,12.923 5.156,11.839 h 4.686 l 0.297,1.084 z"
+            style="fill:#ffffff;fill-rule:nonzero"
+            id="path103"/>
+    </g>
+    <defs
+        id="defs108">
+        <image
+            id="_Image1"
+            width="962px"
+            height="962px"
+            xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8IAAAPCCAYAAACz62GtAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAWQUlEQVR4nO3XsRHCQBDAwHs3Q+qU/gOnpFSDq4CfQbsVKNUMAAAAhKyZmetxfnaHAAAAwLc936917I4AAACAXzLCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAIMUIAwAAkGKEAQAASDHCAAAApBhhAAAAUowwAAAAKUYYAACAFCMMAABAihEGAAAgxQgDAACQYoQBAABIMcIAAACkGGEAAABSjDAAAAApRhgAAIAUIwwAAECKEQYAACDFCAMAAJBihAEAAEgxwgAAAKQYYQAAAFKMMAAAAClGGAAAgBQjDAAAQIoRBgAAAAAAAPhXNyjxC4CYTJZtAAAAAElFTkSuQmCC"/>
+    </defs>
+</svg>
diff --git a/public/img/vid2.mp4 b/public/img/vid2.mp4
new file mode 100644
index 000000000..30dbcca73
Binary files /dev/null and b/public/img/vid2.mp4 differ
diff --git a/resources/components/App.vue b/resources/components/App.vue
new file mode 100644
index 000000000..1ae61922b
--- /dev/null
+++ b/resources/components/App.vue
@@ -0,0 +1,86 @@
+<template>
+    <router-view></router-view>
+</template>
+
+<script>
+import LayoutBasic from "./layouts/Basic";
+
+export default {
+    name: "App",
+    data() {
+        return {
+            notificationsCount: 1,
+        };
+    },
+    metaInfo() {
+        return {
+            title: "Träwelling",
+            titleTemplate: "%s - Träwelling",//ToDo get name from .env
+            htmlAttrs: {
+                lang: this.i18n.getLocale()
+            },
+            meta: [
+                {name: "charset", "content": "utf-8"},
+                {name: "viewport", content: "width=device-width, initial-scale=1"},
+                {name: "apple-mobile-web-app-capable", content: "yes"},
+                {name: "apple-mobile-web-app-status-bar-style", content: "#c72730"},
+                {name: "mobile-web-app-capable", content: "yes"},
+                {name: "theme-color", content: "#c72730"},
+                {name: "name", content: "Träwelling"}, //ToDo get name from .env
+
+                {name: "copyright", content: "Träwelling Team"},
+                {name: "description", content: this.i18n.get("_.about.block1"), vmid: "description"},
+                {
+                    name: "keywords",
+                    content: "Träwelling, Twitter, Deutsche, Bahn, Travel, Check-In, Zug, Bus, Tram, Mastodon"
+                },
+                {name: "audience", conent: "Travellers"},
+                {name: "DC.Rights", content: "Träwelling Team"},
+                {name: "DC.Description", content: this.i18n.get("_.about.block1"), vmid: "DC.Description"},
+                {name: "DC.Language", content: this.i18n.getLocale()},
+                {property: "og:title", content: "Träwelling", vmid: "og:title"}, //ToDo get name from .env
+                {property: "og:site_name", content: "Träwelling"}, //ToDo get name from .env
+                {property: "og:type", content: "website"},
+                {name: "robots", content: "index,follow", vmid: "robots"}
+            ]
+        };
+    },
+    components: {
+        LayoutBasic
+    },
+    mounted() {
+        this.$auth.load().then(() => {
+            if (this.$auth.check()) {
+                this.$auth.fetch()
+                    .then((res) => {
+                        this.$auth.user(res.data.data);
+                        if (this.$auth.user().language) {
+                            this.setLang(this.$auth.user().language);
+                        }
+                    });
+            }
+        });
+        this.fetchNotificationsCount();
+    },
+    watch: {
+        '$route'() {
+            $("#navbarCollapse").collapse("hide");
+        }
+    },
+    methods: {
+        showNotifications() {
+            this.$refs.notifModal.show();
+        },
+        fetchNotificationsCount() {
+            axios
+                .get("/notifications/count")
+                .then((response) => {
+                    this.notificationsCount = response.data.data;
+                })
+                .catch((error) => {
+                    console.error(error);
+                });
+        }
+    }
+};
+</script>
diff --git a/resources/components/Dashboard.vue b/resources/components/Dashboard.vue
deleted file mode 100644
index 52b18988a..000000000
--- a/resources/components/Dashboard.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-md-8 col-lg-7">
-        <StationForm></StationForm>
-        <div class="loading" v-if="loading">
-          {{ i18n.get("_.vue.loading") }}
-        </div>
-
-        <div v-if="error" class="error">
-          <p>{{ error }}</p>
-
-          <p>
-            <button @click.prevent="fetchData">
-              {{ i18n.get("_.vue.tryAgain") }}
-            </button>
-          </p>
-        </div>
-        <!-- ToDo Future Check-ins -->
-        <div v-if="statuses">
-          <Status v-for="status in statuses" :status="status" v-bind:stopovers="stopovers" v-bind:key="status.id"
-                  :show-date="showDate(status, statuses)"/>
-<!--          ToDo Pagination-->
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-import Status from "../components/Status";
-import moment from "moment";
-import {StatusModel} from "../js/APImodels";
-import StationForm from "./StationForm";
-
-export default {
-  data() {
-    return {
-      loading: true,
-      error: null,
-      statuses: [StatusModel],
-      stopovers: null, //ToDo Typedef
-      moment: moment
-    };
-  },
-  metaInfo() {
-    return {
-      title: this.i18n.get("_.menu.dashboard")
-    };
-  },
-  components: {
-    StationForm,
-    Status
-  },
-  mounted() {
-    this.fetchData();
-  },
-  methods: {
-    showDate(item, statuses) {
-      let index = statuses.indexOf(item);
-      if (index === -1 || index === 0) {
-        return true;
-      }
-      return moment(item.train.origin.departure).date() !== moment(statuses[index-1].train.origin.departure).date();
-    },
-    fetchData() {
-      this.error = this.statuses = null;
-      axios
-          .get(this.$route.path)
-          .then((response) => {
-            this.loading = false;
-            if (!Object.keys(response.data.data).length && this.$route.path === "/dashboard") {
-              this.$router.push({name: "dashboard.global"}); //ToDo: Redirect if following nobody
-              this.fetchData();
-            }
-            this.statuses = response.data.data;
-            this.fetchStopovers();
-          })
-          .catch((error) => {
-            this.loading = false;
-            this.error   = error.data.message || error.message;
-          });
-    },
-    fetchStopovers() {
-      let tripIds = "";
-      this.statuses.forEach((status) => {
-        tripIds += (status.train.trip + ",");
-      });
-      axios
-          .get("/stopovers/" + tripIds)
-          .then((response) => {
-            this.stopovers = response.data.data;
-          })
-          .catch((error) => {
-            this.loading = false;
-          });
-    },
-  },
-};
-</script>
-
-<style scoped>
-
-</style>
diff --git a/resources/components/Login.vue b/resources/components/Login.vue
index 393e3ca88..2e399e88d 100644
--- a/resources/components/Login.vue
+++ b/resources/components/Login.vue
@@ -1,52 +1,79 @@
 <template>
-  <div class="container">
-    <div class="card card-default">
-      <div class="card-header">Connexion</div>
-      <div class="card-body">
-        <div class="alert alert-danger" v-if="hasError">
-          <p>Erreur, impossible de se connecter avec ces identifiants.</p>
+    <form class="card-body" method="post" @submit.prevent="login">
+        <h2 class="card-title">{{ i18n.get("_.user.login") }}</h2>
+        <div class="d-flex flex-row align-items-center justify-content-center">
+            <button aria-label="Twitter" class="btn btn-primary btn-floating mx-1"
+                    type="button"> <!--ToDo i18n?-->
+                <i aria-hidden="true" class="fab fa-twitter"></i>
+            </button>
+            <button aria-label="Apple" class="btn btn-primary btn-floating mx-1"
+                    type="button"> <!--ToDo i18n?-->
+                <i aria-hidden="true" class="fab fa-apple"></i>
+            </button>
+            <button aria-label="Mastodon" class="btn btn-primary btn-floating mx-1"
+                    type="button"> <!--ToDo i18n?-->
+                <i aria-hidden="true" class="fab fa-mastodon"></i>
+            </button>
         </div>
-        <form autocomplete="off" @submit.prevent="login" method="post">
-          <div class="form-group">
-            <label for="email">E-mail</label>
-            <input type="email" id="email" class="form-control" placeholder="user@example.com" v-model="email" required>
-          </div>
-          <div class="form-group">
-            <label for="password">Mot de passe</label>
-            <input type="password" id="password" class="form-control" v-model="password" required>
-          </div>
-          <button type="submit" class="btn btn-default">Connexion</button>
-        </form>
-      </div>
-    </div>
-  </div>
+        <div class="divider d-flex align-items-center mb-4 mt-2">
+            <p class="text-center fw-bold mx-3 mb-0">Or</p><!--ToDo i18n-->
+        </div>
+        <div class="form-outline mb-4">
+            <input id="email" v-model="email" class="form-control text-dark" required
+                   type="email"/>
+            <label class="form-label text-dark" for="email">
+                {{ i18n.get("_.user.email") }}
+            </label>
+        </div>
+        <div class="form-outline mb-4">
+            <input id="password" v-model="password" class="form-control text-dark"
+                   required type="password"/>
+            <label class="form-label text-dark" for="password">
+                {{ i18n.get("_.user.password") }}
+            </label>
+        </div>
+        <div class="d-flex align-items-center justify-content-between">
+            <button class="btn btn-white" type="submit">{{ i18n.get("_.user.login") }}</button>
+            <a class="text-dark"
+               href="#">{{ i18n.get("_.user.forgot-password") }}</a>
+        </div>
+    </form>
 </template>
 <script>
 export default {
-  data() {
-    return {
-      email: null,
-      password: null,
-      hasError: false
-    };
-  }, mounted() {
-    //
-  }, methods: {
-    login() {
-      // get the redirect object
-      var redirect = this.$auth.redirect();
-      this.$auth.login({
-          data: {
-              email: this.email,
-              password: this.password
-          },
-          redirect: {name: "dashboard"},
-          staySignedIn: true,
-          fetchUser: true,
-      }).then(() => {
-          this.$auth.fetch();
-      });
+    data() {
+        return {
+            email: null,
+            password: null,
+            hasError: false
+        };
+    }, mounted() {
+        //
+    }, methods: {
+        login() {
+            // get the redirect object
+            var redirect = this.$auth.redirect();
+            this.$auth.login({
+                data: {
+                    email: this.email,
+                    password: this.password
+                },
+                redirect: {name: "dashboard"},
+                staySignedIn: true,
+                fetchUser: true,
+            }).then(() => {
+                this.$auth.fetch();
+            });
+        }
     }
-  }
 };
 </script>
+<style scoped>
+.divider:after,
+.divider:before {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: #eee;
+}
+</style>
diff --git a/resources/components/Spinner.vue b/resources/components/Spinner.vue
new file mode 100644
index 000000000..d55f46072
--- /dev/null
+++ b/resources/components/Spinner.vue
@@ -0,0 +1,121 @@
+<template>
+    <div class="spinner-container">
+        <div class="spinner">
+            <div aria-hidden="true" class="track"></div>
+            <div aria-hidden="true" class="train"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Spinner"
+};
+</script>
+
+<style scoped>
+.spinner {
+    position: relative;
+    width: 60px;
+    height: 100px;
+}
+
+.spinner-container {
+    margin-left: 50%;
+}
+
+.track {
+    position: relative;
+    overflow: hidden;
+    width: 50px;
+    height: 100px;
+    left: -1px;
+    border-left: 5px solid #333;
+    transform: skew(-10deg) rotateX(45deg);
+}
+
+.track:before {
+    content: "";
+    position: absolute;
+    height: 7px;
+    width: 50px;
+    background-color: #333;
+    top: 90px;
+    box-shadow: 0 0 #333, 0 -14px #333, 0 -28px #333, 0 -42px #333, 0 -56px #333, 0 -70px #333, 0 -84px #333, 0 -98px #333, 0 -112px #333, 0 -126px #333, 0 -140px #333;
+    animation: track 1s linear infinite;
+}
+
+@keyframes track {
+    0% {
+        transform: translateY(70px) rotateX(45deg);
+    }
+    100% {
+        transform: translateY(0px) rotateX(45deg);
+    }
+}
+
+.track:after {
+    content: "";
+    position: absolute;
+    transform: rotate(-15deg);
+    width: 50px;
+    height: 120px;
+    background-color: #fff;
+    border-left: 5px solid #333;
+    left: 28px;
+    top: -10px;
+}
+
+.train {
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    background-color: #333;
+    border-radius: 15px;
+    top: 0;
+    left: -13px;
+    transform-origin: bottom;
+    animation: rotate 1s linear infinite;
+}
+
+.train:before {
+    content: "";
+    position: absolute;
+    background-color: #ced4da;
+    border-radius: 15%;
+    width: 42px;
+    height: 20px;
+    left: 9px;
+    top: 12px;
+}
+
+.train:after {
+    content: "";
+    position: absolute;
+    background-color: #ced4da;
+    border-radius: 50%;
+    height: 10px;
+    width: 10px;
+    top: 40px;
+    left: 10px;
+    box-shadow: 30px 0px #ced4da;
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0);
+    }
+    25% {
+        transform: rotate(2deg);
+    }
+    50% {
+        transform: rotate(0);
+    }
+    75% {
+        transform: rotate(-2deg);
+    }
+    100% {
+        transform: rotate(0);
+    }
+}
+</style>
diff --git a/resources/components/Status.vue b/resources/components/Status.vue
index 621bf0221..1e6b43af1 100644
--- a/resources/components/Status.vue
+++ b/resources/components/Status.vue
@@ -117,24 +117,25 @@
                    class="profile-image">
             </router-link>
           </li>
-          <li v-if="$auth.check()" class="list-inline-item like-text me-1" v-on:click="likeStatus">
-            <i aria-hidden="true" class="like fa-star small"
-               v-bind:class="{fas: statusData.liked, far: !statusData.liked}"></i>
-            <span v-if="statusData.likes" class="pl-1">{{ statusData.likes }}</span>
+          <li v-if="$auth.check()" class="list-inline-item like-text me-1" tabindex="0" v-on:click="likeStatus">
+              <i aria-hidden="true" class="like fa-star small"
+                 v-bind:class="{fas: statusData.liked, far: !statusData.liked}"></i>
+              <span v-if="statusData.likes" class="pl-1">{{ statusData.likes }}</span>
           </li>
-          <li v-if="$auth.check() && $auth.user().id === statusData.user" class="list-inline-item like-text">
-            <a class="like-text" data-mdb-toggle="dropdown" role="button">
-              <i :title="i18n.get('_.status.more')" aria-hidden="true" class="fas fa-ellipsis-h small"></i>
-            </a>
-            <ul class="dropdown-menu">
-              <li v-if="shareable"><a class="dropdown-item" href="#" v-on:click.prevent="share">
-                <i aria-hidden="true" class="fas fa-share"></i>&nbsp; {{ i18n.get("_.menu.share") }}
-              </a>
-              </li>
-              <li><a class="dropdown-item" href="#" v-on:click.prevent="toggleEditModal">
-                <i aria-hidden="true" class="fas fa-edit"></i>&nbsp;{{ i18n.get("_.modals.editStatus-title") }}
-              </a></li>
-              <li><a class="dropdown-item" href="#" v-on:click.prevent="toggleDeleteModal">
+            <li v-if="$auth.check() && $auth.user().id === statusData.user" class="list-inline-item like-text">
+                <a :aria-label="i18n.get('_.menu.show-more')" class="like-text" data-mdb-toggle="dropdown" role="button"
+                   tabindex="0">
+                    <i aria-hidden="true" class="fas fa-ellipsis-h small"></i>
+                </a>
+                <ul class="dropdown-menu">
+                    <li v-if="shareable"><a class="dropdown-item" href="#" v-on:click.prevent="share">
+                        <i aria-hidden="true" class="fas fa-share"></i>&nbsp; {{ i18n.get("_.menu.share") }}
+                    </a>
+                    </li>
+                    <li><a class="dropdown-item" href="#" v-on:click.prevent="toggleEditModal">
+                        <i aria-hidden="true" class="fas fa-edit"></i>&nbsp;{{ i18n.get("_.modals.editStatus-title") }}
+                    </a></li>
+                    <li><a class="dropdown-item" href="#" v-on:click.prevent="toggleDeleteModal">
                 <i aria-hidden="true" class="fas fa-trash"></i>&nbsp;{{ i18n.get("_.modals.delete-confirm") }}
               </a></li>
             </ul>
diff --git a/resources/components/Welcome.vue b/resources/components/Welcome.vue
deleted file mode 100644
index 639f64201..000000000
--- a/resources/components/Welcome.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <p>This is the homepage</p>
-</template>
-
-<script>
-export default {
-  name: "welcome",
-}
-</script>
-
-<style lang="scss">
-
-
-</style>
diff --git a/resources/components/layouts/Basic.vue b/resources/components/layouts/Basic.vue
new file mode 100644
index 000000000..1b18b4e49
--- /dev/null
+++ b/resources/components/layouts/Basic.vue
@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <NavbarComponent/>
+        <main class="py-4">
+            <div class="container">
+                <slot/>
+            </div>
+        </main>
+        <FooterComponent/>
+    </div>
+</template>
+
+<script>
+import NavbarComponent from "./NavbarComponent";
+import FooterComponent from "./FooterComponent";
+
+export default {
+    name: "LayoutBasic",
+    components: {
+        FooterComponent,
+        NavbarComponent,
+    }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/components/layouts/FooterComponent.vue b/resources/components/layouts/FooterComponent.vue
new file mode 100644
index 000000000..0ab89b35c
--- /dev/null
+++ b/resources/components/layouts/FooterComponent.vue
@@ -0,0 +1,94 @@
+<template>
+    <footer class="footer mt-auto py-3">
+        <div class="container">
+            <div class="btn-group dropup float-end">
+                <button :class="{'btn-sm btn-light': dashboard, 'btn-primary': !dashboard}" aria-expanded="false"
+                        aria-haspopup="true"
+                        class="btn dropdown-toggle"
+                        :aria-label="i18n.get('_.settings.language.set')" data-mdb-toggle="dropdown" type="button">
+                    <i aria-hidden="true" class="fas fa-globe-europe"></i><span aria-hidden="true"
+                                                                                class="d-none d-md-inline"> {{
+                        i18n.get("_.settings.language.set")
+                    }}</span>
+                </button>
+                <div class="dropdown-menu">
+                    <a v-for="(lang, key) in langs" class="dropdown-item" href="?language=$key"
+                       @click.prevent="setLang(key)">
+                        {{ lang }}
+                    </a>
+                </div>
+            </div>
+            <nav class="text-muted mb-0">
+                <router-link :class="{'text-white': dashboard}" :to="{name: 'about'}" class="footer-link">
+                    {{ i18n.get("_.menu.about") }}
+                </router-link>
+                <router-link v-if="$auth.check()" :class="{'text-white': dashboard}" :to="{name: 'dashboard.global'}"
+                             class="footer-link">
+                    {{ i18n.get("_.menu.globaldashboard") }}
+                </router-link>
+                <a :class="{'text-white': dashboard}" class="footer-link" href=" route(events) ">
+                    {{ i18n.get("_.events") }}
+                </a>
+                <a :class="{'text-white': dashboard}" class="footer-link" href=" route(static.privacy) ">
+                    {{ i18n.get("_.menu.privacy") }}
+                </a>
+                <a :class="{'text-white': dashboard}" class="footer-link" href=" route(static.imprint) ">
+                    {{ i18n.get("_.menu.imprint") }}
+                </a>
+                <a :class="{'text-white': dashboard}" class="footer-link" href=" route(blog.all) ">
+                    {{ i18n.get("_.menu.blog") }}
+                </a>
+            </nav>
+            <p v-if="!dashboard" class="mb-0" v-html="i18n.get('_.menu.developed')"></p>
+            <p class="mb-0">&copy; {{ moment().format('Y') }} Tr&auml;welling</p>
+            <p v-if="!dashboard" class="mb-0 text-muted small">commit:
+                <!--          ToDo: get current commit -->
+                <a class="text-muted"
+                   href="https://github.com/Traewelling/traewelling/commit/get_current_git_commit()">
+                    get_current_git_commit()
+                </a>
+            </p>
+        </div>
+        <NotificationsModal ref="notifModal"></NotificationsModal>
+    </footer>
+</template>
+
+<script>
+import NotificationsModal from "../NotificationsModal";
+import {languages} from "../../js/translations";
+import Vue from "vue";
+
+export default {
+    name: "FooterComponent",
+    data() {
+        return {
+            langs: languages
+        };
+    },
+    components: {NotificationsModal},
+    props: {
+        dashboard: false
+    },
+    methods: {
+        setLang(language) {
+            if (typeof language === "string" && languages.hasOwnProperty(language)) {
+                Vue.localStorage.set("language", language);
+                this.i18n.setLocale(language);
+                this.moment.locale(language.substr(0, 2));
+                this.$forceUpdate();
+                window.location.reload(); //ToDo change this to a better concept, so that the whole page doesn't need to be reloaded
+            }
+        }
+    }
+};
+</script>
+
+<style scoped>
+.footer-link {
+    text-decoration: none;
+}
+
+.footer-link:hover {
+    text-decoration: underline;
+}
+</style>
diff --git a/resources/components/layouts/HeroLayout.vue b/resources/components/layouts/HeroLayout.vue
new file mode 100644
index 000000000..b7a2e7add
--- /dev/null
+++ b/resources/components/layouts/HeroLayout.vue
@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <NavbarComponent/>
+        <main class="py-4">
+            <div class="px-4 py-5 mt-n4"
+                 style="background-image: url('/images/covers/profile-background.png');background-position: center;background-color: #c5232c">
+                <div class="container">
+                    <slot name="hero"></slot>
+                </div>
+            </div>
+            <div class="container">
+                <slot/>
+            </div>
+        </main>
+        <FooterComponent/>
+    </div>
+</template>
+
+<script>
+import NavbarComponent from "./NavbarComponent";
+import FooterComponent from "./FooterComponent";
+
+export default {
+    name: "HeroLayout",
+    components: {FooterComponent, NavbarComponent}
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/components/layouts/NavbarComponent.vue b/resources/components/layouts/NavbarComponent.vue
new file mode 100644
index 000000000..8c39f5d19
--- /dev/null
+++ b/resources/components/layouts/NavbarComponent.vue
@@ -0,0 +1,117 @@
+<template>
+    <nav class="navbar navbar-expand-md navbar-dark bg-trwl">
+        <div class="container">
+            <router-link :to="{ name: 'base' }" class="navbar-brand">
+                Träwelling <!-- ToDo: get name from config -->
+            </router-link>
+            <div class="navbar-toggler">
+                <NotificationsButton
+                    v-if="$auth.check()"
+                    :notifications-count="notificationsCount"
+                    toggler="true"
+                    @click="showNotifications"
+                ></NotificationsButton>
+                <button :aria-label="i18n.get('_.Toggle navigation')" aria-controls="navbarCollapse"
+                        aria-expanded="false"
+                        class="navbar-toggler" data-mdb-target="#navbarCollapse"
+                        data-mdb-toggle="collapse" type="button">
+                    <i aria-hidden="true" class="fas fa-bars"></i>
+                </button>
+            </div>
+            <div id="navbarCollapse" ref="navbar" class="collapse navbar-collapse">
+                <ul class="navbar-nav me-auto">
+                    <li v-if="$auth.check()" class="nav-item">
+                        <router-link :to="{ name: 'dashboard' }" class="nav-link">{{
+                                i18n.get('_.menu.dashboard')
+                            }}
+                        </router-link>
+                    </li>
+                    <li class="nav-item">
+                        <router-link :to="{ name: 'leaderboard' }" class="nav-link">
+                            {{ i18n.get('_.menu.leaderboard') }}
+                        </router-link>
+                    </li>
+                    <li class="nav-item">
+                        <router-link :to="{ name: 'statuses.active'}" class="nav-link">
+                            {{ i18n.get('_.menu.active') }}
+                        </router-link>
+                    </li>
+                </ul>
+                <ul v-if="!$auth.check()" class="navbar-nav w-auto">
+                    <li class="nav-item">
+                        <router-link :to="{ name: 'auth.login'}"
+                                     class="nav-link">{{ i18n.get('_.menu.login') }}
+                        </router-link>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">{{ i18n.get('_.menu.register') }}</a>
+                    </li>
+                </ul>
+                <ul v-else class="navbar-nav w-auto">
+                    <form action="#" class="form-inline">
+                        <div class="input-group ps-0 m-0" hidden>
+                            <input :placeholder="i18n.get('_.stationboard.submit-search')" aria-label="User suchen"
+                                   class="border border-white rounded-left form-control my-0 py-1"
+                                   name="searchQuery"
+                                   type="text"/>
+                            <button class="input-group-text btn-primary" type="submit">
+                                <i aria-hidden="true" class="fas fa-search"></i>
+                            </button>
+                        </div>
+                    </form>
+                    <li class="nav-item d-none d-md-inline-block">
+                        <NotificationsButton
+                            :notifications-count="notificationsCount"
+                            @click="showNotifications"
+                        ></NotificationsButton>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a aria-expanded="false" aria-haspopup="true"
+                           class="nav-link dropdown-toggle" data-mdb-toggle="dropdown" href="#"
+                           role="button">
+                            {{ $auth.user().displayName }}
+                        </a>
+
+                        <div aria-labelledby="navbarDropdown" class="dropdown-menu dropdown-menu-right">
+                            <router-link :to="{ name: 'profile', params: {username: $auth.user().username}}"
+                                         class="dropdown-item">
+                                <i aria-hidden="true" class="fas fa-user"></i> {{ i18n.get('_.menu.profile') }}
+                            </router-link>
+                            <a class="dropdown-item" href="#">
+                                <i aria-hidden="true" class="fas fa-save"></i> {{ i18n.get('_.menu.export') }}
+                            </a>
+                            <a class="dropdown-item" href="#">
+                                <i aria-hidden="true" class="fas fa-cog"></i> {{ i18n.get('_.menu.settings') }}
+                            </a>
+                            <!--                {{ &#45;&#45;@if(Auth::user()->role >= 5)&#45;&#45; }}-->
+                            <!--                {{-->
+                            <!--                  &#45;&#45; <a class="dropdown-item" href="#">&#45;&#45;}}-->
+                            <!--                {{ &#45;&#45; <i class="fas fa-tools" aria-hidden="true"></i> {{ i18n.get('_.menu.admin') }}&#45;&#45;}}-->
+                            <!--                {{ &#45;&#45;                                        </a>&#45;&#45;}}-->
+                            <!--                {{ &#45;&#45;@endif&#45;&#45; }}-->
+                            <div class="dropdown-divider"></div>
+                            <a class="dropdown-item" href="#" @click.prevent="$auth.logout()">
+                                <i aria-hidden="true" class="fas fa-sign-out-alt"></i> {{
+                                    i18n.get('_.menu.logout')
+                                }}
+                            </a>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+</template>
+
+<script>
+import NotificationsButton from "../NotificationsButton";
+
+export default {
+    name: "NavbarComponent",
+    components: {NotificationsButton}
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/components/views/About.vue b/resources/components/views/About.vue
new file mode 100644
index 000000000..7261ba28e
--- /dev/null
+++ b/resources/components/views/About.vue
@@ -0,0 +1,84 @@
+<template>
+    <LayoutBasic>
+        <div class="row justify-content-center">
+            <div id="about-page" class="col-lg-8">
+                <h1>{{ i18n.get("_.about.heading") }}</h1>
+                <blockquote class="blockquote"><p>{{ i18n.get("_.about.block1") }}</p></blockquote>
+
+                <h2>F.A.Q. <small class="text-muted">{{ i18n.get("_.about.faq-heading") }}</small></h2>
+
+                <h3>{{ i18n.get("_.about.who-heading") }}</h3>
+                <p class="lead">{{ i18n.get("_.about.who") }} <a href="url('humans.txt')">humans.txt</a></p>
+
+                <h3>{{ i18n.get("_.about.name-heading") }}</h3>
+                <p class="lead" v-html="i18n.get('_.about.name')"></p>
+
+                <h3>{{ i18n.get("_.about.no-train-heading") }}</h3>
+                <p class="lead">{{ i18n.get("_.about.no-train") }}</p>
+
+                <h3>{{ i18n.get("_.about.feature-missing-heading") }}</h3>
+                <p class="lead">{{ i18n.get("_.about.feature-missing") }} <a
+                    href="mailto:hi@traewelling.de">hi@traewelling.de</a>.</p>
+
+                <h3>{{ i18n.get("_.about.points-heading") }}</h3>
+                <p class="lead">
+                    {{ i18n.get("_.about.points1") }}
+                </p>
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th scope="col">{{ i18n.get("_.about.productclass") }}</th>
+                            <th scope="col">{{ i18n.get("_.about.basepoints") }}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <th scope="row">{{ i18n.get("_.about.tram") }}</th>
+                            <td>2</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">{{ i18n.get("_.about.suburban") }}</th>
+                            <td>3</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">{{ i18n.get("_.about.regional") }}</th>
+                            <td>5</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">{{ i18n.get("_.about.express") }}</th>
+                            <td>10</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">{{ i18n.get("_.about.international") }}</th>
+                            <td>10</td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <p class="lead" v-html="i18n.get('_.about.calculation')"></p>
+
+            </div>
+        </div>
+    </LayoutBasic>
+</template>
+
+<script>
+import LayoutBasic from "../layouts/Basic";
+
+export default {
+    name: "About",
+    components: {LayoutBasic},
+    metaInfo() {
+        return {
+            title: this.i18n.get("_.about.faq-heading"),
+            meta: [
+                {name: "robots", content: "index", vmid: "robots"}
+            ]
+        };
+    }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/components/views/ActiveStatuses.vue b/resources/components/views/ActiveStatuses.vue
new file mode 100644
index 000000000..10b036577
--- /dev/null
+++ b/resources/components/views/ActiveStatuses.vue
@@ -0,0 +1,130 @@
+<template>
+    <LayoutBasic>
+            <div class="row justify-content-center">
+                <div class="col-md-8 col-lg-6">
+                    <div class="card sticky-top">
+                        <Map :poly-lines="polylines" class="map embed-responsive embed-responsive-1by1"></Map>
+                    </div>
+                </div>
+                <div class="col-md-8 col-lg-6">
+                    <Spinner v-if="loading" class="mt-5"/>
+
+                    <div v-if="error" class="error">
+                        <p>{{ error }}</p>
+
+                        <p>
+                            <button @click.prevent="fetchData">
+                                {{ i18n.get("_.vue.tryAgain") }}
+                            </button>
+                        </p>
+                    </div>
+                    <div v-if="statuses">
+                        <h4 class="mt-4"> {{ i18n.get("_.menu.active") }} </h4>
+                        <Status v-for="status in statuses" v-bind:key="status.id" :status="status"
+                                v-bind:stopovers="stopovers"></Status>
+                    </div>
+                </div>
+            </div>
+    </LayoutBasic>
+</template>
+
+<script>
+import axios from "axios";
+import Status from "../Status";
+import Map from "../Map";
+import {StatusModel} from "../../js/APImodels";
+import LayoutBasic from "../layouts/Basic";
+import Spinner from "../Spinner";
+
+export default {
+    name: "ActiveStatuses",
+    data() {
+        return {
+            loading: true,
+            error: null,
+            interval: null,
+            statuses: [StatusModel],
+            stopovers: null, //ToDo Typedef
+            polylines: null //ToDo Typedef
+        };
+    },
+    metaInfo() {
+        return {
+            title: this.i18n.get("_.menu.active"),
+            meta: [
+                {name: "robots", content: "index", vmid: "robots"},
+                {name: "description", content: this.i18n.get("_.description.en-route"), vmid: "description"},
+                {name: "DC.Description", content: this.i18n.get("_.description.en-route"), vmid: "DC.Description"}
+            ]
+        };
+    },
+    components: {
+        Spinner,
+        Status,
+        Map,
+        LayoutBasic,
+    },
+    created() {
+        this.fetchData();
+        this.startRefresh();
+    },
+    methods: {
+        fetchData() {
+            const oldStatuses = this.statuses;
+            this.error        = this.statuses = null;
+            axios
+                .get("/statuses")
+                .then((response) => {
+                    this.loading = false;
+                    // FixMe: Why is this comparison not working correctly?
+                    if (oldStatuses != response.data.data) {
+                        this.statuses = response.data.data;
+                        if (this.statuses.length) {
+                            this.fetchPolyline();
+                            this.fetchStopovers();
+                        }
+                    }
+                })
+                .catch((error) => {
+                    this.loading = false;
+                    this.error   = error.data.message || error.message;
+                });
+        },
+        fetchStopovers() {
+            let tripIds = "";
+            this.statuses.forEach((status) => {
+                tripIds += (status.train.trip + ",");
+            });
+            axios
+                .get("/stopovers/" + tripIds)
+                .then((response) => {
+                    this.stopovers = response.data.data;
+                })
+                .catch((error) => {
+                    console.error(error);
+                });
+        },
+        fetchPolyline() {
+            let tripIds = "";
+            this.statuses.forEach((status) => {
+                tripIds += (status.id + ",");
+            });
+            axios
+                .get("/polyline/" + tripIds)
+                .then((response) => {
+                    this.polylines = [response.data.data];
+                })
+                .catch((error) => {
+                    console.error(error);
+                });
+        },
+        startRefresh() {
+            setInterval(() => (this.fetchData()), 70000);
+        }
+    },
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/components/views/Dashboard.vue b/resources/components/views/Dashboard.vue
new file mode 100644
index 000000000..db48e93fb
--- /dev/null
+++ b/resources/components/views/Dashboard.vue
@@ -0,0 +1,139 @@
+<template>
+    <LayoutBasic>
+        <div class="row justify-content-center align-content-center">
+            <div class="col-md-8 col-lg-7">
+                <StationForm></StationForm>
+                <Spinner v-if="loading" class="mt-5"/>
+
+                <div v-if="error" class="error">
+                    <p>{{ error }}</p>
+
+                    <p>
+                        <button @click.prevent="fetchData">
+                            {{ i18n.get("_.vue.tryAgain") }}
+                        </button>
+                    </p>
+                </div>
+                <!-- ToDo Future Check-ins -->
+                <div v-if="statuses">
+                    <Status v-for="status in statuses" v-bind:key="status.id"
+                            :show-date="showDate(status, statuses)"
+                            :status="status"
+                            v-bind:stopovers="stopovers"/>
+
+                    <div v-if="links && links.next" class="text-center">
+                        <button aria-label="i18n.get('_.menu.show-more')"
+                                class="btn btn-primary btn-lg btn-floating mt-4"
+                                @click.prevent="fetchMore">
+                            <i aria-hidden="true" class="fas fa-caret-down"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </LayoutBasic>
+</template>
+
+<script>
+import axios from "axios";
+import Status from "../Status";
+import moment from "moment";
+import {StatusModel} from "../../js/APImodels";
+import StationForm from "../StationForm";
+import LayoutBasic from "../layouts/Basic";
+import Spinner from "../Spinner";
+
+export default {
+    data() {
+        return {
+            loading: true,
+            error: null,
+            statuses: [StatusModel],
+            stopovers: [], //ToDo Typedef
+            moment: moment,
+            links: null,
+        };
+    },
+    metaInfo() {
+        return {
+            title: this.i18n.get("_.menu.dashboard")
+        };
+    },
+    components: {
+        Spinner,
+        LayoutBasic,
+        StationForm,
+        Status
+    },
+    mounted() {
+        this.fetchData();
+    },
+    methods: {
+        showDate(item, statuses) {
+            let index = statuses.indexOf(item);
+            if (index === -1 || index === 0) {
+                return true;
+            }
+            return moment(item.train.origin.departure).date() !== moment(statuses[index - 1].train.origin.departure).date();
+        },
+        fetchData() {
+            this.error = this.statuses = null;
+            axios
+                .get(this.$route.path)
+                .then((response) => {
+                    this.loading = false;
+                    if (!Object.keys(response.data.data).length && this.$route.path === "/dashboard") {
+                        this.$router.push({name: "dashboard.global"}); //ToDo: Redirect if following nobody
+                        this.fetchData();
+                    }
+                    this.statuses = response.data.data;
+                    this.links    = response.data.links;
+                    this.fetchStopovers(this.statuses);
+                })
+                .catch((error) => {
+                    this.loading = false;
+                    this.error   = error.data.message || error.message;
+                });
+        },
+        fetchMore() {
+            this.error = null;
+            axios
+                .get(this.links.next)
+                .then((response) => {
+                    this.statuses = this.statuses.concat(response.data.data);
+                    this.links    = response.data.links;
+                    this.fetchStopovers(response.data.data);
+                })
+                .catch((error) => {
+                    this.loading = false;
+                    this.error   = error.data.message || error.message;
+                });
+        },
+        fetchStopovers(statuses) {
+            let tripIds = "";
+            statuses.forEach((status) => {
+                if (!(status.train.trip in this.stopovers)) {
+                    tripIds += (status.train.trip + ",");
+                }
+            });
+            axios
+                .get("/stopovers/" + tripIds)
+                .then((response) => {
+                    this.stopovers = this.stopovers.concat(response.data.data);
+                })
+                .catch((error) => {
+                    this.loading = false;
+                });
+        },
+    },
+    watch: {
+        '$route'() {
+            this.fetchData();
+        }
+    },
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/components/views/Event.vue b/resources/components/views/Event.vue
new file mode 100644
index 000000000..d66652584
--- /dev/null
+++ b/resources/components/views/Event.vue
@@ -0,0 +1,132 @@
+<template>
+    <HeroLayout>
+        <template v-slot:hero>
+            <div class="row justify-content-center">
+                <div class="text-white col-md-8 col-lg-7">
+                    <h1 class="card-title font-bold">
+                        <strong> {{ event.name }}
+                            <code class="text-white">#{{ event.hashtag }}</code>
+                        </strong>
+                    </h1>
+                    <h3>
+                        <span class="font-weight-bold">
+                            <i aria-hidden="true" class="fa fa-route d-inline"/>&nbsp;
+                            {{ event.trainDistance.toFixed(0) }}
+                        </span>
+                        <span class="small font-weight-lighter">km</span>
+                        <span class="font-weight-bold ps-sm-2">
+                            <i aria-hidden="true" class="fa fa-stopwatch d-inline"/>&nbsp;{{ duration }}
+                        </span>
+                        <br class="d-block d-sm-none">
+                        <span class="font-weight-bold ps-sm-2">
+                            <i aria-hidden="true" class="fa fa-user"/>&nbsp;{{ event.host }}
+                        </span>
+                        <span class="font-weight-bold ps-sm-2 text-nowrap">
+                            <i aria-hidden="true" class="fa fa-link"/>&nbsp;<a :href="event.url"
+                                                                               class="text-white">{{ event.url }}</a>
+                        </span>
+                    </h3>
+                    <h2>
+                        <span class="font-weight-bold"><i aria-hidden="true" class="fa fa-train"/></span>
+                        <span class="font-weight-bold">
+                            <a class="text-white" href="asdf">{{ event.station.name }}</a>
+                        </span>
+                    </h2>
+                </div>
+            </div>
+        </template>
+        <Spinner v-if="loading || statusesLoading" class="mt-5"/>
+        <div v-if="!statusesLoading && !loading" class="row justify-content-center mt-5">
+            <div v-if="statuses.length > 0" class="col-md-8 col-lg-7">
+
+                <div v-if="statuses">
+                    <Status v-for="status in statuses" v-bind:key="status.id" :status="status"></Status>
+                </div>
+                <div class="mt-5">
+                    $statuses->links()
+                </div>
+            </div>
+        </div>
+    </HeroLayout>
+</template>
+
+<script>
+import Status from "../Status";
+import moment from "moment";
+import axios from "axios";
+import {EventModel, StatusModel} from "../../js/APImodels";
+import LayoutBasic from "../layouts/Basic";
+import HeroLayout from "../layouts/HeroLayout";
+import Spinner from "../Spinner";
+
+export default {
+    name: "Event",
+    data() {
+        return {
+            username: this.$route.params.username,
+            loading: false,
+            statusesLoading: false,
+            event: EventModel,
+            statuses: [StatusModel]
+        };
+    },
+    metaInfo() {
+        return {
+            title: this.event.name //ToDo Add more Meta Tags
+        };
+    },
+    components: {
+        Spinner,
+        HeroLayout,
+        LayoutBasic,
+        Status
+    },
+    computed: {
+        duration() {
+            const duration = moment.duration(this.event.trainDuration, "minutes").asMinutes();
+            let minutes    = duration % 60;
+            let hours      = Math.floor(duration / 60);
+
+            return hours + "h " + minutes + "m";
+        },
+    },
+    created() {
+        this.fetchData();
+    },
+    methods: {
+        fetchData() {
+            this.error   = null;
+            this.loading = true;
+            axios
+                .get("/event/" + this.$route.params.slug)
+                .then((response) => {
+                    this.loading = false;
+                    this.event   = response.data.data;
+                    this.fetchStatuses();
+                })
+                .catch((error) => {
+                    this.loading = false;
+                    this.error   = error.data.message || error.message;
+                });
+        },
+        fetchStatuses() {
+            this.error           = null;
+            this.statusesLoading = true;
+            axios
+                .get("/event/" + this.$route.params.slug + "/statuses")
+                .then((response) => {
+                    this.statusesLoading = false;
+                    this.statuses        = response.data.data;
+                })
+                .catch((error) => {
+                    this.statusesLoading = false;
+                    this.error           = error.data.message || error.message;
+                });
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/components/views/Index.vue b/resources/components/views/Index.vue
new file mode 100644
index 000000000..37ddb81b9
--- /dev/null
+++ b/resources/components/views/Index.vue
@@ -0,0 +1,118 @@
+<template>
+    <div>
+
+        <div class="videoContainer">
+            <div class="overlay"></div>
+            <video autoplay class="fullscreen-bg__video" loop muted>
+                <source src="img/vid2.mp4" type="video/mp4">
+            </video>
+        </div>
+        <div class="d-flex w-100 h-100 mx-auto flex-column position-absolute text-white">
+            <main class="d-flex mx-auto mt-auto p-4 p-md-0 p-sm-0">
+                <div class="container">
+                    <div class="row justify-content-between align-items-center">
+                        <div class="col-md-6 mb-3">
+                            <div class="mb-3 align-items-center">
+                                <img alt="logo" class="logo" src="/images/icons/logo.svg">
+                                <span class="h1">#Träwelling</span>
+                            </div>
+                            <p>{{ i18n.get("_.about.block1") }}</p>
+                            <router-link :to="{name: 'about'}" class="btn btn-white">{{
+                                    i18n.get("_.menu.about")
+                                }}
+                            </router-link>
+                        </div>
+                        <div class="col-md-4 card text-dark">
+                            <Login></Login>
+                        </div>
+                    </div>
+                </div>
+            </main>
+
+            <FooterComponent class="w-100" dashboard="true"></FooterComponent>
+        </div>
+    </div>
+</template>
+
+<script>
+import FooterComponent from "../layouts/FooterComponent";
+import Login from "../Login";
+
+export default {
+    name: "LoginView",
+    components: {FooterComponent, Login},
+    data() {
+        return {
+            email: null,
+            password: null,
+            hasError: false
+        };
+    }, mounted() {
+        //
+    }, methods: {
+        login() {
+            // get the redirect object
+            var redirect = this.$auth.redirect();
+            this.$auth.login({
+                data: {
+                    email: this.email,
+                    password: this.password
+                },
+                redirect: {name: "dashboard"},
+                staySignedIn: true,
+                fetchUser: true,
+            }).then(() => {
+                this.$auth.fetch();
+            });
+        }
+    }
+};
+</script>
+<style>
+html, body {
+    height: 100%;
+}
+
+#app {
+    height: 100%;
+}
+</style>
+<style scoped>
+
+.logo {
+    height: 50px;
+}
+
+.videoContainer {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background-attachment: scroll;
+    overflow: hidden;
+}
+
+.videoContainer video {
+    min-width: 100%;
+    min-height: 100%;
+    position: relative;
+    z-index: 1;
+    background-image: url("https://images.pexels.com/photos/5387999/pexels-photo-5387999.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
+    filter: grayscale(100%); /* Standard CSS */
+    -webkit-filter: grayscale(100%); /* CSS for Webkit Browsers */
+    filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
+    filter: gray; /* Internet Explorer IE6-9 */
+    -webkit-filter: grayscale(1); /* Old WebKit Browsers */
+}
+
+.videoContainer .overlay {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    background-color: #a20b11;
+    opacity: 0.8;
+}
+
+</style>
diff --git a/resources/components/views/Leaderboard.vue b/resources/components/views/Leaderboard.vue
new file mode 100644
index 000000000..99efb735f
--- /dev/null
+++ b/resources/components/views/Leaderboard.vue
@@ -0,0 +1,146 @@
+<template>
+    <LayoutBasic>
+        <div class="row justify-content-center">
+            <div class="col-md-9 col-lg-9">
+                <div id="leaderboard" class="card">
+                    <div class="card-header">
+                        <router-link :to="{ name: 'leaderboard.month', params:{month: month} }" class="float-end">
+                            {{ i18n.get("_.leaderboard.month.title") }}
+                        </router-link>
+                        {{ i18n.get("_.menu.leaderboard") }}
+                    </div>
+                    <div v-if="!loading" class="card-body">
+                        <ul id="myTab" class="nav nav-tabs" role="tablist">
+                            <li class="nav-item">
+                                <a id="main-tab" aria-controls="home" aria-selected="true" class="nav-link active"
+                                   data-toggle="tab" href="#leaderboard-main" role="tab">
+                                    {{ i18n.get("_.leaderboard.top") }} {{ users.length }}
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a id="distance-tab" aria-controls="profile" aria-selected="false" class="nav-link"
+                                   data-toggle="tab" href="#leaderboard-distance" role="tab">
+                                    {{ i18n.get("_.leaderboard.distance") }}
+                                </a>
+                            </li>
+                            <li v-if="$auth.check() && friends" class="nav-item">
+                                <a id="friends-tab" aria-controls="contact" aria-selected="false" class="nav-link"
+                                   data-toggle="tab" href="#leaderboard-friends" role="tab">
+                                    {{ i18n.get("_.leaderboard.friends") }}
+                                </a>
+                            </li>
+                        </ul>
+                        <div class="tab-content">
+                            <div id="leaderboard-main" class="tab-pane fade show active table-responsive"
+                                 role="tabpanel">
+                                <LeaderboardTable :users="users" described-by="main-tab"></LeaderboardTable>
+                            </div>
+                            <div id="leaderboard-distance" class="tab-pane fade table-responsive" role="tabpanel">
+                                <LeaderboardTable :users="distance" described-by="distance-tab"></LeaderboardTable>
+                            </div>
+                            <div v-if="$auth.check() && friends" id="leaderboard-friends"
+                                 class="tab-pane fade table-responsive" role="tabpanel">
+                                <LeaderboardTable :users="friends" described-by="distance-tab"></LeaderboardTable>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else class="card-body">
+                        <Spinner class="mt-5"/>
+                    </div>
+                    <div class="card-footer text-muted">
+                        <i aria-hidden="true" class="far fa-question-circle"></i>
+                        {{ i18n.get("_.leaderboard.notice") }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </LayoutBasic>
+</template>
+
+<script>
+import moment from "moment";
+import LeaderboardTable from "../LeaderboardTable";
+import axios from "axios";
+import LayoutBasic from "../layouts/Basic";
+import Spinner from "../Spinner";
+
+export default {
+    //ToDo format numbers correctly for languages, etc.
+    name: "Leaderboard",
+    data() {
+        return {
+            month: moment().format("YYYY-MM"),
+            users: null,
+            distance: null,
+            friends: null,
+            loading: false
+        };
+    },
+    metaInfo() {
+        return {
+            title: this.i18n.get("_.menu.leaderboard"),
+            meta: [
+                {name: "description", content: this.i18n.get("_.description.leaderboard.main"), vmid: "description"},
+                {
+                    name: "DC.Description",
+                    content: this.i18n.get("_.description.leaderboard.main"),
+                    vmid: "DC.Description"
+                }
+            ]
+        };
+    },
+    components: {
+        Spinner,
+        LayoutBasic,
+        LeaderboardTable
+    },
+    methods: {
+        fetchData() {
+            this.error   = null;
+            this.loading = true;
+            axios
+                .get("/leaderboard/")
+                .then((response) => {
+                    this.loading = false;
+                    this.users   = response.data.data;
+                })
+                .catch((error) => {
+                    this.loading = false;
+                    this.error   = error.data.message || error.message;
+                });
+            axios
+                .get("/leaderboard/distance")
+                .then((response) => {
+                    this.loading  = false;
+                    this.distance = response.data.data;
+                })
+                .catch((error) => {
+                    this.loading = false;
+                    this.error   = error.data.message || error.message;
+                });
+            if (this.$auth.check()) {
+                axios
+                    .get("/leaderboard/friends")
+                    .then((response) => {
+                        this.loading = false;
+                        this.friends = response.data.data;
+                        if (!Object.keys(this.friends).length) {
+                            this.friends = null;
+                        }
+                    })
+                    .catch((error) => {
+                        this.loading = false;
+                        this.error   = error.data.message || error.message;
+                    });
+            }
+        },
+    },
+    created() {
+        this.fetchData();
+    }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/components/views/LeaderboardMonth.vue b/resources/components/views/LeaderboardMonth.vue
new file mode 100644
index 000000000..2dd7161bf
--- /dev/null
+++ b/resources/components/views/LeaderboardMonth.vue
@@ -0,0 +1,207 @@
+<template>
+    <LayoutBasic>
+        <div v-if="!loading">
+            <div class="row">
+                <div class="col-md-12">
+                    <h4>{{ i18n.get("_.leaderboard.month") }} <strong>{{ month.format("MMMM YYYY") }}</strong></h4>
+                    <hr/>
+                    <router-link :to="{ name: 'leaderboard.month', params:{month: lastMonth} }"
+                                 class="btn btn-sm btn-primary float-left">
+                        <i aria-hidden="true" class="fas fa-arrow-left"/> {{ moment(lastMonth).format("MMMM YYYY") }}
+                    </router-link>
+
+                    <router-link v-if="moment(nextMonth).isBefore()"
+                                 :to="{ name: 'leaderboard.month', params:{month: nextMonth} }"
+                                 class="btn btn-sm btn-primary float-end">
+                        {{ moment(nextMonth).format("MMMM YYYY") }} <i aria-hidden="true" class="fas fa-arrow-right"/>
+                    </router-link>
+                    <div class="clearfix"></div>
+                    <hr/>
+                </div>
+
+
+                <div v-if="users.length === 0" class="col-md-12">
+                    <div class="card">
+                        <div class="card-body text-center text-danger text-bold">
+                            {{ i18n.get("_.leaderboard.no_data") }}
+                        </div>
+                    </div>
+                </div>
+
+
+                <div v-for="(place, index) in users.slice(0, 3)" class="col-md-4">
+                    <div class="card mb-2">
+                        <div class="card-header"> {{ i18n.get("_.leaderboard.rank") }} {{ index + 1 }}</div>
+                        <div class="card-body text-center">
+                            <div class="image-box pe-0 d-lg-flex">
+                                <router-link :to="{ name: 'profile', params: {username: place.username}}">
+                                    <img :alt="place.username" :src="`/profile/${place.username}/profilepicture`"
+                                         style="width: 50%;">
+                                </router-link>
+                            </div>
+                            <router-link :to="{ name: 'profile', params: {username: place.username}}"
+                                         style="font-size: 1.3em;">
+                                {{ place.username }}
+                            </router-link>
+                            <table class="table text-muted">
+                                <tbody>
+                                    <tr>
+                                        <td>
+                                            <i aria-hidden="true" class="fas fa-dice-d20"/>
+                                            {{ place.points.toFixed(0) }}
+                                        </td>
+                                        <td>
+                                            <i aria-hidden="true" class="fas fa-clock"/>
+                                            {{ place.trainDuration.toFixed(0) }}min
+                                        </td>
+                                        <td>
+                                            <i aria-hidden="true" class="fas fa-route"/>
+                                            {{ place.trainDistance.toFixed(0) }}km
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <hr/>
+            <div v-if="users.length > 3" class="row justify-content-center">
+                <div class="col-md-8 col-lg-7">
+                    <div class="card">
+                        <div class="card-body table-responsive">
+                            <table class="table table-vertical-center">
+                                <thead>
+                                    <tr>
+                                        <th scope="col"> {{ i18n.get("_.leaderboard.rank") }}</th>
+                                        <th colspan="2" scope="col"> {{ i18n.get("_.leaderboard.user") }}</th>
+                                        <th scope="col"> {{ i18n.get("_.leaderboard.duration") }}</th>
+                                        <th scope="col"> {{ i18n.get("_.leaderboard.distance") }}</th>
+                                        <th scope="col"> {{ i18n.get("_.leaderboard.points") }}</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="(place, index) in users.slice(3, 100)">
+                                        <td>{{ index + 4 }}</td>
+                                        <td>
+                                            <div class="image-box pe-0 d-lg-flex" style="width: 4em; height: 4em;">
+                                                <router-link
+                                                    :to="{ name: 'profile', params: {username: place.username}}">
+                                                    <img :alt="place.username"
+                                                         :src="`/profile/${place.username}/profilepicture`"
+                                                         style="width: 50%;">
+                                                </router-link>
+                                            </div>
+                                        </td>
+                                        <td>
+                                            <router-link :to="{ name: 'profile', params: {username: place.username}}"
+                                                         style="font-size: 1.3em;">
+                                                {{ place.username }}
+                                            </router-link>
+                                        </td>
+                                        <td>
+                                            {{ place.trainDuration }}min
+                                        </td>
+                                        <td>
+                                            {{ place.trainDistance.toFixed(0) }}km
+                                        </td>
+                                        <td>
+                                            {{ place.points.toFixed(0) }}
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <hr/>
+        </div>
+        <div v-else>
+            <Spinner class="mt-5"/>
+        </div>
+    </LayoutBasic>
+</template>
+
+<script>
+import moment from "moment";
+import LeaderboardTable from "../LeaderboardTable";
+import axios from "axios";
+import {LeaderboardUserModel} from "../../js/APImodels";
+import LayoutBasic from "../layouts/Basic";
+import Spinner from "../Spinner";
+
+export default {
+    name: "LeaderboardMonth",
+    data() {
+        return {
+            moment: moment,
+            users: [LeaderboardUserModel],
+            loading: false,
+            metaData: {
+                description: undefined
+            }
+        };
+    },
+    metaInfo() {
+        return {
+            title: this.i18n.get("_.menu.leaderboard"),
+            meta: [
+                {name: "description", content: this.metaData.description, vmid: "description"},
+                {name: "DC.Description", content: this.metaData.description, vmid: "DC.Description"}
+            ]
+        };
+    },
+    computed: {
+        lastMonth() {
+            return moment(this.$route.params.month).subtract(1, "months").format("YYYY-MM");
+        },
+        month() {
+            return moment(this.$route.params.month);
+        },
+        nextMonth() {
+            return moment(this.$route.params.month).add(1, "months").format("YYYY-MM");
+        }
+    },
+    components: {
+        Spinner,
+        LayoutBasic,
+        LeaderboardTable
+    },
+    methods: {
+        fetchData() {
+            this.error   = null;
+            this.loading = true;
+            axios
+                .get("/leaderboard/" + this.$route.params.month)
+                .then((response) => {
+                    this.loading = false;
+                    this.users   = response.data.data;
+                })
+                .catch((error) => {
+                    this.loading = false;
+                    this.error   = error.data.message || error.message;
+                });
+        },
+        updateMetadata() {
+            this.metaData.description = this.i18n.choice("_.description.leaderboard.monthly", 1, {
+                "month": this.month.format("MMMM"),
+                "year": this.month.format("YYYY")
+            });
+        }
+    },
+    watch: {
+        month() {
+            this.fetchData();
+        }
+    },
+    created() {
+        this.updateMetadata();
+        this.fetchData();
+    }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/components/views/Profile.vue b/resources/components/views/Profile.vue
new file mode 100644
index 000000000..81e316648
--- /dev/null
+++ b/resources/components/views/Profile.vue
@@ -0,0 +1,205 @@
+<template>
+    <HeroLayout>
+        <template v-if="!loading" v-slot:hero>
+            <img :alt="i18n.get('_.settings.picture')" :src="`/profile/${user.username}/profilepicture`"
+                 class="float-end img-thumbnail rounded-circle img-fluid"
+                 height="20%" width="20%"/>
+            <div class="text-white px-4">
+                <h2 class="card-title font-bold">
+                    <strong>{{ user.username }} <i v-if="user.privateProfile" aria-hidden="true"
+                                                   class="fas fa-user-lock"/>
+                    </strong> <br/>
+                    <small class="font-weight-light">@{{ user.username }}</small>
+                    <!--          ToDo: Implement Follow-Button to vue-->
+                    FOLLOW
+                </h2>
+                <h2>
+          <span class="font-weight-bold">
+            <i aria-hidden="true" class="fa fa-route d-inline"/>&nbsp;{{ user.trainDistance.toFixed(2) }}
+          </span>
+                    <span class="small font-weight-lighter">km</span>
+                    <span class="font-weight-bold ps-sm-2">
+            <i aria-hidden="true" class="fa fa-stopwatch d-inline"/>&nbsp;{{ duration }}
+          </span>
+                    <span class="font-weight-bold ps-sm-2">
+            <i aria-hidden="true" class="fa fa-dice-d20 d-inline"/>&nbsp;{{ user.points }}
+          </span>
+                    <span class="small font-weight-lighter">{{ i18n.get("_.profile.points-abbr") }}</span>
+                    <!-- ToDo: Adapt twitterUrl to ID Link (as in blade template) and remove the getTwitterUrl method afterwards! -->
+                    <span v-if="user.twitterUrl" class="font-weight-bold ps-sm-2">
+            <a :href="user.twitterUrl" class="text-white" rel="me" target="_blank">
+              <i aria-hidden="true" class="fab fa-twitter d-inline"/>
+            </a>
+          </span>
+                    <span v-if="user.mastodonUrl" class="font-weight-bold ps-sm-2">
+            <a :href="user.mastodonUrl" class="text-white" rel="me" target="_blank">
+              <i aria-hidden="true" class="fab fa-mastodon d-inline"/>
+            </a>
+          </span>
+                </h2>
+            </div>
+        </template>
+        <Spinner v-if="loading || statusesLoading" class="mt-5"/>
+
+        <div v-if="!statusesLoading && !loading" class="row justify-content-center mt-5">
+            <div v-if="user.userInvisibleToMe" class="col-md-8 col-lg-7 text-center mb-5">
+                <header><h3>{{ i18n.get("_.profile.private-profile-text") }}</h3></header>
+                <h5>
+                    {{
+                        i18n.choice("_.profile.private-profile-information-text", 1, {
+                            "username": user.username,
+                            "request": i18n.get("_.profile.follow_req")
+                        })
+                    }}
+                </h5>
+            </div>
+            <div v-else-if="statuses.length > 0" class="col-md-8 col-lg-7">
+                <header><h3>{{ i18n.get("_.profile.last-journeys-of") }} {{ user.displayName }}:</h3></header>
+
+                <div v-if="statuses">
+                    <Status v-for="status in statuses" v-bind:key="status.id"
+                            :show-date="showDate(status, statuses)"
+                            :status="status"/>
+                </div>
+                <div class="mt-5">
+                    <div v-if="links && links.next" class="text-center">
+                        <button :aria-label="i18n.get('_.menu.show-more')"
+                                class="btn btn-primary btn-lg btn-floating mt-4"
+                                @click.prevent="fetchMore">
+                            <i aria-hidden="true" class="fas fa-caret-down"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div v-else class="col-md-8 col-lg-7">
+                <h3 class="text-danger">
+                    strtr({{ i18n.get("_.profile.no-statuses") }}, [':username' => $user->name])
+                </h3>
+            </div>
+        </div>
+    </HeroLayout>
+</template>
+
+<script>
+import axios from "axios";
+import moment from "moment";
+import Status from "../Status";
+import {ProfileModel, StatusModel} from "../../js/APImodels";
+import LayoutBasic from "../layouts/Basic";
+import HeroLayout from "../layouts/HeroLayout";
+import Spinner from "../Spinner";
+
+export default {
+    name: "ProfilePage",
+    data() {
+        return {
+            username: this.$route.params.username,
+            loading: false,
+            statusesLoading: false,
+            user: ProfileModel,
+            statuses: [StatusModel],
+            description: undefined,
+            robots: "noindex",
+            links: null,
+        };
+    },
+    metaInfo() {
+        return {
+            title: this.user.displayName,
+            meta: [
+                {name: "robots", content: this.robots, vmid: "robots"},
+                {name: "description", content: this.description, vmid: "description"},
+                {name: "DC.Description", content: this.description, vmid: "DC.Description"}
+            ]
+        };
+    },
+    components: {
+        Spinner,
+        HeroLayout,
+        LayoutBasic,
+        Status
+    },
+    computed: {
+        duration() {
+            const duration = moment.duration(this.user.trainDuration, "minutes").asMinutes();
+            let minutes    = duration % 60;
+            let hours      = Math.floor(duration / 60);
+
+            return hours + "h " + minutes + "m";
+        },
+    },
+    created() {
+        this.fetchData();
+    },
+    methods: {
+        showDate(item, statuses) {
+            let index = statuses.indexOf(item);
+            if (index === -1 || index === 0) {
+                return true;
+            }
+            return moment(item.train.origin.departure).date() !== moment(statuses[index - 1].train.origin.departure).date();
+        },
+        updateMetadata() {
+            this.description = this.i18n.choice("_.description.profile", 1, {
+                "username": this.user.username,
+                "kmAmount": this.user.trainDistance.toFixed(2),
+                "hourAmount": this.duration
+            });
+            if (this.user.preventIndex) {
+                this.robots = "noindex";
+            }
+        },
+        fetchData() {
+            this.error   = null;
+            this.loading = true;
+            axios
+                .get("/user/" + this.$route.params.username)
+                .then((response) => {
+                    this.loading = false;
+                    this.user    = response.data.data;
+                    this.updateMetadata();
+                    if (!this.user.userInvisibleToMe) {
+                        this.fetchStatuses();
+                    }
+                })
+                .catch((error) => {
+                    this.loading = false;
+                    this.error   = error.data.message || error.message;
+                });
+        },
+        fetchStatuses() {
+            this.error           = null;
+            this.statusesLoading = true;
+            axios
+                .get("/user/" + this.$route.params.username + "/statuses")
+                .then((response) => {
+                    this.statusesLoading = false;
+                    this.statuses        = response.data.data;
+                    this.links           = response.data.links;
+                })
+                .catch((error) => {
+                    this.statusesLoading = false;
+                    this.error           = error.data.message || error.message;
+                });
+        },
+        fetchMore() {
+            this.error = null;
+            axios
+                .get(this.links.next)
+                .then((response) => {
+                    this.statuses = this.statuses.concat(response.data.data);
+                    this.links    = response.data.links;
+                    // this.fetchStopovers(response.data.data)
+                })
+                .catch((error) => {
+                    this.loading = false;
+                    this.error   = error.data.message || error.message;
+                });
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/components/views/SingleStatus.vue b/resources/components/views/SingleStatus.vue
new file mode 100644
index 000000000..bf2402cc4
--- /dev/null
+++ b/resources/components/views/SingleStatus.vue
@@ -0,0 +1,180 @@
+<template>
+    <LayoutBasic>
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-md-8 col-lg-7">
+                    <Spinner v-if="loading" class="mt-5"/>
+
+                    <div v-if="error" class="error">
+                        <p>{{ error }}</p>
+
+                        <p>
+                            <button @click.prevent="fetchData">
+                                {{ i18n.get("_.vue.tryAgain") }}
+                            </button>
+                        </p>
+                    </div>
+
+                    <div v-if="status">
+                        <Status :likes="likes" :polyline="polyline" :status="status" :stopovers="stopovers"
+                                show-date="true"></Status>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </LayoutBasic>
+</template>
+
+<script>
+import axios from "axios";
+import Status from "../Status";
+import moment from "moment";
+import {StatusModel} from "../../js/APImodels";
+import LayoutBasic from "../layouts/Basic";
+import Spinner from "../Spinner";
+
+export default {
+    name: "SingleStatus",
+    data() {
+        return {
+            error: false,
+            loading: false,
+            status: StatusModel,
+            polyline: null, //ToDo Typedef
+            stopovers: null, //ToDo Typedef
+            likes: null,
+            moment: moment,
+            metaData: {
+                title: undefined,
+                url: undefined,
+                image: undefined,
+                description: undefined,
+                robots: undefined
+            }
+        };
+    },
+    metaInfo() {
+        return {
+            title: this.metaData.title,
+            meta: [
+                {name: "robots", content: this.metaData.robots, vmid: "robots"},
+                {name: "description", content: this.metaData.description, vmid: "description"},
+                {name: "DC.Description", content: this.metaData.description, vmid: "DC.Description"},
+                {name: "og:title", content: this.metaData.title, vmid: "og:title"},
+                {name: "og:url", content: this.metaData.url, vmid: "og:url"},
+                {name: "og:image", content: this.metaData.image, vmid: "og:image"},
+                {name: "og:description", content: this.metaData.description, vmid: "og:description"},
+                {name: "twitter:card", content: "summary", vmid: "twitter:card"},
+                {name: "twitter:site", content: "@traewelling", vmid: "twitter:site"},
+                {name: "twitter:title", content: this.metaData.title, vmid: "twitter:title"},
+                {name: "twitter:description", content: this.metaData.description, vmid: "twitter:description"},
+                {name: "twitter:image", content: this.metaData.image, vmid: "twitter:image"}
+            ]
+        };
+    },
+    created() {
+        if (this.statusData == null) {
+            this.fetchData();
+        } else {
+            this.status = this.statusData;
+            this.updateMetadata();
+            this.fetchPolyline();
+            this.fetchLikes();
+        }
+    },
+    components: {
+        Spinner,
+        LayoutBasic,
+        Status
+    },
+    props: {
+        statusData: null
+    },
+    computed: {
+        rilIdentifierOrigin() {
+            if (this.status.train.origin.rilIdentifier) {
+                return " (" + this.status.train.origin.rilIdentifier + ")";
+            }
+            return "";
+        },
+        rilIdentifierDestination() {
+            if (this.status.train.destination.rilIdentifier) {
+                return " (" + this.status.train.destination.rilIdentifier + ")";
+            }
+            return "";
+        },
+    },
+    methods: {
+        fetchData() {
+            this.error   = null;
+            this.loading = true;
+            axios
+                .get("/statuses/" + this.$route.params.id)
+                .then((response) => {
+                    this.loading = false;
+                    this.status  = response.data.data;
+                    this.updateMetadata();
+                    this.fetchPolyline();
+                    this.fetchStopovers();
+                    this.fetchLikes();
+                })
+                .catch((error) => {
+                    this.loading = false;
+                    this.error   = error.data.message || error.message;
+                });
+        },
+        fetchPolyline() {
+            axios
+                .get("/polyline/" + this.status.id)
+                .then((response) => {
+                    this.polyline = [response.data.data];
+                })
+                .catch((error) => {
+                    console.error(error);
+                });
+        },
+        fetchStopovers() {
+            axios
+                .get("/stopovers/" + this.status.train.trip)
+                .then((response) => {
+                    this.stopovers = response.data.data;
+                })
+                .catch((error) => {
+                    console.error(error);
+                });
+        },
+        fetchLikes() {
+            axios
+                .get("/statuses/" + this.status.id + "/likedby")
+                .then((response) => {
+                    this.likes = response.data.data;
+                })
+                .catch((error) => {
+                    console.error(error);
+                });
+        },
+        updateMetadata() {
+            if (this.status.preventIndex) {
+                this.metaData.robots = "noindex";
+            }
+            this.metaData.description = this.i18n.choice("_.description.status", 1, {
+                "username": this.status.username,
+                "origin": this.status.train.origin.name + this.rilIdentifierOrigin,
+                "destination": this.status.train.destination.name + this.rilIdentifierDestination,
+                "date": this.moment(this.status.train.origin.departure).format("LLL"),
+                "lineName": this.status.train.lineName
+            });
+            this.metaData.url         = window.location.origin + this.$router.resolve({
+                name: "singleStatus",
+                params: {id: this.status.id}
+            }).href; //ToDo combine all window.location.origin...-methods to one single method
+            this.metaData.title       = this.i18n.choice("_.status.ogp-title", 1, {"name": this.status.username});
+            this.metaData.image       = "/profile/" + this.status.username + "/profilepicture";
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/components/views/Stationboard.vue b/resources/components/views/Stationboard.vue
new file mode 100644
index 000000000..e0d605fff
--- /dev/null
+++ b/resources/components/views/Stationboard.vue
@@ -0,0 +1,184 @@
+<template>
+    <LayoutBasic>
+        <div class="row justify-content-center">
+            <div class="col-md-8 col-lg-7">
+                <StationForm :next="times.next" :now="times.now" :prev="times.prev"
+                             v-on:refresh="fetchData"></StationForm>
+                <div class="card">
+                    <div class="card-header">
+                        <div class="float-end">
+                            <a :aria-label="i18n.get('_.modals.setHome-title')" href="#"
+                               v-on:click.prevent="toggleSetHomeModal">
+                                <i aria-hidden="true" class="fa fa-home"></i>
+                            </a>
+                        </div>
+                        <span v-if="station" id="stationTableHeader">
+                            {{ station.name }}
+                            <small>
+                                <i aria-hidden="true" class="far fa-clock fa-sm"></i>
+                                {{ moment(this.times.now).format("LLL") }}
+                            </small>
+                        </span>
+                    </div>
+
+                    <Spinner v-if="loading" class="mt-5"/>
+                    <div v-else-if="!departures || departures.length === 0"
+                         class="card-body text-center text-danger text-bold">
+                        {{ i18n.get('_.stationboard.no-departures') }}
+                    </div>
+                    <div v-else class="card-body p-0 table-responsive">
+                        <table aria-labelledby="stationTableHeader"
+                               class="table table-dark table-borderless table-hover table-striped m-0">
+                            <thead>
+                                <tr>
+                                    <th class="ps-2 ps-md-4" scope="col">
+                                        {{ i18n.get('_.stationboard.dep-time') }}
+                                    </th>
+                                    <th class="px-0" scope="col">{{ i18n.get('_.stationboard.line') }}</th>
+                                    <th scope="col">{{ i18n.get('_.stationboard.destination') }}</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="departure in departures"
+                                    v-on:click="goToTrip(departure)">
+                                    <td class="ps-2 ps-md-4">
+                      <span v-if="departure.cancelled" class="text-danger">
+                        {{ i18n.get('_.stationboard.stop-cancelled') }}
+                      </span>
+                                        <span v-else>
+                        <span :class="{
+                        'text-success': departure.delay === 0,
+                        'text-warning': departure.delay && departure.delay < 600,
+                        'text-danger': departure.delay >= 600 }">
+                          <span>{{ moment(departure.when).format("LT") }}</span>
+                        </span>
+                        <small v-if="departure.delay" class="text-muted text-decoration-line-through">
+                          {{ moment(departure.plannedWhen).format("LT") }}
+                        </small>
+                      </span>
+                                    </td>
+                                    <td class="text-nowrap px-0">
+                                        <img v-if="images.includes(departure.line.product)"
+                                             :alt="departure.line.product"
+                                             :src="`/img/${departure.line.product}.svg`"
+                                             class="product-icon">
+                                        <i v-else aria-hidden="true" class="fa fa-train"></i>
+                                        &nbsp;
+                                        <span
+                                            :class="{ 'text-decoration-line-through text-danger': departure.cancelled}">
+                        <span v-if="departure.line.name">{{ departure.line.name }}</span>
+                        <span v-else>{{ departure.line.fahrtNr }}</span>
+                      </span>
+                                    </td>
+                                    <td :class="{ 'text-decoration-line-through text-danger': departure.cancelled}"
+                                        class="text-wrap">
+                                        {{ departure.direction }}
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <ModalConfirm
+            ref="confirmHomeModal"
+            :abort-text="i18n.get('_.menu.abort')"
+            :body-text="i18n.choice('_.modals.setHome-body', 1, {'stationName': this.station.name})"
+            :confirm-text="i18n.get('_.modals.edit-confirm')"
+            :title-text="i18n.get('_.modals.setHome-title')"
+            confirm-button-color="btn-success"
+            v-on:confirm="setHome"
+        ></ModalConfirm>
+    </LayoutBasic>
+</template>
+
+<script>
+import StationForm from "../StationForm";
+import ModalConfirm from "../ModalConfirm";
+import moment from "moment";
+import {travelImages} from "../../js/APImodels";
+import LayoutBasic from "../layouts/Basic";
+import Spinner from "../Spinner";
+
+export default {
+    name: "Stationboard",
+    components: {
+        Spinner,
+        LayoutBasic,
+        StationForm,
+        ModalConfirm
+    },
+    data() {
+        return {
+            station: null,
+            departures: null,
+            times: {
+                now: 0,
+                prev: 0,
+                next: 0
+            },
+            loading: false,
+            images: travelImages,
+            moment: moment
+        };
+    },
+    mounted() {
+        this.fetchData();
+    },
+    methods: {
+        fetchData() {
+            this.loading     = true;
+            this.station     = null;
+            const when       = this.$route.query.when ?? "";
+            const travelType = this.$route.query.travelType ?? "";
+            axios
+                .get("/trains/station/" + this.$route.query.station + "/departures?when=" + when + "&travelType=" + travelType)
+                .then((result) => {
+                    this.station    = result.data.meta.station;
+                    this.times      = result.data.meta.times;
+                    this.departures = result.data.data;
+                    this.loading    = false;
+
+                })
+                .catch((error) => {
+                    console.error(error);
+                });
+        },
+        goToTrip(departure) {
+            if (departure.cancelled) {
+                console.error("stop cancelled");
+                return;
+            }
+            this.$router.push({
+                name: "trains.trip", query: {
+                    tripID: departure.tripId,
+                    lineName: departure.line.name ?? departure.line.fahrtNr,
+                    start: departure.station.id,
+                    departure: departure.plannedWhen
+                }
+            });
+        },
+        toggleSetHomeModal() {
+            this.$refs.confirmHomeModal.show();
+        },
+        setHome() {
+            axios
+                .put("/trains/station/" + this.station.name + "/home")
+                .then((result) => {
+                    this.result = result.data.data;
+                    //ToDo add a confirm popup or sth
+                    this.$auth.fetch();
+                    alert(this.i18n.choice("_.user.home-set", 1, {"station": this.result.name}));
+                })
+                .catch((error) => {
+                    console.error(error);
+                });
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/components/views/Trip.vue b/resources/components/views/Trip.vue
new file mode 100644
index 000000000..f701fe9a3
--- /dev/null
+++ b/resources/components/views/Trip.vue
@@ -0,0 +1,167 @@
+<template>
+    <LayoutBasic>
+        <div>
+            <transition>
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-md-8 col-lg-7">
+                            <Spinner v-if="loading" class="mt-5"/>
+                            <div v-if="hafasTrip != null" id="trip-heading" class="card">
+                                <div class="card-header">
+                                    <div class="float-end">
+                                        <a href="#" @click="showModal(lastStation)">
+                                            <i aria-hidden="true" class="fa fa-fast-forward"></i>
+                                        </a>
+                                    </div>
+                                    <img v-if="images.includes(hafasTrip.category)"
+                                         :alt="hafasTrip.category"
+                                         :src="`/img/${hafasTrip.category}.svg`"
+                                         class="product-icon">
+                                    <i v-else aria-hidden="true" class="fa fa-train"></i>
+                                    {{ this.hafasTrip.lineName }}
+                                    <i aria-hidden="true" class="fas fa-arrow-alt-circle-right"></i>
+                                    {{ this.hafasTrip.destination.name }}
+                                </div>
+
+                                <div class="card-body p-0 table-responsive">
+                                    <table aria-describedby="trip-heading"
+                                           class="table table-dark table-borderless table-hover table-striped m-0">
+                                        <thead>
+                                            <tr>
+                                                <th scope="col">{{ i18n.get('_.stationboard.stopover') }}</th>
+                                                <th scope="col"></th>
+                                                <th class="ps-0" scope="col"></th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr v-for="stop in stopovers" @click="showModal(stop)">
+                                                <td :class="{ 'text-danger text-decoration-line-through': stop.cancelled}">
+                                                    {{ stop.name }}
+                                                </td>
+                                                <td v-if="!stop.cancelled">
+                      <span v-if="stop.arrivalPlanned">
+                        {{ i18n.get('_.stationboard.arr') }}&nbsp;
+                        <span :class="delay(stop.arrivalPlanned, stop.arrivalReal)">
+                          {{ moment(stop.arrival).format("LT") }}
+                        </span>
+                        <small v-if="stop.isArrivalDelayed" class="text-muted text-decoration-line-through">
+                          {{ moment(stop.arrivalPlanned).format("LT") }}
+                        </small>
+                      </span>
+                                                    <br/>
+                                                    <span v-if="stop.departurePlanned">
+                        {{ i18n.get('_.stationboard.dep') }}&nbsp;
+                        <span :class="delay(stop.departurePlanned, stop.departureReal)">
+                          {{ moment(stop.departure).format("LT") }}
+                        </span>
+                        <small v-if="stop.isDepartureDelayed" class="text-muted text-decoration-line-through">
+                          {{ moment(stop.departurePlanned).format("LT") }}
+                        </small>
+                      </span>
+                                                </td>
+                                                <td v-else class="text-danger">
+                                                    {{ i18n.get('_.stationboard.stop-cancelled') }}
+                                                </td>
+                                                <td :class="{ 'text-danger text-decoration-line-through': stop.cancelled}"
+                                                    class="ps-0">
+                                                    {{ stop.platform }}
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </transition>
+            <CheckInModal
+                ref="checkInModal"
+                :destination="destination"
+                :train-data="trainData"
+            ></CheckInModal>
+        </div>
+    </LayoutBasic>
+</template>
+
+<script>
+import {travelImages} from "../../js/APImodels";
+import moment from "moment";
+import CheckInModal from "../CheckInModal";
+import LayoutBasic from "../layouts/Basic";
+import Spinner from "../Spinner";
+
+export default {
+    name: "Trip",
+    components: {Spinner, LayoutBasic, CheckInModal},
+    data() {
+        return {
+            loading: false,
+            images: travelImages,
+            hafasTrip: null,
+            stopovers: null,
+            lastStation: null,
+            moment: moment,
+            destination: null,
+            trainData: {
+                tripID: 0,
+                lineName: "",
+                start: 0,
+                destination: 0,
+                departure: 0,
+                arrival: 0
+            }
+        };
+    },
+    mounted() {
+        this.fetchData();
+    },
+    methods: {
+        fetchData() {
+            this.loading = true;
+            this.station = null;
+            const query  = this.$route.query;
+            axios
+                .get("/trains/trip?tripID=" + query.tripID + "&lineName=" + query.lineName + "&start=" + query.start)
+                .then((result) => {
+                    this.hafasTrip   = result.data.data;
+                    this.stopovers   = this.hafasTrip.stopovers.filter((item) => {
+                        return moment(item.arrivalPlanned).isAfter(moment(this.$route.query.departure));
+                    });
+                    this.lastStation = this.hafasTrip.stopovers.pop();
+                    this.loading     = false;
+                })
+                .catch((error) => {
+                    console.error(error);
+                });
+        },
+        showModal(stop) {
+            this.trainData   = {
+                tripID: this.$route.query.tripID,
+                lineName: this.$route.query.lineName,
+                start: this.$route.query.start,
+                destination: stop.id,
+                departure: this.$route.query.departure,
+                arrival: stop.arrivalPlanned
+            };
+            this.destination = stop.name;
+            this.$refs.checkInModal.show();
+        },
+        delay(planned, current) {
+            const delay = moment(current).diff(moment(planned), "seconds");
+
+            if (delay === 0) {
+                return "text-success";
+            } else if (delay < 600) {
+                return "text-warning";
+            } else if (delay >= 600) {
+                return "text-danger";
+            }
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/routes.js b/resources/js/routes.js
similarity index 71%
rename from resources/routes.js
rename to resources/js/routes.js
index 3c54c260f..5c03d7dc1 100644
--- a/resources/routes.js
+++ b/resources/js/routes.js
@@ -1,15 +1,17 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import ActiveStatuses from "./views/ActiveStatuses";
-import SingleStatus from "./views/SingleStatus";
-import Profile from "./views/Profile";
-import Event from "./views/Event";
-import Leaderboard from "./views/Leaderboard";
-import LeaderboardMonth from "./views/LeaderboardMonth";
-import Login from "./components/Login";
-import Dashboard from "./components/Dashboard";
-import Stationboard from "./views/Stationboard";
-import Trip from "./views/Trip";
+import ActiveStatuses from "../components/views/ActiveStatuses";
+import SingleStatus from "../components/views/SingleStatus";
+import Profile from "../components/views/Profile";
+import Event from "../components/views/Event";
+import Leaderboard from "../components/views/Leaderboard";
+import LeaderboardMonth from "../components/views/LeaderboardMonth";
+import Login from "../components/Login";
+import Dashboard from "../components/views/Dashboard";
+import Stationboard from "../components/views/Stationboard";
+import Trip from "../components/views/Trip";
+import Index from "../components/views/Index";
+import About from "../components/views/About";
 
 Vue.use(VueRouter);
 
@@ -20,8 +22,16 @@ export const router = new VueRouter({
         [
             {
                 path: "/",
-                name: "base",
-                redirect: {name: "statuses.active"},
+                component: Index,
+                name: "index",
+                meta: {
+                    auth: false
+                }
+            },
+            {
+                path: "/about",
+                component: About,
+                name: "about"
             },
             {
                 path: "/statuses/active",
diff --git a/resources/js/vue.js b/resources/js/vue.js
index 6ae32544b..cdf8ff744 100644
--- a/resources/js/vue.js
+++ b/resources/js/vue.js
@@ -4,8 +4,8 @@
 
 import Vue from "vue";
 import VueRouter from "vue-router";
-import {router} from "../routes";
-import App from "../views/App";
+import {router} from "./routes";
+import App from "../components/App";
 import moment from "moment";
 import Lang from "lang.js";
 import {i18nStrings} from "./translations";
@@ -58,7 +58,8 @@ Vue.use(auth, {
     },
     options: {
         rolesKey: "type",
-        notFoundRedirect: {name: "statuses.active"},
+        notFoundRedirect: {name: "dashboard"},
+        forbiddenRedirect: {name: "dashboard"}
     },
     tokenDefaultName: "laravel-vue-spa",
     tokenStore: ["localStorage"],
diff --git a/resources/lang/de.json b/resources/lang/de.json
index c2fd083f2..1b9d39235 100644
--- a/resources/lang/de.json
+++ b/resources/lang/de.json
@@ -218,6 +218,7 @@
     "menu.admin": "Admin-Panel",
     "menu.readmore": "Mehr lesen",
     "menu.show-more": "Mehr anzeigen",
+    "menu.loading": "Laden",
     "messages.cookie-notice": "Wir nutzen Cookies für unser Login-System.",
     "messages.cookie-notice-button": "Okay",
     "messages.cookie-notice-learn": "Mehr erfahren",
diff --git a/resources/lang/en.json b/resources/lang/en.json
index dd675e0d6..186b74fcb 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -203,6 +203,7 @@
     "menu.settings.follower-requests": "Follower requests",
     "menu.admin": "Admin-Panel",
     "menu.readmore": "Read more",
+    "menu.loading": "Loading",
     "messages.cookie-notice": "We use cookies for our login-system.",
     "messages.cookie-notice-button": "Okay",
     "messages.cookie-notice-learn": "Learn more",
diff --git a/resources/views/ActiveStatuses.vue b/resources/views/ActiveStatuses.vue
deleted file mode 100644
index 3c7cde2e0..000000000
--- a/resources/views/ActiveStatuses.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-md-8 col-lg-6">
-        <div class="card sticky-top">
-          <Map class="map embed-responsive embed-responsive-1by1" :poly-lines="polylines"></Map>
-        </div>
-      </div>
-      <div class="col-md-8 col-lg-6">
-        <div class="loading" v-if="loading">
-          {{ i18n.get("_.vue.loading") }}
-        </div>
-
-        <div v-if="error" class="error">
-          <p>{{ error }}</p>
-
-          <p>
-            <button @click.prevent="fetchData">
-              {{ i18n.get("_.vue.tryAgain") }}
-            </button>
-          </p>
-        </div>
-        <div v-if="statuses">
-          <h4 class="mt-4"> {{ i18n.get("_.menu.active") }} </h4>
-          <Status v-for="status in statuses" :status="status" v-bind:stopovers="stopovers"
-                  v-bind:key="status.id"></Status>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-import Status from "../components/Status";
-import Map from "../components/Map";
-import {StatusModel} from "../js/APImodels";
-
-export default {
-  name: "ActiveStatuses",
-  data() {
-    return {
-      loading: true,
-      error: null,
-      interval: null,
-      statuses: [StatusModel],
-      stopovers: null, //ToDo Typedef
-      polylines: null //ToDo Typedef
-    };
-  },
-  metaInfo() {
-    return {
-      title: this.i18n.get("_.menu.active"),
-      meta: [
-        {name: "robots", content: "index", vmid: "robots"},
-        {name: "description", content: this.i18n.get("_.description.en-route"), vmid: "description"},
-        {name: "DC.Description", content: this.i18n.get("_.description.en-route"), vmid: "DC.Description"}
-      ]
-    };
-  },
-  components: {
-    Status,
-    Map
-  },
-  created() {
-    this.fetchData();
-    this.startRefresh();
-  },
-  methods: {
-    fetchData() {
-      const oldStatuses = this.statuses;
-      this.error        = this.statuses = null;
-      axios
-          .get("/statuses")
-          .then((response) => {
-            this.loading = false;
-            // FixMe: Why is this comparison not working correctly?
-            if (oldStatuses != response.data.data) {
-              this.statuses = response.data.data;
-              if (this.statuses.length) {
-                this.fetchPolyline();
-                this.fetchStopovers();
-              }
-            }
-          })
-          .catch((error) => {
-            this.loading = false;
-            this.error   = error.data.message || error.message;
-          });
-    },
-    fetchStopovers() {
-      let tripIds = "";
-      this.statuses.forEach((status) => {
-        tripIds += (status.train.trip + ",");
-      });
-      axios
-          .get("/stopovers/" + tripIds)
-          .then((response) => {
-            this.stopovers = response.data.data;
-          })
-          .catch((error) => {
-            console.error(error);
-          });
-    },
-    fetchPolyline() {
-      let tripIds = "";
-      this.statuses.forEach((status) => {
-        tripIds += (status.id + ",");
-      });
-      axios
-          .get("/polyline/" + tripIds)
-          .then((response) => {
-            this.polylines = [response.data.data];
-          })
-          .catch((error) => {
-            console.error(error);
-          })
-    },
-    startRefresh() {
-      setInterval(() => (this.fetchData()), 70000);
-    }
-  },
-};
-</script>
-
-<style scoped>
-
-</style>
diff --git a/resources/views/App.vue b/resources/views/App.vue
deleted file mode 100644
index fd74a7211..000000000
--- a/resources/views/App.vue
+++ /dev/null
@@ -1,246 +0,0 @@
-<template>
-  <div>
-    <nav class="navbar navbar-expand-md navbar-dark bg-trwl">
-      <div class="container">
-        <router-link :to="{ name: 'base' }" class="navbar-brand">
-          Träwelling <!-- ToDo: get name from config -->
-        </router-link>
-        <div class="navbar-toggler">
-          <NotificationsButton
-              v-if="$auth.check()"
-              :notifications-count="notificationsCount"
-              toggler="true"
-              @click="showNotifications"
-          ></NotificationsButton>
-          <button :aria-label="i18n.get('_.Toggle navigation')" aria-controls="navbarCollapse" aria-expanded="false"
-                  class="navbar-toggler" data-mdb-target="#navbarCollapse"
-                  data-mdb-toggle="collapse" type="button">
-            <i aria-hidden="true" class="fas fa-bars"></i>
-          </button>
-        </div>
-        <div id="navbarCollapse" ref="navbar" class="collapse navbar-collapse">
-          <ul class="navbar-nav me-auto">
-            <li v-if="$auth.check()" class="nav-item">
-              <router-link :to="{ name: 'dashboard' }" class="nav-link">{{ i18n.get('_.menu.dashboard') }}</router-link>
-            </li>
-            <li class="nav-item">
-              <router-link :to="{ name: 'leaderboard' }" class="nav-link">
-                {{ i18n.get('_.menu.leaderboard') }}
-              </router-link>
-            </li>
-            <li class="nav-item">
-              <router-link :to="{ name: 'statuses.active'}" class="nav-link">
-                {{ i18n.get('_.menu.active') }}
-              </router-link>
-            </li>
-          </ul>
-          <ul v-if="!$auth.check()" class="navbar-nav w-auto">
-            <li class="nav-item">
-              <router-link :to="{ name: 'auth.login'}"
-                           class="nav-link">{{ i18n.get('_.menu.login') }}
-              </router-link>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">{{ i18n.get('_.menu.register') }}</a>
-            </li>
-          </ul>
-          <ul v-else class="navbar-nav w-auto">
-            <form action="#" class="form-inline">
-              <div class="input-group ps-0 m-0" hidden>
-                <input :placeholder="i18n.get('_.stationboard.submit-search')" aria-label="User suchen"
-                       class="border border-white rounded-left form-control my-0 py-1"
-                       name="searchQuery"
-                       type="text"/>
-                <button class="input-group-text btn-primary" type="submit">
-                  <i aria-hidden="true" class="fas fa-search"></i>
-                </button>
-              </div>
-            </form>
-            <li class="nav-item d-none d-md-inline-block">
-              <NotificationsButton
-                  :notifications-count="notificationsCount"
-                  @click="showNotifications"
-              ></NotificationsButton>
-            </li>
-            <li class="nav-item dropdown">
-              <a aria-expanded="false" aria-haspopup="true"
-                 class="nav-link dropdown-toggle" data-mdb-toggle="dropdown" href="#"
-                 role="button">
-                {{ $auth.user().displayName }}
-              </a>
-
-              <div aria-labelledby="navbarDropdown" class="dropdown-menu dropdown-menu-right">
-                <router-link :to="{ name: 'profile', params: {username: $auth.user().username}}"
-                             class="dropdown-item">
-                  <i aria-hidden="true" class="fas fa-user"></i> {{ i18n.get('_.menu.profile') }}
-                </router-link>
-                <a class="dropdown-item" href="#">
-                  <i aria-hidden="true" class="fas fa-save"></i> {{ i18n.get('_.menu.export') }}
-                </a>
-                <a class="dropdown-item" href="#">
-                  <i aria-hidden="true" class="fas fa-cog"></i> {{ i18n.get('_.menu.settings') }}
-                </a>
-                <!--                {{ &#45;&#45;@if(Auth::user()->role >= 5)&#45;&#45; }}-->
-                <!--                {{-->
-                <!--                  &#45;&#45; <a class="dropdown-item" href="#">&#45;&#45;}}-->
-                <!--                {{ &#45;&#45; <i class="fas fa-tools" aria-hidden="true"></i> {{ i18n.get('_.menu.admin') }}&#45;&#45;}}-->
-                <!--                {{ &#45;&#45;                                        </a>&#45;&#45;}}-->
-                <!--                {{ &#45;&#45;@endif&#45;&#45; }}-->
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#" @click.prevent="$auth.logout()">
-                  <i aria-hidden="true" class="fas fa-sign-out-alt"></i> {{ i18n.get('_.menu.logout') }}
-                </a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </nav>
-    <main class="py-4">
-      <router-view></router-view>
-      <NotificationsModal ref="notifModal"></NotificationsModal>
-    </main>
-    <footer class="footer mt-auto py-3">
-      <div class="container">
-        <div class="btn-group dropup float-end">
-          <button aria-expanded="false" aria-haspopup="true" class="btn btn-primary dropdown-toggle"
-                  data-mdb-toggle="dropdown" type="button">
-            <i aria-hidden="true" class="fas fa-globe-europe"></i> {{ i18n.get("_.settings.language.set") }}
-          </button>
-          <div class="dropdown-menu">
-            <a v-for="(lang, key) in langs" class="dropdown-item" href="?language=$key" @click.prevent="setLang(key)">
-              {{ lang }}
-            </a>
-          </div>
-        </div>
-        <p class="text-muted mb-0">
-                <span class="footer-nav-link">
-                    <a href="route('static.about')">{{ i18n.get("_.menu.about") }}</a>
-                </span>
-          <span class="footer-nav-link">
-                    / <router-link :to="{name: 'dashboard.global'}">{{
-              i18n.get("_.menu.globaldashboard")
-            }}</router-link>
-                </span>
-          <span class="footer-nav-link">
-                    / <a href=" route(events) ">{{ i18n.get("_.events") }}</a>
-                </span>
-          <span class="footer-nav-link">
-                    / <a href=" route(static.privacy) ">{{ i18n.get("_.menu.privacy") }}</a>
-                </span>
-          <span class="footer-nav-link">
-                    / <a href=" route(static.imprint) ">{{ i18n.get("_.menu.imprint") }}</a>
-                </span>
-          <span class="footer-nav-link">
-                    / <a href=" route(blog.all) ">{{ i18n.get("_.menu.blog") }}</a>
-                </span>
-        </p>
-        <p class="mb-0" v-html="i18n.get('_.menu.developed')"></p>
-        <p class="mb-0">&copy; {{ moment().format('Y') }} Tr&auml;welling</p>
-        <p class="mb-0 text-muted small">commit:
-          <!--          ToDo: get current commit -->
-          <a class="text-muted"
-             href="https://github.com/Traewelling/traewelling/commit/get_current_git_commit()">
-            get_current_git_commit()
-          </a>
-        </p>
-      </div>
-    </footer>
-  </div>
-</template>
-
-<script>
-import NotificationsModal from "../components/NotificationsModal";
-import NotificationsButton from "../components/NotificationsButton";
-import Vue from "vue";
-import {languages} from "../js/translations";
-
-export default {
-  name: "App",
-  data() {
-    return {
-      notificationsCount: 1,
-      langs: languages
-    };
-  },
-  metaInfo() {
-    return {
-      title: "Träwelling",
-      titleTemplate: "%s - Träwelling",//ToDo get name from .env
-      htmlAttrs: {
-        lang: this.i18n.getLocale()
-      },
-      meta: [
-        {name: "charset", "content": "utf-8"},
-        {name: "viewport", content: "width=device-width, initial-scale=1"},
-        {name: "apple-mobile-web-app-capable", content: "yes"},
-        {name: "apple-mobile-web-app-status-bar-style", content: "#c72730"},
-        {name: "mobile-web-app-capable", content: "yes"},
-        {name: "theme-color", content: "#c72730"},
-        {name: "name", content: "Träwelling"}, //ToDo get name from .env
-
-        {name: "copyright", content: "Träwelling Team"},
-        {name: "description", content: this.i18n.get("_.about.block1"), vmid: "description"},
-        {
-          name: "keywords",
-          content: "Träwelling, Twitter, Deutsche, Bahn, Travel, Check-In, Zug, Bus, Tram, Mastodon"
-        },
-        {name: "audience", conent: "Travellers"},
-        {name: "DC.Rights", content: "Träwelling Team"},
-        {name: "DC.Description", content: this.i18n.get("_.about.block1"), vmid: "DC.Description"},
-        {name: "DC.Language", content: this.i18n.getLocale()},
-        {property: "og:title", content: "Träwelling", vmid: "og:title"}, //ToDo get name from .env
-        {property: "og:site_name", content: "Träwelling"}, //ToDo get name from .env
-        {property: "og:type", content: "website"},
-        {name: "robots", content: "index,follow", vmid: "robots"}
-      ]
-    };
-  },
-  components: {
-    NotificationsButton,
-    NotificationsModal
-  },
-  mounted() {
-    this.$auth.load().then(() => {
-      if (this.$auth.check()) {
-        this.$auth.fetch()
-            .then((res) => {
-              this.$auth.user(res.data.data);
-              if (this.$auth.user().language) {
-                this.setLang(this.$auth.user().language);
-              }
-            });
-      }
-    });
-    this.fetchNotificationsCount();
-  },
-  watch: {
-    '$route'() {
-      $("#navbarCollapse").collapse("hide");
-    }
-  },
-  methods: {
-    showNotifications() {
-      this.$refs.notifModal.show();
-    },
-    fetchNotificationsCount() {
-      axios
-          .get("/notifications/count")
-          .then((response) => {
-            this.notificationsCount = response.data.data;
-          })
-          .catch((error) => {
-            console.error(error);
-          });
-    },
-    setLang(language) {
-      if (typeof language === "string" && languages.hasOwnProperty(language)) {
-        Vue.localStorage.set("language", language);
-        this.i18n.setLocale(language);
-        this.moment.locale(language.substr(0, 2));
-        this.$forceUpdate();
-      }
-    }
-  }
-};
-</script>
diff --git a/resources/views/Event.vue b/resources/views/Event.vue
deleted file mode 100644
index d51d7075d..000000000
--- a/resources/views/Event.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <div>
-    <div class="px-4 py-5 mt-n4"
-         style="background-image: url('/images/covers/profile-background.png');background-position: center;background-color: #c5232c">
-      <div class="container" id="event-header">
-        <div class="row justify-content-center">
-          <div class="text-white col-md-8 col-lg-7">
-            <h1 class="card-title font-bold">
-              <strong> {{ event.name }}
-                <code class="text-white">#{{ event.hashtag }}</code>
-              </strong>
-            </h1>
-            <h2>
-              <span class="font-weight-bold">
-                <i class="fa fa-route d-inline" aria-hidden="true"/>&nbsp;{{ event.trainDistance.toFixed(0) }}
-              </span>
-              <span class="small font-weight-lighter">km</span>
-              <span class="font-weight-bold ps-sm-2">
-                <i class="fa fa-stopwatch d-inline" aria-hidden="true"/>&nbsp;{{ duration }}
-              </span>
-              <br class="d-block d-sm-none">
-              <span class="font-weight-bold ps-sm-2">
-                <i class="fa fa-user" aria-hidden="true"/>&nbsp;{{ event.host }}
-              </span>
-              <span class="font-weight-bold ps-sm-2">
-                <i class="fa fa-link" aria-hidden="true"/>&nbsp;<a :href="event.url"
-                                                                   class="text-white">{{ event.url }}</a>
-              </span>
-            </h2>
-            <h2>
-              <span class="font-weight-bold"><i class="fa fa-train" aria-hidden="true"/></span>
-              <span class="font-weight-bold"><a class="text-white" href="asdf">{{ event.station.name }}</a></span>
-            </h2>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="container">
-      <div v-if="loading || statusesLoading">
-         {{ i18n.get("_.vue.loading") }}
-      </div>
-
-      <div v-if="!statusesLoading && !loading" class="row justify-content-center mt-5">
-        <div v-if="statuses.length > 0" class="col-md-8 col-lg-7">
-
-          <div v-if="statuses">
-            <Status v-for="status in statuses" :status="status" v-bind:key="status.id"></Status>
-          </div>
-          <div class="mt-5">
-            $statuses->links()
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Status from "../components/Status";
-import moment from "moment";
-import axios from "axios";
-import {EventModel, StatusModel} from "../js/APImodels";
-
-export default {
-  name: "Event",
-  //ToDo add Meta Tags
-  data() {
-    return {
-      username: this.$route.params.username,
-      loading: false,
-      statusesLoading: false,
-      event: EventModel,
-      statuses: [StatusModel]
-    };
-  },
-  components: {
-    Status
-  },
-  computed: {
-    duration() {
-      const duration = moment.duration(this.event.trainDuration, "minutes").asMinutes();
-      let minutes    = duration % 60;
-      let hours      = Math.floor(duration / 60);
-
-      return hours + "h " + minutes + "m";
-    },
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
-    fetchData() {
-      this.error   = null;
-      this.loading = true;
-      axios
-          .get("/event/" + this.$route.params.slug)
-          .then((response) => {
-            this.loading = false;
-            this.event   = response.data.data;
-            this.fetchStatuses();
-          })
-          .catch((error) => {
-            this.loading = false;
-            this.error   = error.data.message || error.message;
-          });
-    },
-    fetchStatuses() {
-      this.error           = null;
-      this.statusesLoading = true;
-      axios
-          .get("/event/" + this.$route.params.slug + "/statuses")
-          .then((response) => {
-            this.statusesLoading = false;
-            this.statuses        = response.data.data;
-          })
-          .catch((error) => {
-            this.statusesLoading = false;
-            this.error           = error.data.message || error.message;
-          });
-    }
-  }
-};
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/resources/views/Leaderboard.vue b/resources/views/Leaderboard.vue
deleted file mode 100644
index 06bf50225..000000000
--- a/resources/views/Leaderboard.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-md-9 col-lg-9">
-        <div class="card" id="leaderboard">
-          <div class="card-header">
-            <router-link :to="{ name: 'leaderboard.month', params:{month: month} }" class="float-end">
-              {{ i18n.get("_.leaderboard.month.title") }}
-            </router-link>
-            {{ i18n.get("_.menu.leaderboard") }}
-          </div>
-          <div class="card-body" v-if="!loading">
-            <ul class="nav nav-tabs" id="myTab" role="tablist">
-              <li class="nav-item">
-                <a class="nav-link active" id="main-tab" data-toggle="tab" href="#leaderboard-main"
-                   role="tab" aria-controls="home" aria-selected="true">
-                  {{ i18n.get("_.leaderboard.top") }} {{ users.length }}
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" id="distance-tab" data-toggle="tab" href="#leaderboard-distance"
-                   role="tab" aria-controls="profile" aria-selected="false">
-                  {{ i18n.get("_.leaderboard.distance") }}
-                </a>
-              </li>
-              <li class="nav-item" v-if="$auth.check() && friends">
-                <a class="nav-link" id="friends-tab" data-toggle="tab" href="#leaderboard-friends"
-                   role="tab" aria-controls="contact" aria-selected="false">
-                  {{ i18n.get("_.leaderboard.friends") }}
-                </a>
-              </li>
-            </ul>
-            <div class="tab-content">
-              <div class="tab-pane fade show active table-responsive" id="leaderboard-main"
-                   role="tabpanel">
-                <LeaderboardTable described-by="main-tab" :users="users"></LeaderboardTable>
-              </div>
-              <div class="tab-pane fade table-responsive" id="leaderboard-distance" role="tabpanel">
-                <LeaderboardTable described-by="distance-tab" :users="distance"></LeaderboardTable>
-              </div>
-              <div v-if="$auth.check() && friends" class="tab-pane fade table-responsive"
-                   id="leaderboard-friends" role="tabpanel">
-                <LeaderboardTable described-by="distance-tab" :users="friends"></LeaderboardTable>
-              </div>
-            </div>
-          </div>
-          <div class="card-body" v-else> {{ i18n.get("_.vue.loading") }}</div>
-          <div class="card-footer text-muted">
-            <i class="far fa-question-circle" aria-hidden="true"></i>
-            {{ i18n.get("_.leaderboard.notice")}}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import moment from "moment";
-import LeaderboardTable from "../components/LeaderboardTable";
-import axios from "axios";
-
-export default {
-  //ToDo format numbers correctly for languages, etc.
-  name: "Leaderboard",
-  data() {
-    return {
-      month: moment().format("YYYY-MM"),
-      users: null,
-      distance: null,
-      friends: null,
-      loading: false
-    };
-  },
-  metaInfo() {
-    return {
-      title: this.i18n.get("_.menu.leaderboard"),
-      meta: [
-        {name: "description", content: this.i18n.get("_.description.leaderboard.main"), vmid: "description"},
-        {name: "DC.Description", content: this.i18n.get("_.description.leaderboard.main"), vmid: "DC.Description"}
-      ]
-    };
-  },
-  components: {
-    LeaderboardTable
-  },
-  methods: {
-    fetchData() {
-      this.error   = null;
-      this.loading = true;
-      axios
-          .get("/leaderboard/")
-          .then((response) => {
-            this.loading = false;
-            this.users   = response.data.data;
-          })
-          .catch((error) => {
-            this.loading = false;
-            this.error   = error.data.message || error.message;
-          });
-      axios
-          .get("/leaderboard/distance")
-          .then((response) => {
-            this.loading  = false;
-            this.distance = response.data.data;
-          })
-          .catch((error) => {
-            this.loading = false;
-            this.error   = error.data.message || error.message;
-          });
-      if (this.$auth.check()) {
-        axios
-            .get("/leaderboard/friends")
-            .then((response) => {
-              this.loading = false;
-              this.friends = response.data.data;
-              if (!Object.keys(this.friends).length) {
-                this.friends = null;
-              }
-            })
-            .catch((error) => {
-              this.loading = false;
-              this.error   = error.data.message || error.message;
-            });
-      }
-    },
-  },
-  created() {
-    this.fetchData();
-  }
-};
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/resources/views/LeaderboardMonth.vue b/resources/views/LeaderboardMonth.vue
deleted file mode 100644
index a7673f872..000000000
--- a/resources/views/LeaderboardMonth.vue
+++ /dev/null
@@ -1,194 +0,0 @@
-<template>
-  <div class="container" v-if="!loading">
-    <div class="row">
-      <div class="col-md-12">
-        <h4>{{ i18n.get("_.leaderboard.month") }} <strong>{{ month.format("MMMM YYYY") }}</strong></h4>
-        <hr/>
-        <router-link :to="{ name: 'leaderboard.month', params:{month: lastMonth} }"
-                     class="btn btn-sm btn-primary float-left">
-          <i class="fas fa-arrow-left" aria-hidden="true"/> {{ moment(lastMonth).format("MMMM YYYY") }}
-        </router-link>
-
-        <router-link v-if="moment(nextMonth).isBefore()" :to="{ name: 'leaderboard.month', params:{month: nextMonth} }"
-                     class="btn btn-sm btn-primary float-end">
-          {{ moment(nextMonth).format("MMMM YYYY") }} <i class="fas fa-arrow-right" aria-hidden="true"/>
-        </router-link>
-        <div class="clearfix"></div>
-        <hr/>
-      </div>
-
-
-      <div v-if="users.length === 0" class="col-md-12">
-        <div class="card">
-          <div class="card-body text-center text-danger text-bold">
-            {{ i18n.get("_.leaderboard.no_data") }}
-          </div>
-        </div>
-      </div>
-
-
-      <div v-for="(place, index) in users.slice(0, 3)" class="col-md-4">
-        <div class="card mb-2">
-          <div class="card-header"> {{ i18n.get("_.leaderboard.rank") }} {{ index + 1 }}</div>
-          <div class="card-body text-center">
-            <div class="image-box pe-0 d-lg-flex">
-              <router-link :to="{ name: 'profile', params: {username: place.username}}">
-                <img :src="`/profile/${place.username}/profilepicture`" :alt="place.username" style="width: 50%;">
-              </router-link>
-            </div>
-            <router-link :to="{ name: 'profile', params: {username: place.username}}" style="font-size: 1.3em;">
-              {{ place.username }}
-            </router-link>
-            <table class="table text-muted">
-              <tbody>
-                <tr>
-                  <td>
-                    <i class="fas fa-dice-d20" aria-hidden="true"/>
-                    {{ place.points.toFixed(0) }}
-                  </td>
-                  <td>
-                    <i class="fas fa-clock" aria-hidden="true"/>
-                    {{ place.trainDuration.toFixed(0) }}min
-                  </td>
-                  <td>
-                    <i class="fas fa-route" aria-hidden="true"/>
-                    {{ place.trainDistance.toFixed(0) }}km
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-    <hr/>
-    <div v-if="users.length > 3" class="row justify-content-center">
-      <div class="col-md-8 col-lg-7">
-        <div class="card">
-          <div class="card-body table-responsive">
-            <table class="table table-vertical-center">
-              <thead>
-                <tr>
-                  <th scope="col"> {{ i18n.get("_.leaderboard.rank") }}</th>
-                  <th scope="col" colspan="2"> {{ i18n.get("_.leaderboard.user") }}</th>
-                  <th scope="col"> {{ i18n.get("_.leaderboard.duration") }}</th>
-                  <th scope="col"> {{ i18n.get("_.leaderboard.distance") }}</th>
-                  <th scope="col"> {{ i18n.get("_.leaderboard.points") }}</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(place, index) in users.slice(3, 100)">
-                  <td>{{ index + 4 }}</td>
-                  <td>
-                    <div class="image-box pe-0 d-lg-flex" style="width: 4em; height: 4em;">
-                      <router-link :to="{ name: 'profile', params: {username: place.username}}">
-                        <img :src="`/profile/${place.username}/profilepicture`" :alt="place.username"
-                             style="width: 50%;">
-                      </router-link>
-                    </div>
-                  </td>
-                  <td>
-                    <router-link :to="{ name: 'profile', params: {username: place.username}}"
-                                 style="font-size: 1.3em;">
-                      {{ place.username }}
-                    </router-link>
-                  </td>
-                  <td>
-                    {{ place.trainDuration }}min
-                  </td>
-                  <td>
-                    {{ place.trainDistance.toFixed(0) }}km
-                  </td>
-                  <td>
-                    {{ place.points.toFixed(0) }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-    <hr/>
-  </div>
-  <div v-else> {{ i18n.get("_.vue.loading") }}</div>
-</template>
-
-<script>
-import moment from "moment";
-import LeaderboardTable from "../components/LeaderboardTable";
-import axios from "axios";
-import {LeaderboardUserModel} from "../js/APImodels";
-
-export default {
-  name: "LeaderboardMonth",
-  data() {
-    return {
-      moment: moment,
-      users: [LeaderboardUserModel],
-      loading: false,
-      metaData: {
-        description: undefined
-      }
-    };
-  },
-  metaInfo() {
-    return {
-      title: this.i18n.get("_.menu.leaderboard"),
-      meta: [
-        {name: "description", content: this.metaData.description, vmid: "description"},
-        {name: "DC.Description", content: this.metaData.description, vmid: "DC.Description"}
-      ]
-    };
-  },
-  computed: {
-    lastMonth() {
-      return moment(this.$route.params.month).subtract(1, "months").format("YYYY-MM");
-    },
-    month() {
-      return moment(this.$route.params.month);
-    },
-    nextMonth() {
-      return moment(this.$route.params.month).add(1, "months").format("YYYY-MM");
-    }
-  },
-  components: {
-    LeaderboardTable
-  },
-  methods: {
-    fetchData() {
-      this.error   = null;
-      this.loading = true;
-      axios
-          .get("/leaderboard/" + this.$route.params.month)
-          .then((response) => {
-            this.loading = false;
-            this.users   = response.data.data;
-          })
-          .catch((error) => {
-            this.loading = false;
-            this.error   = error.data.message || error.message;
-          });
-    },
-    updateMetadata() {
-      this.metaData.description = this.i18n.choice("_.description.leaderboard.monthly", 1, {
-        "month": this.month.format("MMMM"),
-        "year": this.month.format("YYYY")
-      });
-    }
-  },
-  watch: {
-    month() {
-      this.fetchData();
-    }
-  },
-  created() {
-    this.updateMetadata();
-    this.fetchData();
-  }
-};
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/resources/views/Profile.vue b/resources/views/Profile.vue
deleted file mode 100644
index 815cef984..000000000
--- a/resources/views/Profile.vue
+++ /dev/null
@@ -1,184 +0,0 @@
-<template>
-  <div>
-    <div v-if="!loading" class="px-4 py-5 mt-n4"
-         style="background-image: url('/images/covers/profile-background.png');background-position: center;background-color: #c5232c">
-      <div class="container">
-        <img :alt="i18n.get('_.settings.picture')" :src="`/profile/${user.username}/profilepicture`" height="20%"
-             width="20%" class="float-end img-thumbnail rounded-circle img-fluid"/>
-        <div class="text-white px-4">
-          <h2 class="card-title font-bold">
-            <strong>{{ user.username }} <i v-if="user.privateProfile" class="fas fa-user-lock" aria-hidden="true"/>
-            </strong> <br/>
-            <small class="font-weight-light">@{{ user.username }}</small>
-            <!--          ToDo: Implement Follow-Button to vue-->
-            FOLLOW
-          </h2>
-          <h2>
-          <span class="font-weight-bold">
-            <i class="fa fa-route d-inline" aria-hidden="true"/>&nbsp;{{ user.trainDistance.toFixed(2) }}
-          </span>
-            <span class="small font-weight-lighter">km</span>
-            <span class="font-weight-bold ps-sm-2">
-            <i class="fa fa-stopwatch d-inline" aria-hidden="true"/>&nbsp;{{ duration }}
-          </span>
-            <span class="font-weight-bold ps-sm-2">
-            <i class="fa fa-dice-d20 d-inline" aria-hidden="true"/>&nbsp;{{ user.points }}
-          </span>
-            <span class="small font-weight-lighter">{{ i18n.get("_.profile.points-abbr") }}</span>
-            <!-- ToDo: Adapt twitterUrl to ID Link (as in blade template) and remove the getTwitterUrl method afterwards! -->
-            <span v-if="user.twitterUrl" class="font-weight-bold ps-sm-2">
-            <a :href="user.twitterUrl" rel="me" class="text-white" target="_blank">
-              <i class="fab fa-twitter d-inline" aria-hidden="true"/>
-            </a>
-          </span>
-            <span v-if="user.mastodonUrl" class="font-weight-bold ps-sm-2">
-            <a :href="user.mastodonUrl" rel="me" class="text-white" target="_blank">
-              <i class="fab fa-mastodon d-inline" aria-hidden="true"/>
-            </a>
-          </span>
-          </h2>
-        </div>
-      </div>
-    </div>
-    <div class="container">
-      <div v-if="loading || statusesLoading">
-        {{ i18n.get("_.vue.loading") }}
-      </div>
-
-      <div v-if="!statusesLoading && !loading" class="row justify-content-center mt-5">
-        <div v-if="user.userInvisibleToMe" class="col-md-8 col-lg-7 text-center mb-5">
-          <header><h3>{{ i18n.get("_.profile.private-profile-text") }}</h3></header>
-          <h5>
-            {{
-              i18n.choice("_.profile.private-profile-information-text", 1, {
-                "username": user.username,
-                "request": i18n.get("_.profile.follow_req")
-              })
-            }}
-          </h5>
-        </div>
-        <div v-else-if="statuses.length > 0" class="col-md-8 col-lg-7">
-          <header><h3>{{ i18n.get("_.profile.last-journeys-of") }} {{ user.displayName }}:</h3></header>
-
-          <div v-if="statuses">
-            <Status v-for="status in statuses" :status="status" v-bind:key="status.id"
-                    :show-date="showDate(status, statuses)"/>
-          </div>
-          <div class="mt-5">
-            $statuses->links()
-          </div>
-        </div>
-        <div v-else class="col-md-8 col-lg-7">
-          <h3 class="text-danger">
-            strtr({{ i18n.get("_.profile.no-statuses") }}, [':username' => $user->name])
-          </h3>
-        </div>
-      </div>
-
-      <!--      @include('includes.edit-modal')-->
-      <!--      @include('includes.delete-modal')-->
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-import moment from "moment";
-import Status from "../components/Status";
-import {ProfileModel, StatusModel} from "../js/APImodels";
-
-export default {
-  name: "ProfilePage",
-  data() {
-    return {
-      username: this.$route.params.username,
-      loading: false,
-      statusesLoading: false,
-      user: ProfileModel,
-      statuses: [StatusModel],
-      description: undefined,
-      robots: "noindex",
-    };
-  },
-  metaInfo() {
-    return {
-      title: this.user.displayName,
-      meta: [
-        {name: "robots", content: this.robots, vmid: "robots"},
-        {name: "description", content: this.description, vmid: "description"},
-        {name: "DC.Description", content: this.description, vmid: "DC.Description"}
-      ]
-    };
-  },
-  components: {
-    Status
-  },
-  computed: {
-    duration() {
-      const duration = moment.duration(this.user.trainDuration, "minutes").asMinutes();
-      let minutes    = duration % 60;
-      let hours      = Math.floor(duration / 60);
-
-      return hours + "h " + minutes + "m";
-    },
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
-    showDate(item, statuses) {
-      let index = statuses.indexOf(item);
-      if (index === -1 || index === 0) {
-        return true;
-      }
-      return moment(item.train.origin.departure).date() !== moment(statuses[index - 1].train.origin.departure).date();
-    },
-    updateMetadata() {
-      this.description = this.i18n.choice("_.description.profile", 1, {
-        "username": this.user.username,
-        "kmAmount": this.user.trainDistance.toFixed(2),
-        "hourAmount": this.duration
-      });
-      if (this.user.preventIndex) {
-        this.robots = "noindex";
-      }
-    },
-    fetchData() {
-      this.error   = null;
-      this.loading = true;
-      axios
-          .get("/user/" + this.$route.params.username)
-          .then((response) => {
-            this.loading = false;
-            this.user    = response.data.data;
-            this.updateMetadata();
-            if (!this.user.userInvisibleToMe) {
-              this.fetchStatuses();
-            }
-          })
-          .catch((error) => {
-            this.loading = false;
-            this.error   = error.data.message || error.message;
-          });
-    },
-    fetchStatuses() {
-      this.error           = null;
-      this.statusesLoading = true;
-      axios
-          .get("/user/" + this.$route.params.username + "/statuses")
-          .then((response) => {
-            this.statusesLoading = false;
-            this.statuses        = response.data.data;
-          })
-          .catch((error) => {
-            this.statusesLoading = false;
-            this.error           = error.data.message || error.message;
-          });
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/resources/views/SingleStatus.vue b/resources/views/SingleStatus.vue
deleted file mode 100644
index a687b3213..000000000
--- a/resources/views/SingleStatus.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-md-8 col-lg-7">
-        <div class="loading" v-if="loading">
-          {{ i18n.get("_.vue.loading") }}
-        </div>
-
-        <div v-if="error" class="error">
-          <p>{{ error }}</p>
-
-          <p>
-            <button @click.prevent="fetchData">
-              {{ i18n.get("_.vue.tryAgain") }}
-            </button>
-          </p>
-        </div>
-
-        <div v-if="status">
-          <Status :status="status" :polyline="polyline" :stopovers="stopovers" :likes="likes" show-date="true"></Status>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-import Status from "../components/Status";
-import moment from "moment";
-import {StatusModel} from "../js/APImodels";
-
-export default {
-  name: "SingleStatus",
-  data() {
-    return {
-      error: false,
-      loading: false,
-      status: StatusModel,
-      polyline: null, //ToDo Typedef
-      stopovers: null, //ToDo Typedef
-      likes: null,
-      moment: moment,
-      metaData: {
-        title: undefined,
-        url: undefined,
-        image: undefined,
-        description: undefined,
-        robots: undefined
-      }
-    };
-  },
-  metaInfo() {
-    return {
-      title: this.metaData.title,
-      meta: [
-        {name: "robots", content: this.metaData.robots, vmid: "robots"},
-        {name: "description", content: this.metaData.description, vmid: "description"},
-        {name: "DC.Description", content: this.metaData.description, vmid: "DC.Description"},
-        {name: "og:title", content: this.metaData.title, vmid: "og:title"},
-        {name: "og:url", content: this.metaData.url, vmid: "og:url"},
-        {name: "og:image", content: this.metaData.image, vmid: "og:image"},
-        {name: "og:description", content: this.metaData.description, vmid: "og:description"},
-        {name: "twitter:card", content: "summary", vmid: "twitter:card"},
-        {name: "twitter:site", content: "@traewelling", vmid: "twitter:site"},
-        {name: "twitter:title", content: this.metaData.title, vmid: "twitter:title"},
-        {name: "twitter:description", content: this.metaData.description, vmid: "twitter:description"},
-        {name: "twitter:image", content: this.metaData.image, vmid: "twitter:image"}
-      ]
-    };
-  },
-  created() {
-    if (this.statusData == null) {
-      this.fetchData();
-    } else {
-      this.status = this.statusData;
-      this.updateMetadata();
-      this.fetchPolyline();
-      this.fetchLikes();
-    }
-  },
-  components: {
-    Status
-  },
-  props: {
-    statusData: null
-  },
-  computed: {
-    rilIdentifierOrigin() {
-      if (this.status.train.origin.rilIdentifier) {
-        return " (" + this.status.train.origin.rilIdentifier + ")";
-      }
-      return "";
-    },
-    rilIdentifierDestination() {
-      if (this.status.train.destination.rilIdentifier) {
-        return " (" + this.status.train.destination.rilIdentifier + ")";
-      }
-      return "";
-    },
-  },
-  methods: {
-    fetchData() {
-      this.error   = null;
-      this.loading = true;
-      axios
-          .get("/statuses/" + this.$route.params.id)
-          .then((response) => {
-            this.loading = false;
-            this.status  = response.data.data;
-            this.updateMetadata();
-            this.fetchPolyline();
-            this.fetchStopovers();
-            this.fetchLikes();
-          })
-          .catch((error) => {
-            this.loading = false;
-            this.error   = error.data.message || error.message;
-          });
-    },
-    fetchPolyline() {
-      axios
-          .get("/polyline/" + this.status.id)
-          .then((response) => {
-            this.polyline = [response.data.data];
-          })
-          .catch((error) => {
-            console.error(error);
-          })
-    },
-    fetchStopovers() {
-      axios
-          .get("/stopovers/" + this.status.train.trip)
-          .then((response) => {
-            this.stopovers = response.data.data;
-          })
-          .catch((error) => {
-            console.error(error);
-          })
-    },
-    fetchLikes() {
-      axios
-          .get("/statuses/" + this.status.id + "/likedby")
-          .then((response) => {
-            this.likes = response.data.data;
-          })
-          .catch((error) => {
-            console.error(error);
-          })
-    },
-    updateMetadata() {
-      if (this.status.preventIndex) {
-        this.metaData.robots = "noindex";
-      }
-      this.metaData.description = this.i18n.choice("_.description.status", 1, {
-        "username": this.status.username,
-        "origin": this.status.train.origin.name + this.rilIdentifierOrigin,
-        "destination": this.status.train.destination.name + this.rilIdentifierDestination,
-        "date": this.moment(this.status.train.origin.departure).format("LLL"),
-        "lineName": this.status.train.lineName
-      });
-      this.metaData.url         = window.location.origin + this.$router.resolve({
-        name: "singleStatus",
-        params: {id: this.status.id}
-      }).href; //ToDo combine all window.location.origin...-methods to one single method
-      this.metaData.title       = this.i18n.choice("_.status.ogp-title", 1, {"name": this.status.username});
-      this.metaData.image       = "/profile/" + this.status.username + "/profilepicture";
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/resources/views/Stationboard.vue b/resources/views/Stationboard.vue
deleted file mode 100644
index 8a90e44c3..000000000
--- a/resources/views/Stationboard.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
-  <transition name="component-fade" mode="out-in">
-    <div class="container">
-      <div class="row justify-content-center">
-        <div class="col-md-8 col-lg-7">
-          <StationForm v-on:refresh="fetchData" :next="times.next" :now="times.now" :prev="times.prev"></StationForm>
-          <div class="card">
-            <div class="card-header">
-              <div class="float-end">
-                  <a :aria-label="i18n.get('_.modals.setHome-title')" href="#" v-on:click.prevent="toggleSetHomeModal">
-                      <!-- ToDo: alt-text! -->
-                      <i class="fa fa-home" aria-hidden="true"></i>
-                  </a>
-              </div>
-              <span v-if="station" id="stationTableHeader">
-              {{ station.name }}
-              <small>
-                <i class="far fa-clock fa-sm" aria-hidden="true"></i>
-                {{ moment(this.times.now).format("LLL") }}
-              </small>
-            </span>
-            </div>
-
-            <div class="loading" v-if="loading">
-              {{ i18n.get("_.vue.loading") }}
-            </div>
-            <div class="card-body text-center text-danger text-bold"
-                 v-else-if="departures.length === 0 || departures === null">
-              {{ i18n.get('_.stationboard.no-departures') }}
-            </div>
-            <div class="card-body p-0 table-responsive" v-else>
-              <table class="table table-dark table-borderless table-hover table-striped m-0"
-                     aria-labelledby="stationTableHeader">
-                <thead>
-                  <tr>
-                    <th scope="col" class="ps-2 ps-md-4">{{ i18n.get('_.stationboard.dep-time') }}</th>
-                    <th scope="col" class="px-0">{{ i18n.get('_.stationboard.line') }}</th>
-                    <th scope="col">{{ i18n.get('_.stationboard.destination') }}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="departure in departures"
-                      v-on:click="goToTrip(departure)">
-                    <td class="ps-2 ps-md-4">
-                      <span class="text-danger" v-if="departure.cancelled">
-                        {{ i18n.get('_.stationboard.stop-cancelled') }}
-                      </span>
-                      <span v-else>
-                        <span :class="{
-                        'text-success': departure.delay === 0,
-                        'text-warning': departure.delay && departure.delay < 600,
-                        'text-danger': departure.delay >= 600 }">
-                          <span>{{ moment(departure.when).format("LT") }}</span>
-                        </span>
-                        <small v-if="departure.delay" class="text-muted text-decoration-line-through">
-                          {{ moment(departure.plannedWhen).format("LT") }}
-                        </small>
-                      </span>
-                    </td>
-                    <td class="text-nowrap px-0">
-                      <img v-if="images.includes(departure.line.product)"
-                           class="product-icon"
-                           :alt="departure.line.product"
-                           :src="`/img/${departure.line.product}.svg`">
-                      <i v-else class="fa fa-train" aria-hidden="true"></i>
-                      &nbsp;
-                      <span :class="{ 'text-decoration-line-through text-danger': departure.cancelled}">
-                        <span v-if="departure.line.name">{{ departure.line.name }}</span>
-                        <span v-else>{{ departure.line.fahrtNr }}</span>
-                      </span>
-                    </td>
-                      <td class="text-wrap" :class="{ 'text-decoration-line-through text-danger': departure.cancelled}">
-                          {{ departure.direction }}
-                      </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-        <ModalConfirm
-            ref="confirmHomeModal"
-            :abort-text="i18n.get('_.menu.abort')"
-            :body-text="i18n.choice('_.modals.setHome-body', 1, {'stationName': this.station.name})"
-            :confirm-text="i18n.get('_.modals.edit-confirm')"
-            :title-text="i18n.get('_.modals.setHome-title')"
-            confirm-button-color="btn-success"
-            v-on:confirm="setHome"
-        ></ModalConfirm>
-    </div>
-  </transition>
-</template>
-
-<script>
-import StationForm from "../components/StationForm";
-import ModalConfirm from "../components/ModalConfirm";
-import moment from "moment";
-import {travelImages} from "../js/APImodels";
-
-export default {
-    name: "Stationboard",
-    components: {
-        StationForm,
-        ModalConfirm
-    },
-    data() {
-        return {
-            station: null,
-            departures: null,
-            times: {
-                now: 0,
-                prev: 0,
-                next: 0
-            },
-            loading: false,
-      images: travelImages,
-      moment: moment
-    };
-  },
-  mounted() {
-    this.fetchData();
-  },
-  methods: {
-    fetchData() {
-      this.loading     = true;
-      this.station     = null;
-      const when       = this.$route.query.when ?? "";
-      const travelType = this.$route.query.travelType ?? "";
-      axios
-          .get("/trains/station/" + this.$route.query.station + "/departures?when=" + when + "&travelType=" + travelType)
-          .then((result) => {
-            this.station    = result.data.meta.station;
-            this.times      = result.data.meta.times;
-            this.departures = result.data.data;
-            this.loading    = false;
-
-          })
-          .catch((error) => {
-            console.error(error);
-          });
-    },
-    goToTrip(departure) {
-      if (departure.cancelled) {
-        console.error("stop cancelled");
-          return;
-      }
-        this.$router.push({
-            name: "trains.trip", query: {
-                tripID: departure.tripId,
-                lineName: departure.line.name ?? departure.line.fahrtNr,
-                start: departure.station.id,
-                departure: departure.plannedWhen
-            }
-        });
-    },
-      toggleSetHomeModal() {
-          this.$refs.confirmHomeModal.show();
-      },
-      setHome() {
-          axios
-              .put("/trains/station/" + this.station.name + "/home")
-              .then((result) => {
-                  this.result = result.data.data;
-                  //ToDo add a confirm popup or sth
-                  this.$auth.fetch();
-                  alert(this.i18n.choice("_.user.home-set", 1, {"station": this.result.name}));
-              })
-              .catch((error) => {
-                  console.error(error);
-              });
-      }
-  }
-};
-</script>
-
-<style scoped>
-
-</style>
diff --git a/resources/views/Trip.vue b/resources/views/Trip.vue
deleted file mode 100644
index 14bd88102..000000000
--- a/resources/views/Trip.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-  <div>
-    <transition>
-      <div class="container">
-        <div class="row justify-content-center">
-          <div class="col-md-8 col-lg-7">
-            <div class="loading" v-if="loading">
-              {{ i18n.get("_.vue.loading") }}
-            </div>
-            <div class="card" v-if="hafasTrip != null" id="trip-heading">
-              <div class="card-header">
-                <div class="float-end">
-                  <a href="#" @click="showModal(lastStation)">
-                    <i class="fa fa-fast-forward" aria-hidden="true"></i>
-                  </a>
-                </div>
-                <img v-if="images.includes(hafasTrip.category)"
-                     class="product-icon"
-                     :alt="hafasTrip.category"
-                     :src="`/img/${hafasTrip.category}.svg`">
-                <i v-else class="fa fa-train" aria-hidden="true"></i>
-                {{ this.hafasTrip.lineName }}
-                <i class="fas fa-arrow-alt-circle-right" aria-hidden="true"></i>
-                {{ this.hafasTrip.destination.name }}
-              </div>
-
-              <div class="card-body p-0 table-responsive">
-                <table class="table table-dark table-borderless table-hover table-striped m-0"
-                       aria-describedby="trip-heading">
-                  <thead>
-                    <tr>
-                      <th scope="col">{{ i18n.get('_.stationboard.stopover') }}</th>
-                      <th scope="col"></th>
-                      <th scope="col" class="ps-0"></th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr v-for="stop in stopovers" @click="showModal(stop)">
-                      <td :class="{ 'text-danger text-decoration-line-through': stop.cancelled}">{{ stop.name }}</td>
-                      <td v-if="!stop.cancelled">
-                      <span v-if="stop.arrivalPlanned">
-                        {{ i18n.get('_.stationboard.arr') }}&nbsp;
-                        <span :class="delay(stop.arrivalPlanned, stop.arrivalReal)">
-                          {{ moment(stop.arrival).format("LT") }}
-                        </span>
-                        <small v-if="stop.isArrivalDelayed" class="text-muted text-decoration-line-through">
-                          {{ moment(stop.arrivalPlanned).format("LT") }}
-                        </small>
-                      </span>
-                        <br/>
-                        <span v-if="stop.departurePlanned">
-                        {{ i18n.get('_.stationboard.dep') }}&nbsp;
-                        <span :class="delay(stop.departurePlanned, stop.departureReal)">
-                          {{ moment(stop.departure).format("LT") }}
-                        </span>
-                        <small v-if="stop.isDepartureDelayed" class="text-muted text-decoration-line-through">
-                          {{ moment(stop.departurePlanned).format("LT") }}
-                        </small>
-                      </span>
-                      </td>
-                      <td v-else class="text-danger">
-                        {{ i18n.get('_.stationboard.stop-cancelled') }}
-                      </td>
-                      <td class="ps-0" :class="{ 'text-danger text-decoration-line-through': stop.cancelled}">
-                        {{ stop.platform }}
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </transition>
-    <CheckInModal
-        ref="checkInModal"
-        :destination="destination"
-        :train-data="trainData"
-    ></CheckInModal>
-  </div>
-</template>
-
-<script>
-import {travelImages} from "../js/APImodels";
-import moment from "moment";
-import CheckInModal from "../components/CheckInModal";
-
-export default {
-  name: "Trip",
-  components: {CheckInModal},
-  data() {
-    return {
-      loading: false,
-      images: travelImages,
-      hafasTrip: null,
-      stopovers: null,
-      lastStation: null,
-      moment: moment,
-      destination: null,
-      trainData: {
-        tripID: 0,
-        lineName: "",
-        start: 0,
-        destination: 0,
-        departure: 0,
-        arrival: 0
-      }
-    };
-  },
-  mounted() {
-    this.fetchData();
-  },
-  methods: {
-    fetchData() {
-      this.loading = true;
-      this.station = null;
-      const query  = this.$route.query;
-      axios
-          .get("/trains/trip?tripID=" + query.tripID + "&lineName=" + query.lineName + "&start=" + query.start)
-          .then((result) => {
-            this.hafasTrip   = result.data.data;
-            this.stopovers   = this.hafasTrip.stopovers.filter((item) => {
-              return moment(item.arrivalPlanned).isAfter(moment(this.$route.query.departure));
-            });
-            this.lastStation = this.hafasTrip.stopovers.pop();
-            this.loading     = false;
-          })
-          .catch((error) => {
-            console.error(error);
-          });
-    },
-    showModal(stop) {
-      this.trainData   = {
-        tripID: this.$route.query.tripID,
-        lineName: this.$route.query.lineName,
-        start: this.$route.query.start,
-        destination: stop.id,
-        departure: this.$route.query.departure,
-        arrival: stop.arrivalPlanned
-      };
-      this.destination = stop.name;
-      this.$refs.checkInModal.show();
-    },
-    delay(planned, current) {
-      const delay = moment(current).diff(moment(planned), "seconds");
-
-      if (delay === 0) {
-        return "text-success";
-      } else if (delay < 600) {
-        return "text-warning";
-      } else if (delay >= 600) {
-        return "text-danger";
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-
-</style>
diff --git a/resources/views/landing.blade.php b/resources/views/landing.blade.php
index 6e105cc4f..6481b1b25 100644
--- a/resources/views/landing.blade.php
+++ b/resources/views/landing.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="de">
+<html>
     <head>
         <title>{{ config('app.name', 'Träwelling') }}</title>
         <!-- CSRF Token -->
@@ -7,7 +7,7 @@
         <!-- Fonts -->
         <link href="{{ asset('fonts/Nunito/Nunito.css') }}" rel="stylesheet">
         <!-- Styles -->
-        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+        <link href="{{ asset('css/vue.css') }}" rel="stylesheet">
         <!-- Icons -->
         <link rel="mask-icon" href="{{ asset('images/icons/touch-icon-vector.svg') }}">
         <link rel="shortcut favicon" href="{{ asset('images/icons/favicon.ico') }}">