diff --git a/src/app/views/crud/crud.html b/src/app/views/crud/crud.html
index 7c80b92..f5f1f76 100644
--- a/src/app/views/crud/crud.html
+++ b/src/app/views/crud/crud.html
@@ -5,6 +5,7 @@
                 <div class="view-header">
                     <div class="pull-right text-right" style="line-height: 14px">
                         <!--<small>UI Elements<br>General<br> <span class="c-white">Grid system</span></small>-->
+                        <a class="btn btn-default" ng-if="vm.list" href="{{vm.baseUrl}}add">Add</a>
                         <a class="btn btn-default" ng-if="!vm.list" href="{{vm.baseUrl}}">Back</a>
                     </div>
                     <div class="header-icon">
@@ -20,7 +21,7 @@
                 <hr>
             </div>
         </div>
-        <div class="row" ng-show="vm.related.length > 0">
+        <div class="row" ng-show="vm.related.length > 0 && vm.model.id">
             <div class="view-header">
                 <div class="col-lg-4">
                     <h4>Related Items: </h4>
@@ -47,4 +48,4 @@
             <xos-form ng-model="vm.model" config="vm.formCfg"></xos-form>
         </div>
     </div>
-</section>
\ No newline at end of file
+</section>
diff --git a/src/app/views/crud/crud.ts b/src/app/views/crud/crud.ts
index 1d4eccd..f3cc1fa 100644
--- a/src/app/views/crud/crud.ts
+++ b/src/app/views/crud/crud.ts
@@ -2,14 +2,17 @@
 import {IModelStoreService} from '../../datasources/stores/model.store';
 import {IXosConfigHelpersService} from '../../core/services/helpers/config.helpers';
 import * as _ from 'lodash';
+import {IXosFormConfig} from '../../core/form/form';
+import {IXosResourceService} from '../../datasources/rest/model.rest';
 export interface IXosCrudData {
   model: string;
   related: string[];
   xosTableCfg: IXosTableCfg;
+  xosFormCfg: IXosFormConfig;
 }
 
 class CrudController {
-  static $inject = ['$scope', '$state', '$stateParams', 'ModelStore', 'ConfigHelpers'];
+  static $inject = ['$scope', '$state', '$stateParams', 'ModelStore', 'ConfigHelpers', 'ModelRest'];
 
   public data: IXosCrudData;
   public tableCfg: IXosTableCfg;
@@ -27,7 +30,8 @@
     private $state: angular.ui.IStateService,
     private $stateParams: ng.ui.IStateParamsService,
     private store: IModelStoreService,
-    private ConfigHelpers: IXosConfigHelpersService
+    private ConfigHelpers: IXosConfigHelpersService,
+    private ModelRest: IXosResourceService
   ) {
     this.data = this.$state.current.data;
     this.tableCfg = this.data.xosTableCfg;
@@ -39,19 +43,7 @@
 
     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.formCfg = $state.current.data.xosFormCfg;
 
     this.store.query(this.data.model)
       .subscribe(
@@ -61,8 +53,8 @@
             this.title = this.ConfigHelpers.pluralize(this.data.model, event.length);
             this.tableData = event;
 
-            // if it is a detail page
-            if ($stateParams['id']) {
+            // if it is a detail page for an existing model
+            if ($stateParams['id'] && $stateParams['id'] !== 'add') {
               this.model = _.find(this.tableData, {id: parseInt($stateParams['id'], 10)});
             }
           });
@@ -72,11 +64,19 @@
     // if it is a detail page
     if ($stateParams['id']) {
       this.list = false;
+
+      // if it is the create page
+      if ($stateParams['id'] === 'add') {
+        // generate a resource for an empty model
+        const endpoint = this.ConfigHelpers.urlFromCoreModel(this.data.model);
+        const resource = this.ModelRest.getResource(endpoint);
+        this.model = new resource({});
+      }
     }
   }
 
   public getRelatedItem(relation: string, item: any): number {
-    if (angular.isDefined(item[relation.toLowerCase()])) {
+    if (item && angular.isDefined(item[relation.toLowerCase()])) {
       return item[relation.toLowerCase()];
     }
     return 0;
@@ -88,3 +88,4 @@
   controllerAs: 'vm',
   controller: CrudController
 };
+