diff --git a/AstuteClient2/src/app/login/login.component.css b/AstuteClient2/src/app/login/login.component.css
new file mode 100644
index 0000000..96b4030
--- /dev/null
+++ b/AstuteClient2/src/app/login/login.component.css
@@ -0,0 +1,3 @@
+input {
+    margin-bottom: 10px;
+}
diff --git a/AstuteClient2/src/app/login/login.component.html b/AstuteClient2/src/app/login/login.component.html
new file mode 100644
index 0000000..75191a4
--- /dev/null
+++ b/AstuteClient2/src/app/login/login.component.html
@@ -0,0 +1,19 @@
+<div class="page" style="width: 35%; margin: 20px auto auto;">
+  <form class="form-signin" (ngSubmit)="login(f)" #f="ngForm" style="margin-bottom: 10px">
+    <h2 class="form-signin-heading">Login</h2>
+
+    <label for="username" class="sr-only">Username</label>
+    <input class="form-control" type="text" id="username" name="username" ngModel  placeholder="Username">
+
+    <label for="password" class="sr-only">Password</label>
+    <input
+            class="form-control"
+            type="password"
+            id="password"
+            name="password"
+            ngModel
+            placeholder="Password">
+
+    <button class="btn btn-primary" type="submit" style="float: right">Log in</button>
+  </form>
+</div>
diff --git a/AstuteClient2/src/app/login/login.component.spec.ts b/AstuteClient2/src/app/login/login.component.spec.ts
new file mode 100644
index 0000000..d6d85a8
--- /dev/null
+++ b/AstuteClient2/src/app/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/AstuteClient2/src/app/login/login.component.ts b/AstuteClient2/src/app/login/login.component.ts
new file mode 100644
index 0000000..31ac549
--- /dev/null
+++ b/AstuteClient2/src/app/login/login.component.ts
@@ -0,0 +1,34 @@
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {NgForm} from '@angular/forms';
+import {Router} from '@angular/router';
+import {AstuteClientService} from '../services/astute-client-service';
+
+@Component({
+    selector: 'app-login',
+    templateUrl: './login.component.html',
+    styleUrls: ['./login.component.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class LoginComponent implements OnInit {
+
+    constructor(protected astuteClientService: AstuteClientService,
+                private router: Router) {}
+
+    ngOnInit() {
+        localStorage.removeItem('SESSION_ID');
+        localStorage.removeItem('SESSION_USER');
+    }
+
+    login(form: NgForm) {
+        const username = form.value.username;
+        const password = form.value.password;
+
+        this.astuteClientService.login(username, password).then((data) => {
+            if (data) {
+                this.router.navigate(['/home']);
+            } else {
+                alert('login failed, checked credentials');
+            }
+        })
+    }
+}