diff --git a/lib/roles/webpack-config.js b/lib/roles/webpack-config.js
index f5a5f2ab..9fab5e75 100644
--- a/lib/roles/webpack-config.js
+++ b/lib/roles/webpack-config.js
@@ -16,7 +16,8 @@ module.exports = webpackMiddleware(webpack({
   resolve: {
     modulesDirectories: [pathutil.resource('lib'), 'web_modules', './../../node_modules'],
     alias: {
-      'socket.io': 'socket.io-client/dist/socket.io'
+      'socket.io': 'socket.io-client/dist/socket.io',
+      'oboe': 'oboe/dist/oboe-browser'
     }
   },
   module: {
@@ -24,7 +25,8 @@ module.exports = webpackMiddleware(webpack({
       { 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'}
+      { test: /angular-route\.js/, loader: 'imports?angular=angular'},
+      { test: /oboe-browser\.js/, loader: 'imports?define=>false!exports?oboe'}
     ],
     noParse: [
       pathutil.resource('lib')
diff --git a/res/app/components/device/device-service.js b/res/app/components/device/device-service.js
new file mode 100644
index 00000000..bd4c9528
--- /dev/null
+++ b/res/app/components/device/device-service.js
@@ -0,0 +1,78 @@
+var oboe = require('oboe')
+
+module.exports = function DeviceServiceFactory($rootScope, $http, socket) {
+  var deviceService = {
+    devices: [], devicesBySerial: {}
+  }
+
+  function get(data) {
+    return deviceService.devices[deviceService.devicesBySerial[data.serial]]
+  }
+
+  function insert(data, alter) {
+    deviceService.devicesBySerial[data.serial] =
+      deviceService.devices.push(data) - 1
+    _.assign(data, alter)
+    $rootScope.$digest()
+  }
+
+  function modify(data, properties) {
+    if (data) {
+      _.assign(data, properties)
+      $rootScope.$digest()
+    }
+  }
+
+  function remove(data) {
+    var index = deviceService.devicesBySerial[data.serial]
+    if (index >= 0) {
+      deviceService.devices.splice(index, 1)
+      delete deviceService.devicesBySerial[data.serial]
+      $rootScope.$digest()
+    }
+  }
+
+  socket.on('device.present', function (data) {
+    remove(data)
+    insert(data, {
+      present: true
+    })
+  })
+
+  socket.on('device.status', function (data) {
+    modify(get(data), data)
+  })
+
+  socket.on('device.absent', function (data) {
+    remove(data)
+  })
+
+  socket.on('device.identity', function (data) {
+    modify(get(data), data)
+  })
+
+  socket.on('group.join', function (data) {
+    modify(get(data), data)
+  })
+
+  socket.on('group.leave', function (data) {
+    modify(get(data), {
+      owner: null
+    })
+  })
+
+  oboe('/api/v1/devices')
+    .node('devices[*]', function (device) {
+      // We want to skip other arguments
+      insert(device)
+    })
+
+  deviceService.get = function (serial) {
+    return $http.get('/api/v1/devices/' + serial)
+      .then(function (response) {
+        return response.data.device
+      })
+  }
+
+  return deviceService
+}
diff --git a/res/app/components/device/index.js b/res/app/components/device/index.js
new file mode 100644
index 00000000..6b519c90
--- /dev/null
+++ b/res/app/components/device/index.js
@@ -0,0 +1,2 @@
+module.exports = angular.module('device', [])
+  .factory('DeviceService', require('./device-service'))
diff --git a/res/app/device-list/index.js b/res/app/device-list/index.js
index 19670ba0..57a850ff 100644
--- a/res/app/device-list/index.js
+++ b/res/app/device-list/index.js
@@ -1,7 +1,9 @@
 require('./device-list.css')
 
 module.exports = angular.module('device-list', [
-  require('./../components/socket').name
+  require('./../components/socket').name,
+  require('./../components/device').name,
+
 ])
   .config(['$routeProvider', function ($routeProvider) {
     $routeProvider.when('/devices', {