diff --git a/src/app/core/footer/footer.html b/src/app/core/footer/footer.html
new file mode 100644
index 0000000..8d14479
--- /dev/null
+++ b/src/app/core/footer/footer.html
@@ -0,0 +1,6 @@
+<footer class="footer">
+  Build with ♥ by the&nbsp;
+  <a href="https://github.com/opencord/xos/team">
+    {{vm.brand}} Team
+  </a>
+</footer>
diff --git a/src/app/core/footer/footer.spec.ts b/src/app/core/footer/footer.spec.ts
new file mode 100644
index 0000000..06c1044
--- /dev/null
+++ b/src/app/core/footer/footer.spec.ts
@@ -0,0 +1,22 @@
+/// <reference path="../../../../typings/index.d.ts" />
+
+import * as angular from 'angular';
+import 'angular-mocks';
+import {xosFooter} from './footer';
+import {StyleConfig} from '../../config/style.config';
+
+describe('footer component', () => {
+  beforeEach(() => {
+    angular
+      .module('xosFooter', ['app/core/footer/footer.html'])
+      .component('xosFooter', xosFooter);
+    angular.mock.module('xosFooter');
+  });
+
+  it('should render "XOS Team"', angular.mock.inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService) => {
+    const element = $compile('<xos-footer></xos-footer>')($rootScope);
+    $rootScope.$digest();
+    const footer = element.find('a');
+    expect(footer.html().trim()).toEqual(`${StyleConfig.projectName} Team`);
+  }));
+});
diff --git a/src/app/core/footer/footer.ts b/src/app/core/footer/footer.ts
new file mode 100644
index 0000000..77a223b
--- /dev/null
+++ b/src/app/core/footer/footer.ts
@@ -0,0 +1,16 @@
+import {StyleConfig} from '../../config/style.config';
+
+class FooterCtrl {
+  public brand: string;
+
+  /** @ngInject */
+  constructor() {
+    this.brand = StyleConfig.projectName;
+  }
+}
+
+export const xosFooter: angular.IComponentOptions = {
+  template: require('./footer.html'),
+  controllerAs: 'vm',
+  controller: FooterCtrl
+};
diff --git a/src/app/core/header/header.html b/src/app/core/header/header.html
new file mode 100644
index 0000000..b327754
--- /dev/null
+++ b/src/app/core/header/header.html
@@ -0,0 +1,7 @@
+<header class="header">
+  <p class="header-title">
+    <a href="#/" target="_blank">
+      {{vm.title}}
+    </a>
+  </p>
+</header>
diff --git a/src/app/core/header/header.spec.ts b/src/app/core/header/header.spec.ts
new file mode 100644
index 0000000..7c00602
--- /dev/null
+++ b/src/app/core/header/header.spec.ts
@@ -0,0 +1,22 @@
+/// <reference path="../../../../typings/index.d.ts" />
+
+import * as angular from 'angular';
+import 'angular-mocks';
+import {xosHeader} from './header';
+import {StyleConfig} from '../../config/style.config';
+
+describe('header component', () => {
+  beforeEach(() => {
+    angular
+      .module('xosHeader', ['app/core/header/header.html'])
+      .component('xosHeader', xosHeader);
+    angular.mock.module('xosHeader');
+  });
+
+  it('should render the appropriate title', angular.mock.inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService) => {
+    const element = $compile('<xos-header></xos-header>')($rootScope);
+    $rootScope.$digest();
+    const header = element.find('a');
+    expect(header.html().trim()).toEqual(StyleConfig.projectName);
+  }));
+});
diff --git a/src/app/core/header/header.ts b/src/app/core/header/header.ts
new file mode 100644
index 0000000..c2e4c41
--- /dev/null
+++ b/src/app/core/header/header.ts
@@ -0,0 +1,15 @@
+import {StyleConfig} from '../../config/style.config';
+
+class HeaderController {
+  public title: string;
+
+  constructor() {
+    this.title = StyleConfig.projectName;
+  }
+}
+
+export const xosHeader: angular.IComponentOptions = {
+  template: require('./header.html'),
+  controllerAs: 'vm',
+  controller: HeaderController
+};
diff --git a/src/app/core/index.ts b/src/app/core/index.ts
new file mode 100644
index 0000000..d0875b6
--- /dev/null
+++ b/src/app/core/index.ts
@@ -0,0 +1,15 @@
+import {xosHeader} from './header/header';
+import {xosFooter} from './footer/footer';
+import {xosNav} from './nav/nav';
+import routesConfig from './routes';
+import {xosLogin} from './login/login';
+
+export const xosCore = 'xosCore';
+
+angular
+  .module('xosCore', ['ui.router'])
+  .config(routesConfig)
+  .component('xosHeader', xosHeader)
+  .component('xosFooter', xosFooter)
+  .component('xosNav', xosNav)
+  .component('xosLogin', xosLogin);
diff --git a/src/app/core/login/login.html b/src/app/core/login/login.html
new file mode 100644
index 0000000..f4a0724
--- /dev/null
+++ b/src/app/core/login/login.html
@@ -0,0 +1,5 @@
+<form name="login">
+  <input type="text" name="username" ng-model="username" required>
+  <input type="text" name="password" ng-model="password" required>
+  <button type="button" ng-click="vm.login(username, password)">Login</button>
+</form>
diff --git a/src/app/core/login/login.ts b/src/app/core/login/login.ts
new file mode 100644
index 0000000..af46619
--- /dev/null
+++ b/src/app/core/login/login.ts
@@ -0,0 +1,30 @@
+import {AuthService} from '../../rest/auth.rest';
+
+class LoginCtrl {
+  static $inject = ['AuthService', '$state'];
+
+  /** @ngInject */
+  constructor(
+    private authService: AuthService,
+    private $state: angular.ui.IStateService
+  ) {
+  }
+
+  public login(username: string, password: string) {
+    this.authService.login({
+      username: username,
+      password: password
+    })
+      .then(res => {
+        console.log(res);
+        this.$state.go('app');
+      })
+      .catch(e => console.error);
+  }
+}
+
+export const xosLogin: angular.IComponentOptions = {
+  template: require('./login.html'),
+  controllerAs: 'vm',
+  controller: LoginCtrl
+};
diff --git a/src/app/core/nav/nav.html b/src/app/core/nav/nav.html
new file mode 100644
index 0000000..6256369
--- /dev/null
+++ b/src/app/core/nav/nav.html
@@ -0,0 +1,7 @@
+<div class="nav">
+  <ul>
+    <li ng-repeat="route in vm.routes" ui-sref-active="active">
+      <a ui-sref="{{route.state}}">{{route.label}}</a>
+    </li>
+  </ul>
+</div>
diff --git a/src/app/core/nav/nav.scss b/src/app/core/nav/nav.scss
new file mode 100644
index 0000000..8591c15
--- /dev/null
+++ b/src/app/core/nav/nav.scss
@@ -0,0 +1,37 @@
+xos-nav {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  flex-basis: 10%;
+  background: darken(grey, 10);
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    background: grey;
+
+    > li {
+      display: flex;
+      flex-direction: column;
+      padding: 10px 20px;
+      border-bottom: 1px solid darken(grey, 20);
+
+      &.active {
+        background: darken(grey, 10);
+
+        > a {
+          color: #5aadbb;
+        }
+      }
+
+      &:hover {
+        background: darken(grey, 10);
+      }
+
+      > a {
+        cursor: pointer;
+      }
+    }
+  }
+}
diff --git a/src/app/core/nav/nav.ts b/src/app/core/nav/nav.ts
new file mode 100644
index 0000000..d90df10
--- /dev/null
+++ b/src/app/core/nav/nav.ts
@@ -0,0 +1,37 @@
+import './nav.scss';
+
+interface INavItem {
+  label: string;
+  state: string;
+}
+
+class NavCtrl {
+  public routes: INavItem[];
+
+  constructor() {
+    this.routes = [
+      {
+        label: 'Home',
+        state: 'xos.dashboard'
+      },
+      {
+        label: 'Instances',
+        state: 'xos.instances'
+      },
+      {
+        label: 'Slices',
+        state: 'xos.slices'
+      },
+      {
+        label: 'Nodes',
+        state: 'xos.nodes'
+      }
+    ];
+  }
+}
+
+export const xosNav: angular.IComponentOptions = {
+  template: require('./nav.html'),
+  controllerAs: 'vm',
+  controller: NavCtrl
+};
diff --git a/src/app/core/routes.ts b/src/app/core/routes.ts
new file mode 100644
index 0000000..5f37713
--- /dev/null
+++ b/src/app/core/routes.ts
@@ -0,0 +1,10 @@
+export default routesConfig;
+
+/** @ngInject */
+function routesConfig($stateProvider: angular.ui.IStateProvider, $urlRouterProvider: angular.ui.IUrlRouterProvider, $locationProvider: angular.ILocationProvider) {
+  $stateProvider
+    .state('login', {
+      url: '/login',
+      component: 'xosLogin'
+    });
+}