diff --git a/frontend/quasar.conf.js b/frontend/quasar.conf.js
index ec9e8bf..4df0238 100644
--- a/frontend/quasar.conf.js
+++ b/frontend/quasar.conf.js
@@ -109,14 +109,14 @@ module.exports = function (ctx) {
       },
       env: ctx.dev
         ? { // Base URL for API-Calls: DEV
-          //API: JSON.stringify('https://seserver.se.hs-heilbronn.de:8443/buga19geocaching')
           API: JSON.stringify('http://localhost:8080'),
+          // API: JSON.stringify('https://seserver.se.hs-heilbronn.de:8443/buga19geocaching'),
           USER_API: JSON.stringify('https://seserver.se.hs-heilbronn.de:8443/buga19usermanagement')
         }
         : { // Base URL for API-Calls: PRODUCTION (build)
-          API: JSON.stringify('https://seserver.se.hs-heilbronn.de:8443/buga19geocaching'),
+          API: JSON.stringify('http://localhost:8080'),
+          //API: JSON.stringify('https://seserver.se.hs-heilbronn.de:8443/buga19geocaching'),
           USER_API: JSON.stringify('https://seserver.se.hs-heilbronn.de:8443/buga19usermanagement')
-          //API: JSON.stringify('http://localhost:8080')
         }
     },
 
diff --git a/frontend/src/boot/qr-scanner.js b/frontend/src/boot/qr-scanner.js
index 9660d77..193e1ff 100644
--- a/frontend/src/boot/qr-scanner.js
+++ b/frontend/src/boot/qr-scanner.js
@@ -1,5 +1,5 @@
 import VueQrcodeReader from "vue-qrcode-reader";
-// import qrscanner from "../components/qr-scanner";
+// import qrscanner from "../components/qrscanner";
 
 // "async" is optional
 export default async ({ Vue }) => {
diff --git a/frontend/src/components/qrscanner.vue b/frontend/src/components/qrscanner.vue
new file mode 100644
index 0000000..a2abe74
--- /dev/null
+++ b/frontend/src/components/qrscanner.vue
@@ -0,0 +1,210 @@
+<template>
+  <div>
+    <div class="q-ma-md" v-if="askForPermission">
+
+      <q-btn @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="positive" stack
+             icon="filter_center_focus"
+      label="QR-Code scannen" class="full-width q-mt-sm"/>
+      <p class="q-mt-sm"><b>Hinweis:</b> Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
+    </div>
+    <div v-if="activateCamera">
+      <qrcode-drop-zone @decode="onDecode" @init="logErrors">
+        <qrcode-stream :paused="paused" @decode="onDecode" @init="onInit">
+          <div v-if="validating" >
+            <div class="light-dimmed fit">
+            </div>
+            <q-spinner-oval
+              class="absolute-center"
+              color="primary"
+              size="10em"
+            />
+          </div>
+        </qrcode-stream>
+      </qrcode-drop-zone>
+      <div class="q-ma-md">
+        <q-btn v-if="!askForPermission" @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="primary" stack
+               label="Schließen" class="full-width"/>
+      </div>
+    </div>
+    <qrcode-capture v-if="noStreamApiSupport" @decode="onDecode"/>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'qrscanner',
+    data() {
+      return {
+        askForPermission: true,
+        activateCamera: false,
+        isValid: false,
+        validating: false,
+        loading: false,
+        paused: false,
+        result: null,
+        params: null,
+        noStreamApiSupport: false,
+
+        cacheID: null,
+      }
+    },
+    created() {
+      this.setCacheId();
+    },
+    methods: {
+      setCacheId() {
+        console.log("qr-code: 'cache' from url: " + this.$route.params.cache);
+        this.cacheID = this.$route.params.cache ? this.$route.params.cache : null;
+      },
+
+      async onDecode(content) {
+        this.result = content;
+
+        this.pauseCamera();
+
+        this.validating = true;
+        this.isValid = await this.validate();
+
+        this.validating = false;
+        this.unPauseCamera();
+        // window.setTimeout(() => {
+        // }, 2000)
+        // //this.unPauseCamera();
+      },
+
+      validate() {
+        return new Promise(resolve => {
+          let params = this.setParams();
+          console.log(params);
+          if (!params.cacheID || !params.stationID || !params.durchgefuehrterCacheID || !params.token) {
+            console.log("Mindestens 1 Parameter konnte nicht erkannt werden!");
+            resolve(false);
+          } else if (isNaN(params.cacheID) || isNaN(params.stationID) || isNaN(params.durchgefuehrterCacheID)) {
+            console.log("Mindestens 1 Parameter ist fehlerhaft!");
+            resolve(false);
+          } else {
+            this.$axios.put('/api/checkStation', null, { params })
+              .then((response) => {
+                console.log("resolve(true)");
+                console.log("cache access definition");
+                console.log(response.data.cacheAccesDefinition);
+                resolve(true);
+                if (Number(response.data.cacheAccesDefinition.id) === 0) {
+                  this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
+                } else if (Number(response.data.cacheAccesDefinition.id) === 1) {
+                  this.$router.push({path: `/CacheEnd/${params.cacheID}`});
+                }
+              }).catch((error) => {
+              console.log("resolve(false)");
+              let header = "";
+              let message = "";
+              if (error.response) {
+                console.log(error.response);
+                if (this.$route.path === "/qr-scanner") {
+                  console.log(this.$route);
+                  header = "Falsche Station!";
+                  message = "Bitte setze einen bereits angefangenen Cache " +
+                    "an der richtigen Station fort oder beginne einen neuen Cache indem du eine der " +
+                    "Startstationen einscannst. Du findest die Startstationen über die Karte.";
+                } else {
+                  header = "Falsche Station!";
+                  message = "Du hast diese Station schon gescannt oder sie ist nicht die korrekte Folgestation.";
+                  message += "Prüfe ob du das Rätsel korrekt gelöst hast und finde die richtige Station.";
+                }
+              } else if (error.request) {
+                console.log(error.request);
+                header = "Server nicht erreichbar!";
+                message = "Die Verbindung zum Server ist gestört. Versuchen Sie es später noch einmal.";
+              } else {
+                console.log(error);
+                console.log('Error', error.message);
+                header = "Fehler!";
+                message = error.message;
+              }
+              this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
+              resolve(false);
+            });
+            window.setTimeout(() => {
+            }, 2000)
+          }
+        })
+      },
+
+      setParams() {
+        console.log("setParams: ");
+        let params = {};
+        if (localStorage.getItem('userToken')) {
+          params.token = JSON.parse(localStorage.getItem('userToken')).token;
+        }
+        params.cacheID = this.result.split('/')[0];
+        params.stationID = this.result.split('/')[1];
+        params.durchgefuehrterCacheID = this.CacheID ? this.cacheID : params.cacheID;
+        console.log(params.cacheID + " und " + params.stationID);
+        this.updateProps();
+        return params;
+      },
+
+      updateProps() {
+        console.log("emit result!")
+        this.$emit('result', this.params)
+      },
+      updateCameraState() {
+        console.log("Camera State:")
+        console.log(!this.askForPermission)
+        this.$emit('camera', !this.askForPermission)
+      },
+
+      pauseCamera() {
+        this.paused = true
+      },
+
+      unPauseCamera() {
+        this.paused = false
+      },
+
+      toggleCamera(bool) {
+        this.activateCamera = bool;
+        if (this.askForPermission === false) {
+          this.askForPermission = true;
+          this.updateCameraState();
+        }
+      },
+
+      logErrors(promise) {
+        promise.catch(console.error)
+      },
+
+      async onInit(promise) {
+        this.loading = true;
+        try {
+          await promise
+        } catch (error) {
+          if (error.name === 'StreamApiNotSupportedError') {
+            this.noStreamApiSupport = true
+          }
+        } finally {
+          this.loading = false;
+          this.askForPermission = false;
+          this.updateCameraState();
+
+        }
+      }
+    },
+    beforeRouteUpdate(to, from, next) {
+      this.askForPermission = true;
+      this.activateCamera = false;
+      this.isValid = false;
+      this.validating = false;
+      this.loading = false;
+      this.paused = false;
+      this.result = null;
+      this.params = null;
+      this.noStreamApiSupport = false;
+      this.setCacheId();
+      next()
+    },
+  }
+</script>
+
+<style>
+</style>
diff --git a/frontend/src/layouts/MyLayout.vue b/frontend/src/layouts/MyLayout.vue
index 943c3f7..23d2b46 100644
--- a/frontend/src/layouts/MyLayout.vue
+++ b/frontend/src/layouts/MyLayout.vue
@@ -52,7 +52,7 @@
           to="/qr-scanner"
         >
           <q-item-section avatar>
