diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 147cfc4f8f814706025c8e9a855dacc3eaa0f40c..3e7374ea959cb38d335da4943d671aa7820ea5f1 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1 +1,22 @@
-<p>login works!</p>
+<div>
+    <h2>{{'cLoginText'|translate}}</h2>
+    <form [formGroup]="loginForm" (ngSubmit)="login()">
+      <p [ngClass]="{ 'has-error': isSubmitted && formControls.email.errors }">
+        <input type="email" placeholder="E-Mail" formControlName="email">
+      </p>
+      <div *ngIf="isSubmitted && formControls.email.errors">
+      <div *ngIf="formControls.email.errors.required">E-Mail is required</div>
+      </div>
+      <p [ngClass]="{ 'has-error': isSubmitted && formControls.password.errors }">
+        <input type="password" placeholder="Password" formControlName="password">
+      </p> 
+      <div *ngIf="isSubmitted && formControls.password.errors">
+      <div *ngIf="formControls.password.errors.required">Password is required</div>
+      </div>
+      <p>
+        <button mat-button type="submit" color="warn">LOGIN</button>
+        <!-- <input type="submit" value="Log in">-->
+      </p>
+    </form>
+  </div>
+  
\ No newline at end of file
diff --git a/src/app/login/login.component.spec.ts b/src/app/login/login.component.spec.ts
index d6d85a8465b79ee37cb75c371f6e6e936997c573..0fec96c7766d1c9a29846e863ca080d68fab0434 100644
--- a/src/app/login/login.component.spec.ts
+++ b/src/app/login/login.component.spec.ts
@@ -2,15 +2,29 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LoginComponent } from './login.component';
 
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { FormsModule } from '@angular/forms'
+import { ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule, TranslateService, TranslateStore } from "@ngx-translate/core";
+
 describe('LoginComponent', () => {
   let component: LoginComponent;
   let fixture: ComponentFixture<LoginComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ LoginComponent ]
+      declarations: [LoginComponent],
+      imports: [
+        RouterTestingModule,
+        TranslateModule.forRoot(),
+        ReactiveFormsModule,
+        FormsModule
+      ],
+      //providers: [TranslateService, TranslateStore]
+
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 4f584213116fdd5931ee1ac178cf5fab93a54dfa..467f0f7ea92e1e685b52d27e3381ceb592b5b9cf 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,15 +1,35 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { JwtService } from '../jwt.service';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.css']
+  styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit {
 
-  constructor() { }
+  constructor(private jwtService: JwtService, private router: Router, private formBuilder: FormBuilder) { }
+
+  loginForm: FormGroup;
+  isSubmitted = false;
 
   ngOnInit(): void {
+    this.loginForm = this.formBuilder.group({
+      email: ['', Validators.required],
+      password: ['', Validators.required]
+    });
   }
 
+  get formControls() { return this.loginForm.controls; }
+
+  login() {
+    this.isSubmitted = true;
+    if (this.loginForm.invalid) {
+      return;
+    }
+    this.jwtService.login(this.loginForm.value);
+    this.router.navigateByUrl('/admin');
+  }
 }