diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
index 196f4868..60de1b17 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
@@ -62,13 +62,12 @@
 
 <script>
     import Vue from 'vue'
-    import { mapState, mapMutations } from 'vuex'
-    import axios from 'axios'
+    import { mapState, mapMutations, mapActions } from 'vuex'
     import flatpickr from 'flatpickr'
     import { German } from 'flatpickr/dist/l10n/de'
     import FormGroup from './components/FormGroup'
 
-	export default {
+    export default {
 	    components: {
 	        FormGroup
         },
@@ -76,15 +75,13 @@
 	        return {
 	            picker: null,
                 formErrors: {},
-                countries: []
 			}
         },
 		created () {
-            this.loadFormOptions();
-            this.$store.dispatch('loadAddress')
+            this.loadAddress()
                 .then(() => {
                     this.picker.setDate(new Date(this.userData.dateOfBirth), true);
-                });
+                })
         },
         mounted () {
             Vue.nextTick(() => {
@@ -99,37 +96,29 @@
             })
         },
         methods: {
-	        ...mapMutations(['alert', 'beginLoading', 'endLoading']),
-            loadFormOptions () {
-                this.beginLoading();
-                return axios({
-                    url: '/api/countries'
-                }).then(response => {
-                    this.countries = response.data
-                }).catch(error => {
-                }).finally(() => {
-                    this.endLoading()
-                });
-            },
+	        ...mapMutations(['alert']),
+            ...mapActions(['loadAddress', 'saveAddress']),
             save () {
-                this.formErrors = {};
-                this.$store.dispatch('saveAddress', this.userData)
+                this.formErrors = {}
+                this.saveAddress(this.userData)
                     .catch(error => {
                         this.alert({
                             message: 'Bitte überprüfe deine Eingaben.',
                             success: false,
-                        });
-                        const violations = error.response.data.violations;
-                        if (typeof violations !== 'undefined') {
-                            for (let violation of violations) {
-                                this.$set(this.formErrors, violation.property_path, violation.message);
+                        })
+                        error.response.then(data => {
+                            const violations = data.violations
+                            if (typeof violations !== 'undefined') {
+                                for (let violation of violations) {
+                                    this.$set(this.formErrors, violation.property_path, violation.message)
+                                }
                             }
-                        }
-                    });
+                        })
+                    })
             }
         },
         computed: {
-            ...mapState(['loading', 'userData'])
+            ...mapState(['loading', 'userData', 'countries'])
         }
     }
 </script>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
index 5d561e6f..d0d3ab09 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
@@ -11,7 +11,7 @@
                 <router-link @click.native="navVisible = false" :to="{ name: 'events' }" class="block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800" active-class="bg-zinc-400 text-zinc-800">Buchungen</router-link>
                 <router-link @click.native="navVisible = false" :to="{ name: 'teamer' }" class="block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800" active-class="bg-zinc-400 text-zinc-800" v-if="isTeamer">Teamer</router-link>
               </div>
-              <a class="block px-4 py-4 text-black hover:bg-zinc-400 hover:text-zinc-800" href="#" @click.prevent="logout()">Logout</a>
+              <a class="block px-4 py-4 text-black hover:bg-zinc-400 hover:text-zinc-800" href="#" @click.prevent="performLogout()">Logout</a>
             </div>
             <a href="#" class="lg:hidden p-4 text-black hover:text-zinc-800" :class="{ 'rotate-90': navVisible }" @click.prevent="navVisible = !navVisible">
               <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-    import { mapGetters, mapState } from 'vuex'
+    import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
     import store from './store'
     import router from './router'
 
@@ -39,12 +39,20 @@
         store,
         router,
         methods: {
-            logout () {
-                this.$store.dispatch('logout')
+            performLogout () {
+                this.logout()
                     .then(() => {
                         this.$router.replace({ name: 'login' })
                     }).catch(error => {});
-            }
+            },
+            ...mapMutations([
+                'initConfig',
+            ]),
+            ...mapActions([
+                'checkLoginState',
+                'loadCountries',
+                'logout',
+            ]),
         },
         data () {
             return {
@@ -56,11 +64,16 @@
             ...mapGetters(['isLoggedIn', 'isTeamer'])
         },
         mounted () {
-            this.$store.dispatch('init').then(() => {
-                if (this.isLoggedIn) {
-                    this.$router.replace({ name: 'address' })
-                }
-            })
+            this.initConfig()
+            this.checkLoginState()
+                .then(() => {
+                    if (this.isLoggedIn) {
+                        this.loadCountries()
+                            .then(() => {
+                                this.$router.replace({ name: 'address' })
+                            })
+                    }
+                })
         },
     }
 </script>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