-            <q-icon name="camera"/>
+            <q-icon name="filter_center_focus"/>
           </q-item-section>
           <q-item-section>
             <q-item-label>QR-Code Scanner</q-item-label>
@@ -73,6 +73,7 @@
           </q-item-section>
         </q-item>
         <q-item
+          v-if="this.$store.state.auth.isAuthenticated"
           clickable
           class="text-primary"
           v-ripple
@@ -80,7 +81,7 @@
           to="/mycaches"
         >
           <q-item-section avatar>
-            <q-icon name="map"/>
+            <q-icon name="bookmarks"/>
           </q-item-section>
           <q-item-section>
             <q-item-label>Meine Caches</q-item-label>
@@ -131,6 +132,23 @@
           </q-item-section>
         </q-item>
         <q-item
+          v-if="this.$store.state.auth.isAuthenticated"
+          clickable
+          class="text-primary"
+          v-ripple
+          tag="a"
+          @click="logout()"
+          to="/"
+        >
+          <q-item-section avatar>
+            <q-icon name="logout"/>
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Logout</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item
+          v-if="!this.$store.state.auth.isAuthenticated"
           clickable
           class="text-primary"
           v-ripple
@@ -141,7 +159,7 @@
             <q-icon name="logout"/>
           </q-item-section>
           <q-item-section>
-            <q-item-label>{{ loginText }}</q-item-label>
+            <q-item-label>Login</q-item-label>
           </q-item-section>
         </q-item>
       </q-list>
@@ -177,22 +195,10 @@
     name: "MyLayout",
     data() {
       return {
-        // dialog: {
-        //   color: this,
-        //   show: true,
-        //   message: "Hallo Fehler! Dies ist ein Beispiel Fehler."
-        // },
         leftDrawerOpen: this.$q.platform.is.desktop,
-        //menuButtonVisible: !this.$q.platform.is.desktop,
-        //leftDrawerOpen: true,
-        //miniState: true
       };
     },
     computed: {
-      loginText() {
-        let text = this.$store.state.auth.isAuthenticated ? "Logout" : "Login";
-        return text;
-      },
       dialogShow: {
         get() {
           // console.log("get dialogShow: "+this.$store.state.dialog.dialog.show)
@@ -228,12 +234,25 @@
         },
       }
     },
+    created() {
+      this.evalAuthentication();
+    },
     methods: {
       //openURL
       dialogClose() {
         console.log("dialogClose(): ")
         this.$store.commit('dialog/RESET_MESSAGE_DIALOG');
       },
+      evalAuthentication: function () {
+        this.$store.commit('auth/SET_AUTHENTICATED');
+        // this.$store.commit('auth/SET_USER');
+      },
+      logout: function () {
+        console.log("logout()");
+        console.log(JSON.parse(localStorage.getItem('userToken')));
+        localStorage.removeItem('userToken');
+        this.evalAuthentication();
+      },
 
     }
   };
