diff --git a/views/ngXosLib/gulp/ngXosHelpers.js b/views/ngXosLib/gulp/ngXosHelpers.js
index 7424218..c9915e2 100644
--- a/views/ngXosLib/gulp/ngXosHelpers.js
+++ b/views/ngXosLib/gulp/ngXosHelpers.js
@@ -7,6 +7,7 @@
 var del = require('del');
 var babel = require('gulp-babel');
 const sourcemaps = require('gulp-sourcemaps');
+var browserSync = require('browser-sync').create();
 
 module.exports = function(options){
 
@@ -49,15 +50,18 @@
   });
 
   gulp.task('cleanDocs', function(){
-    console.log(options);
     return del([options.docs + '**/*']);
   });
 
-  gulp.task('docs', ['cleanDocs'], function(){
+  gulp.task('makeDocs', ['cleanDocs'], function(){
     var ngOptions = {
       scripts: [
         'http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js',
-        'http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js'
+        'http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js',
+        `${options.ngXosVendor}ngXosHelpers.js`
+      ],
+      styles: [
+        'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',
       ],
       html5Mode: true,
       title: 'XOS Helpers documentation',
@@ -68,7 +72,8 @@
       module: {
         glob: [
           options.xosHelperSource + '*.js',
-          options.xosHelperSource + 'services/*.js'
+          options.xosHelperSource + 'services/*.js',
+          options.xosHelperSource + 'ui_components/**/*.js'
         ],
         title: 'Module Documentation',
       },
@@ -82,6 +87,33 @@
     }).pipe(gulpDocs.process(ngOptions)).pipe(gulp.dest('./docs'));
   });
 
+  gulp.task('serveDocs', function(){
+    browserSync.init({
+      server: {
+        baseDir: './docs',
+        routes: {
+          '/xos/core/xoslib/static/js/vendor': options.ngXosVendor
+        }
+      }
+    });
+  });
+
+  gulp.task('docs', ['makeDocs', 'serveDocs'], function(){
+    
+    var files = [
+      options.xosHelperSource + '*.js',
+      options.xosHelperSource + 'services/*.js',
+      options.xosHelperSource + 'ui_components/**/*.js'
+    ];
+
+    gulp.watch(files, ['makeDocs']);
+
+    gulp.watch(files, function(){
+      console.log('Reload');
+      browserSync.reload();
+    });
+  })
+
   gulp.task('dev', function(){
     gulp.watch(options.xosHelperSource + '**/*.js', ['helpersDev']);
   });
diff --git a/views/ngXosLib/package.json b/views/ngXosLib/package.json
index 6f1060a..9e8906c 100644
--- a/views/ngXosLib/package.json
+++ b/views/ngXosLib/package.json
@@ -7,7 +7,7 @@
     "test": "karma start",
     "apigen": "node apigen/blueprintToNgResource.js",
     "swagger": "node xos-swagger-def.js",
-    "doc": "gulp docs; cd ./docs; http-server -o -c-1",
+    "doc": "gulp docs; cd ./docs",
     "build": "gulp vendor && gulp helpers",
     "dev": "gulp dev"
   },
@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "babel-preset-es2015": "^6.6.0",
+    "browser-sync": "^2.12.3",
     "concat": "^2.0.0",
     "del": "^2.2.0",
     "gulp": "^3.9.0",
@@ -35,7 +36,6 @@
     "gulp-ngdocs": "^0.2.13",
     "gulp-sourcemaps": "^1.6.0",
     "gulp-uglify": "^1.4.2",
-    "http-server": "^0.9.0",
     "jasmine-core": "^2.4.1",
     "karma": "^0.13.19",
     "karma-babel-preprocessor": "^6.0.1",
