diff --git a/src/app/account/login/login.component.css b/src/app/account/login/login.component.css
new file mode 100644
index 0000000..1427fe0
--- /dev/null
+++ b/src/app/account/login/login.component.css
@@ -0,0 +1,22 @@
+.login-card {
+  width: 400px;
+}
+
+.login-container {
+  width: 100%;
+  height: 100%;
+  background-color: #333333;
+}
+
+.login-form {
+  padding: 10px 40px;
+}
+
+.mat-button {
+  width: 80px;
+}
+
+.mat-form-field {
+  width: 100%;
+  padding-top: 15px;
+}
diff --git a/src/app/account/login/login.component.html b/src/app/account/login/login.component.html
new file mode 100644
index 0000000..10816d7
--- /dev/null
+++ b/src/app/account/login/login.component.html
@@ -0,0 +1,30 @@
+<div class="login-container" fxLayout="row" fxLayoutAlign="center center">
+  <mat-card class="login-card" fxLayout="column" fxLayoutAlign="center center">
+    <mat-card-title>Login</mat-card-title>
+    <mat-card-content>
+      <form class="login-form" [formGroup]="form" (ngSubmit)="onLogin()">
+        <mat-form-field appearance="fill">
+          <mat-label>User name</mat-label>
+          <label>
+            <input matInput formControlName="username" required>
+          </label>
+        </mat-form-field>
+
+        <mat-form-field appearance="fill">
+          <mat-label>Password</mat-label>
+          <label>
+            <input matInput formControlName="password" type="password" required minlength="15">
+          </label>
+        </mat-form-field>
+
+        <div fxLayout="row" fxLayoutAlign="space-evenly center">
+          <a mat-button href="/register">Sign up</a>
+          <button [disabled]="loading" class="mat-button">
+            <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
+            Login
+          </button>
+        </div>
+      </form>
+    </mat-card-content>
+  </mat-card>
+</div>
diff --git a/src/app/account/login/login.component.spec.ts b/src/app/account/login/login.component.spec.ts
new file mode 100644
index 0000000..d6d85a8
--- /dev/null
+++ b/src/app/account/login/login.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/account/login/login.component.ts b/src/app/account/login/login.component.ts
new file mode 100644
index 0000000..43674ed
--- /dev/null
+++ b/src/app/account/login/login.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { AccountService } from '../account.service';
+import {ActivatedRoute, Router} from '@angular/router';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+  form: FormGroup = new FormGroup({
+    username: new FormControl(''),
+    password: new FormControl(''),
+  });
+  loading = false;
+  returnUrl = this.activatedRoute.snapshot.queryParams['returnUrl'] || '/';
+
+  onLogin() {
+    this.loading = true;
+    if (this.form.invalid) {
+      return;
+    }
+    console.log(this.form.value);
+
+  }
+
+  constructor(private accountService: AccountService,
+              private activatedRoute: ActivatedRoute,
+              private router: Router,
+              ) { }
+
+  ngOnInit(): void {
+  }
+
+}