diff --git a/src/app/core/form/form-helpers.ts b/src/app/core/form/form-helpers.ts
new file mode 100644
index 0000000..0677cbd
--- /dev/null
+++ b/src/app/core/form/form-helpers.ts
@@ -0,0 +1,106 @@
+import * as _ from 'lodash';
+import {IXosConfigHelpersService} from '../services/helpers/config.helpers';
+
+export interface IXosFormHelpersService {
+  _getFieldFormat(value: any): string;
+  parseModelField(fields: any): any[];
+  buildFormStructure(modelField: any[], customField: any[], model: any, order: string[]): any;
+}
+
+export class XosFormHelpers {
+  static $inject = ['ConfigHelpers'];
+
+  constructor (
+    private ConfigHelpers: IXosConfigHelpersService
+  ) {
+
+  }
+
+  public _isEmail = (text) => {
+    const re = /(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+    return re.test(text);
+  };
+
+  public  _getFieldFormat = (value) => {
+    if (angular.isArray(value)) {
+      return 'array';
+    }
+
+    // check if is date
+    if (
+      angular.isDate(value) ||
+      (
+        !Number.isNaN(Date.parse(value)) && // Date.parse is a number
+        /^\d+-\d+-\d+\D\d+:\d+:\d+\.\d+\D/.test(value) // the format match ISO dates
+      )) {
+      return 'date';
+    }
+
+    // check if is boolean
+    // isNaN(false) = false, false is a number (0), true is a number (1)
+    if (typeof value  === 'boolean') {
+      return 'boolean';
+    }
+
+    // check if a string is an email
+    if (this._isEmail(value)) {
+      return 'email';
+    }
+
+    // if null return string
+    if (angular.isString(value) || value === null) {
+      return 'text';
+    }
+
+    return typeof value;
+  };
+
+  public buildFormStructure = (modelField, customField, model, order) => {
+    // TODO take an array as input
+    // NOTE do we want to support auto-generated forms??
+    // We can take that out of this component and autogenerate the config somewhere else
+    const orderedForm = {};
+
+    modelField = angular.extend(modelField, customField);
+    customField = customField || {};
+
+    if (order) {
+      _.each(order, function (key: string) {
+        orderedForm[key] = {};
+      });
+    }
+
+    _.each(Object.keys(modelField), (f) => {
+
+      orderedForm[f] = {
+        label: (customField[f] && customField[f].label) ? `${customField[f].label}:` : this.ConfigHelpers.toLabel(f),
+        type: (customField[f] && customField[f].type) ? customField[f].type : this._getFieldFormat(model[f]),
+        validators: (customField[f] && customField[f].validators) ? customField[f].validators : {},
+        hint: (customField[f] && customField[f].hint) ? customField[f].hint : '',
+      };
+
+      if (customField[f] && customField[f].options) {
+        orderedForm[f].options = customField[f].options;
+      }
+      if (customField[f] && customField[f].properties) {
+        orderedForm[f].properties = customField[f].properties;
+      }
+      if (orderedForm[f].type === 'date') {
+        model[f] = new Date(model[f]);
+      }
+
+      if (orderedForm[f].type === 'number') {
+        model[f] = parseInt(model[f], 10);
+      }
+    });
+
+    return orderedForm;
+  };
+
+  public parseModelField = (fields) => {
+  return _.reduce(fields, (form, f) => {
+    form[f] = {};
+    return form;
+  }, {});
+}
+}
diff --git a/src/app/core/form/form.html b/src/app/core/form/form.html
new file mode 100644
index 0000000..a583269
--- /dev/null
+++ b/src/app/core/form/form.html
@@ -0,0 +1,18 @@
+<form name="vm.{{vm.config.formName || 'form'}}" novalidate>
+    <div class="form-group" ng-repeat="(name, field) in vm.formField">
+        <xos-field name="name" field="field" ng-model="vm.ngModel[name]"></xos-field>
+        <xos-validation field="vm[vm.config.formName || 'form'][name]" form = "vm[vm.config.formName || 'form']"></xos-validation>
+        <div class="alert alert-info" ng-show="(field.hint).length >0" role="alert">{{field.hint}}</div>
+    </div>
+    <div class="form-group" ng-if="vm.config.actions">
+        <!--<xos-alert config="vm.config.feedback" show="vm.config.feedback.show">{{vm.config.feedback.message}}</xos-alert>-->
+        <button role="button" href=""
+                ng-repeat="action in vm.config.actions"
+                ng-click="action.cb(vm.ngModel, vm[vm.config.formName || 'form'])"
+                class="btn btn-{{action.class}}"
+                title="{{action.label}}">
+            <i class="fa fa-{{action.icon}}"></i>
+            {{action.label}}
+        </button>
+    </div>
+</form>
\ No newline at end of file
diff --git a/src/app/core/form/form.ts b/src/app/core/form/form.ts
new file mode 100644
index 0000000..a5cfa67
--- /dev/null
+++ b/src/app/core/form/form.ts
@@ -0,0 +1,81 @@
+// TODO clean this mess
+
+import * as _ from 'lodash';
+import {IXosFormHelpersService} from './form-helpers';
+import {IXosConfigHelpersService} from '../services/helpers/config.helpers';
+
+class FormCtrl {
+  $inject = ['$onInit', '$scope', 'XosFormHelpers', 'ConfigHelpers'];
+
+  public ngModel: any;
+  public excludedField: string[];
+  public formField: any;
+  private config: any;
+
+  constructor (
+    private $scope: ng.IScope,
+    private XosFormHelpers: IXosFormHelpersService,
+    private ConfigHelpers: IXosConfigHelpersService
+  ) {
+
+  }
+
+  $onInit() {
+    if (!this.config) {
+      throw new Error('[xosForm] Please provide a configuration via the "config" attribute');
+    }
+
+    if (!this.config.actions) {
+      throw new Error('[xosForm] Please provide an action list in the configuration');
+    }
+
+    if (!this.config.feedback) {
+      this.config.feedback =  {
+        show: false,
+        message: 'Form submitted successfully !!!',
+        type: 'success'
+      };
+    }
+
+    // TODO Define this list in a service (eg: ConfigHelper)
+    this.excludedField = this.ConfigHelpers.excluded_fields;
+    if (this.config && this.config.exclude) {
+      this.excludedField = this.excludedField.concat(this.config.exclude);
+    }
+
+    this.formField = [];
+
+    this.$scope.$watch(() => this.config, () => {
+      if (!this.ngModel) {
+        return;
+      }
+      let diff = _.difference(Object.keys(this.ngModel), this.excludedField);
+      let modelField = this.XosFormHelpers.parseModelField(diff);
+      this.formField = this.XosFormHelpers.buildFormStructure(modelField, this.config.fields, this.ngModel, this.config.order);
+    }, true);
+
+    this.$scope.$watch(() => this.ngModel, (model) => {
+      console.log(this.ngModel);
+      // empty from old stuff
+      this.formField = {};
+      if (!model) {
+        return;
+      }
+      let diff = _.difference(Object.keys(model), this.excludedField);
+      let modelField = this.XosFormHelpers.parseModelField(diff);
+      this.formField = this.XosFormHelpers.buildFormStructure(modelField, this.config.fields, model, this.config.order);
+      console.log(this.formField);
+    });
+
+  }
+}
+
+export const xosForm: angular.IComponentOptions = {
+  template: require('./form.html'),
+  controllerAs: 'vm',
+  controller: FormCtrl,
+  bindings: {
+    ngModel: '=',
+    config: '='
+  }
+};