diff --git a/views/ngXosViews/diagnostic/env/local.js b/views/ngXosViews/diagnostic/env/local.js
index c65eb2f..77f9585 100644
--- a/views/ngXosViews/diagnostic/env/local.js
+++ b/views/ngXosViews/diagnostic/env/local.js
@@ -7,7 +7,7 @@
 // (works only for local environment as both application are served on the same domain)
 
 module.exports = {
-  host: 'http://localhost:4000/',
-  xoscsrftoken: 'IGSrPSAOmBorK8uxbbscQbn3ODPb9dDW',
-  xossessionid: 'i8hltbdt3po3uxkbvfmzy15o98p9s157'
+  host: 'http://xos.local:9999/',
+  xoscsrftoken: 'LNTm83Yqbabh0r60IZIl6rMYPHaYJdl1',
+  xossessionid: 'j9oazvejbv5jaiahmuhkba7f09ks8yuo'
 };
diff --git a/views/ngXosViews/diagnostic/env/mock.js b/views/ngXosViews/diagnostic/env/mock.js
new file mode 100644
index 0000000..c65eb2f
--- /dev/null
+++ b/views/ngXosViews/diagnostic/env/mock.js
@@ -0,0 +1,13 @@
+// This is a default configuration for your development environment.
+// You can duplicate this configuration for any of your Backend Environments.
+// Different configurations are loaded setting a NODE_ENV variable that contain the config file name.
+// `NODE_ENV=local npm start`
+//
+// If xoscsrftoken or xossessionid are not specified the browser value are used
+// (works only for local environment as both application are served on the same domain)
+
+module.exports = {
+  host: 'http://localhost:4000/',
+  xoscsrftoken: 'IGSrPSAOmBorK8uxbbscQbn3ODPb9dDW',
+  xossessionid: 'i8hltbdt3po3uxkbvfmzy15o98p9s157'
+};
diff --git a/views/ngXosViews/diagnostic/gulp/build.js b/views/ngXosViews/diagnostic/gulp/build.js
index 8544187..cf2b40e 100644
--- a/views/ngXosViews/diagnostic/gulp/build.js
+++ b/views/ngXosViews/diagnostic/gulp/build.js
@@ -13,7 +13,7 @@
 var uglify = require('gulp-uglify');
 var templateCache = require('gulp-angular-templatecache');
 var runSequence = require('run-sequence');
-var concat = require('gulp-concat');
+var concat = require('gulp-concat-util');
 var del = require('del');
 var wiredep = require('wiredep');
 var angularFilesort = require('gulp-angular-filesort');
@@ -22,10 +22,16 @@
 var inject = require('gulp-inject');
 var rename = require('gulp-rename');
 var replace = require('gulp-replace');
+var postcss = require('gulp-postcss');
+var autoprefixer = require('autoprefixer');
+var mqpacker = require('css-mqpacker');
+var csswring = require('csswring');
 
-var TEMPLATE_FOOTER = `}]);
-angular.module('xos.serviceTopology').run(function($location){$location.path('/')});
-angular.bootstrap(angular.element('#xosDiagnostic'), ['xos.serviceTopology']);`;
+var TEMPLATE_FOOTER = `
+angular.module('xos.diagnostic').run(function($location){
+  $location.path('/')
+});
+angular.bootstrap(angular.element('#xosDiagnostic'), ['xos.diagnostic']);`;
 
 module.exports = function(options){
   
@@ -37,15 +43,40 @@
     );
   });
 
+  // minify css
+  gulp.task('css', function () {
+    var processors = [
+      autoprefixer({browsers: ['last 1 version']}),
+      mqpacker,
+      csswring
+    ];
+    console.log(options.css);
+    gulp.src([
+      `${options.css}**/*.css`,
+      `!${options.css}dev.css`
+    ])
+    .pipe(postcss(processors))
+    .pipe(gulp.dest(options.tmp + '/css/'));
+  });
+
+  gulp.task('copyCss', ['css'], function(){
+    return gulp.src([`${options.tmp}/css/*.css`])
+    .pipe(concat('xosDiagnostic.css'))
+    .pipe(gulp.dest(options.static + 'css/'))
+  });
+
   // compile and minify scripts
   gulp.task('scripts', function() {
     return gulp.src([
-      options.tmp + '**/*.js'
+      options.tmp + '**/*.js',
+      options.tmp + 'templates.js'
     ])
     .pipe(ngAnnotate())
     .pipe(angularFilesort())
     .pipe(concat('xosDiagnostic.js'))
-    .pipe(uglify())
+    .pipe(concat.header('//Autogenerated, do not edit!!!\n'))
+    .pipe(concat.footer(TEMPLATE_FOOTER))
+    // .pipe(uglify())
     .pipe(gulp.dest(options.static + 'js/'));
   });
 
