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>
diff --git a/src/app/config/.gitignore b/src/app/config/.gitignore
new file mode 100644
index 0000000..c96a04f
--- /dev/null
+++ b/src/app/config/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
\ No newline at end of file
diff --git a/src/app/directives/protected.directive.ts b/src/app/directives/protected.directive.ts
new file mode 100644
index 0000000..9ebe89e
--- /dev/null
+++ b/src/app/directives/protected.directive.ts
@@ -0,0 +1,34 @@
+/**
+ * Created by teone on 12/5/16.
+ */
+import {Directive, OnDestroy} from '@angular/core';
+import {AuthService} from '../services/rest/auth.service';
+import {Router} from '@angular/router';
+
+@Directive({
+  selector: '[xos-protected]',
+  providers: [AuthService]
+})
+export class ProtectedDirective implements OnDestroy {
+  private sub:any = null;
+
+  constructor(private authService:AuthService, private router:Router) {
+    console.log('protected directive');
+    if (!authService.isAuthenticated()) {
+      console.log('redirect');
+      this.router.navigate(['/login']);
+    }
+
+    // this.sub = this.authService.subscribe((val) => {
+    //   if (!val.authenticated) {
+    //     this.router.navigate(['LoggedoutPage']); // tells them they've been logged out (somehow)
+    //   }
+    // });
+  }
+
+  ngOnDestroy() {
+    // if (this.sub != null) {
+    //   this.sub.unsubscribe();
+    // }
+  }
+}
diff --git a/src/app/hello.html b/src/app/hello.html
index 2ec8382..089199c 100644
--- a/src/app/hello.html
+++ b/src/app/hello.html
@@ -1 +1,5 @@
-<h1>{{ hello }}</h1>
\ No newline at end of file
+<div xos-protected></div>
+
+<h1>{{ hello }}</h1>
+
+<pre>{{ endpoints | json }}</pre>
diff --git a/src/app/hello.spec.ts b/src/app/hello.spec.ts
index 7e3b2cc..91b3f1a 100644
--- a/src/app/hello.spec.ts
+++ b/src/app/hello.spec.ts
@@ -2,12 +2,26 @@
 
 import {HelloComponent} from './hello';
 import {TestBed, async} from '@angular/core/testing';
+import {StyleConfig} from './config/style.config';
+import { Http, BaseRequestOptions } from '@angular/http';
+import { MockBackend } from '@angular/http/testing';
 
 describe('hello component', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
         HelloComponent
+      ],
+      providers: [
+        {
+          provide: Http,
+          useFactory: (mockBackend, options) => {
+            return new Http(mockBackend, options);
+          },
+          deps: [MockBackend, BaseRequestOptions]
+        },
+        MockBackend,
+        BaseRequestOptions
       ]
     });
     TestBed.compileComponents();
@@ -17,6 +31,6 @@
     const fixture = TestBed.createComponent(HelloComponent);
     fixture.detectChanges();
     const hello = fixture.nativeElement;
-    expect(hello.querySelector('h1').textContent).toBe('Hello World!');
+    expect(hello.querySelector('h1').textContent).toBe(`Hello ${StyleConfig.projectName}!`);
   });
 });
diff --git a/src/app/hello.ts b/src/app/hello.ts
index 9f42916..b67e7f6 100644
--- a/src/app/hello.ts
+++ b/src/app/hello.ts
@@ -1,13 +1,33 @@
-import {Component} from '@angular/core';
+/// <reference path="../../typings/index.d.ts"/>
+import {Component, OnInit} from '@angular/core';
+import {NgFor} from '@angular/common';
+import {StyleConfig} from './config/style.config';
+import {CoreService} from './services/rest/core.service';
 
 @Component({
-  selector: 'fountain-app',
-  template: require('./hello.html')
+  selector: 'xos-app',
+  template: require('./hello.html'),
+  providers: [CoreService],
 })
 export class HelloComponent {
-  public hello: string;
 
-  constructor() {
-    this.hello = 'Hello World!';
+  // declare class properties
+  public hello: string;
+  public endpoints: any[];
+
+  constructor(private coreService: CoreService) {
+    this.hello = `Hello ${StyleConfig.projectName}!`;
+    this.endpoints = [];
+  }
+
+  ngOnInit() {
+    console.log('on init');
+    this.coreService.getCoreEndpoints()
+      .subscribe(
+        endpoints => {
+          this.endpoints = endpoints
+        },
+        err => console.log
+      )
   }
 }
diff --git a/src/app/index.ts b/src/app/index.ts
index 5f02fe6..4e93275 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -1,18 +1,29 @@
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
+import {HttpModule}    from '@angular/http';
+import {FormsModule}   from '@angular/forms';
+import {CookieService} from 'angular2-cookie/services/cookies.service';
+
 import {routing, RootComponent} from './routes';
 
 import {HelloComponent} from './hello';
+import {LoginComponent} from './components/login/login.component';
+import {ProtectedDirective} from './directives/protected.directive';
 
 @NgModule({
   imports: [
     BrowserModule,
-    routing
+    FormsModule,
+    routing,
+    HttpModule
   ],
   declarations: [
     RootComponent,
-    HelloComponent
+    HelloComponent,
+    LoginComponent,
+    ProtectedDirective
   ],
+  providers: [CookieService],
   bootstrap: [RootComponent]
 })
 export class AppModule {}
diff --git a/src/app/interfaces/auth.interface.ts b/src/app/interfaces/auth.interface.ts
new file mode 100644
index 0000000..1742fb7
--- /dev/null
+++ b/src/app/interfaces/auth.interface.ts
@@ -0,0 +1,10 @@
+export interface IAuthRequest {
+  username: string;
+  password: string;
+}
+
+export interface IAuthResponse {
+  xossessionid: string;
+  xoscsrftoken: string;
+  user: string;
+}
diff --git a/src/app/routes.ts b/src/app/routes.ts
index 9a197e7..4c27ed1 100644
--- a/src/app/routes.ts
+++ b/src/app/routes.ts
@@ -3,10 +3,13 @@
 import {Component} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {HelloComponent} from './hello';
+import {LoginComponent} from "./components/login/login.component";
 
 @Component({
-  selector: 'fountain-root',
-  template: '<router-outlet></router-outlet>'
+  selector: 'xos-root',
+  template: `
+    <router-outlet></router-outlet>
+  `
 })
 export class RootComponent {}
 
@@ -14,6 +17,10 @@
   {
     path: '',
     component: HelloComponent
+  },
+  {
+    path: 'login',
+    component: LoginComponent
   }
 ];
 
