diff --git a/views/ngXosLib/gulp/ngXosHelpers.js b/views/ngXosLib/gulp/ngXosHelpers.js
index 9b3c1b7..6fabcda 100644
--- a/views/ngXosLib/gulp/ngXosHelpers.js
+++ b/views/ngXosLib/gulp/ngXosHelpers.js
@@ -8,9 +8,20 @@
 var babel = require('gulp-babel');
 const sourcemaps = require('gulp-sourcemaps');
 var browserSync = require('browser-sync').create();
+var rename = require('gulp-rename');
+var sass = require('gulp-sass');
 
 module.exports = function(options){
 
+  gulp.task('style', function(){
+    return gulp.src(`${options.xosHelperSource}**/*.scss`)
+      .pipe(sourcemaps.init())
+      .pipe(sass().on('error', sass.logError))
+      .pipe(rename('xosNgLib.css'))
+      .pipe(sourcemaps.write())
+      .pipe(gulp.dest(options.ngXosStyles));
+  });
+
   // transpile js with sourceMaps
   gulp.task('babel', function(){
     return gulp.src(options.xosHelperSource + '**/*.js')
@@ -31,7 +42,7 @@
   });
 
   // build
-  gulp.task('helpers', ['babel'], function(){
+  gulp.task('helpers', ['babel', 'style'], function(){
     return gulp.src([options.xosHelperTmp + '**/*.js'])
       .pipe(angularFilesort())
       .pipe(concat('ngXosHelpers.js'))
@@ -117,6 +128,7 @@
   })
 
   gulp.task('dev', function(){
+    gulp.watch(`${options.xosHelperSource}**/*.scss`, ['style']);
     gulp.watch(options.xosHelperSource + '**/*.js', ['helpersDev']);
   });
 };
\ No newline at end of file
diff --git a/views/ngXosLib/gulpfile.js b/views/ngXosLib/gulpfile.js
index 77a5c07..e514d7a 100644
--- a/views/ngXosLib/gulpfile.js
+++ b/views/ngXosLib/gulpfile.js
@@ -5,6 +5,7 @@
 
 var options = {
   ngXosVendor: '../../xos/core/xoslib/static/js/vendor/', //save here the minfied vendor file, this is automatically loaded in the django page
+  ngXosStyles: '../../xos/core/static/', // TODO move in xoslib
   xosHelperSource: './xosHelpers/src/',
   xosHelperTmp: './xosHelpers/.tmp/',
   docs: './docs'
diff --git a/views/ngXosLib/package.json b/views/ngXosLib/package.json
index cc788de..61476a3 100644
--- a/views/ngXosLib/package.json
+++ b/views/ngXosLib/package.json
@@ -36,6 +36,8 @@
     "gulp-concat": "^2.6.0",
     "gulp-ng-annotate": "^1.1.0",
     "gulp-ngdocs": "^0.2.13",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^2.3.1",
     "gulp-sourcemaps": "^1.6.0",
     "gulp-uglify": "^1.4.2",
     "jasmine-core": "^2.4.1",
diff --git a/views/ngXosLib/xosHelpers/src/styles/animations.scss b/views/ngXosLib/xosHelpers/src/styles/animations.scss
new file mode 100644
index 0000000..803d150
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/styles/animations.scss
@@ -0,0 +1,21 @@
+@keyframes slideInRight {
+  from {
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(100%, 0, 0);
+  }
+}
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/styles/main.scss b/views/ngXosLib/xosHelpers/src/styles/main.scss
new file mode 100644
index 0000000..a5ddae2
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/styles/main.scss
@@ -0,0 +1 @@
+@import './animations.scss';
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.component.js
similarity index 100%
rename from views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert.component.js
rename to views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.component.js
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form/form.component.js
similarity index 100%
rename from views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form.component.js
rename to views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form/form.component.js
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/pagination.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/pagination/pagination.component.js
similarity index 100%
rename from views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/pagination.component.js
rename to views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/pagination/pagination.component.js
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
similarity index 100%
rename from views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table.component.js
rename to views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss
new file mode 100644
index 0000000..91786b1
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss
@@ -0,0 +1,3 @@
+xos-table {
+  background: red;
+}
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.component.js
similarity index 100%
rename from views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js
rename to views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.component.js
diff --git a/views/ngXosViews/sampleView/env/default.js b/views/ngXosViews/sampleView/env/default.js
index 00512d7..dacf8e8 100644
--- a/views/ngXosViews/sampleView/env/default.js
+++ b/views/ngXosViews/sampleView/env/default.js
@@ -8,6 +8,6 @@
 
 module.exports = {
   host: 'http://xos.dev:9999/',
-  xoscsrftoken: '9vrMWJNfhfV8DcpOsJ7s8RQNIKV94xHP',
-  xossessionid: 'nn3tfg7j55hnvx67jgfvvo8cwnqvgex3'
+  xoscsrftoken: 'q7gXR35WCSa2R9njrZJiubGCUxGR40tX',
+  xossessionid: 'ghzz0lxwt8f7z5io9gj8ni9yrrrkgz17'
 };
diff --git a/views/ngXosViews/sampleView/gulp/server.js b/views/ngXosViews/sampleView/gulp/server.js
index 3c6a8e3..22d5666 100644
--- a/views/ngXosViews/sampleView/gulp/server.js
+++ b/views/ngXosViews/sampleView/gulp/server.js
@@ -53,7 +53,8 @@
         baseDir: options.src,
         routes: {
           // '/xosHelpers/src': options.helpers,
-          '/xos/core/xoslib/static/js/vendor': options.helpers
+          '/xos/core/xoslib/static/js/vendor': options.helpers,
+          '/xos/core/static': options.static + '../../static/'
         },
         middleware: function(req, res, next){
           if(
@@ -156,7 +157,10 @@
     return gulp.src(options.src + 'index.html')
       .pipe(
         inject(
-          gulp.src(options.src + 'css/*.css'),
+          gulp.src([
+            options.src + 'css/*.css',
+            options.static + '../../static/xosNgLib.css'
+          ]),
           {
             ignorePath: [options.src]
           }
diff --git a/views/ngXosViews/sampleView/src/index.html b/views/ngXosViews/sampleView/src/index.html
index 7563ffc..66f9535 100644
--- a/views/ngXosViews/sampleView/src/index.html
+++ b/views/ngXosViews/sampleView/src/index.html
@@ -4,6 +4,7 @@
 <!-- endbower --><!-- endcss -->
 <!-- inject:css -->
 <link rel="stylesheet" href="/css/main.css">
+<link rel="stylesheet" href="/../../../xos/core/static/xosNgLib.css">
 <!-- endinject -->
 
 <div ng-app="xos.sampleView" id="xosSampleView" class="container-fluid">
diff --git a/views/ngXosViews/sampleView/src/js/main.js b/views/ngXosViews/sampleView/src/js/main.js
index f8473b6..153d6f2 100644
--- a/views/ngXosViews/sampleView/src/js/main.js
+++ b/views/ngXosViews/sampleView/src/js/main.js
@@ -67,6 +67,21 @@
         exclude: ['password'],
         formName: 'myForm',
         fields: {
+          firstname: {
+            validators: {
+              minlength: 10
+            }
+          },
+          lastname: {
+            validators: {
+              maxlength: 3
+            }
+          },
+          user_url: {
+            validators: {
+              required: true
+            }
+          }
         },
         actions: [
           {
@@ -83,7 +98,7 @@
       // retrieving user list
       Users.query().$promise
       .then((users) => {
-        this.users = users.concat(users).concat(users);
+        this.users = users.concat(users).concat(users).concat(users);
       })
       .catch((e) => {
         throw new Error(e);
diff --git a/views/ngXosViews/sampleView/src/templates/users-list.tpl.html b/views/ngXosViews/sampleView/src/templates/users-list.tpl.html
index 17ad68f..f79f9ba 100644
--- a/views/ngXosViews/sampleView/src/templates/users-list.tpl.html
+++ b/views/ngXosViews/sampleView/src/templates/users-list.tpl.html
@@ -7,7 +7,7 @@
 
 <div class="row">
   <div class="col-xs-12">
-  <xos-form ng-model="vm.users[0]" config="vm.formConfig"></xos-form>
+  <!-- <xos-form ng-model="vm.users[0]" config="vm.formConfig"></xos-form> -->
   </div>
 </div>