diff --git a/src/app/config/style.config.ts b/src/app/config/style.config.ts
index 3e1135b..030f3aa 100644
--- a/src/app/config/style.config.ts
+++ b/src/app/config/style.config.ts
@@ -6,6 +6,14 @@
         {
             label: 'Slices',
             state: 'xos.core.slices'
+        },
+        {
+            label: 'Instances',
+            state: 'xos.core.instances'
+        },
+        {
+            label: 'Nodes',
+            state: 'xos.core.nodes'
         }
     ]
 };
diff --git a/src/app/core/field/field.html b/src/app/core/field/field.html
new file mode 100644
index 0000000..e472939
--- /dev/null
+++ b/src/app/core/field/field.html
@@ -0,0 +1,96 @@
+<label ng-if="vm.field.type !== 'object' && vm.field.type !== 'array'">{{vm.field.label}}</label>
+<input
+        xos-custom-validator custom-validator="vm.field.validators.custom || null"
+        ng-if="vm.field.type !== 'boolean' && vm.field.type !== 'object' && vm.field.type !== 'select' && vm.field.type !== 'array'"
+        type="{{vm.field.type}}"
+        name="{{vm.name}}"
+        class="form-control"
+        ng-model="vm.ngModel"
+        ng-minlength="vm.field.validators.minlength || 0"
+        ng-maxlength="vm.field.validators.maxlength || 2000"
+        ng-required="vm.field.validators.required || false" />
+<select class="form-control" ng-if ="vm.field.type === 'select'"
+        name = "{{vm.name}}"
+        ng-options="item.id as item.label for item in vm.field.options"
+        ng-model="vm.ngModel"
+        ng-required="vm.field.validators.required || false">
+</select>
+<span class="boolean-field" ng-if="vm.field.type === 'boolean'">
+        <a
+           class="btn btn-success"
+           ng-show="vm.ngModel"
+           ng-click="vm.ngModel = false">
+          <i class="fa fa-check"></i>
+        </a>
+        <a
+           class="btn btn-danger"
+           ng-show="!vm.ngModel"
+           ng-click="vm.ngModel = true">
+          <i class="fa fa-remove"></i>
+        </a>
+      </span>
+<div
+        class="panel panel-default object-field"
+        ng-if="vm.field.type == 'object' && (!vm.isEmptyObject(vm.ngModel) || !vm.isEmptyObject(vm.field.properties))"
+>
+    <div class="panel-heading">{{vm.field.label}}</div>
+    <div class="panel-body">
+        <div ng-if="!vm.field.properties" ng-repeat="(k, v) in vm.ngModel">
+            <xos-field
+                    name="k"
+                    field="{label: vm.formatLabel(k), type: vm.getType(v)}"
+                    ng-model="v">
+            </xos-field>
+        </div>
+        <div ng-if="vm.field.properties" ng-repeat="(k, v) in vm.field.properties">
+            <xos-field
+                    name="k"
+                    field="{
+                label: v.label || vm.formatLabel(k),
+                type: v.type,
+                validators: v.validators
+              }"
+                    ng-model="vm.ngModel[k]">
+            </xos-field>
+        </div>
+    </div>
+</div>
+<div
+        class="panel panel-default array-field"
+        ng-if="vm.field.type == 'array'">
+    <div class="panel-heading">{{vm.field.label}}</div>
+    <div class="panel-body selected">
+        <ul class="draggable" dnd-list="vm.ngModel">
+            <li
+                    class="array-element"
+                    ng-repeat="item in vm.ngModel"
+                    dnd-draggable="item"
+                    dnd-moved="vm.ngModel.splice($index, 1)"
+                    dnd-effect-allowed="move"
+                    dnd-selected="models.selected = item"
+            >
+                <div class="well well-sm text-center">
+                    {{item}}
+                </div>
+            </li>
+            <div class="clearfix"></div>
+        </ul>
+    </div>
+    <div class="panel-body unselected">
+        <ul class="draggable" dnd-list="vm.field.availableOptions">
+            <li
+                    class="array-element"
+                    ng-repeat="item in vm.field.availableOptions"
+                    dnd-draggable="item"
+                    dnd-moved="vm.field.availableOptions.splice($index, 1)"
+                    dnd-effect-allowed="move"
+                    dnd-selected="models.selected = item"
+            >
+                <div class="well well-sm text-center">
+                    {{item}}
+                </div>
+            </li>
+            <div class="clearfix"></div>
+        </ul>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/core/field/field.ts b/src/app/core/field/field.ts
new file mode 100644
index 0000000..ad36473
--- /dev/null
+++ b/src/app/core/field/field.ts
@@ -0,0 +1,59 @@
+import {IXosConfigHelpersService} from '../services/helpers/config.helpers';
+import {IXosFormHelpersService} from '../form/form-helpers';
+import * as _ from 'lodash';
+
+class FieldCtrl {
+  static $inject = ['$attrs', '$scope', 'ConfigHelpers', 'XosFormHelpers'];
+  // $inject = ['$onInit'];
+
+  public field: any;
+  public name: string;
+  public ngModel: any;
+  public getType = this.XosFormHelpers._getFieldFormat;
+  public formatLabel = this.ConfigHelpers.toLabel;
+
+  constructor(
+    private $attrs: ng.IAttributes,
+    private $scope: ng.IScope,
+    private ConfigHelpers: IXosConfigHelpersService,
+    private XosFormHelpers: IXosFormHelpersService
+  ) {
+
+  }
+
+  public isEmptyObject = (o: any) => o ? Object.keys(o).length === 0 : true;
+
+  $onInit() {
+    if (!this.name) {
+      throw new Error('[xosField] Please provide a field name');
+    }
+    if (!this.field) {
+      throw new Error('[xosField] Please provide a field definition');
+    }
+    if (!this.field.type) {
+      throw new Error('[xosField] Please provide a type in the field definition');
+    }
+    if (!this.$attrs['ngModel']) {
+      throw new Error('[xosField] Please provide an ng-model');
+    }
+
+
+    if (this.field.type === 'array') {
+      this.$scope.$watch(() => this.ngModel.length, () => {
+        this.field.availableOptions = _.difference(this.field.options, this.ngModel);
+      });
+    }
+
+  }
+}
+
+export const xosField: angular.IComponentOptions = {
+  template: require('./field.html'),
+  controllerAs: 'vm',
+  controller: FieldCtrl,
+  bindings: {
+    ngModel: '=',
+    name: '=',
+    field: '='
+  }
+};
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: '='
+  }
+};
diff --git a/src/app/core/index.ts b/src/app/core/index.ts
index 2a9603c..a89edf5 100644
--- a/src/app/core/index.ts
+++ b/src/app/core/index.ts
@@ -8,6 +8,10 @@
 import {NavigationService} from './services/navigation';
 import {PageTitle} from './services/page-title';
 import {ConfigHelpers} from './services/helpers/config.helpers';
