diff --git a/admin-portal/src/app/app.module.ts b/admin-portal/src/app/app.module.ts
index 7990031..a2098d4 100644
--- a/admin-portal/src/app/app.module.ts
+++ b/admin-portal/src/app/app.module.ts
@@ -9,13 +9,15 @@ import 'hammerjs';
 
 import { AppComponent } from './app.component';
 import { NavBarComponent } from './components/nav-bar/nav-bar.component';
+import { LoginComponent } from './components/login/login.component';
 
 import {LoginService} from './services/login.service';
 
 @NgModule({
   declarations: [
     AppComponent,
-    NavBarComponent
+    NavBarComponent,
+    LoginComponent
   ],
   imports: [
     BrowserModule,
diff --git a/admin-portal/src/app/app.routing.ts b/admin-portal/src/app/app.routing.ts
index 5c566f2..18d091d 100644
--- a/admin-portal/src/app/app.routing.ts
+++ b/admin-portal/src/app/app.routing.ts
@@ -3,9 +3,18 @@
  */
 import {ModuleWithProviders}  from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
+import {LoginComponent} from "./components/login/login.component";
 
 const appRoutes: Routes = [
-  
+  {
+    path: '',
+    redirectTo: '/login',
+    pathMatch: 'full'
+  },
+  {
+    path: 'login',
+    component: LoginComponent
+  }
 ];
 
 export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/admin-portal/src/app/components/login/login.component.css b/admin-portal/src/app/components/login/login.component.css
new file mode 100644
index 0000000..bcb8baf
--- /dev/null
+++ b/admin-portal/src/app/components/login/login.component.css
@@ -0,0 +1,3 @@
+.full-width {
+	width: 100%;
+}
\ No newline at end of file
diff --git a/admin-portal/src/app/components/login/login.component.html b/admin-portal/src/app/components/login/login.component.html
new file mode 100644
index 0000000..449e37c
--- /dev/null
+++ b/admin-portal/src/app/components/login/login.component.html
@@ -0,0 +1,33 @@
+<md-grid-list cols="6" [style.margin-top]="'20px'">
+    <md-grid-tile [colspan]="1"></md-grid-tile>
+    <md-grid-tile [colspan]="4">
+        <md-card style="width: 100%;">
+            <md-card-content>
+                <div [hidden]="loggedIn">
+                    <form (ngSubmit)="onSubmit()" >
+                        <h3>
+                        <md-input-container class="full-width">
+                            <input type="text" mdInput [(ngModel)]="credential.username" name='username' id='username' placeholder="Your Username">
+                        </md-input-container>
+                        </h3>
+
+                        <h3>
+                        <md-input-container class="full-width">
+                            <input type="password" mdInput [(ngModel)]="credential.password" name='password' id='password' placeholder="Your Password">
+                        </md-input-container>
+                        </h3>
+                        <h3>
+                        <div class='row'>
+                            <button md-raised-button type="submit" class="primary" [style.color]="'white'">Login</button>
+                        </div>
+                        </h3>
+                    </form>
+                </div>
+                <div [hidden]="!loggedIn">
+                    <h2>You have logged in!</h2>
+                </div>
+            </md-card-content>
+        </md-card>
+    </md-grid-tile>
+    <md-grid-tile [colspan]="1"></md-grid-tile>
+</md-grid-list>
diff --git a/admin-portal/src/app/components/login/login.component.spec.ts b/admin-portal/src/app/components/login/login.component.spec.ts
new file mode 100644
index 0000000..556444c
--- /dev/null
+++ b/admin-portal/src/app/components/login/login.component.spec.ts
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+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/admin-portal/src/app/components/login/login.component.ts b/admin-portal/src/app/components/login/login.component.ts
new file mode 100644
index 0000000..4555fac
--- /dev/null
+++ b/admin-portal/src/app/components/login/login.component.ts
@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import {LoginService} from "../../services/login.service";
+import {CookieService} from "angular2-cookie/services/cookies.service";
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+
+  private credential = {'username':'', 'password':''};
+  private loggedIn = false;
+
+  constructor (private loginService: LoginService){
+  }
+
+  onSubmit() {
+    this.loginService.sendCredential(this.credential.username, this.credential.password).subscribe(
+      res=>{
+        console.log(res);
+        localStorage.setItem("xAuthToken", res.json().token);
+        this.loggedIn=true;
+        // location.reload();
+      },
+      error=>{
+        this.loggedIn=false;
+      }
+    );
+  }
+
+  ngOnInit() {
+    this.loginService.checkSession().subscribe(
+      res => {
+        this.loggedIn=true;
+      },
+      error => {
+        this.loggedIn=false;
+      }
+    );
+  }
+
+}
diff --git a/admin-portal/src/app/components/nav-bar/nav-bar.component.html b/admin-portal/src/app/components/nav-bar/nav-bar.component.html
index a3a7fe5..d29bd06 100644
--- a/admin-portal/src/app/components/nav-bar/nav-bar.component.html
+++ b/admin-portal/src/app/components/nav-bar/nav-bar.component.html
@@ -1,4 +1,4 @@
-<md-toolbar [style.background]="'#3175e2'">
+<md-toolbar class="primary">
     <h3 [style.color]="'white'">ADMIN PORTAL</h3>
     <span class="example-spacer"></span>
 </md-toolbar>
\ No newline at end of file
diff --git a/admin-portal/src/styles.css b/admin-portal/src/styles.css
index 3ef7aa2..a6955b7 100644
--- a/admin-portal/src/styles.css
+++ b/admin-portal/src/styles.css
@@ -1,5 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
-@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
+@import '~@angular/material/core/theming/prebuilt/indigo-pink.css';
 
 .box {
 	border: 1px solid black;
@@ -15,4 +15,9 @@ hr {
 
 body {
     font-family: Tahoma, Serif;
+    margin:0;
+}
+
+.primary {
+	background:#3175e2;
 }
\ No newline at end of file