diff --git a/views/ngXosLib/xosHelpers/spec/ui/smart-table.test.js b/views/ngXosLib/xosHelpers/spec/ui/smart-table.test.js
index bcc34e1..b145354 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/smart-table.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/smart-table.test.js
@@ -84,6 +84,17 @@
         expect($(element).find('.panel')).not.toHaveClass('ng-hide');
       });
 
+      it('should hide the form', () => {
+        isolatedScope.detailedItem = {
+          some: 'model'
+        };
+        scope.$apply();
+        expect($(element).find('.panel')).not.toHaveClass('ng-hide');
+        console.log($(element).find('.panel .col-xs-1 a'));
+        $(element).find('.panel .col-xs-1 a')[0].click();
+        expect($(element).find('.panel')[0]).toHaveClass('ng-hide');
+      });
+
       it('should save an item', () => {
         const saveMethod = jasmine.createSpy('$save').and.callFake(() => {
           return {then: (cb) => cb(mockData[0])};
@@ -101,6 +112,7 @@
         expect(saveMethod).toHaveBeenCalled();
       });
 
+
       describe('when fetching an empty collection', () => {
         beforeEach(inject(function ($compile, $rootScope, EmptyResource) {
           scope = $rootScope.$new();
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
index 734c54b..d9fa9cc 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
@@ -32,7 +32,16 @@
         <xos-table config="vm.tableConfig" data="vm.data"></xos-table>
         <div class="panel panel-default" ng-show="vm.detailedItem">
           <div class="panel-heading">
-            <h3 class="panel-title">Update {{vm.config.resource}} {{vm.detailedItem.id}}</h3>
+            <div class="row">
+              <div class="col-xs-11">
+                <h3 class="panel-title">Update {{vm.config.resource}} {{vm.detailedItem.id}}</h3>
+              </div>
+              <div class="col-xs-1">
+                <a href="" ng-click="vm.cleanForm()">
+                  <i class="glyphicon glyphicon-remove pull-right"></i>
+                </a>
+              </div>
+            </div>
           </div>
           <div class="panel-body">
             <xos-form config="vm.formConfig" ng-model="vm.detailedItem"></xos-form>
@@ -102,6 +111,10 @@
               class: 'success'
             }
           ]
+        };
+
+        this.cleanForm = () => {
+          delete this.detailedItem;
         }
 
         this.Resource = $injector.get(this.config.resource);
@@ -134,7 +147,7 @@
           });
 
           this.data = res;
-        })
+        });
       }
     };
   });