diff --git a/frontend/src/layouts/MyLayout.vue b/frontend/src/layouts/MyLayout.vue
index 7dbfd97..4faab9f 100644
--- a/frontend/src/layouts/MyLayout.vue
+++ b/frontend/src/layouts/MyLayout.vue
@@ -24,10 +24,7 @@
       v-model="leftDrawerOpen"
       bordered
       show-if-above
-      :mini="miniState"
-      @mouseover="miniState = false"
-      @mouseout="miniState = true"
-      content-class="bg-green-1">
+      content-class="">
       <q-list>
         <q-item-label header>Essential Links</q-item-label>
         <q-item
@@ -116,9 +113,9 @@ export default {
   name: "MyLayout",
   data() {
     return {
-      //leftDrawerOpen: this.$q.platform.is.desktop,
-      leftDrawerOpen: true,
-      miniState: true
+      leftDrawerOpen: this.$q.platform.is.desktop,
+      //leftDrawerOpen: true,
+      //miniState: true
     };
   },
   methods: {
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 8808c29..7df4cfa 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -1,45 +1,49 @@
 <template>
   <div class="q-pa-md">
-    <!-- header und toolbar dürfen nur im Layout sein -->
-<!--
-      <q-header reveal class="bg-white" text="green-8">
-        <q-toolbar>
-          <q-toolbar-title class="bg-white text-green-8">Login</q-toolbar-title>
-        </q-toolbar>
-      </q-header>
--->
+    <form class="login" @submit.prevent="login">
           <div class="q-pa-md">
-            <div class="column" style="">
+            <div class="column q-gutter-lg" style="">
               <div class="col">
-                <div class="q-pa-md">
-                  <div class="q-gutter-md" style="max-width: 300px">
-                    <q-input v-model="text" label="Benutzername"/>
+                <div class="">
+                  <div class="" style="max-width: 300px">
+                    <q-input outlined filled stack-label v-model="user.username" type="text" label="Benutzername" autocomplete="username"/>
                   </div>
                 </div>
               </div>
               <div class="col">
-                <div class="q-pa-md">
-                  <div class="q-gutter-md" style="max-width: 300px">
-                    <q-input v-model="text" label="Passwort"/>
+                <div class="">
+                  <div class="" style="max-width: 300px">
+                    <q-input outlined filled stack-label v-model="user.password" type="password" label="Passwort" autocomplete="current-password"/>
                   </div>
                 </div>
               </div>
               <div class="col">
-                <div class="q-pa-md">
-                  <div class="q-gutter-md" style="max-width: 300px">
+                <div class="">
+                  <div class="" style="max-width: 300px">
                     <q-btn
-                      fab
-                      color="bg-white"
-                      text-color="green-8"
-                      icon="keyboard_arrow_right"
+                      :outline="this.user.isAuthenticated"
+                      :disabled="this.user.isAuthenticated"
+                      label="Login"
+                      color="primary"
+                      class="full-width"
+                      type="submit"
+                      unelevated
+                    />
+                    <q-btn
+                      :outline="!this.user.isAuthenticated"
+                      :disabled="!this.user.isAuthenticated"
+                      label="Logout"
+                      color="red"
+                      class="full-width q-mt-md"
+                      unelevated
+                      @click="logout"
                     />
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          <!--<q-page-sticky position="bottom-right" :offset="[18, 18]">-->
-          <!--</q-page-sticky>-->
+    </form>
   </div>
 </template>
 
@@ -47,8 +51,49 @@
   export default {
     data() {
       return {
-        text: ""
+        user: {
+          username: "moximoti",
+          password: "1234",
+          token: "",
+          isAuthenticated: false
+        },
+
       };
-    }
+    },
+    methods: {
+      login: function () {
+        // const { username, password } = this;
+        // this.$store.dispatch(AUTH_REQUEST, { username, password }).then(() => {
+        //   this.$router.push('/')
+        // })
+        const data = {
+          username: this.user.username,
+          password: this.user.password
+        } //JSON.stringify(this.user);
+        console.log("GET http://localhost:8080/api/login/ - json: " + JSON.stringify(data));
+        this.$axios.post('http://localhost:8080/api/login', data)
+          .then((response) => {
+            console.log("GET http://localhost:8080/api/login/ - response: " + response.data);
+            this.user.token = response.data;
+            this.isAuthenticated();
+          })
+      },
+      isAuthenticated: function () {
+        console.log("isAuthenticated()");
+        console.log(this.user.token);
+        if (this.user.token === '') {
+          this.user.isAuthenticated = false;
+        } else {
+          this.user.isAuthenticated = true;
+        }
+        console.log(this.user.token);
+      },
+      logout: function () {
+        console.log("logout()");
+        console.log(this.user.token);
+        this.user.token = '';
+        this.isAuthenticated()
+      }
+    },
   };
 </script>
diff --git a/src/main/java/hhn/labsw/bugageocaching/controller/Controller.java b/src/main/java/hhn/labsw/bugageocaching/controller/Controller.java
index b0b29d6..6442548 100644
--- a/src/main/java/hhn/labsw/bugageocaching/controller/Controller.java
+++ b/src/main/java/hhn/labsw/bugageocaching/controller/Controller.java
@@ -40,16 +40,20 @@ public class Controller {
 
   private AtomicLong counter = new AtomicLong();
 
+  @CrossOrigin(origins = "http://localhost:8081") // only for dev purpose
   @RequestMapping("/api/allCaches")
   @ResponseBody
   public String getAllCaches() {
     return new Gson().toJson(cacheRepository.findAll());
   }
 
+  @CrossOrigin(origins = "http://localhost:8081") // only for dev purpose
   @RequestMapping("/api/login")
   @ResponseBody
   public ResponseEntity<Object> login(@RequestBody User user){
     if(user.getUsername() == null || user.getPassword() == null){
+      System.out.println(user.getUsername());
+      System.out.println(user.getPassword());
       return ResponseEntity.status(401).body(null);
     }
     if(userRepository.findByUsername(user.getUsername()) == null){
@@ -66,6 +70,7 @@ public class Controller {
     return ResponseEntity.status(HttpStatus.BAD_GATEWAY).body(null);
   }
 
+  @CrossOrigin(origins = "http://localhost:8081") // only for dev purpose
   @RequestMapping("/api/startCache")
   public @ResponseBody
   String startCache(@RequestParam(value = "userID", defaultValue = "-1") String userID,