diff --git a/Gulpfile.js b/Gulpfile.js
index 9771dca..9939c99 100644
--- a/Gulpfile.js
+++ b/Gulpfile.js
@@ -3,18 +3,29 @@ var sync    = require('run-sequence');
 var browser = require('browser-sync');
 var webpack = require('webpack-stream');
 var todo    = require('gulp-todoist');
+var path    = require('path');
+var yargs   = require('yargs').argv;
+var tpl     = require('gulp-template');
+var rename  = require('gulp-rename');
 
 /*
 map of paths for using with the tasks below
  */
 var paths = {
   entry: 'client/app/app.js',
-  app: ['client/app/**/*.{js,styl,html}', 'client/index.html'],
+  app: ['client/app/**/*.{js,styl,html}', 'client/styles/**/*.styl'],
   js: 'client/app/**/*!(.spec.js).js',
-  styl: 'client/app/**/*.styl',
+  styl: ['client/app/**/*.styl', 'client/style/**/*.styl'],
   toCopy: ['client/index.html'],
   html: ['client/index.html', 'client/app/**/*.html'],
-  dest: 'dist'
+  dest: 'dist',
+  blankTemplates: 'templates/component/*.**'
+};
+
+// helper funciton
+var resolveToComponents = function(glob){
+  glob = glob || '';
+  return path.join('client', 'app/components', glob); // app/components/{glob}
 };
 
 gulp.task('todo', function() {
@@ -23,13 +34,9 @@ gulp.task('todo', function() {
 });
 
 gulp.task('build', ['todo'], function() {
-  //TODO
-  /*
-  fill this task out to take in entry file
-  and build using the webpack plugin.
-  the plugin takes the webpack.config as an arg.
-  be sure to stream the result to the destination path
-   */
+  return gulp.src(paths.entry)
+    .pipe(webpack(require('./webpack.config')))
+    .pipe(gulp.dest(paths.dest));
 });
 
 gulp.task('serve', function() {
@@ -47,7 +54,7 @@ gulp.task('serve', function() {
 simple task to copy over needed files to dist
  */
 gulp.task('copy', function() {
-  return gulp.src(paths.toCopy, { base: '.' })
+  return gulp.src(paths.toCopy, { base: 'client' })
     .pipe(gulp.dest(paths.dest));
 });
 
@@ -56,9 +63,30 @@ task to watch files for changes and call build and copy tasks
  */
 gulp.task('watch', function() {
   gulp.watch(paths.app, ['build', browser.reload]);
-  gulp.watch(paths.toCopy, ['copy']);
+  gulp.watch(paths.toCopy, ['copy', browser.reload]);
+});
+
+gulp.task('component', function(){
+  var cap = function(val){
+    return val.charAt(0).toUpperCase() + val.slice(1);
+  };
+
+  var name = yargs.name;
+  var parentPath = yargs.parent || '';
+  var destPath = path.join(resolveToComponents(), parentPath, name);
+
+  return gulp.src(paths.blankTemplates)
+    .pipe(tpl({
+      name: name,
+      upCaseName: cap(name)
+    }))
+    .pipe(rename(function(path){
+      path.basename = path.basename.replace('component', name);
+    }))
+    .pipe(gulp.dest(destPath));
 });
 
+
 gulp.task('default', function(done) {
   sync('build', 'copy', 'serve', 'watch', done)
 });
diff --git a/client/app/app.directive.js b/client/app/app.directive.js
new file mode 100644
index 0000000..465e012
--- /dev/null
+++ b/client/app/app.directive.js
@@ -0,0 +1,11 @@
+import './app.styl';
+import template from './app.html';
+
+export const appDirective = ()=> {
+  return {
+    template,
+    restrict: 'E',
+    scope: {},
+    replace: true
+  };
+};
diff --git a/client/app/app.html b/client/app/app.html
new file mode 100644
index 0000000..d11064b
--- /dev/null
+++ b/client/app/app.html
@@ -0,0 +1,20 @@
+<div id="app">
+  <header>
+    <nav>
+      <div class="logo">
+        <span ui-sref="home">
+          <a ui-sref="home">ngBlog</a>
+        </span>
+      </div>
+      <div class="links">
+        <a ui-sref="blog">blog</a>
+        <a ui-sref="admin">admin</a>
+        <a ui-sref="auth">signin</a>
+      </div>
+    </nav>
+  </header>
+  <main>
+    <div ui-view></div>
+  </main>
+  <footer></footer>
+</div>
diff --git a/client/app/app.js b/client/app/app.js
index c4948cb..5817181 100644
--- a/client/app/app.js
+++ b/client/app/app.js
@@ -1,6 +1,45 @@
-const showMessage = ()=> {
-  alert('it works!!!');
-}
-
-showMessage();
+// we don't need to use a variable
+// or the from keyword when importing a css/styl file
+// thanks the the styles loader it gets added as a
+// <style> tag in the head by default but can be changed
+import 'normalize.css';
+import {appDirective} from './app.directive';
+// the angular libs are just common js
+// and therefore we can assume they were
+// exported using the default keyword in ES2015
+// so we can import each module
+// with any name we see fit.
+// Note that the actual value are just strings except angular itself
+// because that's how angular decided to export
+// their auxillary modules
+import angular from 'angular';
+import uiRouter from 'angular-ui-router';
+import ngAnimate from 'angular-animate';
+// because we exported a named variable
+// without using default keyword
+// we must import it with the brackets
+import {home} from './components/home/home';
+import {blog} from './components/blog/blog';
+import {common} from './components/common/common';
+import {shared} from './shared/shared';
+import {blogPost} from './components/blogPost/blogPost';
+import {admin} from './components/admin/admin';
+import {auth} from './components/auth/auth';
 
+angular.module('app', [
+  uiRouter,
+  ngAnimate,
+  // home is the module, the angular module
+  // because that's what we exported in home.js
+  // all angular modules have a name
+  // property who's value is the name you set the
+  // module to be
+  home.name,
+  blog.name,
+  common.name,
+  shared.name,
+  blogPost.name,
+  admin.name,
+  auth.name
+])
+.directive('app', appDirective);
diff --git a/client/app/app.styl b/client/app/app.styl
new file mode 100644
index 0000000..70b15f6
--- /dev/null
+++ b/client/app/app.styl
@@ -0,0 +1,119 @@
+@import '../styles'
+@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700);
+
+html
+body
+  height 100%
+
+body
+  font-family 'Roboto', sans-serif
+  background-color bg-color
+  *
+    box-sizing border-box
+a
+  color white
+  text-decoration none
+  &:visited
+    color white
+  &:hover
+  &:active
+    text-decoration none
+
+#app
+  header nav
+    height navbar-height
+    background-color primary-color
+    makeShadow(2)
+    z-index max-z
+    position fixed
+    min-width 100%
+    padding 15px
+    .logo
+      span(1/8)
+      color white
+      font-size 1.8rem
+      cursor pointer
+    .links
+      span(2/8, 5/8, 2)
+      *
+        font-size 1.3rem
+        margin-left 10px
+  main
+    padding-top navbar-height
+
+.button
+  outline none
+  border none
+  border-radius 2px
+  background-color primary-color
+  color white
+  text-transform uppercase
+  text-align center
+  min-width 88px
+  min-height 36px
+  overflow hidden
+  user-select none
+  vertical-align middle
+  position relative
+  padding 0px 6px
+  white-space nowrap
+  cursor pointer
+  font-weight 500
+  user-select none
+  font-size 14px
+  line-height 30px
+  &[disabled]
+  &.disabled
+  :disabled
+    background-color white !important//shade(primary-color, 20%)
+    color text-disabled-color
+    box-shadow none !important
+  &.accent
+    background-color accent-color
+  &.fab
+    width 56px
+    min-width 0px
+    background-clip padding-box
+    height 56px
+    line-height 56px
+    z-index 20
+    border-radius 50%
+
+  &:active
+  &:focus
+    border none
+    outline none
+
+  &.raised
+  &.fab
+    makeShadow(1)
+    transition all .3s ease
+
+    &:active
+      makeShadow(3)
+main
+  position relative
+  min-height 400px
+
+  [ui-view].ng-enter
+    opacity 0
+    transform scale3d(0.5,0.5,0.5)
+
+  [ui-view].ng-enter-active
+    opacity 1
+    transform scale3d(1,1,1)
+
+  [ui-view].ng-leave
+    opacity 1
+    transform translate3d(0,0,0)
+
+  [ui-view].ng-leave-active
+    opacity 0
+    transform translate3d(100px, 0, 0)
+
+  [ui-view].ng-enter
+  [ui-view].ng-leave
+    position absolute
+    left 0
+    right 0
+    transition all .5s ease-in-out
diff --git a/client/app/components/about/about.controller.js b/client/app/components/about/about.controller.js
new file mode 100644
index 0000000..a748b6d
--- /dev/null
+++ b/client/app/components/about/about.controller.js
@@ -0,0 +1,10 @@
+class AboutController {
+  constructor() {
+    this.greeting = 'AboutController!';
+  }
+
+}
+
+AboutController.$inject = [];
+
+export {AboutController};
diff --git a/client/app/components/about/about.directive.js b/client/app/components/about/about.directive.js
new file mode 100644
index 0000000..1f8eb98
--- /dev/null
+++ b/client/app/components/about/about.directive.js
@@ -0,0 +1,14 @@
+import './about.styl';
+import {AboutController as controller} from './about.controller';
+import template from './about.html';
+
+export const aboutDirective = ()=> {
+  return {
+    controller,
+    template,
+    controllerAs: 'vm',
+    scope: {},
+    replace: true,
+    restrict: 'E'
+  }
+};
diff --git a/client/app/components/about/about.html b/client/app/components/about/about.html
new file mode 100644
index 0000000..595a224
--- /dev/null
+++ b/client/app/components/about/about.html
@@ -0,0 +1,3 @@
+<section class="about">
+  <h1>Hey from {{ vm.greeting }}</h1>
+</section>
diff --git a/client/app/components/about/about.js b/client/app/components/about/about.js
new file mode 100644
index 0000000..5dafdbe
--- /dev/null
+++ b/client/app/components/about/about.js
@@ -0,0 +1,13 @@
+import {aboutDirective} from './about.directive';
+import angular from 'angular';
+import uiRouter from 'angular-ui-router';
+
+
+export const about = angular.module('about', [uiRouter])
+  .config(($stateProvider) => {
+    $stateProvider.state('about', {
+      url: '/about',
+      template: '<about></about>'
+    })
+  })
+  .directive('about', aboutDirective);
diff --git a/client/app/components/about/about.spec.js b/client/app/components/about/about.spec.js
new file mode 100644
index 0000000..0a01385
--- /dev/null
+++ b/client/app/components/about/about.spec.js
@@ -0,0 +1,61 @@
+import {about} from './about'
+import {AboutController} from './about.controller';
+import {aboutDirective} from './about.directive';
+import template from './about.html';
+
+describe('About', ()=>{
+  let $rootScope,
+  makeController;
+
+  beforeEach(window.module(about.name));
+  beforeEach(inject((_$rootScope_)=>{
+    $rootScope = _$rootScope_;
+    makeController = ()=>{
+      return new AboutController();
+    };
+  }));
+
+  describe('Module', ()=>{
+    // test things about the component module
+    // checking to see if it registers certain things and what not
+    // test for best practices with naming too
+    // test for routing
+  });
+
+  describe('Controller', ()=>{
+    // test your controller here
+
+    it('should have a name property [REMOVE]', ()=>{ // erase me if you remove this.name from the controller
+      let controller = makeController();
+
+      expect(controller).to.have.property('greeting');
+    });
+  });
+
+  describe('Template', ()=>{
+    // test the template
+    // use Regexes to test that you are using the right bindings {{  }}
+
+    it('should have name in template [REMOVE]', ()=>{
+      expect(template).to.match(/{{\s?vm\.greeting\s?}}/g);
+    });
+  });
+
+
+  describe('Directive', ()=>{
+      // test the component/directive itself
+      let directive = aboutDirective();
+
+      it('should use the right template',()=>{
+        expect(directive.template).to.equal(template);
+      });
+
+      it('should use controllerAs', ()=>{
+        expect(directive).to.have.property('controllerAs');
+      });
+
+      it('should use the right controller', ()=>{
+        expect(directive.controller).to.equal(AboutController);
+      });
+  });
+});
diff --git a/client/app/components/about/about.styl b/client/app/components/about/about.styl
new file mode 100644
index 0000000..bde2729
--- /dev/null
+++ b/client/app/components/about/about.styl
@@ -0,0 +1,2 @@
+.about
+  position relative
diff --git a/client/app/components/admin/admin.controller.js b/client/app/components/admin/admin.controller.js
new file mode 100644
index 0000000..d7aa241
--- /dev/null
+++ b/client/app/components/admin/admin.controller.js
@@ -0,0 +1,26 @@
+class AdminController {
+  constructor(Posts, $state, Auth) {
+
+    this.post = {
+      text: '',
+      title: ''
+    };
+
+    this.Posts = Posts;
+    this.$state = $state;
+  }
+
+  // use default params here
+  createPost(post = this.post) {
+    this.Posts.create(post)
+      .then(() => {
+        this.post = {};
+        this.$state.go('blog');
+      });
+  }
+}
+
+
+AdminController.$inject = ['Posts', '$state'];
+
+export {AdminController};
diff --git a/client/app/components/admin/admin.directive.js b/client/app/components/admin/admin.directive.js
new file mode 100644
index 0000000..50d3c78
--- /dev/null
+++ b/client/app/components/admin/admin.directive.js
@@ -0,0 +1,13 @@
+import './admin.styl';
+import {AdminController as controller} from './admin.controller';
+import template from './admin.html';
+export const adminDirective = ()=> {
+  return {
+    controller,
+    template,
+    controllerAs: 'vm',
+    scope: {},
+    replace: true,
+    restrict: 'E'
+  }
+};
diff --git a/client/app/components/admin/admin.html b/client/app/components/admin/admin.html
new file mode 100644
index 0000000..54f7573
--- /dev/null
+++ b/client/app/components/admin/admin.html
@@ -0,0 +1,30 @@
+<section class="admin">
+  <div class="admin-title">
+    <h1>Create a post!</h1>
+  </div>
+  <div class="admin-create">
+    <form name="postForm" novalidate ng-submit="vm.createPost(vm.post)">
+      <textbox
+      label="Post title"
+      bind-to="vm.post.title"
+      required
+      name="title">
+      </textbox>
+
+      <textarea
+      name="post"
+      ng-model="vm.post.text"
+      required
+      placeholder="...write something">
+      </textarea>
+
+      <div class="form-buttons">
+        <button class="button raised accent"
+        ng-disabled="postForm.$invalid">
+          done
+        </button>
+      </div>
+    </form>
+
+  </div>
+</section>
diff --git a/client/app/components/admin/admin.js b/client/app/components/admin/admin.js
new file mode 100644
index 0000000..95fad18
--- /dev/null
+++ b/client/app/components/admin/admin.js
@@ -0,0 +1,13 @@
+import {adminDirective} from './admin.directive';
+import angular from 'angular';
+import uiRouter from 'angular-ui-router';
+
+export const admin = angular.module('admin', [uiRouter])
+  .config(($stateProvider) => {
+    $stateProvider.state('admin', {
+      url: '/admin',
+      template: '<admin></admin>',
+      auth: true
+    })
+  })
+  .directive('admin', adminDirective);
diff --git a/client/app/components/admin/admin.spec.js b/client/app/components/admin/admin.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/client/app/components/admin/admin.styl b/client/app/components/admin/admin.styl
new file mode 100644
index 0000000..449a160
--- /dev/null
+++ b/client/app/components/admin/admin.styl
@@ -0,0 +1,22 @@
+@import '../../../styles'
+
+.admin
+  .admin-title
+  .admin-create
+    center(800px)
+    .textbox
+      margin-bottom tb-margin
+    textarea
+      width 100%
+      border none
+      outline none
+      min-height 380px
+      makeShadow(1)
+      padding tb-padding lr-padding
+      line-height 2rem
+      font-size 1.3rem
+      font-weight 300
+      margin-bottom tb-margin
+    .form-buttons
+      col(1/4, 3/4, 1)
+      text-align right
diff --git a/client/app/components/auth/auth.controller.js b/client/app/components/auth/auth.controller.js
new file mode 100644
index 0000000..d74dd6f
--- /dev/null
+++ b/client/app/components/auth/auth.controller.js
@@ -0,0 +1,64 @@
+class AuthController {
+  constructor(Auth, $state, $timeout) {
+    this.$timeout = $timeout;
+    this.$state = $state;
+    this.Auth = Auth;
+    this.current = 'signin';
+    this.message = 'Don\'t have an account?';
+    this.other = 'signup';
+    this.credits = {};
+    this.showUserError = false;
+  }
+
+  send(){
+    const action = this.current;
+    this[action].call(this, this.credits);
+  }
+
+  signin(credits) {
+    this.Auth.signin(credits)
+    .then(()=> {
+      this.$state.go('admin')
+    })
+    .catch(()=> {
+      this.showError();
+    })
+  }
+
+  signup(credits) {
+    this.Auth.signup(credits)
+    .then(()=> {
+      this.$state.go('admin')
+    })
+    .catch(e => {
+      this.showError(e);
+    })
+  }
+
+  showError(e){
+    this.showUserError = true;
+    this.errorMessage = 'Nope';
+    this.credits = {};
+    this.$timeout(()=> {
+      this.showUserError = false;
+      this.errorMessage = '';
+
+    }, 3000);
+  }
+
+  changeForm() {
+    const temp = this.current;
+    this.current = this.other;
+    this.other = temp;
+
+    if(this.current === 'signup') {
+      this.message = 'Already have and account?';
+    } else {
+      this.message = 'Don\'t have an account?';
+    }
+  }
+}
+
+AuthController.$inject = ['Auth', '$state', '$timeout'];
+
+export {AuthController};
diff --git a/client/app/components/auth/auth.directive.js b/client/app/components/auth/auth.directive.js
new file mode 100644
index 0000000..4ec6d9d
--- /dev/null
+++ b/client/app/components/auth/auth.directive.js
@@ -0,0 +1,14 @@
+import './auth.styl';
+import {AuthController as controller} from './auth.controller';
+import template from './auth.html';
+
+export const authDirective = ()=> {
+  return {
+    controller,
+    template,
+    controllerAs: 'vm',
+    scope: {},
+    replace: true,
+    restrict: 'E'
+  }
+};
diff --git a/client/app/components/auth/auth.html b/client/app/components/auth/auth.html
new file mode 100644
index 0000000..d72d25c
--- /dev/null
+++ b/client/app/components/auth/auth.html
@@ -0,0 +1,25 @@
+<section class="auth">
+  <form class="card" name="authform" novalidate ng-submit="vm.send()">
+    <div class="title">
+      <h3>{{ vm.current }}</h3>
+    </div>
+    <div class="inputs">
+      <textbox bind-to="vm.credits.username" label="username" required></textbox>
+      <textbox bind-to="vm.credits.password" label="password" type="password" required></textbox>
+    </div>
+    <div class="buttons">
+      <button class="button raised accent"
+        ng-disabled="authform.$invalid"
+      >{{ vm.current }}</button>
+    </div>
+  </form>
+
+  <div class="action">
+    <h3>{{ vm.message }}</h3>
+    <button class="button raised" ng-click="vm.changeForm()">{{ vm.other }}</button>
+  </div>
+
+  <div class="err-message" ng-if="vm.showError">
+    <h1 class="message">{{ vm.errorMessage }}</h1>
+  </div>
+</section>
diff --git a/client/app/components/auth/auth.js b/client/app/components/auth/auth.js
new file mode 100644
index 0000000..04d2ca0
--- /dev/null
+++ b/client/app/components/auth/auth.js
@@ -0,0 +1,13 @@
+import {authDirective} from './auth.directive';
+import angular from 'angular';
+import uiRouter from 'angular-ui-router';
+
+
+export const auth = angular.module('auth', [uiRouter])
+  .config(($stateProvider) => {
+    $stateProvider.state('auth', {
+      url: '/auth',
+      template: '<auth></auth>'
+    })
+  })
+  .directive('auth', authDirective);
diff --git a/client/app/components/auth/auth.spec.js b/client/app/components/auth/auth.spec.js
new file mode 100644
index 0000000..0cfb2d8
--- /dev/null
+++ b/client/app/components/auth/auth.spec.js
@@ -0,0 +1,61 @@
+import {auth} from './auth'
+import {AuthController} from './auth.controller';
+import {authDirective} from './auth.directive';
+import template from './auth.html';
+
+describe('Auth', ()=>{
+  let $rootScope,
+  makeController;
+
+  beforeEach(window.module(auth.name));
+  beforeEach(inject((_$rootScope_)=>{
+    $rootScope = _$rootScope_;
+    makeController = ()=>{
+      return new AuthController();
+    };
+  }));
+
+  describe('Module', ()=>{
+    // test things about the component module
+    // checking to see if it registers certain things and what not
+    // test for best practices with naming too
+    // test for routing
+  });
+
+  describe('Controller', ()=>{
+    // test your controller here
+
+    it('should have a name property [REMOVE]', ()=>{ // erase me if you remove this.name from the controller
+      let controller = makeController();
+
+      expect(controller).to.have.property('greeting');
+    });
+  });
+
+  describe('Template', ()=>{
+    // test the template
+    // use Regexes to test that you are using the right bindings {{  }}
+
+    it('should have name in template [REMOVE]', ()=>{
+      expect(template).to.match(/{{\s?vm\.greeting\s?}}/g);
+    });
+  });
+
+
+  describe('Directive', ()=>{
+      // test the component/directive itself
+      let directive = authDirective();
+
+      it('should use the right template',()=>{
+        expect(directive.template).to.equal(template);
+      });
+
+      it('should use controllerAs', ()=>{
+        expect(directive).to.have.property('controllerAs');
+      });
+
+      it('should use the right controller', ()=>{
+        expect(directive.controller).to.equal(AuthController);
+      });
+  });
+});
diff --git a/client/app/components/auth/auth.styl b/client/app/components/auth/auth.styl
new file mode 100644
index 0000000..26fb139
--- /dev/null
+++ b/client/app/components/auth/auth.styl
@@ -0,0 +1,35 @@
+@import '../../../styles'
+
+.auth
+  position relative
+  form
+    .title
+      text-align center
+      *
+        font-weight 300
+        font-size 1.5rem
+        margin 0px
+    margin 20px
+    center(700px)
+    makeShadow(1)
+    padding 10px
+    background-color white
+    .inputs
+      margin 15px
+      .textbox
+        col(1/2, 0, 2)
+
+    .buttons
+      margin-top 15px
+      span(1/8, 7/8)
+
+  .action
+    center(700px)
+
+  .error-message
+    position absolute
+    top 50%
+    left 50%
+    background-color white
+    .message
+      color red
diff --git a/client/app/components/blog/blog.controller.js b/client/app/components/blog/blog.controller.js
new file mode 100644
index 0000000..3e11e4a
--- /dev/null
+++ b/client/app/components/blog/blog.controller.js
@@ -0,0 +1,27 @@
+import _ from 'lodash';
+// importing images using the file loader in webpack
+// catpic will be the path to the emitted photo
+import catpic from '../../../images/cat.jpeg';
+
+class BlogController {
+  constructor(Posts) {
+    this.message = 'The latest from the blog';
+    this.catpic = catpic;
+    this.Posts = Posts;
+    this.getPosts();
+
+    this.search = '';
+
+  }
+
+  getPosts() {
+    this.Posts.get()
+      .then(() => {
+        this.posts = this.Posts.getState();
+      });
+  }
+}
+
+BlogController.$inject = ['Posts'];
+
+export {BlogController};
diff --git a/client/app/components/blog/blog.directive.js b/client/app/components/blog/blog.directive.js
new file mode 100644
index 0000000..37ab851
--- /dev/null
+++ b/client/app/components/blog/blog.directive.js
@@ -0,0 +1,14 @@
+import './blog.styl';
+import template from './blog.html';
+import {BlogController as controller} from './blog.controller';
+
+export const blogDirective = () => {
+  return {
+    template,
+    controller,
+    controllerAs: 'vm',
+    scope: {},
+    restrict: 'E',
+    replace: true
+  };
+};
diff --git a/client/app/components/blog/blog.html b/client/app/components/blog/blog.html
new file mode 100644
index 0000000..3ec9716
--- /dev/null
+++ b/client/app/components/blog/blog.html
@@ -0,0 +1,22 @@
+<section class="blog">
+  <div class="header">
+    <h1>{{ vm.message }}</h1>
+  </div>
+  <div class="search">
+    <textbox bind-to="vm.search" label="SEARCH"></textbox>
+  </div>
+  <div class="posts">
+    <div ng-repeat="post in vm.posts | filter:vm.search" class="post slide">
+      <div class="post-img">
+        <img ng-src="{{ ::vm.catpic }}" alt="kitten">
+      </div>
+      <div class="post-title">
+        <span>{{ post.title }}</span>
+      </div>
+      <div class="post-author">
+        <span>{{ post.author.username }}</span>
+      </div>
+      <button ui-sref="blogPost({title: post.slug})" class="button fab action">></button>
+    </div>
+  </div>
+</section>
diff --git a/client/app/components/blog/blog.js b/client/app/components/blog/blog.js
new file mode 100644
index 0000000..05ad8de
--- /dev/null
+++ b/client/app/components/blog/blog.js
@@ -0,0 +1,61 @@
+import {blogDirective} from './blog.directive';
+import angular from 'angular';
+import uiRouter from 'angular-ui-router';
+import ngAnimate from 'angular-animate';
+
+export const blog = angular.module('blog', [uiRouter, ngAnimate])
+  .config(function($stateProvider) {
+    $stateProvider.state('blog', {
+      url: '/blog',
+      template: '<blog></blog>'
+    });
+  })
+  .directive('blog', blogDirective)
+  /*
+   * uses ngAnimate and the js animation api
+   * along with the new $animateCss
+   * to define a google now inspired card
+   * animation that will be applied on page load
+   * and filtering
+   */
+  .animation('.slide', ($animateCss)=> {
+    return {
+      enter(element) {
+        return $animateCss(element, {
+          addClass: '',
+          duration: .6,
+          easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
+          stagger: .1,
+          from: {
+            opacity: 0,
+            visibilty: 'visible',
+            'transform-origin': 'top left',
+            transform: ' translateX(-3rem) translateY(15rem) rotate(15deg)' //'translate3d(0, -100%, 0)'
+          },
+
+          to: {
+            opacity: 1,
+            transform: 'translateY(0) translateX(0)' //'translate3d(0, 0, 0)'
+          }
+        });
+      },
+
+      leave(element) {
+        return $animateCss(element, {
+          addClass: '',
+          duration: .6,
+          easing: 'cubic-bezier(0.23, 1, 0.32, 1)',
+          from: {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)'
+          },
+
+          to: {
+            opacity: 0,
+            visibilty: 'hidden',
+            transform: 'translate3d(0, -100%, 0)'
+          }
+        });
+      }
+    }
+  });
diff --git a/client/app/components/blog/blog.spec.js b/client/app/components/blog/blog.spec.js
new file mode 100644
index 0000000..560673f
--- /dev/null
+++ b/client/app/components/blog/blog.spec.js
@@ -0,0 +1,59 @@
+import {blog} from './blog';
+import {blogDirective} from './blog.directive';
+import template from './blog.html';
+import {BlogController} from './blog.controller';
+
+describe('Blog', () => {
+  let $rootScope;
+  let makeController;
+
+  beforeEach(window.module(blog.name));
+  beforeEach(inject(_$rootScope_ => {
+    $rootScope = _$rootScope_;
+    makeController = (injectables) => {
+      return new BlogController(injectables);
+    };
+  }))
+
+  describe('module', () => {
+    it('should have an appropriate name', () => {
+      expect(blog.name).to.equal('blog');
+    });
+  });
+
+  describe('directive', ()=> {
+    let ddo;
+    beforeEach(() => {
+      ddo = blogDirective();
+    });
+
+    it('should have the right template', () => {
+      expect(ddo.template).to.equal(template);
+    });
+
+    it('should have the right controller', () => {
+      expect(ddo.controller).to.equal(BlogController);
+    });
+
+    it('should have an isolate scope', () => {
+      expect(ddo.scope).to.be.an('object');
+    });
+
+    it('should use controllerAs', () => {
+      expect(ddo.controllerAs).to.be.a('string');
+    });
+  });
+
+  describe('controller', ()=> {
+    it('should have blog posts', ()=> {
+      const controller = makeController();
+      expect(controller.posts).to.be.an('array');
+      expect(controller.posts[0]).to.have.property('author');
+      expect(controller.posts[0]).to.have.property('title');
+    });
+  });
+
+  describe('template', ()=> {
+
+  });
+});
diff --git a/client/app/components/blog/blog.styl b/client/app/components/blog/blog.styl
new file mode 100644
index 0000000..d075069
--- /dev/null
+++ b/client/app/components/blog/blog.styl
@@ -0,0 +1,39 @@
+@import '../../../styles'
+
+.blog
+  center(960px)
+  .header
+    *
+      text-align center
+      font-size 2.5rem
+      font-weight 300
+  .posts
+    margin-top 40px
+    .post
+      background-color white
+      margin-bottom tb-margin
+      position relative
+      makeShadow(1)
+      col(1/3, 0, 3)
+      .post-img
+        overflow hidden
+        height 200px
+        img
+          width 100%
+          transition transform .5s ease-in-out .5s
+          &:hover
+            transform scale(1.1)
+      .post-title
+        padding tb-padding lr-padding
+        background-color bg-color
+      .post-author
+        padding tb-padding lr-padding
+        *
+          font-weight 200
+      .action
+        position absolute
+        right 10px
+        bottom 14px
+  .search
+    center(300px)
+
diff --git a/client/app/components/blogPost/blogPost.controller.js b/client/app/components/blogPost/blogPost.controller.js
new file mode 100644
index 0000000..6b5e7b0
--- /dev/null
+++ b/client/app/components/blogPost/blogPost.controller.js
@@ -0,0 +1,7 @@
+class BlogPostController {
+  constructor() {
+
+  }
+}
+
+export {BlogPostController};
diff --git a/client/app/components/blogPost/blogPost.directive.js b/client/app/components/blogPost/blogPost.directive.js
new file mode 100644
index 0000000..75c5f69
--- /dev/null
+++ b/client/app/components/blogPost/blogPost.directive.js
@@ -0,0 +1,18 @@
+import './blogPost.styl';
+import template from './blogPost.html';
+import {BlogPostController as controller} from './blogPost.controller';
+
+export const blogPostDirective = () => {
+  return {
+    template,
+    controller,
+    controllerAs: 'vm',
+    // using resolve, we pass
+    scope: {
+      post: '='
+    },
+    bindToController: true,
+    restrict: 'E',
+    replace: true
+  };
+};
diff --git a/client/app/components/blogPost/blogPost.html b/client/app/components/blogPost/blogPost.html
new file mode 100644
index 0000000..ad96364
--- /dev/null
+++ b/client/app/components/blogPost/blogPost.html
@@ -0,0 +1,10 @@
+<section class="blog-post">
+  <div class="blog-post-card">
+    <div class="blog-post-title">
+      <h2>{{ vm.post.title }}</h2>
+    </div>
+    <div class="blog-post-content">
+      <p>{{ vm.post.text }}</p>
+    </div>
+  </div>
+</section>
diff --git a/client/app/components/blogPost/blogPost.js b/client/app/components/blogPost/blogPost.js
new file mode 100644
index 0000000..34e7dd5
--- /dev/null
+++ b/client/app/components/blogPost/blogPost.js
@@ -0,0 +1,28 @@
+import {blogPostDirective} from './blogPost.directive';
+import angular from 'angular';
+import uiRouter from 'angular-ui-router';
+
+export const blogPost = angular.module('blogPost', [uiRouter])
+  .config(function($stateProvider) {
+    $stateProvider.state('blogPost', {
+      url: '/blog/:title',
+      // setup attr to accept post from controller
+      template: '<blog-post post="post"></blog-post>',
+      // one off controller for resolving
+      controller: function($scope, post) {
+        // bind to scope to pass into component
+        $scope.post = post;
+      },
+
+      resolve: {
+        post: function(Posts, $stateParams) {
+          // get the cpost based on title
+          // in url
+          let {title} = $stateParams;
+          title = title.replace(/\-+/g, ' ');
+          return Posts.getOne({title});
+        }
+      }
+    });
+  })
+  .directive('blogPost', blogPostDirective)
diff --git a/client/app/components/blogPost/blogPost.styl b/client/app/components/blogPost/blogPost.styl
new file mode 100644
index 0000000..aa92fa1
--- /dev/null
+++ b/client/app/components/blogPost/blogPost.styl
@@ -0,0 +1,23 @@
+@import '../../../styles'
+
+.blog-post
+  margin-top tb-margin + 30
+  center(960px)
+  .blog-post-card
+    background-color white
+    makeShadow(1)
+    overflow hidden
+    .blog-post-title
+      background-color bg-color
+      padding tb-padding lr-padding
+      *
+        margin 0px
+        font-weight 300
+        font-size 2.5rem
+    .blog-post-content
+      border-top 1px solid alpha(black, 12%)
+      p
+        font-size 1.5rem
+        font-weight 200
+        line-height 2.3rem
+        padding 0px lr-padding
diff --git a/client/app/components/common/common.js b/client/app/components/common/common.js
new file mode 100644
index 0000000..ec2f1e4
--- /dev/null
+++ b/client/app/components/common/common.js
@@ -0,0 +1,5 @@
+import angular from 'angular';
+import {textboxDirective} from './textbox/textbox.directive';
+
+export const common = angular.module('common', [])
+  .directive('textbox', textboxDirective);
diff --git a/client/app/components/common/textbox/textbox.directive.js b/client/app/components/common/textbox/textbox.directive.js
new file mode 100644
index 0000000..89f4404
--- /dev/null
+++ b/client/app/components/common/textbox/textbox.directive.js
@@ -0,0 +1,19 @@
+import './textbox.styl';
+import template from './textbox.html';
+
+export const textboxDirective = () => {
+  return {
+    template,
+    restrict: 'E',
+    replace: true,
+    scope: {
+      bindTo: '='
+    },
+    link($scope, element, attr) {
+      $scope.label = attr.label || '';
+      $scope.type = attr.type || 'text';
+      $scope.bindTo = $scope.bindTo || '';
+      $scope.name = attr.name || '';
+    }
+  };
+};
diff --git a/client/app/components/common/textbox/textbox.html b/client/app/components/common/textbox/textbox.html
new file mode 100644
index 0000000..42589b3
--- /dev/null
+++ b/client/app/components/common/textbox/textbox.html
@@ -0,0 +1,10 @@
+<div class="textbox">
+  <input
+    type="{{ ::type }}"
+    required
+    ng-model="bindTo"
+    name="{{::name }}"/>
+  <span class="highlight"></span>
+  <span class="bar"></span>
+  <label>{{ label }}</label>
+</div>
diff --git a/client/app/components/common/textbox/textbox.styl b/client/app/components/common/textbox/textbox.styl
new file mode 100644
index 0000000..962ed82
--- /dev/null
+++ b/client/app/components/common/textbox/textbox.styl
@@ -0,0 +1,76 @@
+@import '../../../../styles'
+.textbox
+  position relative
+  width 100%
+
+  input
+    font-size 18px
+    padding 10px 10px 10px 5px
+    display block
+    color text-color
+    width 100%
+    background transparent
+    border none
+    border-bottom 1px solid darken(accent-color, 25%)
+    &:focus
+      outline none
+      & ~ .highlight
+        animation inputHighlight .3s ease
+      & ~ .bar:before
+      & ~ .bar:after
+        width 50%
+
+    &:focus ~ label
+    &:valid ~ label
+      top -20px
+      font-size 14px
+      color lighten(accent-color, 10%)
+
+  label
+    color darken(accent-color, 70%)
+    font-size 18px
+    font-weight normal
+    position absolute
+    pointer-events none
+    left 5px
+    top 10px
+    transition all 0.2s ease
+
+  .bar
+    position relative
+    display block
+    // width 120px
+    &:before
+    &:after
+      content ''
+      height 2px
+      width 0
+      bottom 1px
+      position absolute
+      background accent-color
+      transition ease all .2s
+    &:before
+      left: 50%
+    &:after
+      right 50%
+
+  .highlight
+    position absolute
+    height 60%
+    width 100px
+    top 25%
+    left 0
+    pointer-events none
+    opacity 0.5
+
+
+@keyframes inputHighlight {
+  from {
+    background accent-color
+  }
+
+  to {
+    background transparent
+    width 0
+  }
+}
diff --git a/client/app/components/components.js b/client/app/components/components.js
new file mode 100644
index 0000000..e69de29
diff --git a/client/app/components/home/home.controller.js b/client/app/components/home/home.controller.js
new file mode 100644
index 0000000..753b2ae
--- /dev/null
+++ b/client/app/components/home/home.controller.js
@@ -0,0 +1,16 @@
+// create our controller using the
+// highly controversial class
+import _ from 'lodash';
+
+class HomeController {
+  // bind to this and not $scope
+  // because of controllerAs.
+  constructor() {
+    this.title = 'Welcome to the blog!';
+    this.items = _.times(5, i => {
+      return `I am item ${i}`;
+    });
+  }
+}
+// could also just export the class up top as well
+export {HomeController};
diff --git a/client/app/components/home/home.directive.js b/client/app/components/home/home.directive.js
new file mode 100644
index 0000000..c15f7d1
--- /dev/null
+++ b/client/app/components/home/home.directive.js
@@ -0,0 +1,14 @@
+import './home.styl';
+import {HomeController as controller} from './home.controller';
+import template from './home.html';
+
+export const homeDirective = ()=> {
+  return {
+    template,
+    controller,
+    controllerAs: 'vm',
+    restrict: 'E',
+    replace: true,
+    scope: {}
+  };
+};
diff --git a/client/app/components/home/home.html b/client/app/components/home/home.html
new file mode 100644
index 0000000..e7d449c
--- /dev/null
+++ b/client/app/components/home/home.html
@@ -0,0 +1,8 @@
+<section class="home">
+  <div class="hero">
+    <div class="title">
+      <h1>{{ vm.title }}</h1>
+      <h3>We blog about the angulars</h3>
+    </div>
+  </div>
+</section>
diff --git a/client/app/components/home/home.js b/client/app/components/home/home.js
new file mode 100644
index 0000000..71826dc
--- /dev/null
+++ b/client/app/components/home/home.js
@@ -0,0 +1,16 @@
+import angular from 'angular';
+import {homeDirective} from './home.directive';
+
+// placing an export in front of ar var is the same
+// as exporting the var at the end of the file
+// using export {varname}
+export const home = angular.module('home', [])
+.config(function($stateProvider, $urlRouterProvider) {
+  $urlRouterProvider.otherwise('/');
+
+  $stateProvider.state('home', {
+    url: '/',
+    template: '<home></home>'
+  });
+})
+.directive('home', homeDirective);
diff --git a/client/app/components/home/home.styl b/client/app/components/home/home.styl
new file mode 100644
index 0000000..d21c62b
--- /dev/null
+++ b/client/app/components/home/home.styl
@@ -0,0 +1,19 @@
+@import '../../../styles'
+
+.home
+  .hero
+    height 600px
+    background-color alpha(black, 40%)
+    *
+      color white
+    .title
+      center(600px)
+      text-align center
+      h1
+        font-size 3rem
+      h3
+        font-size 2rem
+      *
+        font-weight 300
+  .items
+    center(600px)
diff --git a/client/app/shared/api.js b/client/app/shared/api.js
new file mode 100644
index 0000000..3865d9c
--- /dev/null
+++ b/client/app/shared/api.js
@@ -0,0 +1,4 @@
+export const api = {
+  url: 'http://localhost:3000/api',
+  root: 'http://localhost:3000'
+};
diff --git a/client/app/shared/auth.js b/client/app/shared/auth.js
new file mode 100644
index 0000000..7237d96
--- /dev/null
+++ b/client/app/shared/auth.js
@@ -0,0 +1,46 @@
+import _ from 'lodash';
+
+const tag = 'ngblog-token';
+
+const saveToken = (token)=> {
+  window.localStorage.setItem(tag, token);
+}
+
+const auth = ($http, API, $q) => {
+  let user = {};
+  const signin = (data)=> {
+    return $http({
+      data,
+      url: `${API.root}/auth/signin`,
+      method: 'POST'
+    })
+    .then(({data: {token}}) => {
+      saveToken(token);
+    });
+  };
+
+  const signup = (data)=> {
+    return $http({
+      data,
+      method: 'POST',
+      url: `${API.url}/users`
+    })
+    .then(({data: {token}}) => {
+      saveToken(token);
+    });
+  };
+
+  const getUser = ()=> {
+    return user;
+  };
+
+  const isAuth = ()=> {
+    return !!window.localStorage.getItem('ngblog-token');
+  }
+
+  return {signin, signup, getUser, isAuth};
+};
+
+auth.$inject = ['$http', 'API', '$q'];
+
+export {auth};
diff --git a/client/app/shared/posts.js b/client/app/shared/posts.js
new file mode 100644
index 0000000..ff5d513
--- /dev/null
+++ b/client/app/shared/posts.js
@@ -0,0 +1,56 @@
+import _ from 'lodash';
+
+const posts = ($http, API, $q) => {
+  let allPosts = [];
+  let id = 0;
+
+  const get = () => {
+    return $http.get(`${API.url}/posts`)
+      .then(({data}) => {
+        allPosts = data.map(post => {
+          post.slug = post.title.replace(/\s+/g, '-');
+          return post;
+        });
+      });
+  };
+
+  const getOne = (query) => {
+
+    const post = _.find(allPosts, query);
+
+    if (post) {
+      return $q.when(post);
+    } else {
+      let url = `${API.url}/posts`;
+
+      if (query.id) {
+        url += `${query.id}`
+      } else if (query.title) {
+        url += `?title=${query.title}`
+      }
+
+      return $http.get(url)
+        .then(({data}) => {
+          return data[0];
+        });
+    }
+  };
+
+  const getState = () => {
+    return allPosts;
+  };
+
+  const create = (data) => {
+    return $http({
+      data,
+      url: `${API.url}/posts`,
+      method: 'POST'
+    });
+  };
+
+  return {get, getOne, getState, create};
+};
+
+posts.$inject = ['$http', 'API', '$q'];
+
+export {posts};
diff --git a/client/app/shared/shared.js b/client/app/shared/shared.js
new file mode 100644
index 0000000..c8e8c57
--- /dev/null
+++ b/client/app/shared/shared.js
@@ -0,0 +1,26 @@
+import {api} from './api';
+import {posts} from './posts';
+import {auth} from './auth';
+import ngJwt from 'angular-jwt';
+import angular from 'angular';
+
+export const shared = angular.module('shared', [ngJwt])
+  .constant('API', api)
+  .factory('Posts', posts)
+  .factory('Auth', auth)
+  .config(($httpProvider, jwtInterceptorProvider) => {
+    jwtInterceptorProvider.tokenGetter = () => {
+      return localStorage.getItem('ngblog-token');
+    };
+
+    $httpProvider.interceptors.push('jwtInterceptor');
+  })
+  .run(($state, $rootScope, Auth) => {
+    $rootScope.$on('$stateChangeStart', (e, toState, ...rest) => {
+      if (toState.auth && !Auth.isAuth()) {
+        e.preventDefault();
+        $state.go('auth');
+      }
+    });
+  });
+
diff --git a/client/images/cat.jpeg b/client/images/cat.jpeg
new file mode 100644
index 0000000..e961242
Binary files /dev/null and b/client/images/cat.jpeg differ
diff --git a/client/images/notary.jpeg b/client/images/notary.jpeg
new file mode 100644
index 0000000..8a1ea72
Binary files /dev/null and b/client/images/notary.jpeg differ
diff --git a/client/index.html b/client/index.html
index 7b81e55..d588334 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,11 +1,14 @@
 <!DOCTYPE html>
-<html lang="en">
+<!-- don't forget the basics of angular here! -->
+<html lang="en" ng-app="app">
 <head>
   <meta charset="UTF-8">
   <title>ngBlog</title>
 </head>
 <body>
 
+  <app></app>
+  <!-- don't you dare load up any other script tags here -->
   <script src="bundle.js"></script>
 </body>
 </html>
diff --git a/client/styles/colors.styl b/client/styles/colors.styl
new file mode 100644
index 0000000..0255686
--- /dev/null
+++ b/client/styles/colors.styl
@@ -0,0 +1,10 @@
+bg-color = #efefef
+
+
+// text
+text-color = alpha(black, 87%)
+text-disabled-color = alpha(black, 26%)
+
+// theme
+primary-color = #FF5722
+accent-color = #1DE9B6
diff --git a/client/styles/index.styl b/client/styles/index.styl
new file mode 100644
index 0000000..cda0654
--- /dev/null
+++ b/client/styles/index.styl
@@ -0,0 +1,4 @@
+@import 'colors'
+@import 'sizes'
+@import 'mixins'
+@import 'jeet'
diff --git a/client/styles/mixins.styl b/client/styles/mixins.styl
new file mode 100644
index 0000000..d02d7a5
--- /dev/null
+++ b/client/styles/mixins.styl
@@ -0,0 +1,11 @@
+makeShadow(level = 1)
+  if level is 1
+    box-shadow 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
+  else if level is 2
+    box-shadow 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
+  else if level is 3
+    box-shadow 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)
+  else if level is 4
+    box-shadow 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
+  else if level is 5
+    box-shadow 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)
diff --git a/client/styles/sizes.styl b/client/styles/sizes.styl
new file mode 100644
index 0000000..9ff9522
--- /dev/null
+++ b/client/styles/sizes.styl
@@ -0,0 +1,19 @@
+// paddings
+lr-padding = 15px
+tb-padding = 10px
+
+
+// margins
+lr-margin = 10px
+tb-margin = 15px
+
+navbar-height = 68px
+
+
+// z index
+max-z = 99999
+high-z = 1000
+mid-z = 500
+low-z = 100
+one-up-z = 10
+negative-z = -1
diff --git a/db.json b/db.json
new file mode 100644
index 0000000..250ccae
--- /dev/null
+++ b/db.json
@@ -0,0 +1,109 @@
+{
+  "posts": [
+    {
+      "id": "55aa018d9a73d85e195e5d43",
+      "createdAt": "Fri Nov 26 1971 00:58:20 GMT-0800 (PST)",
+      "author": "Jaime Lowe",
+      "title": "aute anim exercitation",
+      "text": "Aliqua qui anim officia ad ex anim in sit dolor occaecat. Proident enim nisi magna sunt quis exercitation est quis est. Cupidatat sit exercitation aute irure dolore officia dolor est exercitation irure do. Id velit pariatur culpa ullamco sunt qui amet nostrud veniam dolor. Fugiat non consequat labore dolor nostrud. Ea occaecat exercitation pariatur non consequat reprehenderit proident ad ad consequat ipsum id qui.\r\nCupidatat cupidatat ea adipisicing Lorem ut velit ipsum duis aute. Pariatur incididunt minim id occaecat aliquip eiusmod ut pariatur. Enim veniam exercitation dolore adipisicing magna fugiat qui nulla dolor et. Nulla ex fugiat aliqua laborum ipsum incididunt in ad. Officia voluptate est consequat velit dolore exercitation.\r\n"
+    },
+    {
+      "id": "55aa018d1897689a87ff5b56",
+      "createdAt": "Mon May 17 1971 20:16:27 GMT-0700 (PDT)",
+      "author": "Shana Vazquez",
+      "title": "cillum commodo incididunt",
+      "text": "Ad eiusmod aute aute sint. Magna quis et dolor laborum sit duis proident pariatur anim. Duis ut fugiat ullamco commodo veniam ex elit laborum laborum. Minim ex velit aliquip consequat consectetur qui cupidatat voluptate. Proident fugiat proident elit reprehenderit cillum in.\r\nEnim consectetur nulla officia nulla id fugiat. Adipisicing Lorem fugiat in mollit deserunt deserunt. Reprehenderit nulla nulla ut nisi. Nostrud labore incididunt deserunt qui nisi sint tempor sit. Veniam irure magna officia veniam cupidatat do adipisicing excepteur. Est amet deserunt officia ut nisi esse commodo est irure voluptate enim sit veniam aliquip. Qui fugiat occaecat duis est exercitation do.\r\nNulla laboris nisi id nostrud nostrud minim ea commodo cillum nulla sunt. Nisi in dolore cupidatat et nostrud laboris sit mollit culpa officia minim aliquip culpa ad. Fugiat sint exercitation amet incididunt labore exercitation laborum labore amet consequat.\r\n"
+    },
+    {
+      "id": "55aa018d37565c3fa3a29b36",
+      "createdAt": "Sun Jan 22 1984 06:33:23 GMT-0800 (PST)",
+      "author": "Mavis Douglas",
+      "title": "sint ex laborum",
+      "text": "Deserunt voluptate velit adipisicing occaecat aliqua commodo mollit. Ut ut in sunt anim reprehenderit adipisicing officia enim. Elit dolor sit culpa cupidatat commodo ea duis commodo sint ut sint occaecat quis. Tempor deserunt mollit veniam mollit consectetur esse aliqua veniam exercitation. Amet voluptate amet proident enim sunt culpa nulla. Ea cupidatat labore officia est aliqua ad. Dolore eiusmod tempor in proident adipisicing magna nisi veniam consequat fugiat.\r\nDolor mollit exercitation irure occaecat amet consectetur. Lorem mollit exercitation adipisicing ea. Adipisicing id aute qui consequat occaecat occaecat ipsum veniam quis mollit deserunt. Deserunt tempor consectetur excepteur ad Lorem. Enim nostrud sint ullamco incididunt mollit voluptate dolore nostrud.\r\nOfficia mollit eu duis in Lorem eu nostrud culpa nisi id. Non nisi magna mollit ut eiusmod veniam consectetur dolor sint sit nulla. Et mollit duis proident veniam laborum ut consequat dolor ullamco est consequat duis reprehenderit commodo. Sint mollit proident dolore consectetur nulla cillum elit voluptate exercitation.\r\n"
+    },
+    {
+      "id": "55aa018d6ca68ba05a5863c6",
+      "createdAt": "Sun Feb 02 2014 15:29:53 GMT-0800 (PST)",
+      "author": "Cherie Vaughan",
+      "title": "voluptate officia",
+      "text": "Occaecat Lorem consectetur excepteur enim cupidatat velit Lorem cillum Lorem ea. Deserunt et aliquip adipisicing ullamco labore labore pariatur pariatur non cillum excepteur nisi ea. Consectetur occaecat in veniam et. Esse in aliqua mollit ex culpa sunt cillum ipsum exercitation deserunt aute dolor culpa id. Incididunt est et adipisicing in dolor consectetur consequat sint consequat. Nostrud exercitation aute exercitation cupidatat occaecat est tempor ullamco ut minim.\r\nCommodo in ea duis cillum ut officia amet ipsum sint nostrud exercitation occaecat. Lorem minim aute ipsum deserunt. Ut ex qui ut do.\r\nEt anim eu adipisicing ipsum elit nulla velit nisi tempor. Nisi voluptate elit Lorem fugiat. Adipisicing ad tempor amet dolore. Cupidatat excepteur veniam irure pariatur officia tempor. Incididunt laboris deserunt est dolor ad esse consequat labore et minim qui incididunt elit labore.\r\nConsectetur consectetur dolor dolor aliqua et duis in sint aliqua consequat velit. Excepteur tempor veniam Lorem ipsum aute Lorem dolore mollit. Fugiat nulla proident velit aute adipisicing nulla qui. Id in amet velit elit et do voluptate. Sint proident esse culpa Lorem cupidatat laboris. Culpa laboris elit elit minim consectetur eiusmod minim culpa commodo dolor eiusmod proident.\r\nId ipsum magna nisi laborum nulla deserunt ex ad sunt ut exercitation pariatur. Consectetur tempor sit mollit commodo occaecat sit ad anim eiusmod Lorem anim tempor. Nisi occaecat nostrud mollit incididunt proident.\r\n"
+    },
+    {
+      "id": "55aa018d944e5b32963a4d22",
+      "createdAt": "Thu Mar 21 1985 16:48:31 GMT-0800 (PST)",
+      "author": "Patrice Burch",
+      "title": "sunt laboris sit nisi",
+      "text": "Do do exercitation velit excepteur sunt excepteur. Dolor sit amet reprehenderit quis sunt. Incididunt quis consequat ea laboris occaecat. Commodo et dolor do reprehenderit incididunt.\r\nEx do consequat dolor excepteur quis laboris consequat eiusmod ullamco ex culpa ullamco et. Incididunt consequat ullamco ipsum laborum adipisicing culpa. Lorem velit nostrud non ipsum. Voluptate consectetur tempor duis dolor adipisicing ea pariatur eiusmod ea. Aliquip velit velit et dolor aute sit dolor Lorem fugiat.\r\n"
+    },
+    {
+      "id": "55aa018d7254b8100119a98d",
+      "createdAt": "Mon Aug 22 1977 23:28:07 GMT-0700 (PDT)",
+      "author": "Brittany Luna",
+      "title": "eiusmod ea duis incididunt",
+      "text": "Occaecat aute esse sit commodo irure veniam non excepteur qui nulla sunt. Magna fugiat id minim duis mollit in. Fugiat ex occaecat cupidatat irure in do aliqua ea et elit eiusmod aute non sit. Consectetur amet duis qui sint incididunt id. Ea dolor sunt qui ad et ut nisi do qui. Est mollit eu minim reprehenderit labore id aliqua ea. Id laboris aliqua ea enim eiusmod occaecat adipisicing minim dolor veniam duis ipsum mollit do.\r\nCupidatat ad ad reprehenderit veniam ex qui nostrud culpa Lorem aliquip. Excepteur non aliqua culpa adipisicing mollit consequat consectetur nostrud minim do ullamco nulla duis consequat. Fugiat commodo dolor in ipsum amet sint aliqua tempor nostrud veniam veniam velit. Enim eiusmod eu occaecat fugiat sit in aliquip ullamco labore amet non ad. Culpa eu quis pariatur cillum.\r\nElit fugiat mollit incididunt est veniam aliqua aliqua sunt id et reprehenderit deserunt. Anim aliqua ullamco nostrud sit officia pariatur mollit aliquip. Eiusmod mollit nisi non fugiat ullamco consequat labore. Quis sunt ipsum irure quis do adipisicing. Excepteur incididunt Lorem labore cupidatat excepteur esse ut. Adipisicing veniam laboris do officia est enim voluptate enim do fugiat laboris amet. Cupidatat ut aliquip ex sunt magna cillum irure ex eiusmod.\r\n"
+    },
+    {
+      "id": "55aa018df01a1046ef8a3885",
+      "createdAt": "Fri Jun 29 1973 07:15:38 GMT-0700 (PDT)",
+      "author": "Cynthia Stout",
+      "title": "enim incididunt excepteur amet",
+      "text": "Incididunt eiusmod pariatur aliquip sunt veniam ad. Minim incididunt occaecat dolore velit adipisicing est id eiusmod. Non ut est mollit magna voluptate. Magna cupidatat proident non qui. Sint esse Lorem aliqua incididunt esse commodo ea magna quis ad esse deserunt ut cupidatat.\r\nExcepteur non sit tempor cillum voluptate exercitation aliqua. Dolor et cupidatat quis exercitation excepteur ad commodo voluptate reprehenderit. Dolore nisi non culpa proident ea nostrud veniam enim non non exercitation.\r\nConsectetur non cupidatat nulla reprehenderit quis mollit veniam aute. Non ut elit magna nisi sit esse incididunt consectetur sunt duis eu culpa dolor. Sit officia culpa ad ullamco reprehenderit duis sunt dolor ut elit occaecat ut. Incididunt cillum do consectetur non elit fugiat est velit duis aute. Dolor labore exercitation ea ullamco ea nostrud minim ipsum labore mollit occaecat.\r\n"
+    },
+    {
+      "id": "55aa018dd7f7fb24b29212c8",
+      "createdAt": "Sat Mar 08 1980 01:42:00 GMT-0800 (PST)",
+      "author": "Sharon Ortega",
+      "title": "qui id",
+      "text": "Commodo non voluptate nisi irure mollit. Ex ad ea nisi veniam deserunt Lorem proident est minim. Duis laboris dolor mollit laborum sunt sunt laboris in aliqua minim sit. Ex sint do amet ex dolore laborum et sint consequat exercitation esse sunt enim velit. Excepteur dolor dolor aute laborum sit.\r\nDolor adipisicing labore tempor pariatur laborum. Officia elit laboris ullamco minim exercitation proident eu sint tempor ad. In id fugiat dolor dolore non et commodo eiusmod proident adipisicing adipisicing pariatur. Do aliquip sit consectetur labore culpa adipisicing excepteur duis veniam mollit dolore do ad.\r\nMollit amet laborum labore sint esse ex anim aliqua occaecat veniam. Ad adipisicing cillum nisi excepteur aute tempor. Dolore magna cupidatat anim anim occaecat non exercitation ex quis duis adipisicing reprehenderit laborum eiusmod.\r\nIrure enim anim cillum aliquip veniam. Veniam sint eu sint sit. Duis do deserunt et ipsum amet amet eiusmod et velit. Ullamco enim enim sint non dolor aute aliquip duis ea cillum cupidatat aute deserunt. Laboris excepteur ut anim in do anim. Anim ea magna esse incididunt id consectetur. Irure consectetur ut mollit exercitation excepteur nisi cupidatat nostrud nostrud.\r\n"
+    },
+    {
+      "id": "55aa018dca45b0e3d39b0a8e",
+      "createdAt": "Sat Sep 10 1994 17:14:12 GMT-0700 (PDT)",
+      "author": " Kent",
+      "title": "occaecat adipisicing",
+      "text": "Duis excepteur aliqua culpa labore non dolor sint amet esse eiusmod. Exercitation nostrud fugiat et incididunt voluptate labore excepteur ullamco nisi excepteur do duis eu. Tempor dolor nostrud proident do sint in sit duis qui dolor ut labore eu. Ad sit ad eu enim pariatur proident culpa veniam velit id anim.\r\nEnim Lorem exercitation amet tempor eiusmod deserunt ullamco aliquip. Ea culpa magna voluptate dolor adipisicing. Velit non duis fugiat voluptate excepteur nostrud ut. Exercitation nostrud incididunt ea qui minim quis aliqua.\r\nDolore dolor sunt et dolor ex reprehenderit laboris magna et labore laboris est aute officia. Cupidatat do veniam velit eu et dolore mollit sit. Lorem minim veniam culpa tempor culpa proident. Fugiat voluptate nulla do sint velit deserunt ipsum commodo quis quis est. Officia sint culpa in ad ea est incididunt ut. Aliquip nostrud commodo dolor nisi voluptate nisi nulla aliqua.\r\nVeniam deserunt est dolor magna irure irure ut excepteur in magna velit. Commodo proident duis officia deserunt. Cupidatat amet commodo aliquip et. Mollit ut fugiat cupidatat mollit sit enim qui nulla do eiusmod reprehenderit incididunt. Ea elit non occaecat labore esse et elit elit labore amet. Do reprehenderit nisi velit eiusmod aliquip enim exercitation do veniam Lorem consectetur. Et tempor sint laborum laborum ipsum adipisicing eiusmod anim ullamco sint in anim nostrud proident.\r\nEnim ad dolor ea cillum aute culpa voluptate velit minim et proident culpa commodo laborum. Proident proident consectetur velit nulla. Magna dolore id excepteur non exercitation sit labore id dolore do cillum non consectetur aute. Aliquip aliqua Lorem nostrud labore ullamco cillum.\r\n"
+    },
+    {
+      "id": "55aa018df7ed3b3f67e2261c",
+      "createdAt": "Fri Jan 03 1997 10:03:40 GMT-0800 (PST)",
+      "author": "Letitia Vega",
+      "title": "officia incididunt elit",
+      "text": "Amet reprehenderit veniam reprehenderit id eiusmod eu. Enim labore laborum deserunt cupidatat sunt. Pariatur Lorem ipsum occaecat irure fugiat eu ad.\r\nAute pariatur Lorem nostrud incididunt dolore nulla deserunt ipsum nulla voluptate id tempor. Sit id in et sit dolore non ut magna aliqua. Commodo ea aute est nisi quis.\r\nVeniam minim excepteur sint veniam elit sunt nostrud consectetur. Cupidatat deserunt sit dolor mollit irure consectetur ad dolor anim nostrud veniam veniam amet. Enim proident proident consectetur consectetur culpa voluptate minim voluptate anim cillum laboris mollit id. Deserunt veniam aliquip adipisicing mollit minim Lorem aliqua quis velit cupidatat aute amet. Aliqua ad proident occaecat ullamco sint adipisicing qui. Non elit labore adipisicing ex.\r\n"
+    },
+    {
+      "id": "55aa018d1fba0414f9f5b30a",
+      "createdAt": "Tue Aug 18 2009 00:17:39 GMT-0700 (PDT)",
+      "author": " Gay",
+      "title": "deserunt labore",
+      "text": "Sunt do commodo amet commodo anim tempor ea elit in. Pariatur ullamco nostrud consequat Lorem nulla qui. Adipisicing exercitation esse do esse irure commodo irure anim ex.\r\nDuis sunt fugiat dolor incididunt nostrud tempor ad. Dolore voluptate eiusmod qui pariatur cillum cillum fugiat nostrud occaecat fugiat ullamco duis ad ad. Irure eiusmod culpa occaecat proident consectetur officia proident aliquip ea minim id eu magna nulla.\r\nEt tempor id ea anim quis. Fugiat fugiat aute nulla magna magna aute cillum minim reprehenderit Lorem nulla consequat. Tempor esse id velit culpa quis eu aliqua nulla fugiat elit quis. Non eu id cupidatat culpa consequat ipsum. Non in Lorem elit in deserunt commodo irure ex deserunt amet laboris excepteur ad. Minim fugiat qui ea et velit laborum dolore qui. Eiusmod Lorem ad eu elit ipsum aute tempor nisi sint nulla proident enim eu.\r\nEiusmod dolor id eiusmod fugiat pariatur nulla reprehenderit. Commodo enim aliqua mollit proident cupidatat minim deserunt sit ea aliquip labore consequat. Et cillum ut ad deserunt eu fugiat. Excepteur sint minim aliqua enim dolor cupidatat officia sunt esse ex voluptate eu exercitation. Laboris incididunt laborum in consequat deserunt veniam sint consectetur velit ipsum amet labore sunt enim. Aute excepteur sunt aliqua ipsum irure ipsum et Lorem velit duis et ullamco laboris magna. Officia sunt aliqua minim cillum eiusmod velit exercitation.\r\n"
+    },
+    {
+      "id": "55aa018df2ea2bc1f5298c30",
+      "createdAt": "Wed Sep 11 1974 18:22:40 GMT-0700 (PDT)",
+      "author": "Earlene Morales",
+      "title": "pariatur labore proident",
+      "text": "Et exercitation ut duis aute quis sunt cupidatat nulla. Occaecat ea officia ipsum nisi culpa esse ea ut pariatur esse Lorem sunt veniam. Occaecat nisi aute ullamco exercitation occaecat id. Labore amet sunt ipsum qui quis in magna duis. Officia esse incididunt adipisicing velit aliqua reprehenderit.\r\nMollit quis in sit ad officia ea incididunt est. Ipsum cillum cillum minim ipsum excepteur quis ad in quis incididunt ullamco in. Qui cillum et eu voluptate sit ea sint tempor irure consequat dolore proident. Lorem commodo elit consequat excepteur tempor laborum eu. Deserunt aliqua nulla quis laborum aliqua exercitation sint consequat ea reprehenderit officia. Labore velit elit labore aliqua.\r\nIrure consectetur ex magna amet aute esse commodo aliqua culpa pariatur. Irure mollit esse id dolore cupidatat velit laborum commodo. In dolore sint proident culpa.\r\n"
+    },
+    {
+      "id": "55aa018d835be43283ac99d8",
+      "createdAt": "Tue Feb 14 2012 21:55:27 GMT-0800 (PST)",
+      "author": "Miranda May",
+      "title": "elit proident nulla ullamco",
+      "text": "Est officia aliqua qui officia cupidatat proident deserunt adipisicing culpa cupidatat duis voluptate. Cupidatat velit sit tempor magna deserunt nisi Lorem cupidatat eiusmod nulla. Amet commodo excepteur tempor voluptate aliqua. Ad ex tempor dolor excepteur enim irure cupidatat eu ad. Occaecat voluptate nisi cupidatat exercitation sunt sunt do labore labore minim velit. Nisi anim ea eiusmod adipisicing esse aute pariatur tempor duis ut dolor aliquip. Dolor cillum ipsum nulla nulla labore culpa mollit laborum.\r\nNon Lorem quis occaecat dolor veniam commodo incididunt labore ullamco nostrud. Fugiat occaecat ipsum mollit consequat. Ullamco adipisicing et aliquip id minim id nulla. Eiusmod excepteur Lorem exercitation qui veniam adipisicing excepteur ut. Sunt culpa minim commodo sint.\r\n"
+    },
+    {
+      "id": "55aa018dccdaf847bb78fcdc",
+      "createdAt": "Wed Feb 24 1999 17:11:11 GMT-0800 (PST)",
+      "author": "Minerva Gordon",
+      "title": "incididunt sint duis",
+      "text": "Anim et officia anim esse ullamco aliquip labore. Voluptate amet ad duis anim dolore velit nulla veniam proident aliqua. Anim pariatur elit nisi mollit esse amet ad reprehenderit excepteur minim voluptate cupidatat consequat labore. Id consequat cillum commodo ad veniam voluptate veniam quis occaecat anim anim consequat. Aliquip officia mollit occaecat fugiat aute labore labore Lorem nostrud proident irure dolore.\r\nAliqua eu Lorem minim nostrud. Quis veniam irure minim labore cupidatat voluptate. Labore officia aliqua veniam eiusmod velit cupidatat non minim nostrud mollit esse nulla ex. Id ut in laboris esse velit. Laboris excepteur dolor officia ea laborum quis culpa ea proident adipisicing qui tempor. Aliqua voluptate sunt ipsum aute. Id commodo eu dolore voluptate sint ex esse est incididunt voluptate.\r\nLorem in non elit consequat ad elit veniam irure nisi sunt do Lorem Lorem fugiat. Sint laborum aliqua adipisicing nulla voluptate quis et ullamco consectetur. Officia dolore officia elit minim ipsum aliquip aliquip enim occaecat. Officia aliqua et ut culpa qui ipsum laborum laborum amet do. Eu cillum aute pariatur eu et cillum pariatur ullamco nostrud aliquip amet excepteur.\r\nPariatur fugiat id et sit ullamco. Non amet velit deserunt exercitation culpa sint tempor et occaecat laboris fugiat dolore magna. Exercitation proident ex nostrud elit sunt quis velit magna veniam aliqua duis sit. Ex veniam magna aliquip amet voluptate irure eiusmod consectetur cupidatat consequat. Ea nisi magna dolore mollit aute ea.\r\n"
+    },
+    {
+      "id": "55aa018d0d4ddf19257028bc",
+      "createdAt": "Tue Oct 21 2014 00:27:26 GMT-0700 (PDT)",
+      "author": "Marcy Mcmahon",
+      "title": "nostrud et reprehenderit",
+      "text": "Nulla ad irure tempor occaecat quis reprehenderit sit occaecat nostrud. Nisi eiusmod sint voluptate qui laboris enim excepteur. Ipsum irure Lorem Lorem sit aliquip commodo nisi pariatur.\r\nAliquip fugiat sit occaecat nulla reprehenderit ex qui cillum sit. Nisi reprehenderit minim adipisicing pariatur dolore sunt velit ullamco ut elit sint amet. Et ut ea anim minim laboris est minim eu esse aliqua. Ex aute amet veniam nulla dolor. Ea in irure sunt incididunt do sint qui nostrud duis. Excepteur incididunt ullamco laboris eiusmod incididunt irure ex anim.\r\nDolore Lorem non est quis nulla elit occaecat amet id mollit laborum fugiat. Amet mollit nostrud excepteur incididunt duis minim. Ex pariatur nisi Lorem dolor. Laborum qui et aliquip ea elit anim ex ea laboris duis laborum esse eiusmod mollit. Amet elit enim nulla laborum anim mollit irure anim velit anim ut aliquip in mollit.\r\n"
+    }
+  ]
+}
diff --git a/karma.conf.js b/karma.conf.js
new file mode 100644
index 0000000..a52fec9
--- /dev/null
+++ b/karma.conf.js
@@ -0,0 +1,87 @@
+// Karma configuration
+// Generated on Fri Jul 17 2015 22:40:09 GMT-0700 (PDT)
+
+module.exports = function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['mocha', 'chai'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+        { pattern: 'spec.bundle.js', watched: false }
+    ],
+
+
+    // list of files to exclude
+    exclude: [
+    ],
+
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    // use webpack and sourcemaps to preprocess the spec bundle file
+    preprocessors: {
+        'spec.bundle.js': ['webpack', 'sourcemap']
+    },
+
+    webpack :{
+        devtool: 'inline-source-map',
+        module: {
+            loaders: [
+                /* add the appropriate loaders */
+                /* almost the same as the webpack.config */
+                { test: /\.html$/, loader: 'raw' },
+                { test: /\.styl$/, loader: 'style!css!stylus' },
+                { test: /\.css/, loader: 'style!css' },
+                { test: /\.js$/, loader: 'babel?stage=1', exclude: [/client\/lib/, /node_modules/] }
+            ]
+        },
+
+        stylus: {
+            use: [require('jeet')(), require('rupture')()]
+        }
+    },
+
+    webpackServer: {
+        noInfo: true
+    },
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['mocha'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: false,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Chrome'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true
+  })
+}
diff --git a/package.json b/package.json
index 8342335..0088836 100644
--- a/package.json
+++ b/package.json
@@ -4,32 +4,47 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "gulp"
+    "start": "gulp",
+    "test": "karma start"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "angular": "^1.4.3",
     "angular-animate": "^1.4.3",