index 0dbfa8da..33ba0e6c 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
@@ -171,8 +171,8 @@
     import ServiceSelect from './components/ServiceSelect'
     import ServicesOverview from './components/ServicesOverview'
     import TransportationSelect from './components/TransportationSelect'
-    import axios from 'axios'
-    import {mapGetters, mapMutations, mapState} from 'vuex'
+    import { mapGetters, mapMutations, mapState } from 'vuex'
+    import { checkStatus, defaultOptions } from './api'
 
     Vue.use(VueScrollTo)
 
@@ -222,78 +222,95 @@
         },
         methods: {
             ...mapMutations(['alert', 'beginLoading', 'endLoading']),
-            loadFormOptions () {
-                this.beginLoading();
-                return axios({
-                    url: '/api/countries',
-                }).then(response => {
-                    this.countries = response.data
-                }).catch(error => {
-                }).finally(() => {
-                    this.endLoading()
-                });
-            },
             loadBookingData () {
                 this.beginLoading('Lade Reise- und Buchungsdaten...')
-                return axios({
-                    url: `/api/booking/${this.bookingId}`
-                }).then(response => {
-                    this.bookingData = response.data.bookingData;
-                    this.participantData = response.data.participantData;
-                    this.travelData = response.data.travelData;
-                }).catch(() => {
-                    throw new Error('Reise- und Buchungsdaten konnten nicht geladen werden.');
-                }).finally(() => {
-                    this.endLoading()
-                })
+                const options = {
+                    ...defaultOptions
+                }
+                return fetch(`${this.config.myEpApiBaseUrl}/api/booking/${this.bookingId}`, options)
+                    .then(checkStatus)
+                    .then(response => response.json())
+                    .then(data => {
+                        this.bookingData = data.bookingData
+                        this.participantData = data.participantData
+                        this.travelData = data.travelData
+                    })
+                    .catch(() => {})
+                    .finally(() => {
+                        this.endLoading()
+                    })
             },
             loadEventData () {
                 this.beginLoading('Lade Vorgangsdaten...')
-                return axios({
-                    url: `/api/event/${this.bookingData.bookingNumber}`
-                }).then(response => {
-                    this.eventData = response.data;
-                }).catch(error => {
-                    throw new Error(error.response.data.message);
-                }).finally(() => {
-                    this.endLoading()
-                })
+                const options = {
+                    ...defaultOptions
+                }
+                return fetch(`${this.config.myEpApiBaseUrl}/api/event/${this.bookingData.bookingNumber}`, options)
+                    .then(checkStatus)
+                    .then(response => response.json())
+                    .then(data => {
+                        this.eventData = data
+                    })
+                    .catch(error => {
+                        throw new Error(error.message)
+                    })
+                    .finally(() => {
+                        this.endLoading()
+                    })
             },
             loadMutableFields () {
                 this.beginLoading('Lade mögliche Änderungen...')
-                return axios({
-                    url: `/api/mutable-fields/${this.travelData.busproId}`
-                }).then(response => {
-                    this.mutableFields = response.data;
-                }).catch(() => {
-                    throw new Error('Mögliche Änderungen konnten nicht geladen werden.');
-                }).finally(() => {
-                    this.endLoading()
-                })
+                const options = {
+                    ...defaultOptions
+                }
+                return fetch(`${this.config.myEpApiBaseUrl}/api/mutable-fields/${this.travelData.busproId}`, options)
+                    .then(checkStatus)
+                    .then(response => response.json())
+                    .then(data => {
+                        this.mutableFields = data
+                    })
+                    .catch(() => {
+                        throw new Error('Mögliche Änderungen konnten nicht geladen werden.');
+                    })
+                    .finally(() => {
+                        this.endLoading()
+                    })
             },
             loadContingents () {
                 this.beginLoading('Lade Kontingente...')
-                return axios({
-                    url: `/api/contingents/${this.travelData.busproId}`
-                }).then(response => {
-                    this.contingents = response.data;
-                }).catch(() => {
-                    throw new Error('Kontingente konnten nicht geladen werden.');
-                }).finally(() => {
-                    this.endLoading()
-                })
+                const options = {
+                    ...defaultOptions
+                }
+                return fetch(`${this.config.myEpApiBaseUrl}/api/contingents/${this.travelData.busproId}`, options)
+                    .then(checkStatus)
+                    .then(response => response.json())
+                    .then(data => {
+                        this.contingents = data
+                    })
+                    .catch(() => {
+                        throw new Error('Kontingente konnten nicht geladen werden.');
+                    })
+                    .finally(() => {
+                        this.endLoading()
+                    })
             },
             loadServices () {
                 this.beginLoading('Lade Leistungen...')
-                return axios({
-                    url: `/api/services/${this.travelData.busproId}`
-                }).then(response => {
-                    this.services = response.data;
-                }).catch(() => {
-                    throw new Error('Leistungen konnten nicht geladen werden.');
-                }).finally(() => {
-                    this.endLoading()
-                })
+                const options = {
+                    ...defaultOptions
+                }
+                return fetch(`${this.config.myEpApiBaseUrl}/api/services/${this.travelData.busproId}`, options)
+                    .then(checkStatus)
+                    .then(response => response.json())
+                    .then(data => {
+                        this.services = data
+                    })
+                    .catch(() => {
+                        throw new Error('Leistungen konnten nicht geladen werden.');
+                    })
+                    .finally(() => {
+                        this.endLoading()
+                    })
             },
             getAccommodationLabel (participant) {
                 if (participant.hasOwnProperty('accommodationId') && participant.accommodationId in this.contingents) {
@@ -423,32 +440,40 @@
                     return;
                 }
                 this.beginLoading()
-                axios({
-                    url: `/api/booking/${this.bookingId}`,
-                    method: 'put',
-                    data: {
+                const options = {
+                    ...defaultOptions,
+                    method: 'PUT',
+                    body: JSON.stringify({
                         participantData: this.participantData,
                         selectedTransportations: this.selectedTransportations,
                         remarks: this.bookingData.remarks,
-                    },
-                }).then(response => {
-                    this.alert({
-                      message: response.data.message,
-                      success: true,
-                    });
-                    this.dirty = false;
-                }).catch(error => {
-                    this.alert({
-                      message: error.response.data.message,
-                        success: false,
                     })
-                }).finally(() => {
-                    this.endLoading()
-                })
+                }
+                fetch(`${this.config.myEpApiBaseUrl}/api/booking/${this.bookingId}`, options)
+                    .then(checkStatus)
+                    .then(response => response.json())
+                    .then(data => {
+                        this.alert({
+                            message: data.message,
+                            success: true,
+                        })
+                        this.dirty = false
+                    })
+                    .catch(error => {
+                        error.response.then(data => {
+                            this.alert({
+                                message: data.message,
+                                success: false,
+                            })
+                        })
+                    })
+                    .finally(() => {
+                        this.endLoading()
+                    })
             }
         },
         computed: {
-            ...mapState(['loading']),
+            ...mapState(['config', 'loading']),
             ...mapGetters(['isGroupManager']),
             availableContingents () {
                 let filteredContingents = {};
@@ -500,8 +525,7 @@
         },
         mounted () {
             this.bookingId = this.$route.params.id
-            this.loadFormOptions()
-                .then(() => this.loadBookingData())
+            this.loadBookingData()
                 .then(() => this.loadEventData())
                 .then(() => this.loadMutableFields())
                 .then(() => this.loadContingents())
@@ -515,9 +539,6 @@
                         success: false,
                     });
                 })
