diff --git a/views/ngXosLib/gulp/ngXosHelpers.js b/views/ngXosLib/gulp/ngXosHelpers.js
index 157ab67..f50ba90 100644
--- a/views/ngXosLib/gulp/ngXosHelpers.js
+++ b/views/ngXosLib/gulp/ngXosHelpers.js
@@ -67,14 +67,15 @@
   gulp.task('makeDocs', ['cleanDocs'], function(){
     var ngOptions = {
       scripts: [
-        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js',
-        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.js',
+        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js',
+        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js',
         'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-cookies.min.js',
         'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-resource.js',
         'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.js',
-        `./${options.ngXosVendor}ngXosHelpers.js`
+        `./${options.ngXosVendor}ngXosHelpers.js`,
       ],
       styles: [
+        `./${options.ngXosStyles}xosNgLib.css`,
         'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css',
       ],
       html5Mode: false,
@@ -106,7 +107,8 @@
       server: {
         baseDir: './docs',
         routes: {
-          '/xos/core/xoslib/static/js/vendor': options.ngXosVendor
+          '/xos/core/xoslib/static/js/vendor': options.ngXosVendor,
+          '/xos/core/static': options.ngXosStyles
         }
       }
     });
diff --git a/views/ngXosLib/xosHelpers/src/styles/animations.scss b/views/ngXosLib/xosHelpers/src/styles/animations.scss
index 803d150..f565ff7 100644
--- a/views/ngXosLib/xosHelpers/src/styles/animations.scss
+++ b/views/ngXosLib/xosHelpers/src/styles/animations.scss
@@ -18,4 +18,27 @@
     visibility: hidden;
     transform: translate3d(100%, 0, 0);
   }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 100%, 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
index eb51d7a..0780d49 100644
--- a/views/ngXosLib/xosHelpers/src/styles/main.scss
+++ b/views/ngXosLib/xosHelpers/src/styles/main.scss
@@ -1,3 +1,9 @@
 @import './animations.scss';
 
-@import '../ui_components/dumbComponents/table/table.scss';
\ No newline at end of file
+@import '../ui_components/dumbComponents/table/table.scss';
+@import '../ui_components/dumbComponents/alert/alert.scss';
+@import '../ui_components/dumbComponents/validation/validation.scss';
+
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+  display: none !important;
+}
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.component.js
index 7d7a026..9b60def 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.component.js
@@ -75,7 +75,7 @@
     </file>
   </example>
 
-  <example module="sampleAlert2">
+  <example module="sampleAlert2" animations="true">
     <file name="index.html">
       <div ng-controller="SampleCtrl as vm" class="row">
         <div class="col-sm-4">
@@ -90,7 +90,7 @@
       </div>
     </file>
     <file name="script.js">