diff --git a/frontend/src/pages/Cache.vue b/frontend/src/pages/Cache.vue
index 183e401..42c9e40 100644
--- a/frontend/src/pages/Cache.vue
+++ b/frontend/src/pages/Cache.vue
@@ -210,6 +210,7 @@
               this.$store.commit('cacheCollector/RESET_NEW_CACHE');
               this.$router.push({path: '/overview'});
             }).catch((error) => {
+              //TODO: Fehlermeldungen
             // Error
             let msg;
             let title;
diff --git a/frontend/src/pages/CacheEnd.vue b/frontend/src/pages/CacheEnd.vue
index 7ba09e1..93e4f8c 100644
--- a/frontend/src/pages/CacheEnd.vue
+++ b/frontend/src/pages/CacheEnd.vue
@@ -2,23 +2,15 @@
   <div>
     <div class="q-ma-md">
       <p class="text-h4">{{ cacheName }}</p>
-      <p class="text-h5">{{ end1 + rankingPoints + end2 }}</p>
+      <p class="text-h5">Herzlichen Glückwunsch!</p>
+      <p class="">Du hast alle Stationen gefunden und diesen Cache damit erfolgreich abgeschlossen!</p>
+      <p class="">Dir wurden <b>{{ rankingPoints }} Punkte</b> gutgeschrieben.</p>
+      <p class="text-h5">Deine Belohnung:</p>
+      <p v-html="cache.reward.rewardDescription"></p>
 
       <div class="column q-gutter-y-md">
-        <q-btn unelevated v-if="isLoggedIn" color="primary" label="Zur Rangliste" to="/ranking/"/>
-        <q-btn unelevated v-if="isLoggedIn" color="primary" label="Zur Belohnung" @click="reward = true" />
-          <q-dialog v-model="reward">
-            <q-card>
-              <q-card-section>
-                <div class="text-h6">Deine Belohnung: </div>
-              </q-card-section>
-
-              <q-card-section>
-                <div>{{ cache.reward.rewardDescription }}</div>
-              </q-card-section>
-            </q-card>
-          </q-dialog>
-        <q-btn unelevated color="primary" label="Zur Startseite" to="/"/>
+        <q-btn unelevated color="primary" label="Rangliste" to="/ranking/"/>
+        <q-btn unelevated color="primary" label="Startseite" to="/"/>
       </div>
     </div>
   </div>
@@ -28,21 +20,15 @@
   export default {
     data() {
       return {
-        reward: false,
         cacheID: "",
         cacheName: "",
         cache: {
           reward: "",
         },
         rankingPoints: "",
-        end1: "Gut gemacht, Du hast alle Stationen dieses Cache gefunden. Dir wurden ",
-        end2: " Punkte gutgeschrieben." //TODO Punkte wirklich gutschreiben, ggf. Cache auf erledigt setzen
       }
     },
     computed: {
-      isLoggedIn() {
-        return localStorage.getItem('userToken'); //TODO Methode umschreiben --> funktioniert das?
-      }
     },
     created() {
       this.fetchData();
diff --git a/frontend/src/pages/CacheStart.vue b/frontend/src/pages/CacheStart.vue
index 9c525c3..635b544 100644
--- a/frontend/src/pages/CacheStart.vue
+++ b/frontend/src/pages/CacheStart.vue
@@ -4,59 +4,30 @@
            class="q-mb-md "
            :ratio="16/9"
            src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
+           v-if="!cameraActive"
     ></q-img>
-    <div class="q-ma-md">
+    <div v-if="!cameraActive" class="q-ma-md">
       <p class="text-h4">{{ cacheName }}</p>
       <p>{{ instruction }}</p>
 
-      <div class="column q-gutter-y-md">
-        <div v-if="askForPermission">
-          <p>Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
-
-          <q-btn @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="positive" stack
-                 icon="photo_camera"
-                 label="QR-Code scannen" class="full-width"/>
-        </div>
-        <div v-if="activateCamera">
-          <qrcode-drop-zone @decode="onDecode" @init="logErrors">
-            <qrcode-stream :paused="paused" @decode="onDecode" @init="onInit">
-              <div v-if="validating">
-                <div class="light-dimmed fit">
-                </div>
-                <q-spinner-oval
-                  class="absolute-center"
-                  color="primary"
-                  size="10em"
-                />
-              </div>
-            </qrcode-stream>
-          </qrcode-drop-zone>
-        </div>
-        <qrcode-capture v-if="noStreamApiSupport" @decode="onDecode"/>
-      </div>
     </div>
+    <qrscanner @result="updateResult($event)" @camera="updateCamera($event)" />
   </div>
 </template>
 
 <script>
+  import qrscanner from "../components/qrscanner";
   export default {
+    name: "CacheStart",
+    components: {qrscanner},
     data() {
       return { //TODO Lageplan einbinden
+        result: null,
+        cameraActive: false,
         cacheID: "",
         cacheName: "",
         //code: "8/7",
         instruction: "Bitte begib Dich zu der auf der Karte angezeigten Position. An dieser Position wirst Du einen QR-Code finden. Wenn du ihn gefunden hast, drücke den Knopf zum Starten des QR-Scanners und gib uns die Berechtigung, Deine Kamera zu öffnen. Nachdem Du den QR-Code gescannt hast, erhältst du ein Rätsel zur Position der nächsten Station. Die Lösung zu dem Rätsel ist also das Versteck des nächsten QR-Codes.",
-        // Following Params belong to QR-Code Scanner
-        askForPermission: true,
-        activateCamera: false,
-        isValid: false,
-        validating: false,
-        loading: false,
-        paused: false,
-        result: null,
-        params: null,
-        noStreamApiSupport: false
-
       }
     },
     created() {
@@ -74,123 +45,17 @@
           })
       },
 
-      checkStation() {
-        let params = this.setParams();
-        console.log(params);
-        this.$axios.get('/api/checkStation', {params})
-          .then((response) => {
-            console.log(response);
-            console.log("Anfrage erfolgreich");
-
-          }).catch((error) => {
-          console.log(error);
-          console.log("Anfrage fehlgeschlagen");
-        })
-        this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`})
+      updateResult(event) {
+        console.log("updateResult()");
+        console.log(event);
+        this.result = event;
       },
 
-      setParams() {
-        console.log("setParams: ");
-        let params = {};
-        params.cacheID = this.result.split('/')[0];
-        params.stationID = this.result.split('/')[1];
-        params.durchgefuehrterCacheID = this.cacheID;
-        console.log("CacheID: " + params.cacheID + " und StationID: " + params.stationID);
-        console.log(params.durchgefuehrterCacheID);
-        if (localStorage.getItem('userToken')) {
-          params.token = JSON.parse(localStorage.getItem('userToken')).token;
-        }
-        return params;
+      updateCamera(event) {
+        console.log("updateCamera()");
+        this.cameraActive = event;
       },
 
-      async onDecode(content) {
-        this.result = content;
-
-        this.pauseCamera();
-
-        this.validating = true;
-        this.isValid = await this.validate();
-        this.validating = false;
-
-        this.unPauseCamera();
-        // window.setTimeout(() => {
-        //   this.unPauseCamera();
-        // }, 2000)
-      },
-
-      validate() {
-        return new Promise(resolve => {
-
-          let params = this.setParams();
-          this.$axios.get('/api/checkStation', {params})
-            .then((response) => {
-              console.log("resolve(true)");
-              console.log("cache access definition");
-              console.log(response.data.cacheAccesDefinition);
-              resolve(true);
-              if (Number(response.data.cacheAccesDefinition.id) === 0) {
-                this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
-              } else if (Number(response.data.cacheAccesDefinition.id) === 1) {
-                this.$router.push({path: `/CacheEnd/${params.cacheID}`});
-              }
-            }).catch((error) => {
-            console.log("resolve(false)");
-            // Error
-            let msg;
-            let title;
-            if (error.response) {
-              // The request was made and the server responded with a status code
-              title = "Problem with response!";
-              msg = error.response.data.message
-                ? error.response.data.message
-                : error.response.data;
-            } else if (error.request) {
-              // The request was made but no response was received
-              title = "Problem with request!";
-              msg = "Der Server antwortet nicht."
-              console.log(error.request);
-            } else {
-              // Something happened in setting up the request that triggered an Error
-              title = "Error";
-              msg = error.message;
-              console.log('Error', error.message.data);
-            }
-            console.log(error.config);
-            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
-            resolve(false);
-          });
-        })
-      },
-
-      pauseCamera() {
-        this.paused = true
-      },
-
-      unPauseCamera() {
-        this.paused = false
-      },
-
-      toggleCamera(bool) {
-        this.activateCamera = bool
-      },
-
-      logErrors(promise) {
-        promise.catch(console.error)
-      },
-
-      async onInit(promise) {
-        this.loading = true;
-        try {
-          await promise
-        } catch (error) {
-          if (error.name === 'StreamApiNotSupportedError') {
-            this.noStreamApiSupport = true
-          }
-        } finally {
-          this.loading = false;
-          this.askForPermission = false;
-        }
-      }
     }
   }
 </script>
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 56efa31..ec2a41d 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -30,6 +30,7 @@
                   color="primary"
                   class="full-width"
                   @click="login"
+                  @keyup.enter="login"
                   unelevated
                 >
                   <template v-slot:loading>
@@ -46,6 +47,16 @@
                   unelevated
                   @click="logout"
                 />
+                <div class="q-pt-md">
+                  <q-btn
+                    :disabled="userAuthenticated"
+                    label="Registrieren"
+                    color="primary"
+                    class="full-width q-mt-md"
+                    unelevated
+                    to="/register"
+                  />
+                </div>
               </div>
             </div>
           </div>
@@ -63,17 +74,9 @@
         user: {
           email: "",
           password: "",
-          //token: "",
-          // evalAuthentication: false
         },
       };
     },
-    // beforeMount: {
-    //   init: function () {
-    //     this.evalAuthentication();
-    //     console.log("initiated");
-    //   }
-    // },
     created() {
       this.evalAuthentication();
       console.log("created: initiated");
@@ -140,16 +143,6 @@
       logout: function () {
         console.log("logout()");
         console.log(JSON.parse(localStorage.getItem('userToken')));
-        // this.$axios.get('/api/logout', {
-        //     params: {
-        //       token: JSON.parse(localStorage.getItem('userToken'))
-        //     }
-        //   })
-        //   .then((response) => {
-        //     console.log("GET/POST /api/logout/ - response: " + response.data);
-        //   })
-        //   .catch((error) => {
-        //   });
         localStorage.removeItem('userToken');
         this.evalAuthentication();
       },
diff --git a/frontend/src/pages/MyCaches.vue b/frontend/src/pages/MyCaches.vue
index 1bd6be3..d226d47 100644
--- a/frontend/src/pages/MyCaches.vue
+++ b/frontend/src/pages/MyCaches.vue
@@ -29,7 +29,6 @@
             >
               <q-expansion-item
                 class=""
-                expand-icon-toggle
                 expand-separator
                 icon="location_on"
                 :label="startedCache.cache.name"
@@ -62,7 +61,6 @@
             <q-card class="q-mb-md" v-for="finishedCache in startedCaches.filter(cache => cache.cacheAccesDefinition.id === 1)" :key="finishedCache.id">
               <q-expansion-item
                 class=""
-                expand-icon-toggle
                 expand-separator
                 icon="location_on"
                 :label="finishedCache.cache.name"
diff --git a/frontend/src/pages/Overview.vue b/frontend/src/pages/Overview.vue
index 22575e3..3d127fd 100644
--- a/frontend/src/pages/Overview.vue
+++ b/frontend/src/pages/Overview.vue
@@ -44,11 +44,13 @@
                 </q-item>
                 <q-item class="q-pr-sm reverse q-gutter-x-sm">
                   <q-btn @click="startCache(cache.id)" unelevated color="positive" stack icon="arrow_forward"
-                         label="Starten" size="sm"/>
-                  <q-btn disable v-if="hasAdminState" @click="editCache(cache.id)" unelevated color="amber" stack
-                         icon="edit" label="Bearbeiten" size="sm"/>
+                         label="Starten" size="xs"/>
                   <q-btn v-if="hasAdminState" @click="deleteCache(cache.id)" unelevated color="negative" stack
-                         icon="delete" label="Löschen" size="sm"/>
+                  icon="delete" label="Löschen" size="xs"/>
+                  <q-btn disable v-if="hasAdminState" @click="editCache(cache.id)" unelevated color="primary" stack
+                         icon="edit" label="Bearbeiten" size="xs"/>
+                  <q-btn v-if="hasAdminState" @click="generateQrCodes(cache.id)" unelevated color="primary" stack
+                         icon="image" label="QR-Codes" size="xs"/>
                 </q-item>
               </q-expansion-item>
             </q-card>
@@ -174,16 +176,13 @@
       },
       startCache(cacheID) {
         console.log("startCache()");
-        // const userToken = JSON.parse(localStorage.getItem('userToken')).token;
-        // let params = {cacheID: cacheID};
-        // if (userToken != null) {
-        //   params.token = userToken;
-        // }
-        // console.log(params);
         this.$store.state.currentCache.cache = this.caches.find(cache => cache.id === Number(cacheID));
         console.log(this.$store.state.currentCache.cache);
         this.$store.state.currentCache.currentCacheID = Number(cacheID);
         this.$router.push({path: `/CacheStart/${cacheID}`})
+      },
+      generateQrCodes(cacheID) {
+        this.$router.push({path: `/generator/${cacheID}`})
       }
     }
   }
diff --git a/frontend/src/pages/Profile.vue b/frontend/src/pages/Profile.vue
index e8e61f2..f2ecffe 100644
--- a/frontend/src/pages/Profile.vue
+++ b/frontend/src/pages/Profile.vue
@@ -141,17 +141,17 @@
 </template>
 
 <style>
-  .my-custom th {
-    color: #027BE3 !important;
-  }
+  /*.my-custom th {*/
+  /*  color: #027BE3 !important;*/
+  /*}*/
 
-  .my-custom tr {
-    color: #027BE3 !important;
-  }
+  /*.my-custom tr {*/
+  /*  color: #027BE3 !important;*/
+  /*}*/
 
-  .my-custom td {
-    color: #027BE3 !important;
-  }
+  /*.my-custom td {*/
+  /*  color: #027BE3 !important;*/
+  /*}*/
 </style>
 <script>
   //import {dom} from 'quasar'
@@ -163,7 +163,6 @@
         inviteMail: "",
         currentTeamStatus: "",
         teamStatus: "",
-        userName: null,
         email: null,
         userRanking: null,
         teamName: null,
@@ -193,23 +192,19 @@
         ],
         data: [
           {
-            name: 'Mein Nutzername',
-            userData: this.userName,
-          },
-          {
-            name: 'Meine Email',
+            name: 'E-Mail',
             userData: this.email,
           },
           {
-            name: 'Meine Ranglistenposition',
+            name: 'Rang',
             userData: this.userRanking,
           },
           {
-            name: 'Mein Team',
+            name: 'Team',
             userData: this.teamName,
           },
           {
-            name: 'Teamranglistenposition',
+            name: 'Team-Rang',
             userData: this.teamRanking,
           },
         ],
@@ -294,8 +289,6 @@
     created: function () {
       this.$store.commit('auth/SET_AUTHENTICATED');
       this.$store.commit('auth/SET_USER');
-      this.userName = JSON.parse(localStorage.getItem('userToken')).name;
-      this.data[0].userData = this.userName;
       this.email = JSON.parse(localStorage.getItem('userMail'));
       this.data[1].userData = this.email;
       //this.getPersonalRanking();
diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue
index 93f0e8f..aefa82d 100644
--- a/frontend/src/pages/Register.vue
+++ b/frontend/src/pages/Register.vue
@@ -1,20 +1,26 @@
 <template>
   <div class="q-pa-md">
-    <form class="register">
+    <form class="register" autocomplete="off">
       <div class="q-pa-md">
         <div class="column q-gutter-lg" style="">
           <div class="col">
             <div class="">
               <div class="" style="max-width: 440px">
+                <<<<<<< HEAD
                 <q-input outlined filled stack-label v-model="user.name" type="text"
                          label="Nutzername eingeben"
                          :rules="[val=>val.length>=2||'Name muss mindestens 2 Zeichen lang sein!']"/>
+                =======
+                <q-input lazy-rules outlined filled stack-label v-model="user.email" type="text" label="E-Mail"
+                         :rules="[val=>validateEmail(val)||'Bitte gültige E-Mail angeben!']"/>
+                >>>>>>> develop
               </div>
             </div>
           </div>
           <div class="col">
             <div class="">
               <div class="" style="max-width: 440px">
+                <<<<<<< HEAD
                 <q-input outlined filled stack-label v-model="user.email" type="text" label="Email eingeben"
                          :rules="[val=>validateEmail(val)||'Email muss valide sein']"/>
               </div>
@@ -26,24 +32,38 @@
                 <q-input outlined filled stack-label v-model="user.checkemail" type="text"
                          label="Email erneut eingeben" placeholer="Email"
                          :rules="[val=>val===user.email||'Email stimmt nicht überein']"/>
+                =======
+                <q-input lazy-rules outlined filled stack-label v-model="user.checkemail" type="text"
+                         label="E-Mail erneut eingeben" placeholer="Email"
+                         :rules="[val=>val===user.email||'E-Mail stimmt nicht überein!']"/>
+                >>>>>>> develop
               </div>
             </div>
           </div>
           <div class="col">
             <div class="">
               <div class="" style="max-width: 440px">
+                <<<<<<< HEAD
                 <q-input outlined filled stack-label v-model="user.password" type="password"
                          label="Passwort eingeben"
-                         :rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
+                =======
+                <q-input lazy-rules outlined filled stack-label v-model="user.password" type="password"
+                         label="Passwort"
+                >>>>>>> develop
+                  :rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
               </div>
             </div>
           </div>
           <div class="col">
             <div class="">
               <div class="" style="max-width: 440px">
+                <<<<<<< HEAD
                 <q-input outlined filled stack-label v-model="user.checkpassword" type="password"
-                         label="Passwort erneut eingeben"
-                         :rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/>
+                =======
+                <q-input lazy-rules outlined filled stack-label v-model="user.checkpassword" type="password"
+                >>>>>>> develop
+                  label="Passwort erneut eingeben"
+                  :rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/>
               </div>
             </div>
           </div>
@@ -72,23 +92,38 @@
     data() {
       return {
         user: {
-          name: "",
-          email: "",
-          checkemail: "",
-          password: "",
-          checkpassword: "",
-        },
-      }
+          < < < < < < < HEAD
+        name: "",
+      === === =
+    >>>>>>>
+      develop
+      email: "",
+        checkemail
+    :
+      "",
+        password
+    :
+      "",
+        checkpassword
+    :
+      "",
+    },
+    }
     },
     computed: {
       validationSuccesful() {
+      <<<<<<<
+        HEAD
         if (this.user.name.length >= 2
-          && this.validateEmail(this.user.email)
-          && this.user.email === this.user.checkemail
-          && this.user.password.length >= 8
-          && this.user.password === this.user.checkpassword) {
-          return true;
-        }
+        && this.validateEmail(this.user.email)
+        === === =
+          if (this.validateEmail(this.user.email)
+            >>> >>> > develop
+            && this.user.email === this.user.checkemail
+            && this.user.password.length >= 8
+            && this.user.password === this.user.checkpassword) {
+            return true;
+          }
         return false;
       }
     },
@@ -104,7 +139,7 @@
 
         if (this.user.email === this.user.checkemail && this.user.password === this.user.checkpassword) {
           const data = {
-            name: this.user.name,
+            name: this.user.email,
             password: this.user.password,
             email: this.user.email,
             roles: [
@@ -121,36 +156,32 @@
             }
           })
             .then((response) => {
+              console.log(response.data);
               if (response.status === 201) {
                 this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
                   message: "Deine Registrierung war erfolgreich!",
                   title: "Registrierungsprozess",
                   color: "blue"
                 });
+                this.autoLogin();
               }
             })
             .catch((error) => {
               let message;
-              let header = "Fehler: ";
+              let header = "Unbekannter Fehler...";
               if (error.response) {
-                console.log("ERROR RESPONSE")
-                // The request was made and the server responded with a status code
-                // that falls out of the range of 2xx
-                message = error.response.data.error;
-                header += error.response.status;
+                console.log(error.response)
+                if (error.response.status === 409) {
+                  message = "Die E-Mail-Adresse wird bereits verwendet!";
+                  header = "Anmeldedaten überprüfen!";
+                }
               } else if (error.request) {
-                // The request was made but no response was received
-                // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
-                // http.ClientRequest in node.js
-                message = error.request;
-              } else {
-                // Something happened in setting up the request that triggered an Error
-                console.log('Error', error.message);
-                message = error.message;
+                console.log(error.request);
+                header = "Anfrage fehlgeschlagen!";
+                message = "Die Verbindung zum Server ist gestört. Versuchen Sie es später noch einmal.";
               }
-              console.log(error.config);
-              this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: message, title: header,});
-            })
+              this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: message, title: header});
+            });
         } else {
 
           if (this.user.email != this.user.checkemail) {
@@ -167,19 +198,43 @@
         }
       },
       login() {
-
+        console.log("MasterUser()")
         const logindata = {
           email: "register@bugageocaching.de",
           password: "reguser2019"
         };
+      <<<<<<<
+        HEAD
 
         console.log("GET /api/login/ - json: " + JSON.stringify(logindata));
 
+      ======
+        =
+      >>>>>>>
+        develop
         this.$axios.post(process.env.USER_API + '/account/login', logindata)
           .then((response) => {
             localStorage.setItem('registerToken', JSON.stringify(response.data));
+          });
+      },
+      autoLogin() {
+        console.log("autoLogin()");
+        const data = {
+          email: this.user.email,
+          password: this.user.password,
+        };
+        console.log(data);
+        this.$axios.post(process.env.USER_API + '/account/login', data)
+          .then((response) => {
+            localStorage.setItem('userToken', JSON.stringify(response.data));
+            localStorage.setItem('userMail', JSON.stringify(data.email));
+            this.$store.commit('auth/SET_AUTHENTICATED');
+            this.$store.commit('auth/SET_USER');
+            this.$router.push({path: `/overview`});
           })
           .catch((error) => {
+          <<<<<<<
+            HEAD
             let message;
             let header = "Fehler: ";
             if (error.response) {
@@ -200,7 +255,15 @@
             }
             console.log(error.config);
             this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: message, title: header,});
+          ======
+            =
+              this.$router.push("/login");
+          >>>>>>>
+            develop
           })
+          .finally(() => {
+          });
+
       },
     },
   };
diff --git a/frontend/src/pages/StationView.vue b/frontend/src/pages/StationView.vue
index 1a0ee7a..990e5b1 100644
--- a/frontend/src/pages/StationView.vue
+++ b/frontend/src/pages/StationView.vue
@@ -4,77 +4,38 @@
            class="q-mb-md "
            :ratio="16/9"
            src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
+           v-if="!cameraActive"
     ></q-img>
-    <div class="q-ma-md">
+    <div class="q-ma-md" v-if="!cameraActive">
       <p class="text-h4">{{ cache.name }}</p>
       <p class="text-h5">Station {{ showCacheProgress }}</p>
-<!--      <p class="text-h5">Station {{ data.station.position }}</p>-->
       <p>{{ station.description }}</p>
-      <!--<q-input-->
-      <!--v-model="description"-->
-      <!--filled-->
-      <!--type="textarea"-->
-      <!--/>-->
-      <!--<p class="text-h5 q-mt-md">Location</p>-->
       <div class="column q-gutter-y-md">
-        <div v-if="askForPermission">
-          <p>Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
-
-          <q-btn @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="positive" stack
-                 icon="photo_camera"
-                 label="QR-Code scannen" class="full-width"/>
-        </div>
-        <div v-if="activateCamera">
-          <qrcode-drop-zone @decode="onDecode" @init="logErrors">
-            <qrcode-stream :paused="paused" @decode="onDecode" @init="onInit">
-              <div v-if="validating">
-                <div class="light-dimmed fit">
-                </div>
-                <q-spinner-oval
-                  class="absolute-center"
-                  color="primary"
-                  size="10em"
-                />
-              </div>
-            </qrcode-stream>
-          </qrcode-drop-zone>
-        </div>
-        <qrcode-capture v-if="noStreamApiSupport" @decode="onDecode"/>
       </div>
     </div>
+    <qrscanner @result="updateResult($event)" @camera="updateCamera($event)" />
   </div>
 </template>
 
 <script>
+  import qrscanner from "../components/qrscanner";
   export default {
     name: "Station",
-
+    components: {qrscanner},
     data() {
       return {
-        //code: "",
         cacheID: "",
         cacheName: "",
-        //cache: null,
         cache: {
           name: "",
           stationen: [],
         },
         station: {},
-
-        // Following Params belong to QR-Code Scanner
-        askForPermission: true,
-        activateCamera: false,
-        isValid: false,
-        validating: false,
-        loading: false,
-        paused: false,
+        cameraActive: false,
         result: null,
-        params: null,
-        noStreamApiSupport: false
-
       }
     },
-    beforeRouteUpdate (to, from, next) {
+    beforeRouteUpdate(to, from, next) {
       console.log("beforeRouteUpdate: reset data and fetch");
       this.cacheID = "";
       this.cacheName = "";
@@ -83,16 +44,6 @@
         stationen: [],
       };
       this.station = {};
-      this.askForPermission = true;
-      this.activateCamera = false;
-      this.isValid = false;
-      this.validating = false;
-      this.loading = false;
-      this.paused = false;
-      this.result = null;
-      this.params = null;
-      this.noStreamApiSupport = false;
-
       this.fetchData();
       next()
     },
@@ -136,109 +87,16 @@
           })
       },
 
-      setParams() {
-        console.log("setParams: ");
-        let params = {};
-        params.cacheID = this.result.split('/')[0];
-        params.stationID = this.result.split('/')[1];
-        params.durchgefuehrterCacheID = params.cacheID;
-        console.log(params.durchgefuehrterCacheID);
-        console.log(params.cacheID + " und " + params.stationID);
-        if (localStorage.getItem('userToken')) {
-          params.token = JSON.parse(localStorage.getItem('userToken')).token;
-        }
-        return params;
+      updateResult(event) {
+        console.log("updateResult()");
+        console.log(event);
+        this.result = event;
       },
 
-      async onDecode(content) {
-        this.result = content;
-
-        this.pauseCamera();
-
-        this.validating = true;
-        this.isValid = await this.validate();
-        this.validating = false;
-
-        this.unPauseCamera();
-        // window.setTimeout(() => {
-        //   this.unPauseCamera();
-        // }, 2000)
+      updateCamera(event) {
+        console.log("updateCamera()");
+        this.cameraActive = event;
       },
-
-      validate() {
-        return new Promise(resolve => {
-
-          let params = this.setParams();
-          this.$axios.get('/api/checkStation', {params})
-            .then((response) => {
-              console.log("resolve(true)");
-              console.log("cache access definition");
-              console.log(response.data.cacheAccesDefinition);
-              resolve(true);
-              if (Number(response.data.cacheAccesDefinition.id) === 0) {
-                this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
-              } else if (Number(response.data.cacheAccesDefinition.id) === 1) {
-                this.$router.push({path: `/CacheEnd/${params.cacheID}`});
-              }
-            }).catch((error) => {
-            console.log("resolve(false)");
-            // Error
-            let msg;
-            let title;
-            if (error.response) {
-              // The request was made and the server responded with a status code
-              title = "Problem with response!";
-              msg = error.response.data.message
-                ? error.response.data.message
-                : error.response.data;
-            } else if (error.request) {
-              // The request was made but no response was received
-              title = "Problem with request!";
-              msg = "Der Server antwortet nicht."
-              console.log(error.request);
-            } else {
-              // Something happened in setting up the request that triggered an Error
-              title = "Error";
-              msg = error.message;
-              console.log('Error', error.message.data);
-            }
-            console.log(error.config);
-            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
-            resolve(false);
-          });
-        })
-      },
-
-      pauseCamera() {
-        this.paused = true
-      },
-
-      unPauseCamera() {
-        this.paused = false
-      },
-
-      toggleCamera(bool) {
-        this.activateCamera = bool
-      },
-
-      logErrors(promise) {
-        promise.catch(console.error)
-      },
-
-      async onInit(promise) {
-        this.loading = true;
-        try {
-          await promise
-        } catch (error) {
-          if (error.name === 'StreamApiNotSupportedError') {
-            this.noStreamApiSupport = true
-          }
-        } finally {
-          this.loading = false;
-          this.askForPermission = false;
-        }
-      }
-
     }
   }
 </script>
diff --git a/frontend/src/pages/qr-generator.vue b/frontend/src/pages/qr-generator.vue
new file mode 100644
index 0000000..5138ed4
--- /dev/null
+++ b/frontend/src/pages/qr-generator.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="q-ma-md">
+    <p class="text-h4">QR-Generator</p>
+    <p class="text-h5">Cache: {{ cacheName }}</p>
+    <div class="row q-col-gutter-md">
+      <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 items-start" v-for="(station, index) in stationen" :key="index">
+          <p class="text-h6 q-my-sm">Station {{ index + 1 }}</p>
+        <q-card class="">
+          <img class="full-width q-pa-md bg-white" :src="imgBaseURL + cacheId +'/'+ station.id" alt="">
+        </q-card>
+          <p class="q-my-sm">{{ cacheId }}/{{ station.id }}</p>
+      </div>
+    </div>
+      <q-btn to="/overview" unelevated color="primary" stack
+             label="Schließen" class="full-width"/>
+  </div>
+</template>
+
+<script>
+  export default {
+    // name: 'PageName',
+    data() {
+      return {
+        cacheName: "",
+        cacheId: 0,
+        stationen: [],
+        imgBaseURL: "https://api.qrserver.com/v1/create-qr-code/?size=500x500&data="
+      };
+    },
+
+    created() {
+      this.fetchData();
+    },
+
+    methods: {
+      fetchData() {
+        this.$axios.get('/api/allCaches')
+          .then((response) => {
+            console.log("/api/allCaches");
+            console.log(response.data);
+            const cache = response.data.find(cache => cache.id === Number(this.$route.params.cache));
+            this.cacheName = cache.name;
+            this.cacheId = cache.id;
+            this.stationen = cache.stationen;
+          })
+      },
+
+    },
+
+    beforeRouteUpdate(to, from, next) {
+      this.fetchData();
+      next()
+    },
+
+  }
+</script>
+
+<style>
+</style>
diff --git a/frontend/src/pages/qr-scanner.vue b/frontend/src/pages/qr-scanner.vue
index e111c73..e5859f3 100644
--- a/frontend/src/pages/qr-scanner.vue
+++ b/frontend/src/pages/qr-scanner.vue
@@ -1,148 +1,29 @@
 <template>
-  <div >
-    <div class="q-ma-md" v-if="askForPermission">
-      <p>Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
-
-      <q-btn @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="positive" stack
-             icon="photo_camera"
-             label="QR-Code scannen" class="full-width"/>
+  <div>
+    <div v-if="!cameraActive" class="q-ma-md">
+      <p class="text-h4">QR-Scanner</p>
+      <p class="">Mit diesem Scanner kannst du die nächste Station deines Caches einscannen
+        oder einen neuen Cache beginnen indem du eine der Startstationen einscannst.
+        Du findest die Startstationen über die Karte.</p>
     </div>
-    <div v-if="activateCamera">
-      <qrcode-drop-zone @decode="onDecode" @init="logErrors">
-        <qrcode-stream :paused="paused" @decode="onDecode" @init="onInit">
-          <div v-if="validating" >
-            <div class="light-dimmed fit">
-            </div>
-            <q-spinner-oval
-              class="absolute-center"
-              color="primary"
-              size="10em"
-            />
-          </div>
-        </qrcode-stream>
-      </qrcode-drop-zone>
-    </div>
-    <qrcode-capture v-if="noStreamApiSupport" @decode="onDecode"/>
+    <qrscanner @camera="cameraState($event)" />
   </div>
 </template>
 
 <script>
+  import qrscanner from "../components/qrscanner";
   export default {
-    //name: 'qrscanner',
+    name: 'Scanner',
+    components: {qrscanner},
     data() {
       return {
-        askForPermission: true,
-        activateCamera: false,
-        isValid: false,
-        validating: false,
-        loading: false,
-        paused: false,
-        result: null,
-        params: null,
-        noStreamApiSupport: false
+        cameraActive: false,
       }
     },
 
     methods: {
-      async onDecode(content) {
-        this.result = content;
-
-        this.pauseCamera();
-
-        this.validating = true;
-        this.isValid = await this.validate();
-        this.validating = false;
-
-        this.unPauseCamera();
-        // window.setTimeout(() => {
-        //   this.unPauseCamera();
-        // }, 2000)
-      },
-
-      validate() {
-        return new Promise(resolve => {
-          let params = this.setParams();
-          this.$axios.get('/api/checkStation', {params})
-            .then((response) => {
-              console.log("resolve(true)");
-              console.log("cache access definition");
-              console.log(response.data.cacheAccesDefinition);
-              resolve(true);
-              if (Number(response.data.cacheAccesDefinition.id) === 0) {
-                this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
-              } else if (Number(response.data.cacheAccesDefinition.id) === 1) {
-                this.$router.push({path: `/CacheEnd/${params.cacheID}`});
-              }
-            }).catch((error) => {
-            console.log("resolve(false)");
-            // Error
-            let msg;
-            let title;
-            if (error.response) {
-              // The request was made and the server responded with a status code
-              title = "Problem with response!";
-              msg = error.response.data.message
-                ? error.response.data.message
-                : error.response.data;
-            } else if (error.request) {
-              // The request was made but no response was received
-              title = "Problem with request!";
-              msg = "Der Server antwortet nicht."
-              console.log(error.request);
-            } else {
-              // Something happened in setting up the request that triggered an Error
-              title = "Error";
-              msg = error.message;
-              console.log('Error', error.message.data);
-            }
-            console.log(error.config);
-            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
-            resolve(false);
-          });
-        })
-      },
-
-      setParams() {
-        console.log("setParams: ");
-        let params = {};
-        params.cacheID = this.result.split('/')[0];
-        params.stationID = this.result.split('/')[1];
-        params.durchgefuehrterCacheID = params.cacheID;
-        console.log(params.cacheID + " und " + params.stationID);
-        if (localStorage.getItem('userToken')) {
-          params.token = JSON.parse(localStorage.getItem('userToken')).token;
-        }
-        return params;
-      },
-
-      pauseCamera() {
-        this.paused = true
-      },
-
-      unPauseCamera() {
-        this.paused = false
-      },
-
-      toggleCamera(bool) {
-        this.activateCamera = bool
-      },
-
-      logErrors(promise) {
-        promise.catch(console.error)
-      },
-
-      async onInit(promise) {
-        this.loading = true;
-        try {
-          await promise
-        } catch (error) {
-          if (error.name === 'StreamApiNotSupportedError') {
-            this.noStreamApiSupport = true
-          }
-        } finally {
-          this.loading = false;
-          this.askForPermission = false;
-        }
+      cameraState(event) {
+        this.cameraActive = event;
       }
     },
   }
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 8c7a194..713eb99 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -2,25 +2,86 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 
 import routes from "./routes";
-
+import {axiosInstance} from "../boot/axios";
 Vue.use(VueRouter);
 
+//import store from "../store/index";
+
 /*
  * If not building with SSR mode, you can
  * directly export the Router instantiation
  */
 
-export default function(/* { store, ssrContext } */) {
+export default function({ store }/* { store, ssrContext } */) {
   const Router = new VueRouter({
     scrollBehavior: () => ({ x: 0, y: 0 }),
     routes,
-
+    store,
     // Leave these as is and change from quasar.conf.js instead!
     // quasar.conf.js -> build -> vueRouterMode
     // quasar.conf.js -> build -> publicPath
     mode: process.env.VUE_ROUTER_MODE,
     base: process.env.VUE_ROUTER_BASE
   });
+  Router.beforeEach((to, from, next) => {
+    console.log("before Routing...");
+    const isPublic = to.matched.some(record => record.meta.public);
+    const onlyWhenLoggedOut = to.matched.some(record => record.meta.onlyWhenLoggedOut);
+    const onlyAdmin = to.matched.some(record => record.meta.onlyAdmin);
+    const loggedIn = localStorage.getItem('userToken')
+      ? JSON.parse(localStorage.getItem('userToken'))
+      : false;
+    console.log(`isPublic: ${isPublic} \nonlyWhenLoggedOut: ${onlyWhenLoggedOut} \nonlyAdmin: ${onlyAdmin}`);
+    console.log("loggedIn");
+    console.log(loggedIn);
+    const isAdmin = loggedIn ? loggedIn.roles.find(x => x.role === "ADMIN" && x.domain === "geocaching.de") : false;
+    //const isAdmin = true;
 
+    if (!isPublic && !loggedIn) {
+      return next({
+        path:'/login',
+        query: {redirect: to.fullPath}  // Store the full path to redirect the user to after login
+      });
+    }
+    if ((loggedIn && onlyWhenLoggedOut) || (loggedIn && onlyAdmin && !isAdmin)) {
+      return next('/')
+    }
+    if (isPublic) {
+      return next()
+    }
+    if (!isPublic && loggedIn) {
+      axiosInstance.get('/api/getUser', {
+        params: {
+          token: loggedIn.token
+        }
+      })
+        .then((response) => {
+          console.log("Token valid!");
+          return next();
+        })
+        .catch((error) => {
+          console.log("Catch Block: ");
+          console.log("Token invalid!");
+          if (error.response) {
+            console.log(error.response.data);
+            console.log(error.response.status);
+            console.log(error.response.headers);
+            //store.commit('auth/SET_LOGOUT');
+            store.commit('dialog/NEW_MESSAGE_DIALOG', {
+              message: "Ihr Token ist nicht mehr gültig. Bitte loggen Sie sich erneut ein.",
+              title: "Bitte erneut anmelden.",
+              color: "blue", });
+            localStorage.removeItem('userToken');
+            return next('/Login');
+          } else {
+            console.log("unexpected behaviour");
+            console.log(error);
+            return next();
+          }
+        });
+    }
+    console.log(`isPublic: ${isPublic} \nonlyWhenLoggedOut: ${onlyWhenLoggedOut} \nonlyAdmin: ${onlyAdmin}`);
+    //return next();
+  });
   return Router;
 }
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index 6a39f45..8586b23 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -2,88 +2,183 @@ const routes = [
   {
     path: "/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/Index.vue") }]
+    children: [{ path: "", component: () => import("pages/Index.vue") }],
+    meta: {
+      public: true,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
 
     path: "/overview/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/Overview.vue") }]
+    children: [{ path: "", component: () => import("pages/Overview.vue") }],
+    meta: {
+      public: true,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
     path: "/cache/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/Cache.vue") }]
+    children: [{ path: "", component: () => import("pages/Cache.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: true,
+    }
   },
   {
     path: "/qr-scanner/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/qr-scanner.vue") }]
+    children: [{ path: "", component: () => import("pages/qr-scanner.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
     path: "/cache/:id",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/Cache.vue") }]
+    children: [{ path: "", component: () => import("pages/Cache.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: true,
+    }
   },
   {
     path: "/station/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/StationEdit.vue") }]
+    children: [{ path: "", component: () => import("pages/StationEdit.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: true,
+    }
   },
   {
     path: "/endstation/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/StationEndEdit.vue") }]
+    children: [{ path: "", component: () => import("pages/StationEndEdit.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: true,
+    }
   },
   {
     path: "/tempstation/:pos",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{path: "", component: () => import("pages/StationEdit.vue")}]
+    children: [{path: "", component: () => import("pages/StationEdit.vue")}],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: true,
+    }
   },
   {
     path: "/tempendstation/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{path: "", component: () => import("pages/StationEndEdit.vue")}]
+    children: [{path: "", component: () => import("pages/StationEndEdit.vue")}],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: true,
+    }
   },
   {
     path: "/station/:cache/:id",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/StationView.vue") }]
+    children: [{ path: "", component: () => import("pages/StationView.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
     path: "/ranking/",
       component: () => import("layouts/MyLayout.vue"),
-    children: [{path: "", component: () => import("pages/ranking.vue")}]
+    children: [{path: "", component: () => import("pages/ranking.vue")}],
+    meta: {
+      public: true,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
     path: "/login/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/Login.vue") }]
+    children: [{ path: "", component: () => import("pages/Login.vue") }],
+    meta: {
+      public: true,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
     path: "/CacheStart/:cache/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/CacheStart.vue") }]
+    children: [{ path: "", component: () => import("pages/CacheStart.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
     path: "/CacheEnd/:cache/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/CacheEnd.vue") }]
+    children: [{ path: "", component: () => import("pages/CacheEnd.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
+  },
+  {
+    path: "/generator/:cache/",
+    component: () => import("layouts/MyLayout.vue"),
+    children: [{ path: "", component: () => import("pages/qr-generator.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: true,
+    }
   },
   {
    path: "/profile/",
       component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/Profile.vue") }]
+    children: [{ path: "", component: () => import("pages/Profile.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
    path: "/mycaches/",
       component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/MyCaches.vue") }]
+    children: [{ path: "", component: () => import("pages/MyCaches.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
     path: "/register/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/Register.vue") }]
+    children: [{ path: "", component: () => import("pages/Register.vue") }],
+    meta: {
+      public: true,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: true,
+      onlyAdmin: false,
+    }
   }
 ];
 
diff --git a/frontend/src/store/dialog/mutations.js b/frontend/src/store/dialog/mutations.js
index 4a14ffa..c9c7306 100644
--- a/frontend/src/store/dialog/mutations.js
+++ b/frontend/src/store/dialog/mutations.js
@@ -14,16 +14,19 @@ export function NEW_MESSAGE_DIALOG (state, messageObject) {
         let color = "red-9";
         state.dialog.colorBackground = "bg-"+color+" text-white";
         state.dialog.colorButton = color;
+        break;
       }
       case "amber": {
         let color = "amber";
         state.dialog.colorBackground = "bg-"+color+" text-white";
         state.dialog.colorButton = color;
+        break;
       }
       case "blue": {
         let color = "primary";
         state.dialog.colorBackground = "bg-"+color+" text-white";
         state.dialog.colorButton = color;
+        break;
       }
     }
   }
diff --git a/src/main/java/hhn/labsw/bugageocaching/controller/Controller.java b/src/main/java/hhn/labsw/bugageocaching/controller/Controller.java
index 526b675..9e50e20 100644
--- a/src/main/java/hhn/labsw/bugageocaching/controller/Controller.java
+++ b/src/main/java/hhn/labsw/bugageocaching/controller/Controller.java
@@ -17,6 +17,7 @@ import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.PostConstruct;
+import java.math.BigDecimal;
 import java.util.ArrayList;
 import java.util.LinkedList;
 import java.util.List;
@@ -377,7 +378,7 @@ public class Controller {
       @ApiResponse(code = 404, message = "Database error")
   })
   @CrossOrigin(origins = "*", allowedHeaders = "*") // only for dev purpose
-  @RequestMapping(value = "/api/deleteCache", method = RequestMethod.DELETE, produces = "application/json")
+  @RequestMapping(value = "/api/deleteCache", method = {RequestMethod.DELETE, RequestMethod.GET}, produces = "application/json")
   @ResponseBody
   public ResponseEntity deleteCache(@RequestParam String cacheID) {
     return deleteCacheUtil(cacheID);
@@ -456,7 +457,8 @@ public class Controller {
     List<TeamRankingListHelper> sendBackTeams = new LinkedList<>();
     List<Object[]> rankingTeams = userRepository.getTeamRankingList();
     for (Object[] obj : rankingTeams) {
-      TeamRankingListHelper tmp = new TeamRankingListHelper((String) obj[0], (Integer) obj[1]);
+      BigDecimal i = (BigDecimal) obj[1];
+      TeamRankingListHelper tmp = new TeamRankingListHelper((String) obj[0], i.intValue());
       System.out.println(tmp);
       sendBackTeams.add(tmp);
     }
@@ -1002,8 +1004,7 @@ public class Controller {
     ArrayList<POI> poisList = new ArrayList<>();
     for (Cache cache : cacheRepository.findAll()) {
       Station station = cache.getStationen().get(0);
-      // ICONS müssen noch erstellt werden und die categoryID entsprechend angepasst
-      POI poi = new POI(cache.getName() + "_Station1", (float) station.getLattitude(), (float) station.getLongitude(), 0);
+      POI poi = new POI(cache.getName() + "_Station1", (float) station.getLattitude(), (float) station.getLongitude(), 202);
       poisList.add(poi);
     }
 
@@ -1014,12 +1015,11 @@ public class Controller {
         int index = cache.getStationen().indexOf(aktuelleStation);
         for (int i = 1; i <= index; i++) {
           Station station = cache.getStationen().get(i);
-          // ICONS müssen noch erstellt werden und die categoryID entsprechend angepasst
           int categoryID;
           if (i < cache.getStationen().size() - 1) { // isnt endstation
-            categoryID = 1;
+            categoryID = 201;
           } else { // is endstation
-            categoryID = 2;
+            categoryID = 203;
           }
           POI poi = new POI(cache.getName() + "_Station" + (i + 1), (float) station.getLattitude(), (float) station.getLongitude(), categoryID);
           poisList.add(poi);
diff --git a/src/main/java/hhn/labsw/bugageocaching/helper/POI.java b/src/main/java/hhn/labsw/bugageocaching/helper/POI.java
index d6a4051..84631ac 100644
--- a/src/main/java/hhn/labsw/bugageocaching/helper/POI.java
+++ b/src/main/java/hhn/labsw/bugageocaching/helper/POI.java
@@ -5,8 +5,7 @@ public class POI {
   private String Name;
   private float Latitude;
   private float Longitude;
-  // ICONS müssen noch erstellt werden und die categoryID entsprechend angepasst
-  private int CategoryID; // 0 = grünes icon(startstation) // 1 = orangenes icon(folgestationen) // 2 = rotes icon(endstation)
+  private int CategoryID; // 202 = grünes icon(startstation) // 201 = blaues icon(folgestationen) // 203 = rotes icon(endstation)
 
   public POI(String name, float latitude, float longitude, int categoryID) {
     Name = name;
diff --git a/src/main/java/hhn/labsw/bugageocaching/repositories/UserRepository.java b/src/main/java/hhn/labsw/bugageocaching/repositories/UserRepository.java
index d8784ec..af74433 100644
--- a/src/main/java/hhn/labsw/bugageocaching/repositories/UserRepository.java
+++ b/src/main/java/hhn/labsw/bugageocaching/repositories/UserRepository.java
@@ -45,7 +45,7 @@ public interface UserRepository extends CrudRepository<User, Integer> {
       "  AND t.id = ui.team_id\n" +
       "  AND ui.team_id IS NOT NULL\n" +
       "GROUP BY teamname\n" +
-      "ORDER by ranking_points_sum DESC" +
+      "ORDER by ranking_points_sum DESC\n" +
       "LIMIT 10;", nativeQuery = true)
   List<Object[]> getTeamRankingList();