diff --git a/views/ngXosViews/vpnDashboard/gulp/build.js b/views/ngXosViews/vpnDashboard/gulp/build.js
index 1ecffbd..b7de9e5 100644
--- a/views/ngXosViews/vpnDashboard/gulp/build.js
+++ b/views/ngXosViews/vpnDashboard/gulp/build.js
@@ -22,13 +22,17 @@
 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.vpnDashboard').run(function($location){$location.path('/')});
 angular.bootstrap(angular.element('#xosVpnDashboard'), ['xos.vpnDashboard']);`;
 
 module.exports = function(options){
-  
+
   // delete previous builded file
   gulp.task('clean', function(){
     return del(
@@ -37,6 +41,28 @@
     );
   });
 
+  // minify css
+  gulp.task('css', function () {
+    var processors = [
+      autoprefixer({browsers: ['last 1 version']}),
+      mqpacker,
+      csswring
+    ];
+
+    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('xosVpnDashboard.css'))
+    .pipe(gulp.dest(options.static + 'css/'))
+  });
+
   // compile and minify scripts
   gulp.task('scripts', function() {
     return gulp.src([
@@ -67,12 +93,15 @@
       .pipe(replace(/<!-- bower:css -->(\n.*)*\n<!-- endbower --><!-- endcss -->/, ''))
       .pipe(replace(/<!-- bower:js -->(\n.*)*\n<!-- endbower --><!-- endjs -->/, ''))
       .pipe(replace(/ng-app=".*"\s/, ''))
+      // rewriting css path
+      // .pipe(replace(/(<link.*">)/, ''))
       // injecting minified files
       .pipe(
         inject(
           gulp.src([
             options.static + 'js/vendor/xosVpnDashboardVendor.js',
-            options.static + 'js/xosVpnDashboard.js'
+            options.static + 'js/xosVpnDashboard.js',
+            options.static + 'css/xosVpnDashboard.css'
           ]),
           {ignorePath: '/../../../xos/core/xoslib'}
         )
@@ -108,12 +137,14 @@
 
   gulp.task('build', function() {
     runSequence(
+      'lint',
       'templates',
       'babel',
       'scripts',
       'wiredep',
       'copyHtml',
+      'copyCss',
       'cleanTmp'
     );
   });
-};
\ No newline at end of file
+};
diff --git a/views/ngXosViews/vpnDashboard/gulpfile.js b/views/ngXosViews/vpnDashboard/gulpfile.js
index b2cdab8..a3523ee 100644
--- a/views/ngXosViews/vpnDashboard/gulpfile.js
+++ b/views/ngXosViews/vpnDashboard/gulpfile.js
@@ -5,6 +5,7 @@
 
 var options = {
   src: 'src/',
+  css: 'src/css/',
   scripts: 'src/js/',
   tmp: 'src/.tmp',
   dist: 'dist/',
diff --git a/views/ngXosViews/vpnDashboard/karma.conf.js b/views/ngXosViews/vpnDashboard/karma.conf.js
index 83d3f63..dbd344a 100644
--- a/views/ngXosViews/vpnDashboard/karma.conf.js
+++ b/views/ngXosViews/vpnDashboard/karma.conf.js
@@ -26,6 +26,7 @@
 
     // list of files / patterns to load in the browser
     files: bowerComponents.concat([
+      'src/css/**/*.css',
       '../../static/js/xosApi.js',
       '../../static/js/vendor/ngXosHelpers.js',
       'src/js/**/*.js',
diff --git a/views/ngXosViews/vpnDashboard/src/css/dev.css b/views/ngXosViews/vpnDashboard/src/css/dev.css
deleted file mode 100644
index 4c504c9..0000000
--- a/views/ngXosViews/vpnDashboard/src/css/dev.css
+++ /dev/null
@@ -1,14 +0,0 @@
-#xosVpnDashboard{
-  width: 70%;
-  margin: auto;
-}
-.row {
-    display: table-row;
-}
-.cell {
-    display: table-cell;
-    padding: 5px;
-}
-.header {
-    font-weight: bold;
-}
diff --git a/views/ngXosViews/vpnDashboard/src/index.html b/views/ngXosViews/vpnDashboard/src/index.html
index b19740a..07f1017 100644
--- a/views/ngXosViews/vpnDashboard/src/index.html
+++ b/views/ngXosViews/vpnDashboard/src/index.html
@@ -3,7 +3,7 @@
 <link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.css" />
 <!-- endbower --><!-- endcss -->
 <!-- inject:css -->
-<link rel="stylesheet" href="/css/dev.css">
+<link rel="stylesheet" href="/css/vpnDashboard.css">
 <!-- endinject -->
 
 <div ng-app="xos.vpnDashboard" id="xosVpnDashboard">
diff --git a/views/ngXosViews/vpnDashboard/src/js/main.js b/views/ngXosViews/vpnDashboard/src/js/main.js
index a93f720..233051a 100644
--- a/views/ngXosViews/vpnDashboard/src/js/main.js
+++ b/views/ngXosViews/vpnDashboard/src/js/main.js
@@ -49,7 +49,7 @@
       .then((vpns) => {
         this.vpns = vpns;
         for (var i = 0; i < this.vpns.length; i++) {
-          var blob = new Blob([ this.vpns[i].script_text ], { type : 'text/plain' });
+          var blob = new Blob([this.vpns[i].script_text], {type: 'text/plain'});
           this.vpns[i].script_text = (window.URL || window.webkitURL).createObjectURL( blob );
         }
       })
diff --git a/views/ngXosViews/vpnDashboard/src/templates/vpn-list.tpl.html b/views/ngXosViews/vpnDashboard/src/templates/vpn-list.tpl.html
index a8fa8f3..0c7635f 100644
--- a/views/ngXosViews/vpnDashboard/src/templates/vpn-list.tpl.html
+++ b/views/ngXosViews/vpnDashboard/src/templates/vpn-list.tpl.html
@@ -1,18 +1,18 @@
 <div style="display: table;">
-  <div class="row">
-    <h1 class="cell">VPN List</h1>
+  <div class="vpn-row">
+    <h1 class="vpn-cell">VPN List</h1>
   </div>
-  <div class="row">
-    <div class="cell header">ID</div>
-    <div class="cell header">VPN Network</div>
-    <div class="cell header">VPN Subnet</div>
-    <div class="cell header">Script Link</div>
+  <div class="vpn-row">
+    <div class="vpn-cell vpn-header">ID</div>
+    <div class="vpn-cell vpn-header">VPN Network</div>
+    <div class="vpn-cell vpn-header">VPN Subnet</div>
+    <div class="vpn-cell vpn-header">Script Link</div>
   </div>
-  <div class="row" ng-repeat="vpn in vm.vpns">
-    <div class="cell">{{ vpn.id }}</div>
-    <div class="cell">{{ vpn.server_network }}</div>
-    <div class="cell">{{ vpn.vpn_subnet }}</div>
-    <div class="cell">
+  <div class="vpn-row" ng-repeat="vpn in vm.vpns">
+    <div class="vpn-cell">{{ vpn.id }}</div>
+    <div class="vpn-cell">{{ vpn.server_network }}</div>
+    <div class="vpn-cell">{{ vpn.vpn_subnet }}</div>
+    <div class="vpn-cell">
       <a download="connect-{{ vpn.id }}.vpn" ng-href="{{ vpn.script_text }}">Script</a>
     </div>
   </div>