diff --git a/lib/roles/app.js b/lib/roles/app.js
index 6ad52ed6..a343fb10 100644
--- a/lib/roles/app.js
+++ b/lib/roles/app.js
@@ -46,7 +46,7 @@ module.exports = function(options) {
     cache: true,
     debug: true,
     devtool: 'inline-source-map',
-    entry: pathutil.resource('app') + '/scripts/entry.js',
+    entry: pathutil.resource('app') + '/entry.js',
     output: {
       path: '/static/build/',
       filename: 'bundle.js'
@@ -60,6 +60,7 @@ module.exports = function(options) {
     module: {
       loaders: [
         { test: /\.css$/, loader: 'style!css' },
+        { test: /\.jade/, loader: 'template-html-loader' },
         { test: /angular\.js/, loader: 'exports?angular'},
         { test: /angular-route\.js/, loader: 'imports?angular=angular'}
       ],
diff --git a/res/app/app.js b/res/app/app.js
new file mode 100644
index 00000000..b6b7ad7a
--- /dev/null
+++ b/res/app/app.js
@@ -0,0 +1,18 @@
+require('angular')
+require('angular-route')
+
+var app = angular.module('app', [
+  'ngRoute',
+  require('./components/device-list').name
+])
+
+
+app.config(['$routeProvider', '$locationProvider',
+  function ($routeProvider, $locationProvider) {
+    $locationProvider.hashPrefix('!');
+    $routeProvider
+      .otherwise({
+        redirectTo: '/devices'
+      })
+  }
+])
diff --git a/res/app/components/device-list/DeviceListCtrl.js b/res/app/components/device-list/DeviceListCtrl.js
index 0213a437..918bce44 100644
--- a/res/app/components/device-list/DeviceListCtrl.js
+++ b/res/app/components/device-list/DeviceListCtrl.js
@@ -1,8 +1,11 @@
-module.exports = function DeviceListCtrl($scope, deviceService, groupService) {
+module.exports = function DeviceListCtrl($scope) {
 
-  $scope.devices = deviceService.devices
+  $scope.devices = [
+    {serial: '1231231', present: true, owner: {email: 'fefe@f.com'}},
+    {serial: '123122', present: true, owner: {email: 'fefe2@f.com'}}
+  ];
 
-  $scope.invite = function (device) {
+    $scope.invite = function (device) {
     groupService.invite({
       serial: {
         value: device.serial, match: 'exact'
@@ -17,4 +20,27 @@ module.exports = function DeviceListCtrl($scope, deviceService, groupService) {
       }
     })
   }
-}
+
+};
+
+
+//module.exports = function DeviceListCtrl($scope, deviceService, groupService) {
+//
+//  $scope.devices = deviceService.devices
+//
+//  $scope.invite = function (device) {
+//    groupService.invite({
+//      serial: {
+//        value: device.serial, match: 'exact'
+//      }
+//    })
+//  }
+//
+//  $scope.kick = function (device) {
+//    groupService.kick({
+//      serial: {
+//        value: device.serial, match: 'exact'
+//      }
+//    })
+//  }
+//}
diff --git a/res/app/components/device-list/device-list.css b/res/app/components/device-list/device-list.css
new file mode 100644
index 00000000..9316ae17
--- /dev/null
+++ b/res/app/components/device-list/device-list.css
@@ -0,0 +1,3 @@
+.device-list {
+    color: deepskyblue;
+}
\ No newline at end of file
diff --git a/res/app/components/device-list/device-list.jade b/res/app/components/device-list/device-list.jade
index 5931787f..774887eb 100644
--- a/res/app/components/device-list/device-list.jade
+++ b/res/app/components/device-list/device-list.jade
@@ -1,8 +1,8 @@
 h1 Devices
-  ul
-  li(ng-repeat='device in devices track by device.serial')
-    span {{ device.serial }} {{ device.present ? 'present' : 'absent' }} {{ device.owner.email }}
-      a(href='#!/devices/{{ device.serial }}') Linky
-    button(ng-click="invite(device)") invite
-    button(ng-click="kick(device)") kick
+  ul.device-list
+    li(ng-repeat='device in devices track by device.serial')
+      span {{ device.serial }} {{ device.present ? 'present' : 'absent' }} {{ device.owner.email }}
+        a(href='#!/devices/{{ device.serial }}') Linky
+      button(ng-click="invite(device)") invite
+      button(ng-click="kick(device)") kick
              
\ No newline at end of file
diff --git a/res/app/components/device-list/index.js b/res/app/components/device-list/index.js
index 4d0f6706..17b7ed9c 100644
--- a/res/app/components/device-list/index.js
+++ b/res/app/components/device-list/index.js
@@ -1,6 +1,12 @@
-var angular = require('angular');
+require('angular')
+
+require('./device-list.css')
 
 module.exports = angular.module('device-list', [])
-  .constant('template', require('./device-list.jade'))
-  .directive('demoComponent', require('./DemoDirective'))
+  .config(['$routeProvider', function ($routeProvider) {
+    $routeProvider.when('/devices', {
+      template: require('./device-list.jade'),
+      controller: 'DeviceListCtrl'
+    })
+  }])
   .controller('DeviceListCtrl', require('./DeviceListCtrl'));
diff --git a/res/app/components/device-list/package.json b/res/app/components/device-list/package.json
new file mode 100644
index 00000000..36ece49a
--- /dev/null
+++ b/res/app/components/device-list/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "device-list",
+  "version": "0.0.1"
+}
diff --git a/res/app/entry.js b/res/app/entry.js
new file mode 100644
index 00000000..4cd59214
--- /dev/null
+++ b/res/app/entry.js
@@ -0,0 +1 @@
+require('./app');
diff --git a/res/app/scripts/app.js b/res/app/scripts/app.js
deleted file mode 100644
index f64d2b67..00000000
--- a/res/app/scripts/app.js
+++ /dev/null
@@ -1,15 +0,0 @@
-require('angular')
-
-var routes = require('./routes')
-var controllers = require('./controllers')
-var services = require('./services')
-
-var app = angular.module('app', [
-  'ngRoute',
-  'app.controllers',
-  'app.services'
-])
-  .config(routes)
-
-
-module.exports = app
diff --git a/res/app/scripts/entry.js b/res/app/scripts/entry.js
deleted file mode 100644
index 8634b7ba..00000000
--- a/res/app/scripts/entry.js
+++ /dev/null
@@ -1,4 +0,0 @@
-require('angular')
-require('angular-route')
-require('./app')
-require('./routes')
diff --git a/res/app/views/index.jade b/res/app/views/index.jade
index 3ea9bd1d..b358251e 100644
--- a/res/app/views/index.jade
+++ b/res/app/views/index.jade
@@ -3,7 +3,8 @@ html
   head
     meta(charset='utf-8')
     title STF
-  body(ng-cloak)
+  body(ng-app='app', ng-cloak)
+    h1 Test
     div(ng-view)
-    //script(src='/static/lib/requirejs/require.js', data-main='static/scripts/main.js')
-    script(src='/static/build/bundle.js')
+    h2 Test 2
+    script(src='/static/build/bundle.js')
\ No newline at end of file