diff --git a/views/ngXosLib/xos/core/xoslib/static/js/vendor/ngXosHelpers.js b/views/ngXosLib/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
new file mode 100644
index 0000000..6aecaf1
--- /dev/null
+++ b/views/ngXosLib/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
@@ -0,0 +1,421 @@
+'use strict';
+
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 3/24/16.
+ */
+
+(function () {
+  'use strict';
+
+  /**
+  * @ngdoc overview
+  * @name xos.uiComponents.table
+  * @description A table component
+  **/
+
+  angular.module('xos.uiComponents.table', [])
+
+  /**
+  * @ngdoc directive
+  * @name xos.uiComponents.table.directive:xosTable
+  * @restrict E
+  * @description The xos-table directive
+  * @element ANY
+  * @scope
+  * @example
+  <example module="sampleModule">
+  <file name="index.html">
+    <div ng-controller="SampleCtrl1 as vm">
+      <xos-table data="vm.data" config="vm.config"></xos-table>
+      </xos-table>
+    </div>
+  </file>
+  <file name="script.js">
+    angular.module('sampleModule', ['xos.uiComponents.table'])
+    .controller('SampleCtrl1', function(){
+      this.config = {
+        columns: [
+          {
+            label: 'First Name',
+            prop: 'name'
+          },
+          {
+            label: 'Last Name',
+            prop: 'lastname'
+          }
+        ]
+      };
+       this.data = [
+        {
+          name: 'John',
+          lastname: 'Doe'
+        },
+        {
+          name: 'Gili',
+          lastname: 'Fereydoun'
+        }
+      ]
+    });
+  </file>
+  </example>
+   <example module="sampleModule">
+  <file name="index.html">
+    <div ng-controller="SampleCtrl2 as vm">
+      <xos-table data="vm.data" config="vm.config"></xos-table>
+      </xos-table>
+    </div>
+  </file>
+  <file name="script.js">
+    angular.module('sampleModule', ['xos.uiComponents.table'])
+    .controller('SampleCtrl2', function(){
+      this.config = {
+        columns: [
+          {
+            label: 'First Name',
+            prop: 'name'
+          },
+          {
+            label: 'Last Name',
+            prop: 'lastname'
+          }
+        ],
+        classes: 'table table-striped table-condensed',
+        actions: [
+          {
+            label: 'delete',
+            icon: 'remove',
+            cb: (user) => {
+              console.log(user);
+            },
+            color: 'red'
+          }
+        ]
+      };
+       this.data = [
+        {
+          name: 'John',
+          lastname: 'Doe'
+        },
+        {
+          name: 'Gili',
+          lastname: 'Fereydoun'
+        }
+      ]
+    });
+  </file>
+  </example>
+   **/
+
+  .directive('xosTable', function () {
+    return {
+      restrict: 'E',
+      scope: {
+        data: '=',
+        config: '='
+      },
+      template: '\n          <!-- <pre>{{vm.data | json}}</pre> -->\n          <table ng-class="vm.classes" ng-show="vm.data.length > 0">\n            <thead>\n              <tr>\n                <th ng-repeat="col in vm.columns">{{col.label}}</th>\n                <th ng-if="vm.config.actions">Actions</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr ng-repeat="item in vm.data">\n                <td ng-repeat="col in vm.columns">{{item[col.prop]}}</td>\n                <td ng-if="vm.config.actions">\n                  <i\n                    ng-repeat="action in vm.config.actions"\n                    ng-click="action.cb(item)"\n                    class="glyphicon glyphicon-{{action.icon}}"\n                    style="color: {{action.color}};"></i>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        ',
+      bindToController: true,
+      controllerAs: 'vm',
+      controller: function controller() {
+
+        if (!this.config) {
+          throw new Error('[xosTable] Please provide a configuration via the "config" attribute');
+        }
+
+        if (!this.config.columns) {
+          throw new Error('[xosTable] Please provide a columns list in the configuration');
+        }
+
+        this.columns = this.config.columns;
+        this.classes = this.config.classes || 'table table-striped table-bordered';
+
+        if (this.config.actions) {}
+      }
+    };
+  });
+})();
+//# sourceMappingURL=../../maps/ui_components/table/table.component.js.map
+
+'use strict';
+
+(function () {
+  'use strict';
+
+  config.$inject = ["$httpProvider", "$interpolateProvider", "$resourceProvider"];
+  angular.module('bugSnag', []).factory('$exceptionHandler', function () {
+    return function (exception, cause) {
+      if (window.Bugsnag) {
+        Bugsnag.notifyException(exception, { diagnostics: { cause: cause } });
+      } else {
+        console.error(exception, cause, exception.stack);
+      }
+    };
+  });
+
+  /**
+  * @ngdoc overview
+  * @name xos.helpers
+  * @description this is the module that group all the helpers service and components for XOS
+  **/
+
+  angular.module('xos.helpers', ['ngCookies', 'ngResource', 'bugSnag', 'xos.uiComponents']).config(config);
+
+  function config($httpProvider, $interpolateProvider, $resourceProvider) {
+    $httpProvider.interceptors.push('SetCSRFToken');
+
+    $interpolateProvider.startSymbol('{$');
+    $interpolateProvider.endSymbol('$}');
+
+    // NOTE http://www.masnun.com/2013/09/18/django-rest-framework-angularjs-resource-trailing-slash-problem.html
+    $resourceProvider.defaults.stripTrailingSlashes = false;
+  }
+})();
+//# sourceMappingURL=maps/xosHelpers.module.js.map
+
+'use strict';
+
+(function () {
+  'use strict';
+
+  angular.module('xos.helpers')
+  /**
+  * @ngdoc service
+  * @name xos.helpers.vSG-Collection
+  * @description Angular resource to fetch /api/service/vsg/
+  **/
+  .service('vSG-Collection', ["$resource", function ($resource) {
+    return $resource('/api/service/vsg/');
+  }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/vSG.js.map
+
+'use strict';
+
+(function () {
+  'use strict';
+
+  angular.module('xos.helpers')
+  /**
+  * @ngdoc service
+  * @name xos.helpers.vOLT-Collection
+  * @description Angular resource to fetch /api/tenant/cord/volt/:volt_id/
+  **/
+  .service('vOLT-Collection', ["$resource", function ($resource) {
+    return $resource('/api/tenant/cord/volt/:volt_id/', { volt_id: '@id' });
+  }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/vOLT.js.map
+
+'use strict';
+
+(function () {
+  'use strict';
+
+  angular.module('xos.helpers')
+  /**
+  * @ngdoc service
+  * @name xos.helpers.Users
+  * @description Angular resource to fetch /api/core/users/
+  **/
+  .service('Users', ["$resource", function ($resource) {
+    return $resource('/api/core/users/');
+  }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/Users.js.map
+
+'use strict';
+
+(function () {
+  'use strict';
+
+  angular.module('xos.helpers')
+  /**
+  * @ngdoc service
+  * @name xos.helpers.Truckroll-Collection
+  * @description Angular resource to fetch /api/tenant/truckroll/:truckroll_id/
+  **/
+  .service('Truckroll-Collection', ["$resource", function ($resource) {
+    return $resource('/api/tenant/truckroll/:truckroll_id/', { truckroll_id: '@id' });
+  }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/Truckroll.js.map
+
+'use strict';
+
+(function () {
+  'use strict';
+
+  angular.module('xos.helpers')
+  /**
+  * @ngdoc service
+  * @name xos.helpers.Subscribers
+  * @description Angular resource to fetch /api/tenant/cord/subscriber/:subscriber_id/
+  **/
+  .service('Subscribers', ["$resource", function ($resource) {
+    return $resource('/api/tenant/cord/subscriber/:subscriber_id/', { subscriber_id: '@id' });
+  }])
+  /**
+  * @ngdoc service
+  * @name xos.helpers.Subscriber-features
+  * @description Angular resource to fetch /api/tenant/cord/subscriber/:subscriber_id/features/
+  **/
+  .service('Subscriber-features', ["$resource", function ($resource) {
+    return $resource('/api/tenant/cord/subscriber/:subscriber_id/features/', { subscriber_id: '@id' });
+  }])
+  /**
+  * @ngdoc service
+  * @name xos.helpers.Subscriber-features-uplink_speed
+  * @description Angular resource to fetch /api/tenant/cord/subscriber/:subscriber_id/features/uplink_speed/
+  **/
+  .service('Subscriber-features-uplink_speed', ["$resource", function ($resource) {
+    return $resource('/api/tenant/cord/subscriber/:subscriber_id/features/uplink_speed/', { subscriber_id: '@id' });
+  }])
+  /**
+  * @ngdoc service
+  * @name xos.helpers.Subscriber-features-downlink_speed
+  * @description Angular resource to fetch /api/tenant/cord/subscriber/:subscriber_id/features/downlink_speed/
+  **/
+  .service('Subscriber-features-downlink_speed', ["$resource", function ($resource) {
+    return $resource('/api/tenant/cord/subscriber/:subscriber_id/features/downlink_speed/', { subscriber_id: '@id' });
+  }])
+  /**
+  * @ngdoc service
+  * @name xos.helpers.Subscriber-features-cdn
+  * @description Angular resource to fetch /api/tenant/cord/subscriber/:subscriber_id/features/cdn/
+  **/
+  .service('Subscriber-features-cdn', ["$resource", function ($resource) {
+    return $resource('/api/tenant/cord/subscriber/:subscriber_id/features/cdn/', { subscriber_id: '@id' });
+  }])
+  /**
+  * @ngdoc service
+  * @name xos.helpers.Subscriber-features-uverse
+  * @description Angular resource to fetch /api/tenant/cord/subscriber/:subscriber_id/features/uverse/
+  **/
+  .service('Subscriber-features-uverse', ["$resource", function ($resource) {
+    return $resource('/api/tenant/cord/subscriber/:subscriber_id/features/uverse/', { subscriber_id: '@id' });
+  }])
+  /**
+  * @ngdoc service
+  * @name xos.helpers.Subscriber-features-status
+  * @description Angular resource to fetch /api/tenant/cord/subscriber/:subscriber_id/features/status/
+  **/
+  .service('Subscriber-features-status', ["$resource", function ($resource) {
+    return $resource('/api/tenant/cord/subscriber/:subscriber_id/features/status/', { subscriber_id: '@id' });
+  }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/Subscribers.js.map
+
+'use strict';
+
+(function () {
+  'use strict';
+
+  angular.module('xos.helpers')
+  /**
+  * @ngdoc service
+  * @name xos.helpers.ONOS-Services-Collection
+  * @description Angular resource to fetch /api/service/onos/
+  **/
+  .service('ONOS-Services-Collection', ["$resource", function ($resource) {
+    return $resource('/api/service/onos/');
+  }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/ONOS-Services.js.map
+
+'use strict';
+
+(function () {
+  'use strict';
+
+  angular.module('xos.helpers')
+  /**
+  * @ngdoc service
+  * @name xos.helpers.ONOS-App-Collection
+  * @description Angular resource to fetch /api/tenant/onos/app/
+  **/
+  .service('ONOS-App-Collection', ["$resource", function ($resource) {
+    return $resource('/api/tenant/onos/app/');
+  }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/ONOS-Apps.js.map
+
+'use strict';
+
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 3/24/16.
+ */
+
+(function () {
+  'use strict';
+
+  /**
+  * @ngdoc overview
+  * @name xos.uiComponents
+  * @description A collection of UI components useful for Dashboard development
+  * @requires xos.uiComponents.table
+  **/
+
+  angular.module('xos.uiComponents', ['xos.uiComponents.table']);
+})();
+//# sourceMappingURL=../maps/ui_components/ui-components.module.js.map
+
+'use strict';
+
+(function () {
+  'use strict';
+
+  /**
+  * @ngdoc service
+  * @name xos.helpers.NoHyperlinks
+  * @description This factory is automatically loaded trough xos.helpers and will add an $http interceptor that will add ?no_hyperlinks=1 to your api request, that is required by django
+  **/
+
+  angular.module('xos.helpers').factory('NoHyperlinks', noHyperlinks);
+
+  function noHyperlinks() {
+    return {
+      request: function request(_request) {
+        if (_request.url.indexOf('.html') === -1) {
+          _request.url += '?no_hyperlinks=1';
+        }
+        return _request;
+      }
+    };
+  }
+})();
+//# sourceMappingURL=../maps/services/noHyperlinks.interceptor.js.map
+
+'use strict';
+
+(function () {
+  'use strict';
+
+  /**
+  * @ngdoc service
+  * @name xos.helpers.SetCSRFToken
+  * @description This factory is automatically loaded trough xos.helpers and will add an $http interceptor that will the CSRF-Token to your request headers
+  **/
+
+  setCSRFToken.$inject = ["$cookies"];
+  angular.module('xos.helpers').factory('SetCSRFToken', setCSRFToken);
+
+  function setCSRFToken($cookies) {
+    return {
+      request: function request(_request) {
+        if (_request.method !== 'GET') {
+          _request.headers['X-CSRFToken'] = $cookies.get('xoscsrftoken');
+        }
+        return _request;
+      }
+    };
+  }
+})();
+//# sourceMappingURL=../maps/services/csrfToken.interceptor.js.map
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js b/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
index f1b6682..4d117ae 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
@@ -9,8 +9,110 @@
 (function () {
   'use strict';
 
+  /**
+  * @ngdoc overview
+  * @name xos.uiComponents.table
+  * @description A table component
+  **/
 
   angular.module('xos.uiComponents.table', [])
+
+    /**
+    * @ngdoc directive
+    * @name xos.uiComponents.table.directive:xosTable
+    * @restrict E
+    * @description The xos-table directive
+    * @element ANY
+    * @scope
+    * @example
+
+  <example module="sampleModule1">
+    <file name="index.html">
+      <div ng-controller="SampleCtrl1 as vm">
+        <xos-table data="vm.data" config="vm.config"></xos-table>
+        </xos-table>
+      </div>
+    </file>
+    <file name="script.js">
+      angular.module('sampleModule1', ['xos.uiComponents.table'])
+      .controller('SampleCtrl1', function(){
+        this.config = {
+          columns: [
+            {
+              label: 'First Name',
+              prop: 'name'
+            },
+            {
+              label: 'Last Name',
+              prop: 'lastname'
+            }
+          ]
+        };
+
+        this.data = [
+          {
+            name: 'John',
+            lastname: 'Doe'
+          },
+          {
+            name: 'Gili',
+            lastname: 'Fereydoun'
+          }
+        ]
+      });
+    </file>
+  </example>
+
+    <example module="sampleModule2">
+    <file name="index.html">
+      <div ng-controller="SampleCtrl2 as vm">
+        <xos-table data="vm.data" config="vm.config"></xos-table>
+        </xos-table>
+      </div>
+    </file>
+    <file name="script.js">
+      angular.module('sampleModule2', ['xos.uiComponents.table'])
+      .controller('SampleCtrl2', function(){
+        this.config = {
+          columns: [
+            {
+              label: 'First Name',
+              prop: 'name'
+            },
+            {
+              label: 'Last Name',
+              prop: 'lastname'
+            }
+          ],
+          classes: 'table table-striped table-condensed',
+          actions: [
+            {
+              label: 'delete',
+              icon: 'remove',
+              cb: (user) => {
+                console.log(user);
+              },
+              color: 'red'
+            }
+          ]
+        };
+
+        this.data = [
+          {
+            name: 'John',
+            lastname: 'Doe'
+          },
+          {
+            name: 'Gili',
+            lastname: 'Fereydoun'
+          }
+        ]
+      });
+    </file>
+  </example>
+
+    **/
+
     .directive('xosTable', function(){
       return {
         restrict: 'E',
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js b/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
index 0cbe70e..fd08421 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
@@ -9,6 +9,13 @@
 (function () {
   'use strict';
 
+  /**
+  * @ngdoc overview
+  * @name xos.uiComponents
+  * @description A collection of UI components useful for Dashboard development
+  * @requires xos.uiComponents.table
+  **/
+
   angular.module('xos.uiComponents', [
     'xos.uiComponents.table'
   ])