diff --git a/lib/roles/webpack-config.js b/lib/roles/webpack-config.js
index 9fab5e75..15d6cc86 100644
--- a/lib/roles/webpack-config.js
+++ b/lib/roles/webpack-config.js
@@ -14,7 +14,12 @@ module.exports = webpackMiddleware(webpack({
     filename: 'bundle.js'
   },
   resolve: {
-    modulesDirectories: [pathutil.resource('lib'), 'web_modules', './../../node_modules'],
+    modulesDirectories: [
+      pathutil.resource('lib'),
+      pathutil.resource('app') + '/components',
+      'web_modules',
+      './../../node_modules'
+    ],
     alias: {
       'socket.io': 'socket.io-client/dist/socket.io',
       'oboe': 'oboe/dist/oboe-browser'
diff --git a/res/app/components/control/index.js b/res/app/components/control/index.js
deleted file mode 100644
index 25ff9062..00000000
--- a/res/app/components/control/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-require('./device-list.css')
-
-module.exports = angular.module('device-list', [])
-  .config(['$routeProvider', function ($routeProvider) {
-    $routeProvider.when('/devices', {
-      template: require('./device-list.jade'),
-      controller: 'DeviceListCtrl'
-    })
-  }])
-  .controller('DeviceListCtrl', require('./device-list-controller'));
diff --git a/res/app/components/socket/index.js b/res/app/components/socket/index.js
deleted file mode 100644
index 4d7b2dc9..00000000
--- a/res/app/components/socket/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-module.exports = angular.module('socket', [])
-  .factory('SocketService', require('./socket-service'));
diff --git a/res/app/components/stf/control/control-service.js b/res/app/components/stf/control/control-service.js
new file mode 100644
index 00000000..ec78cf90
--- /dev/null
+++ b/res/app/components/stf/control/control-service.js
@@ -0,0 +1,55 @@
+module.exports = function ControlServiceFactory($rootScope, socket) {
+  var controlService = {
+  }
+
+  function ControlService(channel) {
+    function touchSender(type) {
+      return function (x, y) {
+        socket.emit(type, channel, {
+          x: x, y: y
+        })
+      }
+    }
+
+    function keySender(type) {
+      return function (key) {
+        socket.emit(type, channel, {
+          key: key
+        })
+      }
+    }
+
+    this.touchDown = touchSender('input.touchDown')
+    this.touchMove = touchSender('input.touchMove')
+    this.touchUp = touchSender('input.touchUp')
+    this.tap = touchSender('input.tap')
+
+    this.keyDown = keySender('input.keyDown')
+    this.keyUp = keySender('input.keyUp')
+    this.keyPress = keySender('input.keyPress')
+
+    this.home = function () {
+      socket.emit('input.home', channel)
+    }
+
+    this.menu = function () {
+      socket.emit('input.menu', channel)
+    }
+
+    this.back = function () {
+      socket.emit('input.back', channel)
+    }
+
+    this.type = function (text) {
+      socket.emit('input.type', channel, {
+        text: text
+      })
+    }
+  }
+
+  controlService.forChannel = function (channel) {
+    return new ControlService(channel)
+  }
+
+  return controlService
+}
diff --git a/res/app/components/stf/control/index.js b/res/app/components/stf/control/index.js
new file mode 100644
index 00000000..9c8037e7
--- /dev/null
+++ b/res/app/components/stf/control/index.js
@@ -0,0 +1,4 @@
+module.exports = angular.module('stf/control', [
+  require('stf/socket').name
+])
+  .factory('ControlService', require('./control-service'))
\ No newline at end of file
diff --git a/res/app/components/device/device-service.js b/res/app/components/stf/device/device-service.js
similarity index 97%
rename from res/app/components/device/device-service.js
rename to res/app/components/stf/device/device-service.js
index bd4c9528..3f425c2c 100644
--- a/res/app/components/device/device-service.js
+++ b/res/app/components/stf/device/device-service.js
@@ -2,7 +2,8 @@ var oboe = require('oboe')
 
 module.exports = function DeviceServiceFactory($rootScope, $http, socket) {
   var deviceService = {
-    devices: [], devicesBySerial: {}
+    devices: [],
+    devicesBySerial: {}
   }
 
   function get(data) {
diff --git a/res/app/components/device/index.js b/res/app/components/stf/device/index.js
similarity index 53%
rename from res/app/components/device/index.js
rename to res/app/components/stf/device/index.js
index 6b519c90..d7db49fd 100644
--- a/res/app/components/device/index.js
+++ b/res/app/components/stf/device/index.js
@@ -1,2 +1,2 @@
-module.exports = angular.module('device', [])
+module.exports = angular.module('stf/device', [])
   .factory('DeviceService', require('./device-service'))
diff --git a/res/app/components/stf/socket/index.js b/res/app/components/stf/socket/index.js
new file mode 100644
index 00000000..3bb52b11
--- /dev/null
+++ b/res/app/components/stf/socket/index.js
@@ -0,0 +1,2 @@
+module.exports = angular.module('stf/socket', [])
+  .factory('socket', require('./socket-service'));
diff --git a/res/app/components/socket/socket-service.js b/res/app/components/stf/socket/socket-service.js
similarity index 100%
rename from res/app/components/socket/socket-service.js
rename to res/app/components/stf/socket/socket-service.js
diff --git a/res/app/device-list/index.js b/res/app/device-list/index.js
index 57a850ff..ab88956d 100644
--- a/res/app/device-list/index.js
+++ b/res/app/device-list/index.js
@@ -1,8 +1,9 @@
 require('./device-list.css')
 
 module.exports = angular.module('device-list', [
-  require('./../components/socket').name,
-  require('./../components/device').name,
+  require('stf/socket').name,
+  require('stf/control').name,
+  require('stf/device').name,
 
 ])
   .config(['$routeProvider', function ($routeProvider) {