+import {xosLinkWrapper} from './link-wrapper/link-wrapper';
+import {XosFormHelpers} from './form/form-helpers';
+import {xosForm} from './form/form';
+import {xosField} from './field/field';
 
 export const xosCore = 'xosCore';
 
@@ -17,9 +21,13 @@
   .provider('RuntimeStates', RuntimeStates)
   .service('NavigationService', NavigationService)
   .service('PageTitle', PageTitle)
+  .service('XosFormHelpers', XosFormHelpers)
   .service('ConfigHelpers', ConfigHelpers)
+  .directive('xosLinkWrapper', xosLinkWrapper)
   .component('xosHeader', xosHeader)
   .component('xosFooter', xosFooter)
   .component('xosNav', xosNav)
   .component('xosLogin', xosLogin)
-  .component('xosTable', xosTable);
+  .component('xosTable', xosTable)
+  .component('xosForm', xosForm)
+  .component('xosField', xosField);
diff --git a/src/app/core/link-wrapper/link-wrapper.ts b/src/app/core/link-wrapper/link-wrapper.ts
new file mode 100644
index 0000000..add8d48
--- /dev/null
+++ b/src/app/core/link-wrapper/link-wrapper.ts
@@ -0,0 +1,13 @@
+import IDirective = angular.IDirective;
+export function xosLinkWrapper(): IDirective {
+  return {
+    template: `
+    <a ng-if="col.link" href="{{col.link(item)}}">
+      <div ng-transclude></div>
+    </a>
+    <div ng-transclude ng-if="!col.link"></div>
+    `,
+    restrict: 'A',
+    transclude: true
+  };
+};
diff --git a/src/app/core/nav/nav.html b/src/app/core/nav/nav.html
index a1292b8..8420839 100644
--- a/src/app/core/nav/nav.html
+++ b/src/app/core/nav/nav.html
@@ -13,7 +13,7 @@
         {{route.label}}
       </a>
       <ul class="child-routes" ng-if="route.children" ng-class="{opened: route.opened}">
