diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts
new file mode 100644
index 0000000..413290c
--- /dev/null
+++ b/src/app/components/login/login.component.ts
@@ -0,0 +1,38 @@
+/// <reference path="../../../../typings/index.d.ts"/>
+import {Component} from '@angular/core';
+import {Router} from '@angular/router';
+import {IAuthRequest, IAuthResponse} from '../../interfaces/auth.interface';
+import {StyleConfig} from '../../config/style.config';
+import {AuthService} from '../../services/rest/auth.service';
+
+export class Auth {
+  constructor(
+    public username,
+    public password
+  ){
+  }
+}
+
+@Component({
+  selector: 'xos-login',
+  template: require('./login.html'),
+  providers: [AuthService],
+})
+export class LoginComponent {
+  public auth:IAuthRequest;
+  public brandName;
+  constructor(private AuthService: AuthService, private router:Router) {
+    this.auth = new Auth('', '');
+    this.brandName = StyleConfig.projectName;
+  }
+
+  onSubmit(auth:IAuthRequest){
+    this.AuthService.login(auth)
+      .subscribe(
+        (user:IAuthResponse) => {
+          this.router.navigate(['/']);
+        }
+      )
+  }
+}
+
diff --git a/src/app/components/login/login.html b/src/app/components/login/login.html
new file mode 100644
index 0000000..0f8362c
--- /dev/null
+++ b/src/app/components/login/login.html
@@ -0,0 +1,10 @@
+<div class="login-container">
+  <div class="login-form">
+    <h2>Login to {{brandName}}</h2>
+    <form (ngSubmit)="onSubmit(loginForm.value)" #loginForm="ngForm">
+      <input type="email" [(ngModel)]="auth.username" name="username" required/>
+      <input type="password" [(ngModel)]="auth.password" name="password" required/>
+      <button type="submit" [disabled]="!loginForm.form.valid">Login</button>
+    </form>
+  </div>
+</div>