diff --git a/src/webui/backend/entry.js b/src/webui/backend/entry.js
index 7da32f3d1..97a691ed0 100644
--- a/src/webui/backend/entry.js
+++ b/src/webui/backend/entry.js
@@ -227,6 +227,22 @@ app.post('/performance/variables/:path(*)?', function(req, res) {
     res.json(writePerformanceProperties(req.params['path'], {variables: req.body}))
 })
 
+// recursively require and use all routers
+let routers = require('./routers'),
+    requireRouters = function(routers) {
+        _.forIn(routers, function(val, key) {
+            switch (typeof val) {
+                case 'function':
+                    app.use(path.join('/api', key), val)
+                    break
+                case 'object':
+                    requireRouters(val)
+                    break
+            }
+        })
+    }
+requireRouters(routers)
+
 if (argv.ssl) {
     let privateKey = fs.readFileSync(path.join(__dirname, 'ssl', 'key.pem')),
         certificate = fs.readFileSync(path.join(__dirname, 'ssl', 'cert.crt'))
diff --git a/src/webui/backend/lib/ros.js b/src/webui/backend/lib/ros.js
index 880eee0c8..96b449de6 100644
--- a/src/webui/backend/lib/ros.js
+++ b/src/webui/backend/lib/ros.js
@@ -1,26 +1,26 @@
-var ROSLIB = require('roslib'),
+let ROSLIB = require('roslib'),
     url = 'ws://localhost:9090',
     ros = new ROSLIB.Ros({
         url: url
-    });
+    })
 
-ros.on('connection', function () {
-    console.log('Connected to websocket server.');
-});
+ros.on('connection', function() {
+    console.log('Connected to websocket server.')
+})
 
-ros.on('error', function (error) {
-    console.log('Error connecting to websocket server: \n', error);
+ros.on('error', function(error) {
+    console.log('Error connecting to websocket server: \n', error)
     console.log('Retrying in 2 seconds')
-    setTimeout(function () {
-        ros.connect(url);
-    }, 2000);
-});
+    setTimeout(function() {
+        ros.connect(url)
+    }, 2000)
+})
 
-ros.on('close', function () {
-    console.log('Connection to websocket server closed.');
-});
+ros.on('close', function() {
+    console.log('Connection to websocket server closed.')
+})
 
-var self = module.exports = {
+let self = module.exports = {
     instance: ros,
     services: {
         updateMotors: new ROSLIB.Service({
@@ -38,6 +38,56 @@ var self = module.exports = {
                 ros: ros,
                 name: '/performances/set_properties',
                 serviceType: 'performances/SetProperties'
+            }),
+            load: new ROSLIB.Service({
+                ros: ros,
+                name: '/performances/load',
+                messageType: 'performances/Load'
+            }),
+            load_performance: new ROSLIB.Service({
+                ros: ros,
+                name: '/performances/load_performance',
+                messageType: 'performances/LoadPerformance'
+            }),
+            unload: new ROSLIB.Service({
+                ros: ros,
+                name: '/performances/unload',
+                messageType: 'std_srvs/Trigger'
+            }),
+            current: new ROSLIB.Service({
+                ros: ros,
+                name: '/performances/current',
+                messageType: 'performances/Current'
+            }),
+            run: new ROSLIB.Service({
+                ros: ros,
+                name: '/performances/run',
+                messageType: 'performances/Run'
+            }),
+            run_by_name: new ROSLIB.Service({
+                ros: ros,
+                name: '/performances/run_by_name',
+                messageType: 'performances/RunByName'
+            }),
+            run_full_performance: new ROSLIB.Service({
+                ros: ros,
+                name: '/performances/run_full_performance',
+                messageType: 'performances/RunByName'
+            }),
+            stop: new ROSLIB.Service({
+                ros: ros,
+                name: '/performances/stop',
+                messageType: 'performances/Stop'
+            }),
+            pause: new ROSLIB.Service({
+                ros: ros,
+                name: '/performances/pause',
+                messageType: 'performances/Pause'
+            }),
+            resume: new ROSLIB.Service({
+                ros: ros,
+                name: '/performances/resume',
+                messageType: 'performances/Resume'
             })
         },
         updateExpressions: new ROSLIB.Service({
@@ -53,41 +103,48 @@ var self = module.exports = {
             messageType: 'pi_face_tracker/Faces'
         })
     },
-    updateMotors: function (robot_name, motors) {
+    updateMotors: function(robot_name, motors) {
         this.services.updateMotors.callService({
             robot_name: robot_name,
             motors: JSON.stringify(motors)
-        }, function (res) {
-            console.log(res);
-        });
+        })
     },
-    lookAt: function (point) {
+    lookAt: function(point) {
         this.topics.lookAt.publish(new ROSLIB.Message({
             faces: [{
                 id: 1,
                 point: point,
                 attention: 0.99
             }]
-        }));
+        }))
     },
     performances: {
-        reloadProperties: function () {
-            self.services.performances.reload_properties.callService();
+        reloadProperties: function(options) {
+            options = options || {}
+            self.services.performances.reload_properties.callService({},
+                function() {
+                    if (options.success) options.success()
+                }, function() {
+                    if (options.error) options.error()
+                })
         },
-        setProperties: function (id, properties, options) {
+        setProperties: function(id, properties, options) {
+            options = options || {}
             self.services.performances.set_properties.callService({
                 id: id,
                 properties: JSON.stringify(properties)
-            }, function (response) {
-                if (options.success) options.success(response);
-            });
+            }, function(response) {
+                if (options.success) options.success(response)
+            }, function() {
+                if (options.error) options.error()
+            })
         }
     },
