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