diff --git a/client/app/common/navbar/navbar.spec.js b/client/app/common/navbar/navbar.spec.js
index f9ff6c5b..e4cd43fe 100644
--- a/client/app/common/navbar/navbar.spec.js
+++ b/client/app/common/navbar/navbar.spec.js
@@ -1,17 +1,16 @@
 import NavbarModule from './navbar'
-import NavbarController from './navbar.controller';
-import NavbarComponent from './navbar.component';
-import NavbarTemplate from './navbar.html';
 
 describe('Navbar', () => {
-  let $rootScope, makeController;
+  let $rootScope, $state, $location, $componentController, $compile;
 
   beforeEach(window.module(NavbarModule));
-  beforeEach(inject((_$rootScope_) => {
-    $rootScope = _$rootScope_;
-    makeController = () => {
-      return new NavbarController();
-    };
+
+  beforeEach(inject(($injector) => {
+    $rootScope = $injector.get('$rootScope');
+    $componentController = $injector.get('$componentController');
+    $state = $injector.get('$state');
+    $location = $injector.get('$location');
+    $compile = $injector.get('$compile');
   }));
 
   describe('Module', () => {
@@ -20,30 +19,31 @@ describe('Navbar', () => {
 
   describe('Controller', () => {
     // controller specs
-    it('has a name property [REMOVE]', () => { // erase if removing this.name from the controller
-      let controller = makeController();
-      expect(controller).to.have.property('name');
+    let controller;
+    beforeEach(() => {
+      controller = $componentController('navbar', {
+        $scope: $rootScope.$new()
+      });
     });
-  });
 
-  describe('Template', () => {
-    // template specs
-    // tip: use regex to ensure correct bindings are used e.g., {{  }}
-    it('has name in template [REMOVE]', () => {
-      expect(NavbarTemplate).to.match(/{{\s?\$ctrl\.name\s?}}/g);
+    it('has a name property', () => { // erase if removing this.name from the controller
+      expect(controller).to.have.property('name');
     });
   });
 
-  describe('Component', () => {
-      // component/directive specs
-      let component = NavbarComponent;
+  describe('View', () => {
+    // view layer specs.
+    let scope, template;
 
-      it('includes the intended template',() => {
-        expect(component.template).to.equal(NavbarTemplate);
-      });
+    beforeEach(() => {
+      scope = $rootScope.$new();
+      template = $compile('<navbar></navbar>')(scope);
+      scope.$apply();
+    });
+
+    it('has name in template', () => {
+      expect(template.find('h1').find('a').html()).to.eq('navbar');
+    });
 
-      it('invokes the right controller', () => {
-        expect(component.controller).to.equal(NavbarController);
-      });
   });
 });
diff --git a/client/app/components/about/about.js b/client/app/components/about/about.js
index dbb43d84..9dc45a54 100644
--- a/client/app/components/about/about.js
+++ b/client/app/components/about/about.js
@@ -11,7 +11,7 @@ let aboutModule = angular.module('about', [
   $stateProvider
     .state('about', {
       url: '/about',
-      template: '<about></about>'
+      component: 'about'
     });
 })
 
diff --git a/client/app/components/about/about.spec.js b/client/app/components/about/about.spec.js
index 7ec0a4d9..46703f84 100644
--- a/client/app/components/about/about.spec.js
+++ b/client/app/components/about/about.spec.js
@@ -1,49 +1,54 @@
 import AboutModule from './about'
-import AboutController from './about.controller';
-import AboutComponent from './about.component';
-import AboutTemplate from './about.html';
 
 describe('About', () => {
-  let $rootScope, makeController;
+  let $rootScope, $state, $location, $componentController, $compile;
 
   beforeEach(window.module(AboutModule));
-  beforeEach(inject((_$rootScope_) => {
-    $rootScope = _$rootScope_;
-    makeController = () => {
-      return new AboutController();
-    };
+
+  beforeEach(inject(($injector) => {
+    $rootScope = $injector.get('$rootScope');
+    $componentController = $injector.get('$componentController');
+    $state = $injector.get('$state');
+    $location = $injector.get('$location');
+    $compile = $injector.get('$compile');
   }));
 
   describe('Module', () => {
     // top-level specs: i.e., routes, injection, naming
+    it('About component should be visible when navigates to /about', () => {
+      $location.url('/about');
+      $rootScope.$digest();
+      expect($state.current.component).to.eq('about');
+    });
   });
 
   describe('Controller', () => {
     // controller specs
-    it('has a name property [REMOVE]', () => { // erase if removing this.name from the controller
-      let controller = makeController();
-      expect(controller).to.have.property('name');
+    let controller;
+    beforeEach(() => {
+      controller = $componentController('about', {
+        $scope: $rootScope.$new()
+      });
     });
-  });
 
-  describe('Template', () => {
-    // template specs
-    // tip: use regex to ensure correct bindings are used e.g., {{  }}
-    it('has name in template [REMOVE]', () => {
-      expect(AboutTemplate).to.match(/{{\s?\$ctrl\.name\s?}}/g);
+    it('has a name property', () => { // erase if removing this.name from the controller
+      expect(controller).to.have.property('name');
     });
   });
 
-  describe('Component', () => {
-      // component/directive specs
-      let component = AboutComponent;
+  describe('View', () => {
+    // view layer specs.
+    let scope, template;
 
-      it('includes the intended template',() => {
-        expect(component.template).to.equal(AboutTemplate);
-      });
+    beforeEach(() => {
+      scope = $rootScope.$new();
+      template = $compile('<about></about>')(scope);
+      scope.$apply();
+    });
+
+    it('has name in template', () => {
+      expect(template.find('h1').html()).to.eq('about');
+    });
 
-      it('invokes the right controller', () => {
-        expect(component.controller).to.equal(AboutController);
-      });
   });
 });
diff --git a/client/app/components/home/home.js b/client/app/components/home/home.js
index b73a29f7..754c6def 100644
--- a/client/app/components/home/home.js
+++ b/client/app/components/home/home.js
@@ -14,7 +14,7 @@ let homeModule = angular.module('home', [
   $stateProvider
     .state('home', {
       url: '/',
-      template: '<home></home>'
+      component: 'home'
     });
 })
 
diff --git a/client/app/components/home/home.spec.js b/client/app/components/home/home.spec.js
index 1ad11c4d..f2cada3e 100644
--- a/client/app/components/home/home.spec.js
+++ b/client/app/components/home/home.spec.js
@@ -1,49 +1,54 @@
 import HomeModule from './home'
-import HomeController from './home.controller';
-import HomeComponent from './home.component';
-import HomeTemplate from './home.html';
 
 describe('Home', () => {
-  let $rootScope, makeController;
+  let $rootScope, $state, $location, $componentController, $compile;
 
   beforeEach(window.module(HomeModule));
-  beforeEach(inject((_$rootScope_) => {
-    $rootScope = _$rootScope_;
-    makeController = () => {
-      return new HomeController();
-    };
+
+  beforeEach(inject(($injector) => {
+    $rootScope = $injector.get('$rootScope');
+    $componentController = $injector.get('$componentController');
+    $state = $injector.get('$state');
+    $location = $injector.get('$location');
+    $compile = $injector.get('$compile');
   }));
 
   describe('Module', () => {
     // top-level specs: i.e., routes, injection, naming
+    it('default component should be home', () => {
+      $location.url('/');
+      $rootScope.$digest();
+      expect($state.current.component).to.eq('home');
+    });
   });
 
   describe('Controller', () => {
     // controller specs
-    it('has a name property [REMOVE]', () => { // erase if removing this.name from the controller
-      let controller = makeController();
-      expect(controller).to.have.property('name');
+    let controller;
+    beforeEach(() => {
+      controller = $componentController('home', {
+        $scope: $rootScope.$new()
+      });
     });
-  });
 
-  describe('Template', () => {
-    // template specs
-    // tip: use regex to ensure correct bindings are used e.g., {{  }}
-    it('has name in template [REMOVE]', () => {
-      expect(HomeTemplate).to.match(/{{\s?\$ctrl\.name\s?}}/g);
+    it('has a name property', () => { // erase if removing this.name from the controller
+      expect(controller).to.have.property('name');
     });
   });
 
-  describe('Component', () => {
-      // component/directive specs
-      let component = HomeComponent;
+  describe('View', () => {
+    // view layer specs.
+    let scope, template;
 
-      it('includes the intended template',() => {
-        expect(component.template).to.equal(HomeTemplate);
-      });
+    beforeEach(() => {
+      scope = $rootScope.$new();
+      template = $compile('<home></home>')(scope);
+      scope.$apply();
+    });
+
+    it('has name in template', () => {
+      expect(template.find('h1').html()).to.eq('Found in home.html');
+    });
 
-      it('invokes the right controller', () => {
-        expect(component.controller).to.equal(HomeController);
-      });
   });
 });
diff --git a/package.json b/package.json
index 1f4c972c..e3064c72 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "dependencies": {
     "angular": "^1.5.0",
-    "angular-ui-router": "^0.2.15",
+    "angular-ui-router": "^1.0.0-beta.1",
     "normalize.css": "^3.0.3"
   },
   "devDependencies": {