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