diff --git a/src/Entity/JobOrder.php b/src/Entity/JobOrder.php
index bac98580..ce2f3a85 100644
--- a/src/Entity/JobOrder.php
+++ b/src/Entity/JobOrder.php
@@ -11,6 +11,7 @@ use DateTime;
 
 use App\Ramcar\ModeOfPayment;
 use App\Ramcar\JOStatus;
+use App\Ramcar\ServiceType;
 
 /**
  * @ORM\Entity
@@ -366,6 +367,11 @@ class JobOrder
         return $this->service_type;
     }
 
+    public function getServiceTypeName()
+    {
+        return ServiceType::getName($this->service_type);
+    }
+
     public function setWarrantyClass($warranty_class)
     {
         $this->warranty_class = $warranty_class;
@@ -455,6 +461,11 @@ class JobOrder
         return $this->status;
     }
 
+    public function getStatusText()
+    {
+        return JOStatus::getName($this->status);
+    }
+
     public function setDeliveryInstructions($delivery_instructions)
     {
         $this->delivery_instructions = $delivery_instructions;
diff --git a/templates/customer/form.html.twig b/templates/customer/form.html.twig
index f1fa1853..c982b664 100644
--- a/templates/customer/form.html.twig
+++ b/templates/customer/form.html.twig
@@ -217,6 +217,23 @@
 										</div>
 									</div>
 								</div>
+
+                                <div class="m-form__section">
+								<div class="m-form__seperator m-form__seperator--dashed"></div>
+
+								<div class="m-form__section m-form__section--last">
+									<div class="m-form__heading">
+										<h3 class="m-form__heading-title">
+                                        Job Orders
+										</h3>
+									</div>
+									<div class="form-group m-form__group row">
+										<div class="col-lg-12">
+											<div class="m_datatable" id="data-job-orders"></div>
+										</div>
+									</div>
+								</div>
+                                </div>
 							{% endif %}
 			            </div>
 			            <div class="m-portlet__foot m-portlet__foot--fit">
@@ -582,6 +599,7 @@
 			var mfgVehicles = [];
 			var vehicleRows = [];
 			var ticketRows = [];
+            var joRows = [];
 
             var vrow = {};
 
@@ -617,7 +635,6 @@
 				trow = {
 					id: "{{ ticket.getID }}",
 					date_create: "{{ ticket.getDateCreate|date('d M Y - h:i A') }}",
-					subject: "{{ ticket.getSubject }}",
 					ticket_type: "{{ ticket.getTicketTypeText }}",
 					status: "{{ ticket.getStatusText }}",
 					edit_url: "{{ url('ticket_update', {'id': ticket.getID}) }}"
@@ -626,6 +643,18 @@
 				ticketRows.push(trow);
 			{% endfor %}
 
+            {% for jo in obj.getJobOrders %}
+                jorow = {
+                    id: "{{ jo.getID }}",
+                    date_schedule: "{{ jo.getDateSchedule|date('d M Y - h:i A') }}",
+                    service_type: "{{ jo.getServiceTypeName }}",
+                    plate_num: "{{ jo.getCustomerVehicle.getPlateNumber|default('') }}",
+                    status: "{{ jo.getStatusText }}",
+                };
+
+                joRows.push(jorow);
+            {% endfor %}
+
 			// remove vehicle from table
 			$(document).on('click', '.btn-delete-vehicle', function(e) {
 				var btn = $(this);
@@ -1075,11 +1104,6 @@
 						title: 'Date Created',
 						width: 200
 					},
-					{
-						field: 'subject',
-						title: 'Subject',
-						width: 300
-					},
 					{
 						field: 'ticket_type',
 						title: 'Ticket Type'
@@ -1103,6 +1127,47 @@
 			};
 
 			var ticketTable = $("#data-tickets").mDatatable(ticketOptions);
+
+            // job order history table
+            var joOptions = {
+                data: {
+                    type: 'local',
+                    source: joRows,
+                    saveState: {
+                        cookie: false,
+                        webstorage: false
+                    }
+                },
+                layout: {
+                    scroll: true
+                },
+                columns: [
+                    {
+                        field: 'id',
+                        title: 'ID',
+                        width: 30
+                    },
+                    {
+                        field: 'date_schedule',
+                        title: 'Date Scheduled'
+                    },
+                    {
+                        field: 'service_type',
+                        title: 'Service Type'
+                    },
+                    {
+                        field: 'plate_num',
+                        title: 'Plate #'
+                    },
+                    {
+                        field: 'status',
+                        title: 'Status'
+                    },
+                ],
+                pagination: false
+            };
+
+            var joTable = $("#data-job-orders").mDatatable(joOptions);
 		});
 	</script>
 {% endblock %}
diff --git a/templates/job-order/form.html.twig b/templates/job-order/form.html.twig
index db19e928..a4594b73 100644
--- a/templates/job-order/form.html.twig
+++ b/templates/job-order/form.html.twig
@@ -1355,7 +1355,6 @@ $(function() {
 			trow = {
 				id: "{{ ticket.getID }}",
 				date_create: "{{ ticket.getDateCreate|date('d M Y - h:i A') }}",
-				subject: "{{ ticket.getSubject }}",
 				ticket_type: "{{ ticket.getTicketTypeText }}",
 				status: "{{ ticket.getStatusText }}",
 				edit_url: "{{ url('ticket_update', {'id': ticket.getID}) }}"
@@ -1388,11 +1387,6 @@ $(function() {
 					title: 'Date Created',
 					width: 200
 				},
-				{
-					field: 'subject',
-					title: 'Subject',
-					width: 300
-				},
 				{
 					field: 'ticket_type',
 					title: 'Ticket Type'