@@ -53,9 +84,9 @@
   gulp.task('templates', function(){
     return gulp.src('./src/templates/*.html')
       .pipe(templateCache({
-        module: 'xos.serviceTopology',
+        module: 'xos.diagnostic',
         root: 'templates/',
-        templateFooter: TEMPLATE_FOOTER
+        // templateFooter: TEMPLATE_FOOTER
       }))
       .pipe(gulp.dest(options.tmp));
   });
@@ -72,8 +103,10 @@
         inject(
           gulp.src([
             options.static + 'js/vendor/xosDiagnosticVendor.js',
-            options.static + 'js/xosDiagnostic.js'
-          ])
+            options.static + 'js/xosDiagnostic.js',
+            options.static + 'css/xosDiagnostic.css'
+          ]),
+          {ignorePath: '/../../../xos/core/xoslib'}
         )
       )
       .pipe(rename('xosDiagnostic.html'))
@@ -112,7 +145,7 @@
       'scripts',
       'wiredep',
       'copyHtml',
-      'cleanTmp'
+      'copyCss'
     );
   });
 };
\ No newline at end of file
diff --git a/views/ngXosViews/diagnostic/gulpfile.js b/views/ngXosViews/diagnostic/gulpfile.js
index b2cdab8..7bdc6e0 100644
--- a/views/ngXosViews/diagnostic/gulpfile.js
+++ b/views/ngXosViews/diagnostic/gulpfile.js
@@ -5,12 +5,13 @@
 
 var options = {
   src: 'src/',
+  css: 'src/css/',
   scripts: 'src/js/',
   tmp: 'src/.tmp',
   dist: 'dist/',
   api: '../../ngXosLib/api/',
   helpers: '../../ngXosLib/xosHelpers/src/',
-  static: '../../../xos/core/xoslib/static/', // this is the django static folder
+  static: '../../../xos/core/xoslib/static/', // this is the django static folder from dev environment
   dashboards: '../../../xos/core/xoslib/dashboards/' // this is the django html folder
 };
 
