diff --git a/package-lock.json b/package-lock.json
index e794a5c4..ae553c8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -519,6 +519,15 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
       "dev": true
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "^1.3.0",
+        "is-buffer": "^1.1.5"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -745,6 +754,12 @@
       "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=",
       "dev": true
     },
+    "babel-plugin-syntax-dynamic-import": {
+      "version": "6.18.0",
+      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
+      "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=",
+      "dev": true
+    },
     "babel-plugin-syntax-exponentiation-operator": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz",
@@ -3202,7 +3217,6 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.0.tgz",
       "integrity": "sha512-fdrt472/9qQ6Kgjvb935ig6vJCuofpBUD14f9Vb+SLlm7xIe4Qva5gey8EKtv8lp7ahE1wilg3xL1znpVGtZIA==",
-      "dev": true,
       "requires": {
         "debug": "^3.1.0"
       },
@@ -3211,7 +3225,6 @@
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
           "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -4613,8 +4626,7 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-builtin-module": {
       "version": "1.0.0",
@@ -5609,8 +5621,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -9311,6 +9322,11 @@
         }
       }
     },
+    "vue-router": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
+      "integrity": "sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w=="
+    },
     "vue-session": {
       "version": "0.9.10",
       "resolved": "https://registry.npmjs.org/vue-session/-/vue-session-0.9.10.tgz",
@@ -9342,6 +9358,11 @@
       "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
+      "integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w=="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/package.json b/package.json
index 69c711c3..0bb85b81 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@fancyapps/fancybox": "^3.2.5",
+    "axios": "^0.18.0",
     "bootstrap-sass": "^3.3.7",
     "bourbon": "^4.3.2",
     "cookieconsent": "^3.1.0",
@@ -27,11 +28,14 @@
     "slick-carousel": "^1.8.0",
     "sticky-js": "^1.2.0",
     "vue": "^2.5.17",
-    "vue-session": "^0.9.10"
+    "vue-router": "^3.0.1",
+    "vue-session": "^0.9.10",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "@symfony/webpack-encore": "^0.19.0",
     "autoprefixer": "^8.6.5",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "node-sass": "^4.9.3",
     "postcss-loader": "^2.1.6",
diff --git a/web/typo3conf/ext/ep_products/Classes/Domain/Model/FilterSettings.php b/web/typo3conf/ext/ep_products/Classes/Domain/Model/FilterSettings.php
index 118b7e61..35f11457 100644
--- a/web/typo3conf/ext/ep_products/Classes/Domain/Model/FilterSettings.php
+++ b/web/typo3conf/ext/ep_products/Classes/Domain/Model/FilterSettings.php
@@ -121,7 +121,7 @@ class FilterSettings implements \JsonSerializable
     /**
      * @var int
      */
-    protected $pax = 1;
+    protected $pax = 0;
 
     /**
      * @var array
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
index 172604ab..6f9e5dfc 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
@@ -21,8 +21,6 @@ require('leaflet');
 import EventBus from './_bus'
 import SearchBar from './components/SearchBar.vue'
 import SearchBox from './components/SearchBox.vue'
-import SearchResult from './components/SearchResult.vue'
-import ProductDetail from './components/ProductDetail.vue'
 import AjaxContent from './components/AjaxContent.vue'
 import OsmMap from './components/OsmMap.vue'
 import Calendar from './components/Calendar.vue'
@@ -53,8 +51,8 @@ new Vue({
     components: {
         SearchBar,
         SearchBox,
-        SearchResult,
-        ProductDetail,
+        SearchResult: () => import('./components/SearchResult.vue'),
+        ProductDetail: () => import('./components/ProductDetail.vue'),
         AjaxContent,
         OsmMap,
         Calendar,
@@ -63,7 +61,8 @@ new Vue({
         WatchlistToggle,
         Watchlist,
         HotelList,
-        ReferrerLink
+        ReferrerLink,
+        MyEp: () => import('./myep/components/App.vue')
     },
     data () {
         return {
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js
new file mode 100644
index 00000000..8a4e0e96
--- /dev/null
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js
@@ -0,0 +1,57 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import store from './_store';
+
+Vue.use(VueRouter);
+
+const guard = (to, from, next) => {
+    if (store.getters.isLoggedIn) {
+        next();
+    } else {
+        next({ name: 'login' });
+    }
+};
+
+import Address from './components/Address.vue'
+import Events from './components/Events.vue'
+import Login from './components/Login.vue'
+import CrmData from './components/CrmData.vue'
+
+export default new VueRouter({
+    routes: [
+        {
+            name: 'login',
+            path: '/',
+            component: Login,
+            beforeEnter (from, to, next) {
+                if (!store.getters.isLoggedIn) {
+                    next();
+                } else {
+                    next({ name: 'address' });
+                }
+            }
+        },
+        {
+            name: 'address',
+            path: '/adressdaten',
+            component: Address,
+            beforeEnter: guard
+        },
+        {
+            name: 'events',
+            path: '/vorgaenge',
+            component: Events,
+            beforeEnter: guard
+        },
+        {
+            name: 'crm',
+            path: '/crm',
+            component: CrmData,
+            beforeEnter: guard
+        },
+        {
+            path: '*',
+            redirect: { name: 'login' }
+        }
+    ]
+});
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
new file mode 100644
index 00000000..9dfd1ffc
--- /dev/null
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
@@ -0,0 +1,86 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import axios from 'axios';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    state: {
+        config: {},
+        pending: false,
+        isLoggedIn: !!localStorage.getItem('token'),
+        countries: []
+    },
+    mutations: {
+        pending (state) {
+            state.pending = true;
+        },
+        loginSuccess (state) {
+            state.isLoggedIn = true;
+            state.pending = false;
+        },
+        loginFailure (state) {
+            state.isLoggedIn = false;
+            state.pending = false;
+        },
+        logout (state) {
+            state.isLoggedIn = false;
+            state.pending = false;
+        },
+        setCountries (state, countries) {
+            state.countries = countries;
+        },
+        initConfig (state, config) {
+            state.config = config;
+        }
+    },
+    actions: {
+        login({ commit }, credentials) {
+            commit('pending');
+            const formData = new FormData();
+            formData.append('_username', credentials.email);
+            formData.append('_password', credentials.password);
+            return axios({
+                url: '/api/login',
+                data: formData,
+                method: 'post'
+            }).then((response) => {
+                localStorage.setItem('token', response.data.token);
+                commit('loginSuccess');
+                return response.data.address_id;
+            }).catch((error) => {
+                commit('loginFailure');
+                throw error;
+            });
+        },
+        logout({ commit }) {
+            commit('pending');
+            return axios({
+                url: '/api/logout'
+            }).then(() => {
+                localStorage.removeItem('token');
+                commit('logout');
+            });
+        },
+        loadCountries ({ commit }) {
+            axios({
+                url: '/api/countries',
+            }).then((response) => {
+                commit('setCountries', response.data);
+                return response.data;
+            })
+        }
+    },
+    getters: {
+        isPending: state => {
+            return state.pending;
+        },
+        isLoggedIn: state => {
+            return state.isLoggedIn;
+        },
+        authToken () {
+            return localStorage.getItem('token')
+        }
+    }
+});
+
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
new file mode 100644
index 00000000..9d071964
--- /dev/null
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
@@ -0,0 +1,171 @@
+<template>
+    <div class="form-wrapper form--border" id="myep-main">
+	    <h1>Adressdaten</h1>
+        <div v-if="message" class="alert" :class="messageClass">
+            {{ message }}
+        </div>
+        <img :src="loaderUrl" alt="" v-show="loading">
+        <form @submit.prevent="saveAddress()" v-show="!loading">
+            <div class="form-group">
+                <label for="salutation" class="control-label">
+                    Anrede:
+                </label>
+                <select id="salutation" v-model="address.salutation" class="form-control">
+                    <option value="">Bitte wählen...</option>
+                    <option value="Frau">Frau</option>
+                    <option value="Herr">Herr</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="title" class="control-label">
+                    Titel:
+                </label>
+                <input id="title" type="text" v-model="address.title" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="name" class="control-label">
+                    Name:
+                </label>
+                <input id="name" type="text" v-model="address.name" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="firstName" class="control-label">
+                    Vorname:
+                </label>
+                <input id="firstName" type="text" v-model="address.firstName" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="dateOfBirth" class="control-label">
+                    Geburtsdatum:
+                </label>
+                <input id="dateOfBirth" type="text" ref="picker" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="gender" class="control-label">
+                    Geschlecht:
+                </label>
+                <select id="gender" v-model="address.gender" class="form-control">
+                    <option value="W">weiblich</option>
+                    <option value="M">männlich</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="street" class="control-label">
+                    Straße:
+                </label>
+                <input id="street" type="text" v-model="address.street" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="zipCode" class="control-label">
+                    PLZ:
+                </label>
+                <input id="zipCode" type="text" v-model="address.zipCode" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="city" class="control-label">
+                    Stadt:
+                </label>
+                <input id="city" type="text" v-model="address.city" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="country" class="control-label">
+                    Land:
+                </label>
+                <select id="country" v-model="address.country" class="form-control">
+                    <option v-for="country in countries" :value="country.code">{{ country.name }}</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <button type="submit" class="button button--active">
+                    Speichern
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    import Vue from 'vue'
+	import $ from 'jquery'
+    import axios from 'axios'
+    import flatpickr from 'flatpickr'
+    import { German } from 'flatpickr/dist/l10n/de'
+    import EventBus from '../../_bus'
+
+	export default {
+	    data () {
+	        return {
+	            picker: null,
+                message: '',
+                messageClass: '',
+	            address: {}
+			}
+        },
+		created () {
+	        this.fetchAddress();
+        },
+        mounted () {
+            Vue.nextTick(() => {
+                this.picker = $(this.$refs.picker).flatpickr({
+                    dateFormat: 'd.m.Y',
+                    locale: German,
+                    onChange: (selectedDates) => {
+                        this.address.dateOfBirth = flatpickr.formatDate(selectedDates[0], 'Y-m-d')
+                    }
+                });
+            });
+        },
+        watch: {
+	        '$route': 'fetchAddress'
+        },
+        methods: {
+            fetchAddress () {
+                this.loading = true;
+                axios({
+                    url: '/api/addresses',
+                    headers: {
+                        'x-auth-token': this.$store.getters.authToken
+                    }
+                }).then((response) => {
+                    this.address = response.data[0];
+                    this.picker.setDate(new Date(this.address.dateOfBirth), true);
+                    this.message = '';
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                    this.messageClass = 'alert-danger';
+                }).then(() => {
+                    EventBus.$emit('scrollTo', '#myep-main');
+                    this.loading = false;
+                });
+            },
+            saveAddress () {
+                this.loading = true;
+                axios({
+                    url: '/api/addresses/' + this.address.id,
+                    headers: {
+                        'x-auth-token': this.$store.getters.authToken
+                    },
+                    method: 'PUT',
+                    data: this.address
+                }).then(() => {
+                    this.message = 'Die Änderungen wurden gespeichert';
+                    this.messageClass = 'alert-success';
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                    this.messageClass = 'alert-danger';
+                }).then(() => {
+                    EventBus.$emit('scrollTo', '#myep-main');
+                    this.loading = false;
+                });
+            }
+        },
+        computed: {
+	        loaderUrl () {
+	            return this.$store.state.config.loaderUrl;
+            },
+            countries () {
+                return this.$store.state.countries;
+            }
+        }
+    }
+</script>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
new file mode 100644
index 00000000..3244587c
--- /dev/null
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
@@ -0,0 +1,51 @@
+<template>
+    <div id="app">
+        <ul class="nav nav-tabs">
+            <router-link :to="{ name: 'address' }" tag="li" active-class="active"><a>Adressdaten</a></router-link>
+            <router-link :to="{ name: 'events' }" tag="li" active-class="active"><a>Vorgänge</a></router-link>
+            <router-link :to="{ name: 'crm' }" tag="li" active-class="active"><a>CRM</a></router-link>
+            <li role="presentation"><a href="#" @click.prevent="logout()" v-if="isLoggedIn">Logout</a></li>
+        </ul>
+        <router-view></router-view>
+    </div>
+</template>
+
+<script>
+    const configElement = document.getElementById('appconfig');
+    const config = JSON.parse(configElement.innerHTML);
+
+    import axios from 'axios';
+
+    axios.defaults.headers.common['Accept'] = 'application/json';
+    axios.defaults.headers.put['Content-Type'] = 'application/json';
+    axios.defaults.baseURL = config.myEpApiBaseUrl;
+
+    import store from '../_store'
+
+    store.commit('initConfig', config);
+
+    import router from '../_router'
+
+    export default {
+        store,
+        router,
+        methods: {
+            logout () {
+                this.$store.dispatch('logout').then(() => {
+                    this.$router.push({ name: 'login' })
+                });
+            }
+        },
+        computed: {
+            isLoggedIn () {
+                return this.$store.getters.isLoggedIn;
+            },
+            loaderUrl () {
+                return this.$store.state.config.loaderUrl;
+            }
+        },
+        created () {
+            this.$store.dispatch('loadCountries');
+        }
+    }
+</script>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
new file mode 100644
index 00000000..cbaf75d0
--- /dev/null
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
@@ -0,0 +1,98 @@
+<template>
+    <div id="myep-main">
+        <h1>CRM Merkmale</h1>
+        <div v-if="message" class="alert alert-danger">
+            {{ message }}
+        </div>
+        <img :src="loaderUrl" alt="" v-if="loading">
+        <template v-if="!loading">
+            <h2>Selektionsmerkmale</h2>
+            <template v-for="selectionGroup in this.crmData.selectionGroups">
+                <h3>{{ selectionGroup.name}}</h3>
+                <div class="checkbox" v-for="selection in selectionGroup.selections">
+                    <label :class="{ 'disabled': selection.changeable }">
+                        <input type="checkbox" class="form-control" value="True" :checked="selection.value === 'True'" :disabled="selection.changeable === 'False'"/>
+                        <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+                        {{ selection.name }}
+                    </label>
+                </div>
+            </template>
+            <h2>CRM Aktionen</h2>
+            <div class="checkbox" v-for="action in this.crmData.actions">
+                <label>
+                    <input type="checkbox" class="form-control" value="True" :checked="action.value === 'True'"/>
+                    <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+                    {{ action.name }}
+                </label>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios'
+    import EventBus from '../../_bus'
+
+    export default {
+        data () {
+            return {
+                loading: false,
+                message: '',
+                crmData: []
+            }
+        },
+        created () {
+            this.fetchSelections();
+        },
+        watch: {
+            '$route': 'fetchSelections'
+        },
+        methods: {
+            fetchSelections () {
+                this.loading = true;
+                axios({
+                    url: '/api/crm-selections',
+                    headers: {
+                        'x-auth-token': this.$store.getters.authToken
+                    }
+                }).then((response) => {
+                    this.crmData = response.data[0];
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                }).then(() => {
+                    this.loading = false;
+                    EventBus.$emit('scrollTo', '#myep-main');
+                });
+            },
+            saveSelections () {
+                this.loading = false;
+                axios({
+                    url: '/api/crm-selections/' + this.crmData.id,
+                    headers: {
+                        'x-auth-token': this.$store.getters.authToken
+                    },
+                    method: 'PUT',
+                    data: this.crmData
+                }).then(() => {
+                    this.message = 'Die Änderungen wurden gespeichert';
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                }).then(() => {
+                    this.loading = false;
+                    EventBus.$emit('scrollTo', '#myep-main');
+                });
+            }
+        },
+        computed: {
+            loaderUrl () {
+                return this.$store.state.config.loaderUrl;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    label.disabled {
+        opacity: 0.5;
+    }
+</style>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
new file mode 100644
index 00000000..0300c536
--- /dev/null
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
@@ -0,0 +1,105 @@
+<template>
+    <div id="myep-main">
+        <h1>Vorgänge</h1>
+        <div v-if="message" class="alert alert-danger">
+            {{ message }}
+        </div>
+        <img :src="loaderUrl" alt="" v-if="loading">
+        <div class="table-responsive" v-if="!loading">
+            <table class="table table-striped table-condensed">
+                <thead>
+                    <tr>
+                        <th>Buchungsdatum</th>
+                        <th>Reisedatum</th>
+                        <th>Reise</th>
+                        <th>Teilnehmer</th>
+                        <th>Preis</th>
+                        <th>Status</th>
+                        <th>Best./Rg.</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="event of events">
+                        <td>{{ formatBookingDate(event.buchungsdatum) }}</td>
+                        <td>{{ event.reisedatum | date }}</td>
+                        <td>{{ event.reise }}</td>
+                        <td>
+                            <ul>
+                                <li v-for="customer in event.customers">{{ customer.name }}, {{ customer.vorname }}</li>
+                            </ul>
+                        </td>
+                        <td>{{ event.preis }} EUR</td>
+                        <td>{{ status[event.status] }}</td>
+                        <td><a :href="$store.state.config.myEpApiBaseUrl + '/api/events/' + event.id + '/confirmation?token=' + $store.getters.authToken" target="_blank"><i class="fa fa-file-pdf-o"></i></a></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios'
+    import dayjs from 'dayjs'
+    import 'dayjs/locale/de'
+    import EventBus from '../../_bus'
+
+	export default {
+	    data () {
+	        return {
+	            status: {
+	                'F': 'Festbuchung',
+                    'S': 'Stornierung',
+                    'F/S': 'Festbuchung',
+                    'O': 'Option',
+                    'U': 'Umbuchung',
+                },
+                loading: false,
+	            message: '',
+	            events: []
+			}
+        },
+        created () {
+            this.fetchEvents();
+        },
+        watch: {
+            '$route': 'fetchEvents'
+        },
+        methods: {
+            fetchEvents () {
+                this.loading = true;
+                axios({
+                    url: '/api/events',
+                    headers: {
+                        'x-auth-token': this.$store.getters.authToken
+                    }
+                }).then((response) => {
+                    this.events = response.data;
+                }).catch(() => {
+                    this.message = 'Es ist ein Fehler aufgetreten :(';
+                }).then(() => {
+                    EventBus.$emit('scrollTo', '#myep-main');
+                    this.loading = false;
+                });
+            },
+            formatBookingDate (date) {
+                if (!date) {
+                    return '-';
+                }
+                return dayjs(date).format('DD.MM.YYYY, HH:mm') + ' Uhr';
+            }
+        },
+        computed: {
+            loaderUrl () {
+                return this.$store.state.config.loaderUrl;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    td, th {
+        text-align: left;
+        vertical-align: top;
+    }
+</style>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
new file mode 100644
index 00000000..d3d84ca0
--- /dev/null
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="form-wrapper form--border" id="myep-main">
+        <h1>Login <img :src="loaderUrl" alt="" v-if="isPending"></h1>
+        <div v-if="message" class="alert alert-danger">
+            {{ message }}
+        </div>
+        <form @submit.prevent="login()">
+            <div class="form-group">
+                <label for="email" class="control-label">
+                    E-Mail
+                </label>
+                <input id="email" type="text" v-model="email" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="password" class="control-label">
+                    Passwort
+                </label>
+                <input id="password" type="password" v-model="password" class="form-control">
+            </div>
+            <div class="form-group">
+                <button type="submit" class="button button--active">
+                    Login
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    import EventBus from '../../_bus'
+
+	export default {
+	    data () {
+	        return {
+	            message: '',
+	            email: '',
+                password: ''
+            }
+        },
+        methods: {
+            login () {
+                if (!this.email || !this.password) {
+                    this.message = 'Bitte E-Mail und Passwort angeben';
+                    return;
+                }
+                this.$store.dispatch('login', {
+                    email: this.email,
+                    password: this.password
+                }).then(() => {
+                    this.$router.push({ name: 'address' });
+                }).catch(() => {
+                    this.message = 'Der Login ist fehlgeschlagen :('
+                }).then(() => {
+                    EventBus.$emit('scrollTo', '#myep-main');
+                });
+            }
+        },
+        computed: {
+            loaderUrl () {
+                return this.$store.state.config.loaderUrl;
+            },
+            isPending () {
+                return this.$store.getters.isPending;
+            }
+        }
+    }
+</script>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html
index 70b5972d..434fb135 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html
@@ -19,4 +19,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/FrontpageEvent.html b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/FrontpageEvent.html
index c719448b..07a1bdc8 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/FrontpageEvent.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/FrontpageEvent.html
@@ -15,4 +15,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Search.html b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Search.html
index ac87432e..76f02b65 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Search.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Search.html
@@ -13,4 +13,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html
index 1d0e0569..69f32f9a 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html
@@ -21,4 +21,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeft.html b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeft.html
index a48d8bd6..a1c7df51 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeft.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeft.html
@@ -34,4 +34,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeftEvent.html b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeftEvent.html
index 4a1cbbf5..0b6cd442 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeftEvent.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeftEvent.html
@@ -26,4 +26,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html
index b0079b99..3e538e0e 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html
@@ -36,4 +36,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRightEvent.html b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRightEvent.html
index fc826800..b1413cc1 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRightEvent.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRightEvent.html
@@ -26,4 +26,5 @@
         <f:render partial="ContactBar" arguments="{_all}"/>
     </div>
     <f:render partial="ConversionTracking" />
+    <f:render partial="Config" />
 </html>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Config.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Config.html
new file mode 100644
index 00000000..1bb3b28a
--- /dev/null
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Config.html
@@ -0,0 +1,6 @@
+<script type="application/json" id="appconfig">
+    {
+        "loaderUrl": <f:format.raw>"{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif', absolute: 1)}"</f:format.raw>,
+        "myEpApiBaseUrl": "https://myep.burn.dpn"
+    }
+</script>
diff --git a/webpack.config.js b/webpack.config.js
index 33be796e..dfdd9b93 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,4 @@
 const Encore = require('@symfony/webpack-encore');
-const webpack = require('webpack');
 
 // Create webpack config for ext:ep_theme
 Encore
@@ -11,7 +10,7 @@ Encore
     .addEntry('unichamp', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/unichamp.js')
     .addStyleEntry('rte', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss')
     .createSharedEntry('vendor', [
-        'jquery', 'vue', 'vue-session', 'flatpickr', 'jquery-lazy',
+        'jquery', 'vue', 'vue-session', 'vuex', 'vue-router', 'axios', 'flatpickr', 'jquery-lazy',
         'bootstrap-sass/assets/javascripts/bootstrap', 'slick-carousel',
         'dayjs', 'cookieconsent', 'picturefill', '@fancyapps/fancybox', 'leaflet'
     ])
@@ -27,12 +26,14 @@ Encore
         images: 'images/[name].[ext]'
     })
     .configureBabel(function (babelConfig) {
-        babelConfig.plugins = [ 'transform-object-rest-spread' ]
+        babelConfig.plugins = [ 'transform-object-rest-spread', 'syntax-dynamic-import' ]
     })
 ;
 
 const EpThemeConfig = Encore.getWebpackConfig();
+
 EpThemeConfig.name = 'EpThemeConfig';
+EpThemeConfig.output.chunkFilename = 'js/[name].[chunkhash:8].js';
 
 Encore.reset();
 
@@ -54,7 +55,7 @@ Encore
         images: 'images/[name].[ext]'
     })
     .configureBabel(function (babelConfig) {
-        babelConfig.plugins = [ 'transform-object-rest-spread' ]
+        babelConfig.plugins = [ 'transform-object-rest-spread', 'syntax-dynamic-import' ]
     })
 ;