diff --git a/src/app/services/rest/auth.service.ts b/src/app/services/rest/auth.service.ts
new file mode 100644
index 0000000..7c73c28
--- /dev/null
+++ b/src/app/services/rest/auth.service.ts
@@ -0,0 +1,48 @@
+/// <reference path="../../../../typings/index.d.ts"/>
+
+// Imports
+import {AppConfig} from '../../config/app.config';
+import {Injectable}     from '@angular/core';
+import {Http, Response} from '@angular/http';
+import {Observable} from 'rxjs/Rx';
+import {IAuthRequest, IAuthResponse} from '../../interfaces/auth.interface';
+import {CookieService} from 'angular2-cookie/core';
+
+// Import RxJs required methods
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/catch';
+
+@Injectable()
+export class AuthService {
+  private xosToken:string;
+  private xosSessionId:string;
+  // Resolve HTTP using the constructor
+  constructor (private http: Http, private cookieService:CookieService) {
+  }
+
+  // check if the user is authenticated
+  isAuthenticated(){
+    this.xosToken = this.cookieService.get('xoscsrftoken');
+    this.xosSessionId = this.cookieService.get('xossessionid');
+    return this.xosToken;
+  }
+
+  // save cookies
+  storeAuth(auth:IAuthResponse){
+    this.cookieService.put('xoscsrftoken', auth.xoscsrftoken);
+    this.cookieService.put('xossessionid', auth.xossessionid);
+  }
+
+  // Log the user in
+  login(auth: IAuthRequest) : Observable<IAuthResponse> {
+    return this.http.post(`${AppConfig.apiEndpoint}/utility/login/`, auth)
+      .map((res:Response) => res.json())
+      .map((auth:IAuthResponse) => {
+        this.storeAuth(auth);
+        auth.user = JSON.parse(auth.user);
+        return auth;
+      })
+      .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
+  }
+}
+
diff --git a/src/app/services/rest/core.service.ts b/src/app/services/rest/core.service.ts
new file mode 100644
index 0000000..04097a6
--- /dev/null
+++ b/src/app/services/rest/core.service.ts
@@ -0,0 +1,31 @@
+/// <reference path="../../../../typings/index.d.ts"/>
+
+// Imports
+import {AppConfig} from '../../config/app.config';
+import { Injectable }     from '@angular/core';
+import { Http, Response, Headers, RequestOptions } from '@angular/http';
+import {Observable} from 'rxjs/Rx';
+
+// Import RxJs required methods
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/catch';
+
+@Injectable()
+export class CoreService {
+  // Resolve HTTP using the constructor
+  constructor (private http: Http) {}
+  // private instance variable to hold base url
+  private baseUrl = AppConfig.apiEndpoint;
+
+  // Fetch all existing comments
+  getCoreEndpoints() : Observable<any[]> {
+
+    // ...using get request
+    return this.http.get(`${this.baseUrl}/core/`)
+    // ...and calling .json() on the response to return data
+      .map((res:Response) => res.json())
+      //...errors if any
+      .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
+
+  }
+}
diff --git a/src/images/cord-favicon.png b/src/images/cord-favicon.png
new file mode 100644
index 0000000..758902e
--- /dev/null
+++ b/src/images/cord-favicon.png
Binary files differ
diff --git a/src/images/opencloud-favicon.png b/src/images/opencloud-favicon.png
new file mode 100644
index 0000000..d49afe0
--- /dev/null
+++ b/src/images/opencloud-favicon.png
Binary files differ
diff --git a/src/index.html b/src/index.html
index 2d0e805..6d6e8c1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,13 +3,13 @@
   <head>
     <base href="/">
     <meta charset="utf-8">
-    <title>FountainJS</title>
+    <title>XOS</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width">
-    <link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" />
+    <link rel="icon" type="image/png" href="images/cord-favicon.png" />
   </head>
 
   <body>
-    <fountain-root>Loading...</fountain-root>
+    <xos-root>Loading XOS...</xos-root>
   </body>
 </html>
diff --git a/src/index.ts b/src/index.ts
index f7b360a..4cf1437 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -13,6 +13,7 @@
 import {AppModule} from './app';
 
 declare var process: any;
+console.log(process.env.NODE_ENV);
 if (process.env.NODE_ENV === 'production') {
   enableProdMode();
 } else {