diff --git a/app/components/forms/wizard/attendee-step.js b/app/components/forms/wizard/attendee-step.js
index 51d55d6b016..0e85f4eb5df 100644
--- a/app/components/forms/wizard/attendee-step.js
+++ b/app/components/forms/wizard/attendee-step.js
@@ -4,14 +4,18 @@ import FormMixin from 'open-event-frontend/mixins/form';
 
 export default Component.extend(FormMixin, {
 
-  fixedFields: computed('data.customForms', function() {
+  fixedFields: computed('data.customForms.@each', function() {
     return this.data.customForms?.filter(field => field.isFixed);
   }),
 
-  editableFields: computed('data.customForms', function() {
+  editableFields: computed('data.customForms.@each', function() {
     return this.data.customForms?.filter(field => !field.isFixed);
   }),
 
+  showEditColumn: computed('editableFields.@each', function() {
+    return this.editableFields?.some(field => field.isComplex);
+  }),
+
   actions: {
     saveDraft() {
       this.onValid(() => {
diff --git a/app/components/forms/wizard/custom-form-input.hbs b/app/components/forms/wizard/custom-form-input.hbs
index 603e9f8d30a..20df2078ad4 100644
--- a/app/components/forms/wizard/custom-form-input.hbs
+++ b/app/components/forms/wizard/custom-form-input.hbs
@@ -5,11 +5,11 @@
     {{t 'Add Custom Form Field'}}
   </div>
 </h3>
-<div class="ui action input" style="width: inherit;">
-  <Input type="text" placeholder="Field Name" @value={{@newFormField.name}} />
-  <UiDropdown class="ui selection dropdown" @selected={{@newFormField.type}} @onChange={{action (mut @newFormField.type)}}>
+<div {{did-update this.updated @field}} class="ui action input" style="width: inherit;">
+  <Input type="text" placeholder="Field Name" @value={{this.name}} />
+  <UiDropdown class="ui selection dropdown" @selected={{this.type}} @onChange={{action (mut this.type)}}>
     <div class="default text">
-      {{ @newFormField.type}}
+      {{ this.type }}
     </div>
     <i class="dropdown icon"></i>
     <div class="menu">
@@ -17,5 +17,5 @@
       <div class="item" data-value="number">Number</div>
     </div>
   </UiDropdown>
-  <button class="ui button" {{action 'addFormField'}} disabled={{not this.validIdentifier}}>Add</button>
+  <button class="ui button" {{action 'addFormField'}} disabled={{not this.validIdentifier}}>{{t (if @field 'Save' 'Add')}}</button>
 </div>
\ No newline at end of file
diff --git a/app/components/forms/wizard/custom-form-input.ts b/app/components/forms/wizard/custom-form-input.ts
index 2fc38258f12..8c9be19a37f 100644
--- a/app/components/forms/wizard/custom-form-input.ts
+++ b/app/components/forms/wizard/custom-form-input.ts
@@ -1,10 +1,11 @@
 import Component from '@glimmer/component';
 import { slugify } from 'open-event-frontend/utils/text';
-import { action, computed, set } from '@ember/object';
+import { action, computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import DS from 'ember-data';
+import { tracked } from '@glimmer/tracking';
 
-interface CustomForm { fieldIdentifier: string }
+interface CustomForm { fieldIdentifier: string, name: string, type: string }
 
 function getIdentifier(name: string, fields: CustomForm[]): string {
   const fieldIdentifiers = new Set(fields.map(field => field.fieldIdentifier));
@@ -17,43 +18,72 @@ function getIdentifier(name: string, fields: CustomForm[]): string {
 }
 
 interface Args {
-  newFormField: {
-    name: string,
-    type: string
-  },
+  field: CustomForm | null,
   customForms: CustomForm[],
   form: string,
-  event: any
+  event: any,
+  onSave: (() => void) | null
 }
 
 export default class CustomFormInput extends Component<Args> {
 
+  @tracked
+  name = '';
+
+  @tracked
+  type = 'text';
+
   @service
   store!: DS.Store;
 
+  @action
+  updated(): void {
+    if (this.args.field) {
+      this.name = this.args.field.name;
+      this.type = this.args.field.type;
+    } else {
+      this.name = '';
+    }
+  }
+
+  @computed('name')
   get identifier(): string {
-    return getIdentifier(this.args.newFormField.name, this.args.customForms);
+    return getIdentifier(this.name, this.args.customForms);
   }
 
-  @computed('args.newFormField.name')
+  @computed('name')
   get validIdentifier(): boolean {
-    return this.identifier.trim().length > 0 && this.args.newFormField.name.trim().length > 0;
+    return this.identifier.trim().length > 0 && this.name.trim().length > 0;
   }
 
-  @action
-  addFormField(): void {
-    if (!this.validIdentifier) {
-      return;
-    }
-    this.args.customForms.pushObject(this.store.createRecord('custom-form', {
+  @computed('name', 'type')
+  get field(): CustomForm {
+    return this.store.createRecord('custom-form', {
       fieldIdentifier : this.identifier,
-      name            : this.args.newFormField.name,
+      name            : this.name,
       form            : this.args.form,
-      type            : this.args.newFormField.type,
+      type            : this.type,
       isRequired      : false,
       isIncluded      : false,
+      isComplex       : true,
       event           : this.args.event
-    }));
-    set(this.args.newFormField, 'name', '');
+    });
+  }
+
+  @action
+  addFormField(): void {
+    if (!this.validIdentifier) {
+      return;
+    }
+    if (this.args.field) {
+      this.args.field.name = this.name;
+      this.args.field.type = this.type;
+      this.args.field.fieldIdentifier = this.identifier;
+    } else {
+      this.args.customForms.pushObject(this.field);
+    }
+    this.name = '';
+
+    this.args.onSave && this.args.onSave();
   }
 }
diff --git a/app/templates/components/forms/wizard/custom-forms/table.hbs b/app/components/forms/wizard/custom-forms/table.hbs
similarity index 58%
rename from app/templates/components/forms/wizard/custom-forms/table.hbs
rename to app/components/forms/wizard/custom-forms/table.hbs
index 8e11771f821..087085a1f3d 100644
--- a/app/templates/components/forms/wizard/custom-forms/table.hbs
+++ b/app/components/forms/wizard/custom-forms/table.hbs
@@ -1,5 +1,12 @@
 <table class="ui selectable celled table">
   <thead>
+    {{#if @headerText}}
+      <tr>
+        <th colspan="{{if this.editColumn '5' '4'}}" class="text center aligned">
+          {{t @headerText}}
+        </th>
+      </tr>
+    {{/if}}
     <tr>
       {{#if this.device.isMobile}}
         <th class="center aligned">
@@ -18,6 +25,11 @@
         <th class="center aligned">
           {{t 'Require'}}
         </th>
+        {{#if this.editColumn}}
+          <th class="center aligned">
+            {{t 'Actions'}}
+          </th>
+        {{/if}}
       {{/if}}
     </tr>
   </thead>
@@ -27,6 +39,11 @@
         <td class="{{if this.device.isMobile 'center' 'right'}} aligned">
           <label class="{{if field.isFixed 'required'}}">
             {{field.name}}
+            {{#if field.isComplex}}
+              <div class="ui icon d-inline" data-tooltip="Custom Field">
+                <i class="info icon"></i>
+              </div>
+            {{/if}}
           </label>
         </td>
         <td class="center aligned">
@@ -48,6 +65,19 @@
             @onChange={{action (mut field.isRequired)}}
             @label={{if this.device.isMobile (t "Require")}} />
         </td>
+        {{#if this.editColumn}}
+          <td class="center aligned">
+            {{#if field.isComplex}}
+              <button class="ui compact icon positive circular button" data-tooltip="{{t 'Edit'}}" {{action  @updateField field}}>
+                <i class="pencil icon"></i>
+              </button>
+              {{!-- Hiding till implemented --}}
+              <button class="ui compact icon negative circular button hidden-item" data-tooltip="{{t 'Delete'}}">
+                <i class="trash icon"></i>
+              </button>
+            {{/if}}
+          </td>
+        {{/if}}
       </tr>
     {{/each}}
   </tbody>
diff --git a/app/components/forms/wizard/custom-forms/table.ts b/app/components/forms/wizard/custom-forms/table.ts
new file mode 100644
index 00000000000..90119ab5bad
--- /dev/null
+++ b/app/components/forms/wizard/custom-forms/table.ts
@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+
+
+interface CustomForm { isComplex: boolean }
+
+interface Args {
+  fields: CustomForm[],
+  updateField: (field: CustomForm) => void
+}
+
+export default class CustomFormTable extends Component<Args> {
+  get editColumn(): boolean {
+    return this.args.fields?.some(field => field.isComplex);
+  }
+}
diff --git a/app/routes/events/view/edit/attendee.js b/app/routes/events/view/edit/attendee.js
index 8e35d6d6a4b..9cfbf642221 100644
--- a/app/routes/events/view/edit/attendee.js
+++ b/app/routes/events/view/edit/attendee.js
@@ -22,11 +22,7 @@ export default class AttendeeRoute extends Route.extend(CustomFormMixin) {
         filter       : filterOptions,
         sort         : 'id',
         'page[size]' : 50
-      })).toArray().filter(field => field.form === 'attendee'),
-      newFormField: {
-        name : '',
-        type : 'text'
-      }
+      })).toArray().filter(field => field.form === 'attendee')
     };
 
     return data;
diff --git a/app/routes/events/view/edit/sessions-speakers.js b/app/routes/events/view/edit/sessions-speakers.js
index f6bfdb42ed5..e0ac7101335 100644
--- a/app/routes/events/view/edit/sessions-speakers.js
+++ b/app/routes/events/view/edit/sessions-speakers.js
@@ -43,15 +43,7 @@ export default class SessionsSpeakersRoute extends Route.extend(EventWizardMixin
       microlocations,
       sessionTypes,
       speakersCall,
-      customForms,
-      newSpeakerForm: {
-        name : '',
-        type : 'text'
-      },
-      newSessionForm: {
-        name : '',
-        type : 'text'
-      }
+      customForms
     };
   }
 }
diff --git a/app/styles/libs/_helpers.scss b/app/styles/libs/_helpers.scss
index e8f02368cc4..b4181e234f5 100644
--- a/app/styles/libs/_helpers.scss
+++ b/app/styles/libs/_helpers.scss
@@ -66,3 +66,7 @@ $spacer-heights: 50 100 200 300 400 500 600 700 800 900;
 .d-flex.wrap {
   flex-wrap: wrap;
 }
+
+.d-inline {
+  display: inline;
+}
diff --git a/app/templates/components/forms/wizard/attendee-step.hbs b/app/templates/components/forms/wizard/attendee-step.hbs
index ca44701031c..9a36b63ca3e 100644
--- a/app/templates/components/forms/wizard/attendee-step.hbs
+++ b/app/templates/components/forms/wizard/attendee-step.hbs
@@ -48,14 +48,16 @@
     <div class="ui two column stackable grid">
       <div class="column">
         <Forms::Wizard::CustomForms::Table
-          @fields={{this.editableFields}} />
+          @fields={{this.editableFields}}
+          @updateField={{action (mut this.field)}} />
       </div>
     </div>
     <Forms::Wizard::CustomFormInput
-      @newFormField={{this.data.newFormField}}
       @customForms={{this.data.customForms}}
       @event={{this.data.event}}
-      @form="attendee" />
+      @form="attendee"
+      @field={{this.field}}
+      @onSave={{action (mut this.field) null}} />
   {{/if}}
   <div class="spacer-50"></div>
   <div class="{{if this.device.isMobile 'mini four' 'right floated large'}} ui fields buttons">
diff --git a/app/templates/components/forms/wizard/sessions-speakers-step.hbs b/app/templates/components/forms/wizard/sessions-speakers-step.hbs
index 4c15cd4314b..48ffef22c72 100644
--- a/app/templates/components/forms/wizard/sessions-speakers-step.hbs
+++ b/app/templates/components/forms/wizard/sessions-speakers-step.hbs
@@ -61,11 +61,11 @@
       {{#each this.microlocations as |microlocation|}}
         <div class="{{if this.device.isMobile 'grouped'}} fields">
           <div class="{{unless this.device.isMobile 'three wide'}} field">
-            <Input @type="text" @id="microlocation" @value={{microlocation.name}} placeholder="Name" />
+            <Input @type="text" @value={{microlocation.name}} placeholder="Name" />
           </div>
           <div class="{{unless this.device.isMobile 'four wide'}} field">
             <div class="ui action input fluid">
-              <Input @type="number" @id="microlocation_floor" @value={{microlocation.floor}} placeholder="Floor" />
+              <Input @type="number" @value={{microlocation.floor}} placeholder="Floor" />
               {{#if (gt this.microlocations.length 1)}}
                 <button class="ui icon red button" type="button" {{action 'removeItem' microlocation}}>
                   <i class="minus icon"></i>
@@ -183,119 +183,31 @@
 
     <div class="ui two column stackable grid">
       <div class="column">
-        <table class="ui selectable celled table">
-          <thead>
-            <tr>
-              <th colspan="4" class="text center aligned">
-                {{t 'Collect Speaker Details'}}
-              </th>
-            </tr>
-            <tr>
-              {{#if this.device.isMobile}}
-                <th class="center aligned">
-                  {{t 'Options'}}
-                </th>
-              {{else}}
-                <th class="right aligned">
-                  {{t 'Option'}}
-                </th>
-                <th class="center aligned">
-                  {{t 'Type'}}
-                </th>
-                <th class="center aligned">
-                  {{t 'Include'}}
-                </th>
-                <th class="center aligned">
-                  {{t 'Require'}}
-                </th>
-              {{/if}}
-            </tr>
-          </thead>
-          <tbody>
-            {{#each this.customForm.speaker as |field|}}
-              <tr class="{{if field.isIncluded 'positive'}}">
-                <td class="{{if this.device.isMobile 'center' 'right'}} aligned">
-                  <label class="{{if field.isFixed 'required'}}">
-                    {{field.name}}
-                  </label>
-                </td>
-                <td class="center aligned">
-                  {{field.type}}
-                </td>
-                <td class="center aligned">
-                  <UiCheckbox @class="slider" @checked={{field.isIncluded}} @disabled={{field.isFixed}} @onChange={{action (mut field.isIncluded)}} @label={{if this.device.isMobile (t "Include")}} />
-                </td>
-                <td class="center aligned">
-                  <UiCheckbox @class="slider" @checked={{field.isRequired}} @disabled={{field.isFixed}} @onChange={{action (mut field.isRequired)}} @label={{if this.device.isMobile (t "Require")}} />
-                </td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
+        <Forms::Wizard::CustomForms::Table
+          @headerText="Collect Speaker Details"
+          @fields={{this.customForm.speaker}}
+          @updateField={{action (mut this.speakerField)}} />
 
         <Forms::Wizard::CustomFormInput
-          @newFormField={{this.data.newSpeakerForm}}
           @customForms={{this.data.customForms}}
           @event={{this.data.event}}
-          @form="speaker" />
+          @form="speaker"
+          @field={{this.speakerField}}
+          @onSave={{action (mut this.speakerField) null}} />
 
       </div>
       <div class="column">
-        <table class="ui selectable celled table">
-          <thead>
-            <tr>
-              <th colspan="4" class="text center aligned">
-                {{t 'Collect Session Details'}}
-              </th>
-            </tr>
-            <tr>
-              {{#if this.device.isMobile}}
-                <th class="center aligned">
-                  {{t 'Options'}}
-                </th>
-              {{else}}
-                <th class="right aligned">
-                  {{t 'Option'}}
-                </th>
-                <th class="center aligned">
-                  {{t 'Type'}}
-                </th>
-                <th class="center aligned">
-                  {{t 'Include'}}
-                </th>
-                <th class="center aligned">
-                  {{t 'Require'}}
-                </th>
-              {{/if}}
-            </tr>
-          </thead>
-          <tbody>
-            {{#each this.customForm.session as |field|}}
-              <tr class="{{if field.isIncluded 'positive'}}">
-                <td class="{{if this.device.isMobile 'center' 'right'}} aligned">
-                  <label class="{{if field.isFixed 'required'}}">
-                    {{field.name}}
-                  </label>
-                </td>
-                <td class="center aligned">
-                  {{field.type}}
-                </td>
-                <td class="center aligned">
-                  <UiCheckbox @class="slider" @checked={{field.isIncluded}} @disabled={{field.isFixed}} @onChange={{action (mut field.isIncluded)}} @label={{if this.device.isMobile (t "Include")}} />
-                </td>
-                <td class="center aligned">
-                  <UiCheckbox @class="slider" @checked={{field.isRequired}} @disabled={{field.isFixed}} @onChange={{action (mut field.isRequired)}} @label={{if this.device.isMobile (t "Require")}} />
-                </td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
+        <Forms::Wizard::CustomForms::Table
+          @headerText="Collect Session Details"
+          @fields={{this.customForm.session}}
+          @updateField={{action (mut this.sessionField)}} />
 
         <Forms::Wizard::CustomFormInput
-          @newFormField={{this.data.newSessionForm}}
           @customForms={{this.data.customForms}}
           @event={{this.data.event}}
-          @form="session" />
+          @form="session"
+          @field={{this.sessionField}}
+          @onSave={{action (mut this.sessionField) null}} />
       </div>
     </div>
     <div class="spacer-50"></div>
diff --git a/package.json b/package.json
index f64b4e70572..924c3862ffd 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "@babel/plugin-transform-block-scoping": "^7.11.1",
     "@ember/jquery": "^1.1.0",
     "@ember/optional-features": "^2.0.0",
+    "@ember/render-modifiers": "^1.0.2",
     "@glimmer/component": "^1.0.1",
     "@glimmer/tracking": "^1.0.1",
     "@open-event/theme": "^0.2.2",