+    "angular-jwt": "0.0.9",
     "angular-ui-router": "^0.2.15",
-    "jeet": "^6.1.2",
+    "jeet": "6.1.2",
     "lodash": "^3.10.0",
+    "normalize.css": "3.0.3",
     "rupture": "^0.6.1"
   },
   "devDependencies": {
+    "angular-mocks": "^1.4.3",
     "babel-loader": "^5.3.2",
     "browser-sync": "^2.7.13",
+    "chai": "^3.1.0",
     "css-loader": "^0.15.4",
     "file-loader": "^0.8.4",
     "gulp": "^3.9.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-template": "^3.0.0",
     "gulp-todoist": "0.0.2",
+    "karma": "^0.12.31",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^0.2.0",
+    "karma-mocha": "^0.2.0",
+    "karma-mocha-reporter": "^1.0.2",
+    "karma-sourcemap-loader": "^0.3.5",
+    "karma-webpack": "^1.6.0",
+    "mocha": "^2.2.5",
     "node-libs-browser": "^0.5.2",
     "raw-loader": "^0.5.1",
     "run-sequence": "^1.1.1",
-    "style-loader": "^0.12.3",
-    "stylus-loader": "^1.2.1",
+    "style-loader": "0.12.3",
+    "stylus-loader": "1.2.1",
     "webpack": "^1.10.1",
-    "webpack-stream": "^2.0.0"
+    "webpack-stream": "^2.0.0",
+    "yargs": "^3.15.0"
   }
 }
