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