diff --git a/dev/index.html b/dev/index.html
index 44fa838..dea5eef 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -13,9 +13,9 @@
 </head>
 <body style="padding-top: 50px">
   <div ng-app="ngXosLib" class="container">
-    <div ng-controller="testCtrl as vm">
-      <xos-form ng-model="vm.model" config="vm.config"></xos-form>
-    </div>
+    <nav-demo></nav-demo>
+
+    <div ui-view></div>
   </div>
   <!-- bower:js -->
   <script src="../bower_components/angular/angular.js"></script>
@@ -36,8 +36,8 @@
   <script src="/ui_components/dumbComponents/validation/validation.component.js"></script>
   <script src="/ui_components/dumbComponents/table/table.component.js"></script>
   <script src="/ui_components/dumbComponents/pagination/pagination.component.js"></script>
-  <script src="/ui_components/dumbComponents/form/form.component.js"></script>
   <script src="/ui_components/dumbComponents/field/field.component.js"></script>
+  <script src="/ui_components/dumbComponents/form/form.component.js"></script>
   <script src="/ui_components/dumbComponents/alert/alert.component.js"></script>
   <script src="/services/helpers/ui/label_formatter.service.js"></script>
   <script src="/services/helpers/ui/form.helpers.js"></script>
@@ -74,6 +74,11 @@
   <script src="/services/csrfToken.interceptor.js"></script>
   <script src="/index.ngdoc.js"></script>
   <!-- endinject -->
