diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.css b/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.css
index e5edf859d7..29ecfb889c 100644
--- a/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.css
+++ b/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.css
@@ -11,3 +11,17 @@
     cursor: pointer;
     font-weight: bold;
 }
+
+
+.activiti-form-debug-container {
+    padding: 10px;
+}
+
+.activiti-form-debug-container .debug-toggle-text {
+    padding-left: 15px;
+    cursor: pointer;
+}
+
+.activiti-form-debug-container .debug-toggle-text:hover {
+    font-weight: bold;
+}
diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.html b/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.html
index 7cc18d6889..07d7c3babc 100644
--- a/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.html
+++ b/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.html
@@ -35,10 +35,11 @@
                     </div>
                 </div>
                 <div *ngIf="form.hasOutcomes()" class="mdl-card__actions mdl-card--border">
-                    <button class="mdl-button mdl-js-button mdl-js-ripple-effect activiti-form-outcomes__item"
-                            [class.mdl-button--colored]="!action.isSystem"
-                            *ngFor="let action of form.outcomes">
-                        {{action.name}}
+                    <button *ngFor="let outcome of form.outcomes"
+                            alfresco-mdl-button
+                            [class.mdl-button--colored]="!outcome.isSystem"
+                            (click)="onOutcomeClicked(outcome, $event)">
+                        {{outcome.name}}
                     </button>
                 </div>
             </div>
@@ -47,3 +48,22 @@
 
 </div>
 
+<div class="activiti-form-debug-container">
+
+    <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1" [class.is-checked]="debugMode">
+        <input type="checkbox" id="switch-1" class="mdl-switch__input" [(ngModel)]="debugMode">
+        <span class="mdl-switch__label"></span>
+        <span class="debug-toggle-text">Debug mode</span>
+    </label>
+
+    <div *ngIf="debugMode && hasForm()">
+        <h4>Values</h4>
+        <pre>{{form.values | json}}</pre>
+
+        <h4>Form</h4>
+        <pre>{{form.json | json}}</pre>
+
+        <h4>Task</h4>
+        <pre>{{task | json}}</pre>
+    </div>
+</div>
diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.ts b/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.ts
index 48008a0b9d..9cca8cd473 100644
--- a/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.ts
+++ b/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.ts
@@ -20,8 +20,10 @@ import {
     OnInit,
     AfterViewChecked
 } from '@angular/core';
+import { MATERIAL_DESIGN_DIRECTIVES } from 'ng2-alfresco-core';
+
 import { FormService } from './../services/form.service';
-import { FormModel } from './widgets/widget.model';
+import { FormModel, FormOutcomeModel } from './widgets/widget.model';
 
 import { TabsWidget } from './widgets/tabs/tabs.widget';
 import { ContainerWidget } from './widgets/container/container.widget';
@@ -34,10 +36,8 @@ declare var componentHandler;
     selector: 'activiti-form',
     templateUrl: './activiti-form.component.html',
     styleUrls: ['./activiti-form.component.css'],
