diff --git a/lib/roles/app.js b/lib/roles/app.js
index 912a9624..6ac31107 100644
--- a/lib/roles/app.js
+++ b/lib/roles/app.js
@@ -38,7 +38,7 @@ module.exports = function(options) {
   app.use('/static', express.static(pathutil.resource('app')))
 
   if (!options.disableWatch) {
-    app.use(require('./webpack-config'))
+    app.use(require('./webpack-config').middleware)
   }
 
   app.use(express.cookieParser(options.secret))
diff --git a/lib/roles/webpack-config.js b/lib/roles/webpack-config.js
index a23635be..c47e14d9 100644
--- a/lib/roles/webpack-config.js
+++ b/lib/roles/webpack-config.js
@@ -3,7 +3,7 @@ var webpack = require('webpack')
 
 var pathutil = require('../util/pathutil')
 
-var webpackConfig = webpackMiddleware(webpack({
+var webpackOptions = {
   cache: true,
   debug: true,
   devtool: 'eval',
@@ -28,12 +28,13 @@ var webpackConfig = webpackMiddleware(webpack({
     loaders: [
       { test: /\.css$/, loader: 'style!css' },
       { test: /\.jade/, loader: 'template-html-loader' },
+      { test: /\.html/, loader: 'html-loader' },
       { test: /angular\.js/, loader: 'exports?angular'},
       { test: /angular-route\.js/, loader: 'imports?angular=angular'},
       { test: /oboe-browser\.js/, loader: 'imports?define=>false!exports?oboe'}
     ],
     noParse: [
-    //  pathutil.resource('lib')
+      //  pathutil.resource('lib')
     ]
   },
   plugins: [
@@ -45,7 +46,9 @@ var webpackConfig = webpackMiddleware(webpack({
     )
     //new webpack.optimize.UglifyJsPlugin({mangle: false})
   ]
-}), {
+}
+
+module.exports.middleware = webpackMiddleware(webpack(webpackOptions), {
   noInfo: false,
   quiet: false,
   lazy: false,
@@ -55,4 +58,4 @@ var webpackConfig = webpackMiddleware(webpack({
   }
 })
 
-module.exports = webpackConfig
\ No newline at end of file
+module.exports.options = webpackOptions
diff --git a/res/app/components/stf/common/nothing-to-show/index.js b/res/app/components/stf/common/nothing-to-show/index.js
new file mode 100644
index 00000000..4934199d
--- /dev/null
+++ b/res/app/components/stf/common/nothing-to-show/index.js
@@ -0,0 +1,4 @@
+require('./nothing-to-show.css')
+
+module.exports = angular.module('stf/common/nothing-to-show', [])
+  .directive('nothingToShow', require('./nothing-to-show-directive'))
diff --git a/res/app/components/stf/common/nothing-to-show/nothing-to-show-directive.js b/res/app/components/stf/common/nothing-to-show/nothing-to-show-directive.js
new file mode 100644
index 00000000..3ee920a6
--- /dev/null
+++ b/res/app/components/stf/common/nothing-to-show/nothing-to-show-directive.js
@@ -0,0 +1,14 @@
+module.exports = function () {
+  return {
+    restrict: 'EA',
+    scope: {
+      icon: '@',
+      message: '@'
+    },
+    template: require('./nothing-to-show.html'),
+    link: function (scope, element, attrs) {
+      scope.icon = attrs.icon;
+      scope.message = attrs.message;
+    }
+  }
+}
\ No newline at end of file
diff --git a/res/app/components/stf/common/nothing-to-show/nothing-to-show.css b/res/app/components/stf/common/nothing-to-show/nothing-to-show.css
new file mode 100644
index 00000000..b7d7ff1c
--- /dev/null
+++ b/res/app/components/stf/common/nothing-to-show/nothing-to-show.css
@@ -0,0 +1,9 @@
+.nothing-to-show {
+    color: #b7b7b7;
+    min-height: 130px;
+    text-align: center;
+}
+
+.nothing-to-show p {
+    font-size: 20px;
+}
diff --git a/res/app/components/stf/common/nothing-to-show/nothing-to-show.html b/res/app/components/stf/common/nothing-to-show/nothing-to-show.html
new file mode 100644
index 00000000..e9d10964
--- /dev/null
+++ b/res/app/components/stf/common/nothing-to-show/nothing-to-show.html
@@ -0,0 +1,4 @@
+<div class="nothing-to-show vertical-center">
+    <i class="fa fa-4x" ng-class="icon"></i>
+    <p ng-bind="message"></p>
+</div>
\ No newline at end of file