-  <script src="main.js"></script>
+  <script src="js/main.js"></script>
+  <script src="js/form.dev.js"></script>
+  <script src="js/field.dev.js"></script>
+  <script src="js/alert.dev.js"></script>
+  <script src="js/table.dev.js"></script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/dev/js/alert.dev.js b/dev/js/alert.dev.js
new file mode 100644
index 0000000..6d5cefc
--- /dev/null
+++ b/dev/js/alert.dev.js
@@ -0,0 +1,32 @@
+'use strict';
+
+angular.module('ngXosLib')
+  .component('alertTest', {
+    restrict: 'E',
+    bindings: {},
+    bindToController: true,
+    controllerAs: 'vm',
+    templateUrl: 'templates/alert.dev.html',
+    controller: function () {
+      this.config1 = {
+        type: 'danger'
+      };
+
+      this.config2 = {
+        type: 'danger',
+        closeBtn: true
+      };
+
+      this.config3 = {
+        type: 'info'
+      };
+
+      this.config4 = {
+        type: 'success'
+      };
+
+      this.config5 = {
+        type: 'warning'
+      };
+    }
+  })
\ No newline at end of file
diff --git a/dev/js/field.dev.js b/dev/js/field.dev.js
new file mode 100644
index 0000000..656aec9
--- /dev/null
+++ b/dev/js/field.dev.js
@@ -0,0 +1,52 @@
+'use strict';
+
+angular.module('ngXosLib')
+  .component('fieldTest', {
+    restrict: 'E',
+    bindings: {},
+    bindToController: true,
+    controllerAs: 'vm',
+    templateUrl: 'templates/field.dev.html',
+    controller: function () {
+      this.field1 = {
+        name: 'number-field',
+        field: {label: 'My Number Value:', type: 'number'},
+        model: 2
+      };
+
+      this.field2 = {
+        name: 'date-field',
+        field: {label: 'My Date Value:', type: 'date'},
+        model: new Date()
+      };
+
+      this.field3 = {
+        name: 'boolean-field',
+        field: {label: 'My Boolean Value:', type: 'boolean'},
+        model: true
+      };
+
+      this.field4 = {
+        name: 'email-field',
+        field: {label: 'My Email Value:', type: 'email'},
+        model: 'sample@domain.us'
+      };
+      this.field5 = {
+        name: 'Empty Object Field',
+        label: 'Empty Object Field',
+        type: 'object',
+        properties: {
+          foo: {
+            label: 'FooLabel:',
+            type: 'string',
+            validators: {
+              required: true
+            }
+          },
+          bar: {
+            type: 'number'
+          }
+        }
+      }
+    }
+  });
\ No newline at end of file
diff --git a/dev/js/form.dev.js b/dev/js/form.dev.js
new file mode 100644
index 0000000..99afda0
--- /dev/null
+++ b/dev/js/form.dev.js
@@ -0,0 +1,62 @@
+'use strict';
+
+angular.module('ngXosLib')
+  .component('formTest', {
+    restrict: 'E',
+    bindings: {},
+    bindToController: true,
+    controllerAs: 'vm',
+    templateUrl: 'templates/form.dev.html',
+    controller: function () {
+      this.model = {
+        first_name: 'Jhon',
+        last_name: 'Doe',
+      },
+      this.config = {
+        exclude: ['password', 'last_login'],
+        formName: 'sampleForm',
+        actions: [
+          {
+            label: 'Save',
+            icon: 'ok', // refers to bootstraps glyphicon
+            cb: (user) => { // receive the model
+              console.log(user);
+            },
+            class: 'success'
+          }
+        ],
+        fields: {
+          first_name: {
+            type: 'string',
+            validators: {
+              required: true
+            }
+          },
+          last_name: {
+            label: 'Surname',
+            type: 'string',
+            validators: {
+              required: true,
+              minlength: 10
+            }
+          },
+          details_field: {
+            label: 'Empty Object Field',
+            type: 'object',
+            properties: {
+              foo: {
+                label: 'FooLabel:',
+                type: 'string',
+                validators: {
+                  required: true
+                }
+              },
+              bar: {
+                type: 'number'
+              }
+            }
+          }
+        }
+      }
+    }
+  })
\ No newline at end of file
diff --git a/dev/js/main.js b/dev/js/main.js
new file mode 100644
index 0000000..6026569
--- /dev/null
+++ b/dev/js/main.js
@@ -0,0 +1,74 @@
+/* eslint-disable angular/ng_module_name */
+(function(){
+  'use strict';
+  console.log('hello!');
+  angular.module('ngXosLib', ['xos.helpers', 'ui.router'])
+  .run(function () {
+    console.info('Dev Environment ready!')
+  })
+  .config(($stateProvider) => {
+    $stateProvider
+    .state('form-test', {
+      url: '/form/',
+      template: '<form-test></form-test>'
+    })
+    .state('table-test', {
+      url: '/table/',
+      template: '<table-test></table-test>'
+    })
+    .state('alert-test', {
+      url: '/alert/',
+      template: '<alert-test></alert-test>'
+    })
+    .state('field-test', {
+      url: '/field/',
+      template: '<field-test></field-test>'
+    })
+  })
+  .component('navDemo', {
+    restrict: 'E',
+    bindings: {},
+    bindToController: true,
+    controllerAs: 'vm',
+    templateUrl: 'templates/nav.dev.html',
+    controller: function ($rootScope) {
+
+      this.active = 'form';
+
+      $rootScope.$on('$stateChangeSuccess', (event, toState, toParams, fromState, fromParams)=> {
+
+        let strSelected = toState.url.split('/').join('');
+        this.active = strSelected.charAt(0).toUpperCase() + strSelected.slice(1);
+      });
+
+      this.config = {
+        actions: [
+          {
+            label: 'Form',
+            class: '',
+            link: '/#/form/'
+          },
+          {
+            label: 'Field',
+            class: '',
+            link: '/#/field/'
+
+          },
+          {
+            label: 'Alert',
+            class: '',
+            link: '/#/alert/'
+
+          },
+          {
+            label: 'Table',
+            class: '',
+            link: '/#/table/'
+
+          }
+        ]
+      }
+    }
+  });
+
+})();
\ No newline at end of file
diff --git a/dev/js/table.dev.js b/dev/js/table.dev.js
new file mode 100644
index 0000000..4ac974d
--- /dev/null
+++ b/dev/js/table.dev.js
@@ -0,0 +1,25 @@
+'use strict';
+
+angular.module('ngXosLib')
+  .component('tableTest', {
+    restrict: 'E',
+    bindings: {},
+    bindToController: true,
+    controllerAs: 'vm',
+    templateUrl: 'templates/table.dev.html',
+    controller: function () {
+      this.config = {
+        columns: [
+          {
+            label: '#',
+            prop: 'id'
+          },
+          {
+            label: 'Name:',
+            prop: 'name'
+          }
+        ]
+      };
+      this.data = [{id: 1, name: 'Jhon'}]
+    }
+  })
\ No newline at end of file
diff --git a/dev/main.js b/dev/main.js
deleted file mode 100644
index f7ab8eb..0000000
--- a/dev/main.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/* eslint-disable angular/ng_module_name */
-(function () {
-  'use strict';
-  console.log('hello1!');
-  angular.module('ngXosLib', ['xos.helpers'])
-  .run(function(){
-    console.info('Dev Environment ready!')
-  })
-  .controller('testCtrl', function(){
-    this.model = {
-      first_name: 'Jhon',
-      last_name: 'Doe',
-    }
-    this.config = {
-      exclude: ['password', 'last_login'],
-      formName: 'sampleForm',
-      actions: [
-        {
-          label: 'Save',
-          icon: 'ok', // refers to bootstraps glyphicon
-          cb: (user) => { // receive the model
-            console.log(user);
-          },
-          class: 'success'
-        }
-      ],
-      fields: {
-        first_name: {
-          type: 'string',
-          validators: {
-            required: true
-          }
-        },
-        last_name: {
-          label: 'Surname',
-          type: 'string',
-          validators: {
-            required: true,
-            minlength: 10
-          }
-        },
-        details_field: {
-          label: 'Empty Object Field',
-          type: 'object',
-          properties: {
-            foo: {
-              label: 'FooLabel:',
-              type: 'string',
-              validators: {
-                required: true
-              }
-            },
-            bar: {
-              type: 'number'
-            }
-          }
-        }
-      }
-    };
-  });
-})();
\ No newline at end of file
diff --git a/dev/templates/alert.dev.html b/dev/templates/alert.dev.html
new file mode 100644
index 0000000..a528e7e
--- /dev/null
+++ b/dev/templates/alert.dev.html
@@ -0,0 +1,16 @@
+
+<xos-alert config="vm.config1">
+  A sample alert message
+</xos-alert>
+<xos-alert config="vm.config2">
+  A sample alert message (with close button)
+</xos-alert>
+<xos-alert config="vm.config3">
+  A sample info message
+</xos-alert>
+<xos-alert config="vm.config4">
+  A sample success message
+</xos-alert>
+<xos-alert config="vm.config5">
+  A sample warning message
+</xos-alert>
\ No newline at end of file
diff --git a/dev/templates/field.dev.html b/dev/templates/field.dev.html
new file mode 100644
index 0000000..2a24150
--- /dev/null
+++ b/dev/templates/field.dev.html
@@ -0,0 +1,5 @@
+<xos-field ng-model="vm.field1.model" name="vm.field1.name" field="vm.field1.field"></xos-field>
+<xos-field ng-model="vm.field2.model" name="vm.field2.name" field="vm.field2.field"></xos-field>
+<xos-field ng-model="vm.field3.model" name="vm.field3.name" field="vm.field3.field"></xos-field>
+<xos-field ng-model="vm.field4.model" name="vm.field4.name" field="vm.field4.field"></xos-field>
+<xos-field ng-model="vm.field5.model" name="vm.field5.name" field="vm.field5"></xos-field>
diff --git a/dev/templates/form.dev.html b/dev/templates/form.dev.html
new file mode 100644
index 0000000..d2f12ff
--- /dev/null
+++ b/dev/templates/form.dev.html
@@ -0,0 +1 @@
+<xos-form ng-model="vm.model" config="vm.config"></xos-form>
diff --git a/dev/templates/nav.dev.html b/dev/templates/nav.dev.html
new file mode 100644
index 0000000..6dfbcae
--- /dev/null
+++ b/dev/templates/nav.dev.html
@@ -0,0 +1,7 @@
+<nav class="navbar navbar-default">
+  <div class="">
+    <ul class="nav navbar-nav">
+      <li ng-repeat="action in vm.config.actions" ng-class="{active:vm.active==action.label}"><a href="{{action.link}}">{{action.label}} </a></li>
+    </ul>
+  </div>
+</nav>
\ No newline at end of file
diff --git a/dev/templates/table.dev.html b/dev/templates/table.dev.html
new file mode 100644
index 0000000..41c10bf
--- /dev/null
+++ b/dev/templates/table.dev.html
@@ -0,0 +1 @@
+<xos-table config="vm.config" data="vm.data"></xos-table>
\ No newline at end of file