diff --git a/.gitignore b/.gitignore
index c65a39ba7..bbcd49f4f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 public
-build
\ No newline at end of file
+build
+npm-debug.log
diff --git a/config/app.config.js b/config/app.config.js
new file mode 100644
index 000000000..8f1d7b800
--- /dev/null
+++ b/config/app.config.js
@@ -0,0 +1,4 @@
+export default function routing($urlRouterProvider, $locationProvider) {
+  $locationProvider.html5Mode(true);
+  $urlRouterProvider.otherwise('/');
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index ab53c8824..ba9b793a0 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,9 @@
   },
   "homepage": "https://github.com/Foxandxss/angular-webpack-workflow",
   "dependencies": {
-    "angular": "^1.4.8"
+    "angular": "^1.4.8",
+    "angular-ui-router": "^0.2.17",
+    "bootstrap": "^3.3.6"
   },
   "devDependencies": {
     "angular-mocks": "^1.4.8",
@@ -40,6 +42,7 @@
     "karma-sourcemap-loader": "^0.3.6",
     "karma-spec-reporter": "0.0.23",
     "karma-webpack": "^1.7.0",
+    "ng-annotate-webpack-plugin": "^0.1.2",
     "node-libs-browser": "^0.5.3",
     "null-loader": "^0.1.1",
     "phantomjs": "^1.9.18",
diff --git a/src/app.js b/src/app.js
index 0300163f5..4cae5a2e5 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,3 +1,8 @@
-import angular from 'angular';
+import 'bootstrap/dist/css/bootstrap.css';
 
-angular.module('app', []);
\ No newline at end of file
+import home from './features/home/home.index.js';
+import routing from '../config/app.config.js';
+import uirouter from 'angular-ui-router';
+
+angular.module('app', [uirouter, home])
+  .config(routing);
\ No newline at end of file
diff --git a/src/directives/greeting.directive.js b/src/directives/greeting.directive.js
new file mode 100644
index 000000000..6f5d6af0a
--- /dev/null
+++ b/src/directives/greeting.directive.js
@@ -0,0 +1,15 @@
+import angular from 'angular';
+
+function greeting() {
+  return {
+    restrict: 'E',
+    scope: {
+      name: '='
+    },
+    template: '<h1>Hello, {{name}}</div>'
+  }
+}
+
+export default angular.module('directives.greeting', [])
+  .directive('greeting', greeting)
+  .name;
\ No newline at end of file
diff --git a/src/features/home/home.controller.js b/src/features/home/home.controller.js
new file mode 100644
index 000000000..6a67247f8
--- /dev/null
+++ b/src/features/home/home.controller.js
@@ -0,0 +1,14 @@
+export default class HomeController {
+  constructor(randomNames) {
+    this.random = randomNames;
+    this.name = 'World';
+  }
+
+  changeName() {
+    this.name = 'angular-tips';
+  }
+
+  randomName() {
+    this.name = this.random.getName();
+  }
+}
diff --git a/src/features/home/home.controller.test.js b/src/features/home/home.controller.test.js
new file mode 100644
index 000000000..221d090d0
--- /dev/null
+++ b/src/features/home/home.controller.test.js
@@ -0,0 +1,16 @@
+import home from './home.index';
+
+describe('Controller: Home', function() {
+  let $controller;
+
+  beforeEach(angular.mock.module(home));
+
+  beforeEach(angular.mock.inject(function(_$controller_) {
+    $controller = _$controller_;
+  }));
+
+  it('name is initialized to World', function() {
+    let ctrl = $controller('HomeController');
+    expect(ctrl.name).toBe('World');
+  });
+});
\ No newline at end of file
diff --git a/src/features/home/home.html b/src/features/home/home.html
new file mode 100644
index 000000000..126759eb2
--- /dev/null
+++ b/src/features/home/home.html
@@ -0,0 +1,9 @@
+<div class="home-header jumbotron">
+  <greeting name="home.name"></greeting>
+
+  <div class="btn-group home-header__btn-group" role="group" aria-label="home-label">
+    <button class="btn btn-default" ng-click="home.changeName()">Change</button>
+    <button class="btn btn-default" ng-click="home.randomName()">Random</button>
+  </div>
+</div>
+
diff --git a/src/features/home/home.index.js b/src/features/home/home.index.js
new file mode 100644
index 000000000..d8000f924
--- /dev/null
+++ b/src/features/home/home.index.js
@@ -0,0 +1,13 @@
+import './home.scss';
+import angular from 'angular';
+import uirouter from 'angular-ui-router';
+
+import routing from './home.routes';
+import HomeController from './home.controller';
+import randomNames from '../../services/randomNames.service';
+import greeting    from '../../directives/greeting.directive';
+
+export default angular.module('app.home', [uirouter, randomNames, greeting])
+  .config(routing)
+  .controller('HomeController', HomeController)
+  .name;
\ No newline at end of file
diff --git a/src/features/home/home.routes.js b/src/features/home/home.routes.js
new file mode 100644
index 000000000..ba8b44b19
--- /dev/null
+++ b/src/features/home/home.routes.js
@@ -0,0 +1,9 @@
+export default function routes($stateProvider) {
+  $stateProvider
+    .state('home', {
+      url: '/',
+      template: require('./home.html'),
+      controller: 'HomeController',
+      controllerAs: 'home'
+    });
+}
\ No newline at end of file
diff --git a/src/features/home/home.scss b/src/features/home/home.scss
new file mode 100644
index 000000000..bed922002
--- /dev/null
+++ b/src/features/home/home.scss
@@ -0,0 +1,7 @@
+.home-header {
+  text-align: center;
+
+  &__btn-group {
+    padding-top: 1em;  
+  }
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index dd402ba96..3c346ab31 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,6 +6,8 @@
   <base href="http://github.com/">
 </head>
 <body>
-  Hello, World
+  <div class="container">
+    <ui-view></ui-view>
+  </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/services/randomNames.service.js b/src/services/randomNames.service.js
new file mode 100644
index 000000000..559d5ac77
--- /dev/null
+++ b/src/services/randomNames.service.js
@@ -0,0 +1,17 @@
+import angular from 'angular';
+
+class RandomNames {
+  constructor() {
+    this.names = ['John', 'Elisa', 'Mark', 'Annie'];
+  }
+
+  getName() {
+    const totalNames = this.names.length;
+    const rand = Math.floor(Math.random() * totalNames);
+    return this.names[rand];
+  }
+}
+
+export default angular.module('services.random-names', [])
+  .service('randomNames', RandomNames)
+  .name;
\ No newline at end of file
diff --git a/webpack.make.js b/webpack.make.js
index 8e077e92a..89e450dc5 100644
--- a/webpack.make.js
+++ b/webpack.make.js
@@ -1,10 +1,11 @@
 'use strict';
 
 // Modules
-var webpack = require('webpack');
-var autoprefixer = require('autoprefixer');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+const autoprefixer = require('autoprefixer');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
+const webpack = require('webpack');
 
 module.exports = function makeWebpackConfig (options) {
   /**
@@ -109,6 +110,10 @@ module.exports = function makeWebpackConfig (options) {
       // Allow loading html through js
       test: /\.html$/,
       loader: 'raw'
+    }, {
+      // SCSS LOADER
+      test: /\.scss$/,
+      loaders: ["style", "css", "sass"]
     }]
   };
 
@@ -175,6 +180,9 @@ module.exports = function makeWebpackConfig (options) {
     // Disabled when in test mode or not in build mode
     new ExtractTextPlugin('[name].[hash].css', {
       disable: !BUILD || TEST
+    }),
+    new ngAnnotatePlugin({
+      add: true
     })
   ];