diff --git a/RIGS/static/js/interaction.js b/RIGS/static/js/interaction.js
index 0e0fac88..6b7eff6f 100644
--- a/RIGS/static/js/interaction.js
+++ b/RIGS/static/js/interaction.js
@@ -3,10 +3,20 @@ function setupItemTable(items_json) {
     $.each(objectitems, function(key, val) {
         objectitems[key] = JSON.parse(val);
     })
+    newitem = -1
 }
 
 function updatePrices() {
+    // individual rows
+    $('.item_row').each(function() {
+        var pk = $(this).data('pk');
+        var fields = objectitems[pk].fields;
+        var sub = fields.cost * fields.quantity;
+        $('#item-'+pk+' .sub-total').html(parseFloat(sub).toFixed(2)).data('subtotal', sub);
+    })
+
 	var sum = 0;
+
 	$('.sub-total').each(function() {
 		sum += Number($(this).data('subtotal'));
 	});
@@ -16,18 +26,6 @@ function updatePrices() {
 	$('#total').text(parseFloat(sum+vat).toFixed(2));
 }
 
-function updateItemRow(pk) {
-	$row = $('#item-'+pk)
-	url = $row.data('url');
-	$.ajax({
-		url:url,
-		success:function(r) {
-			$row.replaceWith(r);
-			updatePrices();
-		}
-	})
-}
-
 function addItemRow(url) {
 	$tbody = $('#item-table tbody');
 	$.ajax({
@@ -54,63 +52,65 @@ $.ajaxSetup({
 });
 
 $('#item-table').on('click', '.item-delete', function() {
-	var row = $('#item-'+$(this).data('pk'));
-	$.ajax({
-		type:"POST",
-		url:$(this).data('url'),
-		success:function(r) {
-			row.remove();
-			updatePrices();
-		}
-	});
+	delete objectitems[$(this).data('pk')]
+    $('#item-'+$(this).data('pk')).remove();
+    updatePrices();
 });
 
 $('#item-table').on('click', '.item-add', function() {
-	$.ajax({
-		url:$(this).data('url'),
-		success:function(r) {
-			$('#itemModal .modal-content').html(r);
-			$('#item-table tbody').sortable('refresh');
-		}
-	});
+	$('#item-form').data('pk', newitem--);
+
+    // Set the form values
+    var fields = objectitems[pk].fields;
+    $('#item_name').val('');
+    $('#item_description').val('');
+    $('#item_quantity').val('');
+    $('#item_cost').val('');
 });
 
 $('#item-table').on('click', '.item-edit', function() {
-	var url = $(this).data('url');
-	$('#itemModal').data('pk', $(this).data('pk'));
-	$.ajax({
-		url:url,
-		success:function(r) {
-			$('#itemModal .modal-content').html(r);
-		}
-	})
+    // set the pk as we will need this later
+    var pk = $(this).data('pk');
+	$('#item-form').data('pk', pk);
+
+    // Set the form values
+    var fields = objectitems[pk].fields;
+    $('#item_name').val(fields.name);
+    $('#item_description').val(fields.description);
+    $('#item_quantity').val(fields.quantity);
+    $('#item_cost').val(fields.cost);
 });
 
-$('#itemModal').on('hidden.bs.modal', function() {
-	pk = $(this).data('pk');
-	updateItemRow(pk);
-	$('#itemModal .modal-content').html('');
-})
-
-$('body').on('submit','.item-form', function(e) {
+$('body').on('submit','#item-form', function(e) {
 	e.preventDefault();
-	url = $(this).data('url');
-	data = $(this).serialize();
-	$.ajax({
-		type:'POST',
-		url:url,
-		data:data,
-		success: function(r) {
-			$('#itemModal .modal-content').html(r)
-		}
-	})
-})
+    var pk = $(this).data('pk');
+    $('#itemModal').modal('hide');
 
-function addItem(url) {
-	$.get(url, function(r) {
-		$('#item-table tbody').append(r);
-	});
-}
+    if(pk < 0) {
+        // @todo: Add new item
+    } else {
+        // update data structure
+        var fields = objectitems[pk].fields;
+        fields.name = $('#item_name').val()
+        fields.description = $('#item_description').val();
+        fields.cost = $('#item_cost').val();
+        fields.quantity = $('#item_quantity').val();
+        objectitems[pk].fields = fields;
+
+        // update the table
+        $row = $('#item-'+pk);
+        $row.find('.name').html(fields.name);
+        $row.find('.description').html(fields.description);
+        $row.find('.cost').html(parseFloat(fields.cost).toFixed(2));
+        $row.find('.quantity').html(fields.quantity);
+
+        updatePrices();
+    }
+});
+
+$('body').on('submit', '.itemised_form', function(e) {
+    $('#id_items_json').val(JSON.stringify(objectitems));
+});
 
 // Return a helper with preserved width of cells
 var fixHelper = function(e, ui) {
@@ -127,7 +127,7 @@ $("#item-table tbody").sortable({
 		itemorder = new Array();
 		$.each(info, function(key, value) {
 			pk = $('#'+value).data('pk');
-			itemorder[key] = pk;
+			objectitems[pk].fields.order = key;
 		});
 
 	}
diff --git a/RIGS/templates/RIGS/event_form.html b/RIGS/templates/RIGS/event_form.html
index 532ec8cc..7f532dbb 100644
--- a/RIGS/templates/RIGS/event_form.html
+++ b/RIGS/templates/RIGS/event_form.html
@@ -62,7 +62,7 @@
             {% endif %}
         })
 
-        $(document).ready(function() {
+        $(document).ready(function () {
             setupItemTable($("#{{ form.items_json.id_for_label }}").val());
         });
     </script>
@@ -77,9 +77,10 @@
         {% endif %}
     </h2>
     {% include 'form_errors.html' %}
-    <form class="form-horizontal" role="form" method="POST">{% csrf_token %}
+    <form class="form-horizontal itemised_form" role="form" method="POST">{% csrf_token %}
     {% render_field form.is_rig style="display: none" %}
-    <input type="hidden" name="{{ form.items_json.name }}" id="{{ form.items_json.id_for_label }}" value="{{ form.items_json.value }}" />
+    <input type="hidden" name="{{ form.items_json.name }}" id="{{ form.items_json.id_for_label }}"
+           value="{{ form.items_json.value }}"/>
 
     {# New rig buttons #}
     {% if not object.pk %}
@@ -335,7 +336,67 @@
     <div class="modal fade" id="itemModal" role="dialog" aria-labelledby="itemModal" aria-hidded="true">
         <div class="modal-dialog">
             <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal"><span
+                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                </div>
+                <form class="form-horizontal" id="item-form">
+                    <div class="modal-body">
+                        <div class="form-group">
+                            <label for="item_name" class="col-sm-2 control-label">Item Name</label>
 
+                            <div class="col-sm-10">
+                                <input type="text" placeholder="Item Name" class="form-control" required maxlength="255"
+                                       id="item_name"/>
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="item_description" class="col-sm-2 control-label">Description</label>
+
+                            <div class="col-sm-10">
+                                <textarea type="text" placeholder="Description" class="form-control"
+                                          id="item_description"></textarea>
+                            </div>
+                        </div>
+
+                        <div class="row">
+
+                            <div class="col-sm-6">
+                                <div class="form-group">
+                                    <label for="item_quantity" class="col-sm-4 control-label">Quantity</label>
+
+                                    <div class="col-sm-8">
+                                        <input type="number" placeholder="Quantity" class="form-control" required
+                                               min="1" id="item_quantity"/>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="col-sm-6">
+                                <div class="form-group">
+                                    <label for="item_cost" class="col-sm-4 control-label">Cost</label>
+
+                                    <div class="col-sm-8">
+                                        <div class="input-group">
+                                            <div class="input-group-addon">£</div>
+                                            <input type="number" placeholder="Cost" class="form-control" required
+                                                   min="-99999999.99" max="99999999.99" step="0.01"
+                                                   id="item_cost"/>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <div class="col-sm-12">
+                            <div class="pull-right">
+                                <input type="submit" class="btn btn-primary">
+                            </div>
+                        </div>
+                    </div>
+                </form>
             </div>
         </div>
     </div>
diff --git a/RIGS/templates/RIGS/item_row.html b/RIGS/templates/RIGS/item_row.html
index 20613110..ce55dc14 100644
--- a/RIGS/templates/RIGS/item_row.html
+++ b/RIGS/templates/RIGS/item_row.html
@@ -1,14 +1,15 @@
-<tr id="item-{{item.pk}}" data-url="{% url 'api_secure' item.pk %}" data-pk="{{item.pk}}">
+<tr id="item-{{item.pk}}" data-url="{% url 'api_secure' item.pk %}" data-pk="{{item.pk}}" class="item_row">
 	<td>
-		{{ item.name }}
+		<span class="name">{{ item.name }}</span>
 		{% if item.description %}
-			<br />
-			<em>{{item.description|linebreaksbr}}</em>
+			<div class="description">
+			    <em>{{item.description|linebreaksbr}}</em>
+			</div>
 		{% endif %}
 	</td>
-	<td>£&nbsp;{{item.cost}}</td>
-	<td>{{item.quantity}}</td>
-	<td class="sub-total" data-subtotal="{{item.total_cost}}">£&nbsp;{{item.total_cost}}</td>
+	<td>£&nbsp;<span class="cost">{{item.cost|floatformat:2}}</span></td>
+	<td class="quantity">{{item.quantity}}</td>
+	<td>£&nbsp;<span class="sub-total" data-subtotal="{{item.total_cost}}">{{item.total_cost|floatformat:2}}</span></td>
 	{% if edit %}
 	<td class="vert-align text-right">
 		<button type="button" class="item-edit btn btn-xs btn-default"