-      angular.module('sampleAlert2', ['xos.uiComponents'])
+      angular.module('sampleAlert2', ['xos.uiComponents', 'ngAnimate'])
       .controller('SampleCtrl', function(){
         this.config1 = {
           type: 'success'
@@ -110,7 +110,7 @@
         show: '=?'
       },
       template: `
-        <div class="alert alert-{{vm.config.type}}" ng-show="vm.show">
+        <div ng-cloak class="alert alert-{{vm.config.type}}" ng-hide="!vm.show">
           <button type="button" class="close" ng-if="vm.config.closeBtn" ng-click="vm.dismiss()">
             <span aria-hidden="true">&times;</span>
           </button>
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.scss b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.scss
new file mode 100644
index 0000000..f1330fe
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.scss
@@ -0,0 +1,10 @@
+@import '../../../styles/animations.scss';
+
+xos-alert {
+
+  /* when hiding */
+  .ng-hide-add         { animation:0.5s fadeOutDown ease-in-out; }
+
+  /* when showing */
+  .ng-hide-remove      { animation:0.5s fadeInUp ease-in-out; }
+}
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
index 539b1ee..7eb837e 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
@@ -81,14 +81,14 @@
     </file>
   </example>
 
-  <example module="sampleTable2">
+  <example module="sampleTable2" animations="true">
     <file name="index.html">
       <div ng-controller="SampleCtrl2 as vm">
         <xos-table data="vm.data" config="vm.config"></xos-table>
       </div>
     </file>
     <file name="script.js">
-      angular.module('sampleTable2', ['xos.uiComponents'])
+      angular.module('sampleTable2', ['xos.uiComponents', 'ngAnimate'])
       .controller('SampleCtrl2', function(){
         this.config = {
           columns: [
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss
index ee27104..cf1a30d 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss
@@ -1,6 +1,10 @@
 @import '../../../styles/animations.scss';
 
 xos-table {
+  
+  tr {
+    font-weight: bold;
+  }
 
   tr.ng-move,
   tr.ng-enter,
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.component.js
index 5cb7d08..84eb91a 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.component.js
@@ -28,10 +28,33 @@
             <label>Set an error type:</label>
           </div>
           <div class="col-xs-2">
-            <a class="btn" ng-click="vm.errors.email = true" ng-class="{'btn-default': !vm.errors.email, 'btn-success': vm.errors.email}">
+            <a class="btn"
+              ng-click="vm.errors.required = !vm.errors.required"
+              ng-class="{'btn-default': !vm.errors.required, 'btn-success': vm.errors.required}">
+              Required
+            </a>
+          </div>
+          <div class="col-xs-2">
+            <a class="btn"
+              ng-click="vm.errors.email = !vm.errors.email"
+              ng-class="{'btn-default': !vm.errors.email, 'btn-success': vm.errors.email}">
               Email
             </a>
           </div>
+          <div class="col-xs-2">
+            <a class="btn"
+              ng-click="vm.errors.minlength = !vm.errors.minlength"
+              ng-class="{'btn-default': !vm.errors.minlength, 'btn-success': vm.errors.minlength}">
+              Min Length
+            </a>
+          </div>
+          <div class="col-xs-2">
+            <a class="btn"
+              ng-click="vm.errors.maxlength = !vm.errors.maxlength"
+              ng-class="{'btn-default': !vm.errors.maxlength, 'btn-success': vm.errors.maxlength}">
+              Max Length
+            </a>
+          </div>
         </div>
         <xos-validation errors="vm.errors"></xos-validation>
       </div>
@@ -54,7 +77,7 @@
         errors: '='
       },
       template: `
-        <div>
+        <div ng-cloak>
           <!-- <pre>{{vm.errors.email | json}}</pre> -->
           <xos-alert config="vm.config" show="vm.errors.required !== undefined && vm.errors.required !== false">
             Field required
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.scss b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.scss
new file mode 100644
index 0000000..aaf6e2f
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.scss
@@ -0,0 +1,7 @@
+@import '../../../styles/animations.scss';
+@import '../../../../../../style/sass/bootstrap/bootstrap/_variables.scss';
+
+input + xos-validation {
+  margin-top: $form-group-margin-bottom;
+  display: block;
+}
\ No newline at end of file
diff --git a/views/ngXosViews/sampleView/src/index.html b/views/ngXosViews/sampleView/src/index.html
index c6c90d9..2693838 100644
--- a/views/ngXosViews/sampleView/src/index.html
+++ b/views/ngXosViews/sampleView/src/index.html
@@ -3,11 +3,11 @@
 <link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.min.css" />
 <!-- endbower --><!-- endcss -->
 <!-- inject:css -->
-<link rel="stylesheet" href="/css/main.css">
 <link rel="stylesheet" href="/../../../xos/core/static/xosNgLib.css">
+<link rel="stylesheet" href="/css/main.css">
 <!-- endinject -->
 
-<div ng-app="xos.sampleView" id="xosSampleView" class="container-fluid">
+<div ng-cloak ng-app="xos.sampleView" id="xosSampleView" class="container-fluid">
     <div ui-view></div>
 </div>
 
diff --git a/views/ngXosViews/sampleView/src/js/main.js b/views/ngXosViews/sampleView/src/js/main.js
index 3cad7f4..d3aa494 100644
--- a/views/ngXosViews/sampleView/src/js/main.js
+++ b/views/ngXosViews/sampleView/src/js/main.js
@@ -94,6 +94,10 @@
             class: 'success'
           }
         ]
+      };
+
+      this.errors = {
+        email: false
       }
 
       // retrieving user list
diff --git a/views/ngXosViews/sampleView/src/templates/users-list.tpl.html b/views/ngXosViews/sampleView/src/templates/users-list.tpl.html
index f79f9ba..c1f7b20 100644
--- a/views/ngXosViews/sampleView/src/templates/users-list.tpl.html
+++ b/views/ngXosViews/sampleView/src/templates/users-list.tpl.html
@@ -7,7 +7,12 @@
 
 <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>
+  <xos-alert config="vm.alertConfig">Random alert</xos-alert>
+  <a class="btn" ng-click="vm.errors.email = !vm.errors.email" ng-class="{'btn-default': !vm.errors.email, 'btn-success': vm.errors.email}">
+    Email
+  </a>
+  <xos-validation errors="vm.errors"></xos-validation>
   </div>
 </div>