diff --git a/Frontend/src/app/components/auth/registration/registration.component.css b/Frontend/src/app/components/auth/registration/registration.component.css
index 08f1877..6de2e1b 100644
--- a/Frontend/src/app/components/auth/registration/registration.component.css
+++ b/Frontend/src/app/components/auth/registration/registration.component.css
@@ -61,7 +61,7 @@ form{
 }
 .btn_signin{
     transition: all .5s ease;
-    width: 70%;
+    width: 100%;
     border-radius: 30px;
     color:#008080;
     font-weight: 600;
diff --git a/Frontend/src/app/components/auth/registration/registration.component.ts b/Frontend/src/app/components/auth/registration/registration.component.ts
index 3f54551..ff8c904 100644
--- a/Frontend/src/app/components/auth/registration/registration.component.ts
+++ b/Frontend/src/app/components/auth/registration/registration.component.ts
@@ -32,7 +32,6 @@ export class RegistrationComponent implements OnInit {
   get me() { return this.form.controls; }
 
   onSubmit() {
-      console.log(this.form.value);
       this.api.registerUser(this.form.value.username, this.form.value.password, this.form.value.email).subscribe(res=>console.log(res));
   }
 }
diff --git a/Frontend/src/app/components/auth/signin/signin.component.css b/Frontend/src/app/components/auth/signin/signin.component.css
index 08f1877..6de2e1b 100644
--- a/Frontend/src/app/components/auth/signin/signin.component.css
+++ b/Frontend/src/app/components/auth/signin/signin.component.css
@@ -61,7 +61,7 @@ form{
 }
 .btn_signin{
     transition: all .5s ease;
-    width: 70%;
+    width: 100%;
     border-radius: 30px;
     color:#008080;
     font-weight: 600;
diff --git a/Frontend/src/app/components/auth/signin/signin.component.html b/Frontend/src/app/components/auth/signin/signin.component.html
index dcfb76a..358f183 100644
--- a/Frontend/src/app/components/auth/signin/signin.component.html
+++ b/Frontend/src/app/components/auth/signin/signin.component.html
@@ -9,7 +9,7 @@
                     <h2>Anmelden</h2>
                 </div>
                 <div class="row">
-                    <form [formGroup]="form" class="form-group" (ngSubmit)="onSubmit()">
+                    <form [formGroup]="loginForm" class="form-group" (ngSubmit)="onSubmit()">
                         <div class="row">
                             <input type="text" formControlName="username" name="username" id="username" class="form__input" placeholder="Username">
                         </div>
diff --git a/Frontend/src/app/components/auth/signin/signin.component.ts b/Frontend/src/app/components/auth/signin/signin.component.ts
index 8bf594f..cf4142e 100644
--- a/Frontend/src/app/components/auth/signin/signin.component.ts
+++ b/Frontend/src/app/components/auth/signin/signin.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import {FormBuilder, Validators} from "@angular/forms";
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 import {ApiService} from "../../../services/api.service";
+import {Router} from "@angular/router";
 
 @Component({
     selector: 'app-signin',
@@ -10,22 +11,45 @@ import {ApiService} from "../../../services/api.service";
 
 export class SigninComponent implements OnInit {
 
-    form: any;
+    loginForm: FormGroup;
+    loading = false;
+    submitted = false;
+    private isSuccessful: boolean;
+    private isSignUpFailed: boolean;
+    private errorMessage: '';
+
 
     constructor(
         private formBuilder: FormBuilder,
-        private api : ApiService
+        private api: ApiService,
+        private router: Router
     ) { }
 
     ngOnInit(): void {
-          this.form = this.formBuilder.group({
-              email: ['', Validators.required],
-              password: ['', Validators.required]
+          this.loginForm = this.formBuilder.group({
+              username: ['', Validators.required],
+              password: ['', [Validators.required, Validators.minLength(8)]]
           });
       }
 
       onSubmit() {
-          console.log(this.form.value);
-          this.api.loginUser(this.form.value.username, this.form.value.password);
+
+          this.submitted = true;
+
+          if (this.loginForm.invalid) {
+              return;
+          }
+
+          this.api.loginUser(this.loginForm.value.username, this.loginForm.value.password)
+              .subscribe(
+                  data => {
+                      this.router.navigate(['']);
+                      this.isSuccessful = true;
+                      this.isSignUpFailed = false;
+                  },
+                  err => {
+                      this.errorMessage = err.error.message;
+                      this.isSignUpFailed = true;
+              })
       }
 }
diff --git a/Frontend/src/app/components/top-bar/top-bar.component.ts b/Frontend/src/app/components/top-bar/top-bar.component.ts
index 15aa721..f2e667b 100644
--- a/Frontend/src/app/components/top-bar/top-bar.component.ts
+++ b/Frontend/src/app/components/top-bar/top-bar.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import {ApiService} from "../../services/api.service";
+
 
 @Component({
   selector: 'app-top-bar',
@@ -9,9 +11,12 @@ export class TopBarComponent implements OnInit {
 
   sidenav: any;
 
-  constructor() { }
+  constructor(
+      private api: ApiService
+  ) { }
 
     ngOnInit() {
-    }
 
+        this.api.getUserInfo().subscribe(data=>{console.log(data)});
+    }
 }