-    directives: [ContainerWidget, TabsWidget],
-    providers: [
-        FormService
-    ]
+    directives: [MATERIAL_DESIGN_DIRECTIVES, ContainerWidget, TabsWidget],
+    providers: [FormService]
 })
 export class ActivitiForm implements OnInit, AfterViewChecked {
 
@@ -45,6 +45,8 @@ export class ActivitiForm implements OnInit, AfterViewChecked {
     form: FormModel;
     tasks: any[] = [];
 
+    debugMode: boolean = false;
+
     hasForm(): boolean {
         return this.form ? true : false;
     }
@@ -74,4 +76,28 @@ export class ActivitiForm implements OnInit, AfterViewChecked {
             .subscribe(form => this.form = new FormModel(form));
     }
 
+    onOutcomeClicked(outcome: FormOutcomeModel, event?: Event) {
+        if (outcome) {
+            if (outcome.isSystem) {
+                if (outcome.id === '$save') {
+                    return this.saveTaskForm();
+                }
+            }
+            alert(`Outcome clicked: ${outcome.name}`);
+        }
+    }
+
+    private saveTaskForm() {
+        let form = {
+            values: this.form.values
+        };
+        this.formService.saveTaskForm(this.form.taskId, form).subscribe(
+            (response) => {
+                console.log(response);
+                alert('Saved');
+            },
+            (err) => window.alert(err)
+        );
+    }
+
 }
diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/widget.model.ts b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/widget.model.ts
index 14e75f2be7..f718f37eb6 100644
--- a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/widget.model.ts
+++ b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/widget.model.ts
@@ -19,6 +19,10 @@ export interface FormFieldMetadata {
     [key: string]: any;
 }
 
+export interface FormValues {
+    [key: string]: any;
+}
+
 export class FormWidgetModel {
 
     private _form: FormModel;
@@ -40,25 +44,56 @@ export class FormWidgetModel {
 
 export class FormFieldModel extends FormWidgetModel {
 
-    id: string;
-    name: string;
-    type: string;
-    value: any;
-    tab: string;
+    private _id: string;
+    private _name: string;
+    private _type: string;
+    private _value: string;
+    private _tab: string;
+
+    get id(): string {
+        return this._id;
+    }
+
+    get name(): string {
+        return this._name;
+    }
+
+    get type(): string {
+        return this._type;
+    }
+
+    get value(): any {
+        return this._value;
+    }
+
+    set value(v: any) {
+        this._value = v;
+        this.form.values[this._id] = v;
+    }
+
+    get tab(): string {
+        return this._tab;
+    }
+
     colspan: number = 1;
 
+
+
     metadata: FormFieldMetadata = {};
 
     constructor(form: FormModel, json?: any) {
         super(form, json);
 
         if (json) {
-            this.id = json.id;
-            this.name = json.name;
-            this.type = json.type;
-            this.value = json.value;
-            this.tab = json.tab;
+            this._id = json.id;
+            this._name = json.name;
+            this._type = json.type;
+            this._value = json.value;
+            this._tab = json.tab;
             this.colspan = <number> json.colspan;
+
+            // update form values
+            form.values[json.id] = json.value;
         }
     }
 }
@@ -169,10 +204,33 @@ export class FormOutcomeModel extends FormWidgetModel {
 
 export class FormModel {
 
+    private _id: string;
+    private _name: string;
+    private _taskId: string;
+    private _taskName: string;
+
+    get id(): string {
+        return this._id;
+    }
+
+    get name(): string {
+        return this._name;
+    }
+
+    get taskId(): string {
+        return this._taskId;
+    }
+
+    get taskName(): string{
+        return this._taskName;
+    }
+
     tabs: TabModel[] = [];
     fields: ContainerModel[] = [];
     outcomes: FormOutcomeModel[] = [];
 
+    values: FormValues = {};
+
     private _json: any;
 
     get json() {
@@ -194,6 +252,12 @@ export class FormModel {
     constructor(json?: any) {
         if (json) {
             this._json = json;
+
+            this._id = json.id;
+            this._name = json.name;
+            this._taskId = json.taskId;
+            this._taskName = json.taskName;
+
             let tabCache: WidgetModelCache<TabModel> = {};
 
             // this.tabs = (json.tabs || []).map(t => new TabModel(this, t));
diff --git a/ng2-components/ng2-alfresco-activiti-form/src/services/form.service.ts b/ng2-components/ng2-alfresco-activiti-form/src/services/form.service.ts
index 5e08e9e604..ee1bb9377e 100644
--- a/ng2-components/ng2-alfresco-activiti-form/src/services/form.service.ts
+++ b/ng2-components/ng2-alfresco-activiti-form/src/services/form.service.ts
@@ -32,7 +32,8 @@ export class FormService {
         let body = JSON.stringify({});
         let options = this.getRequestOptions();
 
-        return this.http.post(url, body, options)
+        return this.http
+            .post(url, body, options)
             .map(this.toJsonArray)
             .catch(this.handleError);
     }
@@ -41,16 +42,28 @@ export class FormService {
         let url = `${this.basePath}/api/enterprise/tasks/${id}`;
         let options = this.getRequestOptions();
 
-        return this.http.get(url, options)
+        return this.http
+            .get(url, options)
             .map(this.toJson)
             .catch(this.handleError);
     }
 
+    saveTaskForm(id: string, form: { values: { [key: string]: any }}): Observable<Response> {
+        let url = `${this.basePath}/api/enterprise/task-forms/${id}/save-form`;
+        let body = JSON.stringify(form);
+        let options = this.getRequestOptions();
+
+        return this.http
+            .post(url, body, options)
+            .catch(this.handleError);
+    }
+
     getTaskForm(id: string): Observable<any> {
         let url = `${this.basePath}/api/enterprise/task-forms/${id}`;
         let options = this.getRequestOptions();
 
-        return this.http.get(url, options)
+        return this.http
+            .get(url, options)
             .map(this.toJson)
             .catch(this.handleError);
     }