diff --git a/dev/index.html b/dev/index.html
index 8d580ac..44fa838 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -13,10 +13,8 @@
 </head>
 <body style="padding-top: 50px">
   <div ng-app="ngXosLib" class="container">
-    <div class="row" ng-controller="testCtrl as vm">
-      <div class="col-xs-12">
-        <xos-table config="vm.config" data="vm.data"></xos-table>
-      </div>
+    <div ng-controller="testCtrl as vm">
+      <xos-form ng-model="vm.model" config="vm.config"></xos-form>
     </div>
   </div>
   <!-- bower:js -->
@@ -33,10 +31,10 @@
   <!-- endbower -->
   <!-- inject:js -->
   <script src="/ui_components/ui-components.module.js"></script>
-  <script src="/ui_components/smartComponents/smartPie/smartPie.component.js"></script>
   <script src="/ui_components/smartComponents/smartTable/smartTable.component.js"></script>
-  <script src="/ui_components/dumbComponents/table/table.component.js"></script>
+  <script src="/ui_components/smartComponents/smartPie/smartPie.component.js"></script>
   <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>
diff --git a/dev/main.js b/dev/main.js
index e858499..f7ab8eb 100644
--- a/dev/main.js
+++ b/dev/main.js
@@ -1,30 +1,61 @@
 /* eslint-disable angular/ng_module_name */
 (function () {
   'use strict';
-  console.log('hello!');
+  console.log('hello1!');
   angular.module('ngXosLib', ['xos.helpers'])
   .run(function(){
     console.info('Dev Environment ready!')
   })
   .controller('testCtrl', function(){
-
-    // TODO add styles
-
+    this.model = {
+      first_name: 'Jhon',
+      last_name: 'Doe',
+    }
     this.config = {
-      columns: [
+      exclude: ['password', 'last_login'],
+      formName: 'sampleForm',
+      actions: [
         {
-          label: '#',
-          prop: 'id',
-        },
-        {
-          label: 'Name:',
-          prop: 'name',
+          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'
+            }
+          }
+        }
+      }
     };
-
-    this.data = [
-      {id: 1, name: 'Jhon'}
-    ];
   });
 })();
\ No newline at end of file