-        <li ng-repeat="childRoute in route.children" ui-sref-active="active">
+        <li ng-repeat="childRoute in route.children | orderBy:'label'" ui-sref-active="active">
           <a ng-if="childRoute.state" ui-sref="{{childRoute.state}}">{{childRoute.label}}</a>
           <a ng-if="childRoute.url" href="#/{{childRoute.url}}">{{childRoute.label}}</a>
         </li>
diff --git a/src/app/core/nav/nav.ts b/src/app/core/nav/nav.ts
index cd249b9..6c6537e 100644
--- a/src/app/core/nav/nav.ts
+++ b/src/app/core/nav/nav.ts
@@ -14,7 +14,7 @@
     // - Base routes (defined from configuration based on BRAND)
     // - Autogenerated routes (nested somewhere)
     // - Service Routes (dynamically added)
-
+    this.routes = [];
     this.$scope.$watch(() => this.navigationService.query(), (routes) => {
       this.routes = routes;
     });
diff --git a/src/app/core/services/helpers/config.helpers.ts b/src/app/core/services/helpers/config.helpers.ts
index 3e0af96..9d0c191 100644
--- a/src/app/core/services/helpers/config.helpers.ts
+++ b/src/app/core/services/helpers/config.helpers.ts
@@ -8,7 +8,8 @@
 }
 
 export interface IXosConfigHelpersService {
-  modeldefToTableCfg(fields: IXosModelDefsField[]): any[]; // TODO use a proper interface
+  excluded_fields: string[];
+  modeldefToTableCfg(fields: IXosModelDefsField[], baseUrl: string): any[]; // TODO use a proper interface
   pluralize(string: string, quantity?: number, count?: boolean): string;
   toLabel(string: string, pluralize?: boolean): string;
   toLabels(string: string[], pluralize?: boolean): string[];
@@ -16,6 +17,22 @@
 
 export class ConfigHelpers {
 
+  excluded_fields = [
+    'created',
+    'updated',
+    'enacted',
+    'policed',
+    'backend_register',
+    'deleted',
+    'write_protect',
+    'lazy_blocked',
+    'no_sync',
+    'no_policy',
+    'omf_friendly',
+    'enabled',
+    'validators'
+  ];
+
   constructor() {
     pluralize.addIrregularRule('xos', 'xosses');
     pluralize.addPluralRule(/slice$/i, 'slices');
@@ -46,23 +63,10 @@
     return this.capitalizeFirst(string);
   }
 
-  modeldefToTableCfg(fields: IXosModelDefsField[]): IXosTableColumn[] {
-    const excluded_fields = [
-      'created',
-      'updated',
-      'enacted',
-      'policed',
-      'backend_register',
-      'deleted',
-      'write_protect',
-      'lazy_blocked',
-      'no_sync',
-      'no_policy',
-      'omf_friendly',
-      'enabled'
-    ];
+  modeldefToTableCfg(fields: IXosModelDefsField[], baseUrl: string): IXosTableColumn[] {
+
     const cfg =  _.map(fields, (f) => {
-      if (excluded_fields.indexOf(f.name) > -1) {
+      if (this.excluded_fields.indexOf(f.name) > -1) {
         return;
       }
       const col: IXosTableColumn =  {
@@ -70,6 +74,11 @@
         prop: f.name
       };
 
+      if (f.name === 'id') {
+        // NOTE can we find a better method to generalize?
+        col.link = item => `#/core${baseUrl.replace(':id?', item.id)}`;
+      }
+
       if (f.name === 'backend_status') {
         col.type = 'icon';
         col.formatter = (item) => {
diff --git a/src/app/core/services/page-title.spec.ts b/src/app/core/services/page-title.spec.ts
index 4ff2be6..0959e57 100644
--- a/src/app/core/services/page-title.spec.ts
+++ b/src/app/core/services/page-title.spec.ts
@@ -28,4 +28,9 @@
     service.set('sample');
     expect($window.document.title).toEqual(`${StyleConfig.projectName} - sample`);
   });
+
+  it('should convert dots to >', () => {
+    service.set('core.sample.bread.crumb');
+    expect($window.document.title).toEqual(`${StyleConfig.projectName} - core > sample > bread > crumb`);
+  });
 });
diff --git a/src/app/core/services/page-title.ts b/src/app/core/services/page-title.ts
index fb1e5a7..865149d 100644
--- a/src/app/core/services/page-title.ts
+++ b/src/app/core/services/page-title.ts
@@ -12,7 +12,7 @@
     private $transitions: any // missing definition
   ) {
     this.$transitions.onSuccess({ to: '**' }, (transtion) => {
-      this.set(this.formatStateName(transtion.$to().name));
+      this.set(transtion.$to().name);
     });
   }
 
@@ -21,12 +21,12 @@
   }
 
   set(title: string) {
-    this.$window.document.title = `${StyleConfig.projectName} - ${title}`;
+    this.$window.document.title = `${StyleConfig.projectName} - ${this.formatStateName(title)}`;
   }
 
   private formatStateName(stateName: string): string {
     // TODO pluralize and capitalize first letter only
-    return stateName.replace('xos.', '').toUpperCase();
+    return stateName.replace('xos.', '').split('.').join(' > ');
   }
 }
 
diff --git a/src/app/core/table/table.html b/src/app/core/table/table.html
index f425c0b..23b5a2f 100644
--- a/src/app/core/table/table.html
+++ b/src/app/core/table/table.html
@@ -26,29 +26,29 @@
         </tr>
         </thead>
         <tbody ng-if="vm.config.filter == 'field'">
-        <tr>
-            <td ng-repeat="col in vm.columns">
-                <input
-                        ng-if="col.type !== 'boolean' && col.type !== 'array' && col.type !== 'object' && col.type !== 'custom'"
-                        class="form-control"
-                        placeholder="Type to search by {{col.label}}"
-                        type="text"
-                        ng-model="vm.query[col.prop]"/>
-                <select
-                        ng-if="col.type === 'boolean'"
-                        class="form-control"
-                        ng-model="vm.query[col.prop]">
-                    <option value="">-</option>
-                    <option value="true">True</option>
-                    <option value="false">False</option>
-                </select>
-            </td>
-            <td ng-if="vm.config.actions"></td>
-        </tr>
+            <tr>
+                <td ng-repeat="col in vm.columns">
+                    <input
+                            ng-if="col.type !== 'boolean' && col.type !== 'array' && col.type !== 'object' && col.type !== 'custom'"
+                            class="form-control"
+                            placeholder="Type to search by {{col.label}}"
+                            type="text"
+                            ng-model="vm.query[col.prop]"/>
+                    <select
+                            ng-if="col.type === 'boolean'"
+                            class="form-control"
+                            ng-model="vm.query[col.prop]">
+                        <option value="">-</option>
+                        <option value="true">True</option>
+                        <option value="false">False</option>
+                    </select>
+                </td>
+                <td ng-if="vm.config.actions"></td>
+            </tr>
         </tbody>
         <tbody>
         <tr ng-repeat="item in vm.data | filter:vm.query | orderBy:vm.orderBy:vm.reverse track by $index">
-            <td ng-repeat="col in vm.columns">
+            <td ng-repeat="col in vm.columns" xos-link-wrapper>
                 <span ng-if="!col.type || col.type === 'text'">{{item[col.prop]}}</span>
                 <span ng-if="col.type === 'boolean'">
                     <i class="fa"
diff --git a/src/app/datasources/stores/model.store.ts b/src/app/datasources/stores/model.store.ts
index e33d7cd..fa3ab06 100644
--- a/src/app/datasources/stores/model.store.ts
+++ b/src/app/datasources/stores/model.store.ts
@@ -33,7 +33,8 @@
   }
 
   private loadInitialData(model: string) {
-    const endpoint = `/core/${model.toLowerCase()}s`; // NOTE check is pluralize is better
+    // NOTE check what is the correct pattern to pluralize this
+    const endpoint = `/core/${model.toLowerCase()}s`;
     this.ModelRest.getResource(endpoint).query().$promise
       .then(
         res => {
diff --git a/src/app/views/crud/crud.html b/src/app/views/crud/crud.html
index fbbec88..9057f6f 100644
--- a/src/app/views/crud/crud.html
+++ b/src/app/views/crud/crud.html
@@ -1,2 +1,26 @@
-<h1>{{vm.title}}</h1>
-<xos-table config="vm.tableCfg" data="vm.tableData"></xos-table>
\ No newline at end of file
+<div class="row">
+    <div class="col-xs-8">
+        <h1>{{vm.title}}</h1>
+    </div>
+    <div class="col-xs-4">
+        <a class="btn btn-default" ng-if="!vm.list" href="{{vm.baseUrl}}">Back</a>
+    </div>
+</div>
+<div ng-if="vm.list">
+    <div class="row" ng-show="vm.related.length > 0">
+        <div class="col-xs-4">
+            <h4>Related Items: </h4>
+        </div>
+        <div class="col-xs-8 text-right">
+            <a ng-repeat="r in vm.related" href="#/core/{{r.toLowerCase()}}s/" class="btn btn-default">
+                {{r}}
+            </a>
+        </div>
+    </div>
+    <xos-table config="vm.tableCfg" data="vm.tableData"></xos-table>
+</div>
+
+<div ng-if="!vm.list">
+    <!--<pre>{{vm.model | json}}</pre>-->
+    <xos-form ng-model="vm.model" config="vm.formCfg"></xos-form>
+</div>
\ No newline at end of file
diff --git a/src/app/views/crud/crud.ts b/src/app/views/crud/crud.ts
index d1e4d0e..d19a942 100644
--- a/src/app/views/crud/crud.ts
+++ b/src/app/views/crud/crud.ts
@@ -1,22 +1,31 @@
 import {IXosTableCfg} from '../../core/table/table';
 import {IModelStoreService} from '../../datasources/stores/model.store';
 import {IXosConfigHelpersService} from '../../core/services/helpers/config.helpers';
+import * as _ from 'lodash';
 export interface IXosCrudData {
   model: string;
+  related: string[];
   xosTableCfg: IXosTableCfg;
 }
 
 class CrudController {
-  static $inject = ['$state', '$scope', 'ModelStore', 'ConfigHelpers'];
+  static $inject = ['$scope', '$state', '$stateParams', 'ModelStore', 'ConfigHelpers'];
 
   public data: IXosCrudData;
   public tableCfg: IXosTableCfg;
+  public formCfg: any;
+  public stateName: string;
+  public baseUrl: string;
+  public list: boolean;
   public title: string;
   public tableData: any[];
+  public model: any;
+  public related: string[];
 
   constructor(
-    private $state: angular.ui.IStateService,
     private $scope: angular.IScope,
+    private $state: angular.ui.IStateService,
+    private $stateParams: ng.ui.IStateParamsService,
     private store: IModelStoreService,
     private ConfigHelpers: IXosConfigHelpersService
   ) {
@@ -24,6 +33,26 @@
     this.tableCfg = this.data.xosTableCfg;
     this.title = this.ConfigHelpers.pluralize(this.data.model);
 
+    this.list = true;
+    this.stateName = $state.current.name;
+    this.baseUrl = '#/core' + $state.current.url.toString().replace(':id?', '');
+
+    this.related = $state.current.data.related;
+
+    this.formCfg = {
+      formName: 'sampleForm',
+      actions: [
+        {
+          label: 'Save',
+          icon: 'ok', // refers to bootstraps glyphicon
+          cb: (item) => { // receive the model
+            console.log(item);
+          },
+          class: 'success'
+        }
+      ]
+    };
+
     this.store.query(this.data.model)
       .subscribe(
         (event) => {
@@ -31,9 +60,19 @@
           $scope.$evalAsync(() => {
             this.title = this.ConfigHelpers.pluralize(this.data.model, event.length);
             this.tableData = event;
+
+            // if it is a detail page
+            if ($stateParams['id']) {
+              this.model = _.find(this.tableData, {id: parseInt($stateParams['id'], 10)});
+            }
           });
         }
       );
+
+    // if it is a detail page
+    if ($stateParams['id']) {
+      this.list = false;
+    }
   }
 }
 
diff --git a/src/index.html b/src/index.html
index 4cfc84e..2bdaa6a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,6 +8,8 @@
     <meta name="viewport" content="width=device-width">
     <link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>
 
   <body ng-app="app">
diff --git a/src/index.scss b/src/index.scss
index 84c8ea2..f5f05dd 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -67,4 +67,8 @@
 
 h1 {
   color: #fff;
+}
+
+.panel {
+  color: #4d4d4d;
 }
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index d27ac96..f6da7d6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -55,17 +55,22 @@
       .then((models: IModeldef[]) => {
         // TODO move in a separate service and test
         _.forEach(models, (m: IModeldef) => {
-          const stateUrl = `/${ConfigHelpers.pluralize(m.name.toLowerCase())}`;
+          const stateUrl = `/${ConfigHelpers.pluralize(m.name.toLowerCase())}/:id?`;
           const stateName = `xos.core.${ConfigHelpers.pluralize(m.name.toLowerCase())}`;
           const state: IXosState = {
             parent: 'core',
             url: stateUrl,
             component: 'xosCrud',
+            params: {
+              id: null
+            },
             data: {
               model: m.name,
+              related: m.relations,
               xosTableCfg: {
-                columns: ConfigHelpers.modeldefToTableCfg(m.fields)
-              }
+                columns: ConfigHelpers.modeldefToTableCfg(m.fields, stateUrl)
+              },
+              // TODO add form config
             }
           };
 
@@ -80,7 +85,7 @@
         // after setting up dynamic routes, redirect to previous state
         $location.path(lastRoute);
         // $state.get().forEach(s => {
-        //   console.log($state.href(s.name));
+        //   console.log(s.name, $state.href(s.name), s);
         // });
       });
   });
diff --git a/src/routes.ts b/src/routes.ts
index 1dd1b43..e972d22 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -27,7 +27,7 @@
       template: '<div ui-view=></div>'
     })
     .state('test', {
-      url: '/test',
+      url: '/test/:id?',
       parent: 'xos.core',
       template: '<h1>Child</h1>'
     });