-    updateExpressions: function (robot_name) {
+    updateExpressions: function(robot_name) {
         this.services.updateExpressions.callService({
             robot_name: robot_name,
-        }, function (res) {
-            console.log(res);
-        });
+        }, function(res) {
+            console.log(res)
+        })
     },
-};
+}
diff --git a/src/webui/backend/routers/index.js b/src/webui/backend/routers/index.js
new file mode 100644
index 000000000..d4d65b0a3
--- /dev/null
+++ b/src/webui/backend/routers/index.js
@@ -0,0 +1,2 @@
+requireDirectory = require('require-directory')
+module.exports = requireDirectory(module)
diff --git a/src/webui/backend/routers/performances.js b/src/webui/backend/routers/performances.js
new file mode 100644
index 000000000..7432b855a
--- /dev/null
+++ b/src/webui/backend/routers/performances.js
@@ -0,0 +1,128 @@
+let express = require('express'),
+    router = express.Router(),
+    ros = require('../lib/ros')
+
+router.post('/reload_properties', function(req, res) {
+    ros.performances.reloadProperties({
+        success: function() {
+            res.json({success: true})
+        },
+        error: function() {
+            res.json({success: false})
+        }
+    })
+})
+
+router.post('/set_properties', function(req, res) {
+    ros.performances.setProperties(req.body['id'], req.body['properties'], {
+        success: function(response) {
+            res.json({success: response.success})
+        },
+        error: function() {
+            res.json({success: false})
+        }
+    })
+})
+
+router.post('/load', function(req, res) {
+    ros.services.performances.load.callService({
+        id: req.body['id']
+    }, function(response) {
+        let success = response.success
+        res.json({success: success, performance: success ? JSON.parse(response.performance) : null})
+    }, function() {
+        res.json({success: false, performance: null})
+    })
+})
+
+router.post('/load_performance', function(req, res) {
+    ros.services.performances.load_performance.callService({
+        performance: JSON.stringify(req.body['performance'])
+    }, function(response) {
+        res.json({success: response.success})
+    }, function() {
+        res.json({success: false})
+    })
+})
+
+router.post('/unload', function(req, res) {
+    ros.services.performances.unload.callService({},
+        function() {
+            res.json({success: true})
+        }, function() {
+            res.json({success: false})
+        })
+})
+
+router.post('/run_by_name', function(req, res) {
+    ros.services.performances.run_by_name.callService({
+        id: req.body['id']
+    }, function(response) {
+        res.json({success: response.success})
+    }, function() {
+        res.json({success: false})
+    })
+})
+
+router.post('/run_full_performance', function(req, res) {
+    ros.services.performances.run_full_performance.callService({
+        id: req.body['id']
+    }, function(response) {
+        res.json({success: response.success})
+    }, function() {
+        res.json({success: false})
+    })
+})
+
+router.get('/current', function(req, res) {
+    ros.services.performances.current.callService({}, function(response) {
+        res.json({
+            running: response.running,
+            current_time: response.current_time,
+            performance: JSON.parse(response.performance)
+        })
+    }, function() {
+        res.json({
+            running: false,
+            current_time: 0,
+            performances: []
+        })
+    })
+})
+
+router.post('/run', function(req, res) {
+    ros.services.performances.run.callService({
+        startTime: parseFloat(req.body['start_time']) || 0
+    }, function(response) {
+        res.json({success: response.success})
+    }, function() {
+        res.json({success: false})
+    })
+})
+
+router.post('/resume', function(req, res) {
+    ros.services.performances.resume.callService({}, function(response) {
+        res.json({success: response.success, time: response.time})
+    }, function() {
+        res.json({success: false, time: null})
+    })
+})
+
+router.post('/pause', function(req, res) {
+    ros.services.performances.pause.callService({}, function(response) {
+        res.json({success: response.success, time: response.time})
+    }, function() {
+        res.json({success: false, time: null})
+    })
+})
+
+
+router.post('/stop', function(req, res) {
+    ros.services.performances.stop.callService({}, function(response) {
+        res.json({success: response.success, time: response.time})
+    }, function() {
+        res.json({success: false, time: null})
+    })
+})
+
+module.exports = router
diff --git a/src/webui/client/modules/interaction/views/templates/interaction.tpl b/src/webui/client/modules/interaction/views/templates/interaction.tpl
index bf902bd8d..e555ae179 100644
--- a/src/webui/client/modules/interaction/views/templates/interaction.tpl
+++ b/src/webui/client/modules/interaction/views/templates/interaction.tpl
@@ -38,7 +38,7 @@
             <span class="input-group-btn">
                     <button class="app-send-button btn btn-primary">Send</button>
                     <button class="app-shut-up-button btn btn-danger">ShutUp</button>
-                    <button class="app-rate-good-button btn btn-default btn-sm"><span class="glyphicon glyphicon-thumbs-up"></span></button>
+                    <button class="app-rate-good-button btn btn-default"><span class="glyphicon glyphicon-thumbs-up"></span></button>
                     <button class="app-rate-bad-button btn-default btn"><span
                             class="glyphicon glyphicon-thumbs-down"></span></button>
                     <button class="app-record-button btn btn-info"><i class="fa fa-microphone"></i></button>
diff --git a/src/webui/package.json b/src/webui/package.json
index ee9f4f7f6..ee4eeb030 100644
--- a/src/webui/package.json
+++ b/src/webui/package.json
@@ -42,6 +42,7 @@
     "nouislider": "^9.0.0",
     "perfect-scrollbar": "^0.6.12",
     "python-shell": "^0.4.0",
+    "require-directory": "^2.1.1",
     "rimraf": "^2.6.1",
     "roslib": "^0.18.0",
     "select2": "^4.0.3",