diff --git a/spec.bundle.js b/spec.bundle.js
new file mode 100644
index 0000000..c099c0a
--- /dev/null
+++ b/spec.bundle.js
@@ -0,0 +1,29 @@
+/*
+ * When testing with webpack and ES6, we have to do some extra
+ * things get testing to work right. Because we are gonna write test
+ * in ES6 to, we have to compile those as well. That's handled in
+ * karma.conf.js with the karma-webpack plugin. This is the entry
+ * file for webpack test. Just like webpack will create a bundle.js
+ * file for our client, when we run test, it well compile and bundle them
+ * all here! Crazy huh. So we need to do some setup
+*/
+
+// import angular duh
+import angular from 'angular';
+// angular-mocks is a angular plugin built by the angular team
+// for mocking out dependencies, we need this
+import mocks from 'angular-mocks';
+
+// Ok, this is kinda cray cray. We can use the the context method on
+// require that webpack created in order to tell webpack
+// what files we actually want to require or import.
+// Below, context will be an function/object with file names as keys.
+// using that regex we are saying look in client/app and find
+// any file that ends with spec.js and get its path. By passing in true
+// we say do this recursively
+let context = require.context('./client/app', true, /\.spec\.js/);
+
+// get all the files, for each file, call the context function
+// that will require the file and load it up here. Context will
+// loop and require those spec files here
+context.keys().forEach(context);
diff --git a/templates/component/component.controller.js b/templates/component/component.controller.js
new file mode 100644
index 0000000..2c293d8
--- /dev/null
+++ b/templates/component/component.controller.js
@@ -0,0 +1,10 @@
+class <%= upCaseName %>Controller {
+  constructor() {
+    this.greeting = '<%= upCaseName %>Controller!';
+  }
+
+}
+
+<%= upCaseName %>Controller.$inject = [];
+
+export {<%= upCaseName %>Controller};
diff --git a/templates/component/component.directive.js b/templates/component/component.directive.js
new file mode 100644
index 0000000..884a465
--- /dev/null
+++ b/templates/component/component.directive.js
@@ -0,0 +1,14 @@
+import './<%= name %>.styl';
+import {<%= upCaseName %>Controller as controller} from './<%= name %>.controller';
+import template from './<%= name %>.html';
+
+export const <%= name %>Directive = ()=> {
+  return {
+    controller,
+    template,
+    controllerAs: 'vm',
+    scope: {},
+    replace: true,
+    restrict: 'E'
+  }
+};
diff --git a/templates/component/component.html b/templates/component/component.html
new file mode 100644
index 0000000..9b62c7f
--- /dev/null
+++ b/templates/component/component.html
@@ -0,0 +1,3 @@
+<section class="<%- name %>">
+  <h1>Hey from {{ vm.greeting }}</h1>
+</section>
diff --git a/templates/component/component.js b/templates/component/component.js
new file mode 100644
index 0000000..d457482
--- /dev/null
+++ b/templates/component/component.js
@@ -0,0 +1,13 @@
+import {<%= name %>Directive} from './<%= name %>.directive';
+import angular from 'angular';
+import uiRouter from 'angular-ui-router';
+
+
+export const <%= name %> = angular.module('<%= name %>', [uiRouter])
+  .config(($stateProvider) => {
+    $stateProvider.state('<%= name %>', {
+      url: '/<%= name %>',
+      template: '<<%- name %>></<%- name %>>'
+    })
+  })
+  .directive('<%= name %>', <%= name %>Directive);
diff --git a/templates/component/component.spec.js b/templates/component/component.spec.js
new file mode 100644
index 0000000..c0a2529
--- /dev/null
+++ b/templates/component/component.spec.js
@@ -0,0 +1,61 @@
+import {<%= name %>} from './<%= name %>'
+import {<%= upCaseName %>Controller} from './<%= name %>.controller';
+import {<%= name %>Directive} from './<%= name %>.directive';
+import template from './<%= name %>.html';
+
+describe('<%= upCaseName %>', ()=>{
+  let $rootScope,
+  makeController;
+
+  beforeEach(window.module(<%= name %>.name));
+  beforeEach(inject((_$rootScope_)=>{
+    $rootScope = _$rootScope_;
+    makeController = ()=>{
+      return new <%= upCaseName %>Controller();
+    };
+  }));
+
+  describe('Module', ()=>{
+    // test things about the component module
+    // checking to see if it registers certain things and what not
+    // test for best practices with naming too
+    // test for routing
+  });
+
+  describe('Controller', ()=>{
+    // test your controller here
+
+    it('should have a name property [REMOVE]', ()=>{ // erase me if you remove this.name from the controller
+      let controller = makeController();
+
+      expect(controller).to.have.property('greeting');
+    });
+  });
+
+  describe('Template', ()=>{
+    // test the template
+    // use Regexes to test that you are using the right bindings {{  }}
+
+    it('should have name in template [REMOVE]', ()=>{
+      expect(template).to.match(/{{\s?vm\.greeting\s?}}/g);
+    });
+  });
+
+
+  describe('Directive', ()=>{
+      // test the component/directive itself
+      let directive = <%= name %>Directive();
+
+      it('should use the right template',()=>{
+        expect(directive.template).to.equal(template);
+      });
+
+      it('should use controllerAs', ()=>{
+        expect(directive).to.have.property('controllerAs');
+      });
+
+      it('should use the right controller', ()=>{
+        expect(directive.controller).to.equal(<%= upCaseName %>Controller);
+      });
+  });
+});
diff --git a/templates/component/component.styl b/templates/component/component.styl
new file mode 100644
index 0000000..6113104
--- /dev/null
+++ b/templates/component/component.styl
@@ -0,0 +1,2 @@
+.<%= name %>
+  position relative
diff --git a/webpack.js b/webpack.config.js
similarity index 53%
rename from webpack.js
rename to webpack.config.js
index ea9a64b..31de459 100644
--- a/webpack.js
+++ b/webpack.config.js
@@ -13,9 +13,11 @@ module.exports = {
 
   module: {
     loaders: [
-      { test: /\.html$/, loader: 'raw' }
-      { test: /\.styl$/, loader: 'css!style!stylus' },
-      // TODO: create loader for .js filest ransfroming from ES2015 to ES5
+      { test: /\.html$/, loader: 'raw' },
+      { test: /\.styl$/, loader: 'style!css!stylus' },
+      { test: /\.css/, loader: 'style!css' },
+      { test: /\.(png|jpg|jpeg)$/, loader: 'file' },
+      { test: /\.js$/, loader: 'babel?stage=1', exclude: [/client\/lib/, /node_modules/, /\.spec\.js/] }
     ]
   },