diff --git a/views/ngXosViews/diagnostic/package.json b/views/ngXosViews/diagnostic/package.json
index 1a9b456..5859db7 100644
--- a/views/ngXosViews/diagnostic/package.json
+++ b/views/ngXosViews/diagnostic/package.json
@@ -21,7 +21,10 @@
   "license": "MIT",
   "dependencies": {},
   "devDependencies": {
+    "autoprefixer": "^6.3.3",
     "browser-sync": "^2.9.11",
+    "css-mqpacker": "^4.0.0",
+    "csswring": "^4.2.1",
     "del": "^2.0.2",
     "easy-mocker": "^1.2.0",
     "eslint": "^1.8.0",
@@ -31,10 +34,12 @@
     "gulp-angular-templatecache": "^1.8.0",
     "gulp-babel": "^5.3.0",
     "gulp-concat": "^2.6.0",
+    "gulp-concat-util": "^0.5.5",
     "gulp-eslint": "^1.0.0",
     "gulp-inject": "^3.0.0",
     "gulp-minify-html": "^1.0.4",
     "gulp-ng-annotate": "^1.1.0",
+    "gulp-postcss": "^6.0.1",
     "gulp-rename": "^1.2.2",
     "gulp-replace": "^0.5.4",
     "gulp-uglify": "^1.4.2",
diff --git a/views/ngXosViews/diagnostic/src/css/diagnostic.css b/views/ngXosViews/diagnostic/src/css/diagnostic.css
index 66df573..2fe3993 100644
--- a/views/ngXosViews/diagnostic/src/css/diagnostic.css
+++ b/views/ngXosViews/diagnostic/src/css/diagnostic.css
@@ -1,20 +1,24 @@
 /* CONTAINER */
-diagnostic .half-height {
+#xosDiagnostic, [ui-view] {
+    height: 700px;
+}
+
+diagnostic-container .half-height {
     position: relative;
     height: 50%;
 }
 
-diagnostic .onethird-height {
+diagnostic-container .onethird-height {
     position: relative;
     height: 33%;
 }
 
-diagnostic .twothird-height {
+diagnostic-container .twothird-height {
     position: relative;
     height: 67%;
 }
 
-diagnostic .subscriber-select{
+diagnostic-container .subscriber-select{
     max-width: 200px;
     position: absolute;
     top: 20px;
diff --git a/views/ngXosViews/diagnostic/src/js/diagnostic.js b/views/ngXosViews/diagnostic/src/js/diagnostic.js
index 356583d..6638a95 100644
--- a/views/ngXosViews/diagnostic/src/js/diagnostic.js
+++ b/views/ngXosViews/diagnostic/src/js/diagnostic.js
@@ -1,13 +1,13 @@
 (function () {
   'use strict';
-
   angular.module('xos.diagnostic')
-  .directive('diagnostic', function(){
+  .directive('diagnosticContainer', function(){
     return {
       restrict: 'E',
       templateUrl: 'templates/diagnostic.tpl.html',
       controllerAs: 'vm',
-      controller: function(ChartData, Subscribers, ServiceRelation, $rootScope){
+      controller: function(ChartData, Subscribers, ServiceRelation, $rootScope, $log){
+
         this.loader = true;
         this.error = false;
         Subscribers.query().$promise
@@ -41,4 +41,4 @@
       }
     }
   });
-})();
\ No newline at end of file
+})(); 
\ No newline at end of file
diff --git a/views/ngXosViews/diagnostic/src/js/main.js b/views/ngXosViews/diagnostic/src/js/main.js
index c3ea927..73cd3d9 100644
--- a/views/ngXosViews/diagnostic/src/js/main.js
+++ b/views/ngXosViews/diagnostic/src/js/main.js
@@ -1,20 +1,26 @@
-'use strict';
+(function () {
+  'use strict';
 
-angular.module('xos.diagnostic', [
-  'ngResource',
-  'ngCookies',
-  'ngLodash',
-  'ngAnimate',
-  'ui.router',
-  'xos.helpers'
-])
-.config(($stateProvider) => {
-  $stateProvider
-  .state('home', {
-    url: '/',
-    template: '<diagnostic></diagnostic>'
+  angular.module('xos.diagnostic', [
+    'ngResource',
+    'ngCookies',
+    'ngLodash',
+    'ngAnimate',
+    'ui.router',
+    'xos.helpers'
+  ])
+  .config(($stateProvider) => {
+    $stateProvider
+    .state('home', {
+      url: '/',
+      template: '<diagnostic-container></diagnostic-container>'
+    });
+  })
+  .config(function($httpProvider){
+    $httpProvider.interceptors.push('NoHyperlinks');
+  })
+  .run(($log) => {
+    $log.info('Diagnostic Started');
   });
-})
-.config(function($httpProvider){
-  $httpProvider.interceptors.push('NoHyperlinks');
-});
+
+})();
\ No newline at end of file
diff --git a/views/ngXosViews/diagnostic/src/js/rest_services.js b/views/ngXosViews/diagnostic/src/js/rest_services.js
index cb66c37..f49df1c 100644
--- a/views/ngXosViews/diagnostic/src/js/rest_services.js
+++ b/views/ngXosViews/diagnostic/src/js/rest_services.js
@@ -373,7 +373,13 @@
         delete currentService.id; // conflict with d3
         return response;
       }
+
       let baseService = lodash.find(services, {id: 3});
+      
+      if(!angular.isDefined(baseService)){
+        console.error('Missing Base service!');
+        return;
+      }
 
       const baseData = {
         name: 'Subscriber',
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopology.js b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
index f131dcf..49e5d71 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
@@ -24,6 +24,11 @@
 
         const draw = (tree) => {
 
+          if(!tree){
+            console.error('Tree is missing');
+            return;
+          }
+
           // TODO update instead clear and redraw
 
           // clean
@@ -64,7 +69,8 @@
         };
         
         $scope.$watch(() => this.serviceChain, (chain) => {
-          if(chain){
+          console.log(chain);
+          if(angular.isDefined(chain)){
             draw(chain);
           }
         });