-                .finally(() => {
-                    this.endLoading()
-                })
         }
     }
 </script>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue
index c5df36ef..7ee867fc 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue
@@ -51,7 +51,7 @@
 
 <script>
     import { mapState, mapMutations } from 'vuex'
-    import axios from 'axios'
+    import { defaultOptions, checkStatus } from './api'
 
     export default {
         data () {
@@ -62,43 +62,57 @@
             }
         },
         created () {
-            this.beginLoading();
+            this.beginLoading()
 
-            return axios({
-                url: '/api/crm-selections'
-            }).then(response => {
-                this.crmData = response.data
-            }).catch(error => {
-                this.alert({
-                    message: 'Es ist ein Fehler aufgetreten :(',
-                    success: false,
+            const options = {
+                ...defaultOptions
+            }
+
+            return fetch(`${this.config.myEpApiBaseUrl}/api/crm-selections`, options)
+                .then(checkStatus)
+                .then(response => response.json())
+                .then(data => {
+                    this.crmData = data
+                })
+                .catch(() => {
+                    this.alert({
+                        message: 'Es ist ein Fehler aufgetreten :(',
+                        success: false,
+                    })
+                })
+                .finally(() => {
+                    this.endLoading()
                 })
-            }).finally(() => {
-                this.endLoading()
-            });
         },
         methods: {
             ...mapMutations(['beginLoading', 'endLoading', 'alert']),
             save () {
-                this.beginLoading();
+                this.beginLoading()
 
-                return axios({
-                    url: '/api/crm-selections',
-                    method: 'put',
-                    data: this.crmData
-                }).then(() => {
-                    this.alert({
-                        message: 'Die Änderungen wurden gespeichert',
-                        success: true,
-                    });
-                }).catch(error => {
-                    this.alert({
-                        message: 'Es ist ein Fehler aufgetreten :(',
-                        success: false,
-                    });
-                }).finally(() => {
-                    this.endLoading();
-                });
+                const options = {
+                    ...defaultOptions,
+                    method: 'PUT',
+                    body: JSON.stringify(this.crmData)
+                }
+
+                return fetch(`${this.config.myEpApiBaseUrl}/api/crm-selections`, options)
+                    .then(checkStatus)
+                    .then(response => response.json())
+                    .then(() => {
+                        this.alert({
+                            message: 'Die Änderungen wurden gespeichert',
+                            success: true,
+                        })
+                    })
+                    .catch(() => {
+                        this.alert({
+                            message: 'Es ist ein Fehler aufgetreten :(',
+                            success: false,
+                        })
+                    })
+                    .finally(() => {
+                        this.endLoading()
+                    })
             },
             hasVisibleSelections (group) {
                 if (this.hiddenSelectionGroups.indexOf(group.id) !== -1) {
@@ -116,7 +130,7 @@
             }
         },
         computed: {
-            ...mapState(['loading'])
+            ...mapState(['config', 'loading'])
         }
     }
 </script>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
index 1d07c175..0060bf52 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
@@ -75,10 +75,10 @@
 </template>
 
 <script>
-import {mapState, mapMutations, mapGetters} from 'vuex'
-    import axios from 'axios'
+    import { mapState, mapMutations, mapGetters } from 'vuex'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
+    import { checkStatus, defaultOptions } from './api'
 
 	export default {
 	    data () {
@@ -96,18 +96,25 @@ import {mapState, mapMutations, mapGetters} from 'vuex'
         created () {
             this.beginLoading();
 
-            return axios({
-                url: '/api/events'
-            }).then(response => {
-                this.events = response.data;
-            }).catch(error => {
-                this.alert({
-                    message: 'Es ist ein Fehler aufgetreten :(',
-                    success: false,
-                });
-            }).finally(() => {
-                this.endLoading();
-            });
+            const options = {
+                ...defaultOptions
+            }
+
+            return fetch(`${this.config.myEpApiBaseUrl}/api/events`, options)
+                .then(checkStatus)
+                .then(response => response.json())
+                .then(data => {
+                    this.events = data
+                })
+                .catch(() => {
+                    this.alert({
+                        message: 'Es ist ein Fehler aufgetreten :(',
+                        success: false,
+                    })
+                })
+                .finally(() => {
+                    this.endLoading()
+                })
         },
         methods: {
             ...mapMutations(['beginLoading', 'endLoading', 'alert']),
@@ -118,11 +125,7 @@ import {mapState, mapMutations, mapGetters} from 'vuex'
                 return dayjs(date).format('DD.MM.YY')
             },
             getDownloadUrl (event, type) {
-                return this.config.myEpApiBaseUrl
-                    + '/api/events/'
-                    + event.id
-                    + '/' + type + '?token='
-                    + sessionStorage.getItem('myep-auth-token');
+                return `${this.config.myEpApiBaseUrl}/api/events/${event.id}/${type}`
             },
             calculateBalance (event) {
                 if (!event.price) {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Login.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Login.vue
index 7889e3b0..6fc2d982 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Login.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Login.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-    import { mapState, mapGetters, mapMutations } from 'vuex'
+    import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
     import FormGroup from './components/FormGroup'
 
 	export default {
@@ -66,6 +66,7 @@
         },
         methods: {
 	        ...mapMutations(['alert']),
+            ...mapActions(['loadCountries']),
 	        toggleMode () {
 	            this.mode = this.mode === 'login' ? 'reset' : 'login';
 	            this.password = ''
@@ -91,7 +92,10 @@
                     email: this.email,
                     password: this.password
                 }).then(() => {
-                    this.$router.push({ name: 'address' });
+                    this.loadCountries()
+                        .then(() => {
+                            this.$router.replace({ name: 'address' })
+                        })
                 }).catch(error => {
                 });
             },
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue
index 076c2f56..99662943 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue
@@ -12,7 +12,7 @@
 
 <script>
     import { mapState, mapMutations } from 'vuex'
-    import axios from 'axios'
+    import { checkStatus, defaultOptions } from './api'
 
 	export default {
         methods: {
@@ -28,27 +28,34 @@
 
                 this.beginLoading();
 
-                return axios({
-                    url: '/api/newsletter',
-                    method: 'put',
-                    data
-                }).then(() => {
-                    this.alert({
-                        message: 'Die Änderungen wurden gespeichert',
-                        success: true,
-                    });
-                }).catch(error => {
-                    this.alert({
-                        message: 'Es ist ein Fehler aufgetreten :(',
-                        success: false,
-                    });
-                }).finally(() => {
-                    this.endLoading();
-                });
+                const options = {
+                    ...defaultOptions,
+                    method: 'PUT',
+                    body: JSON.stringify(data)
+                }
+
+                return fetch(`${this.config.myEpApiBaseUrl}/api/newsletter`, options)
+                    .then(checkStatus)
+                    .then(response => response.json())
+                    .then(() => {
+                        this.alert({
+                            message: 'Die Änderungen wurden gespeichert',
+                            success: true,
+                        })
+                    })
+                    .catch(() => {
+                        this.alert({
+                            message: 'Es ist ein Fehler aufgetreten :(',
+                            success: false,
+                        })
+                    })
+                    .finally(() => {
+                        this.endLoading()
+                    })
             }
         },
         computed: {
-	        ...mapState(['loading', 'userData']),
+	        ...mapState(['config', 'loading', 'userData']),
             statusMessage () {
                 let message = 'Du bist aktuell';
                 message += this.userData.newsletter ? ' ' : ' <strong>nicht</strong> ';
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
index dd6a48a8..91658766 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
@@ -84,10 +84,10 @@
 
 <script>
     import { mapState, mapMutations } from 'vuex'
-    import axios from 'axios'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
     import FormGroup from './components/FormGroup'
+    import { checkStatus, defaultOptions } from './api'
 
     export default {
         components: {
@@ -121,42 +121,55 @@
 
                 this.beginLoading();
 
-                return axios({
-                    url: '/api/teamer-data',
-                    method: 'put',
-                    data
-                })
-                .then(() => {
-                    this.alert({
-                        message: 'Die Änderungen wurden gespeichert',
-                        success: true,
-                    });
-                }).catch(error => {
-                    this.alert({
-                        message: 'Es ist ein Fehler aufgetreten :(',
-                        success: false,
-                    });
-                }).finally(() => {
-                    this.endLoading();
-                });
+
+                const options = {
+                    ...defaultOptions,
+                    method: 'PUT',
+                    body: JSON.stringify(data)
+                }
+
+                return fetch(`${this.config.myEpApiBaseUrl}/api/teamer-data`, options)
+                    .then(checkStatus)
+                    .then(response => response.json())
+                    .then(() => {
+                        this.alert({
+                            message: 'Die Änderungen wurden gespeichert',
+                            success: true,
+                        })
+                    })
+                    .catch(() => {
+                        this.alert({
+                            message: 'Es ist ein Fehler aufgetreten :(',
+                            success: false,
+                        })
+                    })
+                    .finally(() => {
+                        this.endLoading()
+                    })
             }
         },
         created () {
             this.beginLoading();
 
-            return axios({
-                url: '/api/teamer-data'
-            }).then(response => {
-                this.abilities = response.data.abilities;
-                this.timeFrames = response.data.timeFrames;
-                this.jobProfiles = response.data.jobProfiles;
-            }).catch(error => {
-            }).finally(() => {
-                this.endLoading();
-            });
+            const options = {
+                ...defaultOptions
+            }
+
+            return fetch(`${this.config.myEpApiBaseUrl}/api/teamer-data`, options)
+                .then(checkStatus)
+                .then(response => response.json())
+                .then(data => {
+                    this.abilities = data.abilities
+                    this.timeFrames = data.timeFrames
+                    this.jobProfiles = data.jobProfiles
+                })
+                .catch(() => {})
+                .finally(() => {
+                    this.endLoading()
+                })
         },
         computed: {
-            ...mapState(['userData', 'loading'])
+            ...mapState(['config', 'userData', 'loading'])
         },
         filters: {
             period (timeFrame) {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/api/index.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/api/index.js
new file mode 100644
index 00000000..55e53ea1
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/api/index.js
@@ -0,0 +1,18 @@
+const defaultOptions = {
+    headers: {
+        'Content-Type': 'application/json'
+    },
+    credentials: 'include',
+}
+
+function checkStatus(response) {
+    if (response.ok) {
+        return response
+    } else {
+        const error = new Error(response.status)
+        error.response = response.json()
+        throw error
+    }
+}
+
+export { checkStatus, defaultOptions }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormGroup.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormGroup.vue
index 1c536978..8adfad18 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormGroup.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormGroup.vue
@@ -4,7 +4,7 @@
             {{ label }}:
         </label>
         <slot></slot>
-        <span class="block text-sm mt-1" v-show="error">
+        <span class="block text-sm mt-1 text-red-500" v-show="error">
             {{ error }}
         </span>
     </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/store/index.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/store/index.js
index 9ee409f2..0e54dde2 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/store/index.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/store/index.js
@@ -1,13 +1,10 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import axios from 'axios'
+import { checkStatus, defaultOptions } from '../api'
 
 const configElement = document.getElementById('appconfig')
 const config = JSON.parse(configElement.innerHTML)
 
-axios.defaults.baseURL = config.myEpApiBaseUrl
-axios.defaults.withCredentials = true
-
 Vue.use(Vuex)
 
 const defaultUserData = {
@@ -33,6 +30,7 @@ export default new Vuex.Store({
         statusMessage: '',
         authenticated: false,
         userData: defaultUserData,
+        countries: [],
         alert: {
             message: '',
             success: true,
@@ -72,125 +70,170 @@ export default new Vuex.Store({
         }
     },
     actions: {
-        init({commit}) {
-            commit('initConfig');
-            commit('beginLoading');
+        checkLoginState({commit, state}) {
+            commit('beginLoading')
 
-            return axios({
-                url: '/api/ping',
-                method: 'get',
-            }).then(response => {
-                commit('login')
-            }).catch(() => {
-            }).finally(() => {
-                commit('endLoading');
-            })
+            const options = {
+                ...defaultOptions
+            }
+
+            return fetch(`${state.config.myEpApiBaseUrl}/api/ping`, options)
+                .then(checkStatus)
+                .then(response => response.json())
+                .then(() => {
+                    commit('login')
+                })
+                .catch(() => {})
+                .finally(() => {
+                    commit('endLoading')
+                })
+        },
+        loadCountries({commit, state}) {
+            commit('beginLoading')
+
+            const options = {
+                ...defaultOptions
+            }
+
+            return fetch(`${state.config.myEpApiBaseUrl}/api/countries`, options)
+                .then(checkStatus)
+                .then(response => response.json())
+                .then(data => {
+                    commit('setCountries', data)
+                })
+                .catch(() => {})
+                .finally(() => {
+                    commit('endLoading')
+                })
         },
         login({commit}, credentials) {
-            commit('beginLoading');
+            commit('beginLoading')
 
-            return axios({
-                url: '/api/login',
-                method: 'post',
-                data: {
+            const options = {
+                ...defaultOptions,
+                method: 'POST',
+                body: JSON.stringify({
                     username: credentials.email,
                     password: credentials.password
-                },
-            }).then(response => {
-                commit('login', response.data);
-            }).catch(error => {
-                commit('logout');
-                commit('alert', {
-                    message: 'Der Login ist fehlgeschlagen :(',
-                    success: false,
-                });
-                throw error;
-            }).finally(() => {
-                commit('endLoading');
-            });
+                })
+            }
+
+            return fetch(`${config.myEpApiBaseUrl}/api/login`, options)
+                .then(checkStatus)
+                .then(response => response.json())
+                .then(data => {
+                    commit('login', data)
+                })
+                .catch(error => {
+                    commit('logout')
+                    commit('alert', {
+                        message: 'Der Login ist fehlgeschlagen :(',
+                        success: false,
+                    });
+                    throw error
+                })
+                .finally(() => {
+                    commit('endLoading')
+                })
         },
         logout({commit}) {
-            commit('beginLoading');
+            commit('beginLoading')
 
-            return axios({
-                url: '/api/logout',
-            }).catch(error => {
-            }).finally(() => {
-                commit('logout');
-                commit('endLoading');
-            });
+            const options = {
+                ...defaultOptions
+            }
+
+            return fetch(`${config.myEpApiBaseUrl}/api/logout`, options)
+                .then(checkStatus)
+                .catch(() => {})
+                .finally(() => {
+                    commit('logout')
+                    commit('endLoading')
+                })
         },
         resetPassword({commit}, email) {
-            commit('beginLoading');
+            commit('beginLoading')
 
-            return axios({
-                url: '/api/reset-password',
-                data: {email: email},
-                method: 'post'
-            }).then(response => {
-                return response;
-            }).finally(() => {
-                commit('endLoading');
-            });
+            const options = {
+                ...defaultOptions,
+                method: 'POST',
+                body: JSON.stringify({
+                    email
+                })
+            }
+
+            return fetch(`${config.myEpApiBaseUrl}/api/reset-password`, options)
+                .then(checkStatus)
+                .then(response => response.json())
+                .then(response => response)
+                .finally(() => {
+                    commit('endLoading')
+                })
         },
         register({commit}, userData) {
-            commit('beginLoading');
+            commit('beginLoading')
 
-            return axios({
-                url: '/api/register',
-                data: userData,
-                method: 'post'
-            }).then(response => {
-                return response;
-            }).finally(() => {
-                commit('endLoading');
-            });
+            const options = {
+                ...defaultOptions,
+                method: 'POST',
+                body: JSON.stringify(userData)
+            }
+
+            return fetch(`${config.myEpApiBaseUrl}/api/register`, options)
+                .then(checkStatus)
+                .then(response => response.json())
+                .then(data => data)
+                .finally(() => {
+                    commit('endLoading')
+                })
         },
         loadAddress({commit}) {
-            commit('beginLoading');
+            commit('beginLoading')
 
-            return axios({
-                url: '/api/address',
-                method: 'get',
-            }).then(response => {
-                commit('setUserData', response.data);
-                if (response.data.watchlist) {
-                    commit('setWatchlist', response.data.watchlist);
-                }
-            }).catch(() => {
-                commit('alert', {
-                    message: 'Es ist ein Fehler aufgetreten :(',
-                    success: false,
-                });
-            }).finally(() => {
-                commit('endLoading');
-            });
-        },
-        saveAddress({commit, state}, data) {
-            commit('beginLoading');
+            const options = {
+                ...defaultOptions,
+            }
 
-            return axios({
-                url: '/api/address',
-                method: 'put',
-                data
-            }).then(() => {
-                commit('alert', {
-                    message: 'Die Änderungen wurden gespeichert',
-                    success: true,
-                });
-            })
-            .catch(error => {
-                if (error.config.status >= 500) {
+            return fetch(`${config.myEpApiBaseUrl}/api/address`, options)
+                .then(checkStatus)
+                .then(response => response.json())
+                .then(data => {
+                    commit('setUserData', data)
+                    if (data.watchlist) {
+                        commit('setWatchlist', data.watchlist)
+                    }
+                })
+                .catch(() => {
                     commit('alert', {
                         message: 'Es ist ein Fehler aufgetreten :(',
                         success: false,
-                    });
-                } else {
-                    throw error;
-                }
-            }).finally(() => {
-                commit('endLoading');
-            });
+                    })
+                })
+                .finally(() => {
+                    commit('endLoading')
+                })
+        },
+        saveAddress({commit, state}, data) {
+            commit('beginLoading')
+
+            const options = {
+                ...defaultOptions,
+                method: 'PUT',
+                body: JSON.stringify(data)
+            }
+
+            return fetch(`${config.myEpApiBaseUrl}/api/address`, options)
+                .then(checkStatus)
+                .then(response => response.json())
+                .then(() => {
+                    commit('alert', {
+                        message: 'Die Änderungen wurden gespeichert',
+                        success: true,
+                    })
+                })
+                .finally(() => {
+                    commit('endLoading')
+                })
         }
     },
     getters: {