diff --git a/config/routes/job_order.yaml b/config/routes/job_order.yaml
index db6a1b87..44838104 100644
--- a/config/routes/job_order.yaml
+++ b/config/routes/job_order.yaml
@@ -114,8 +114,8 @@ jo_open_rider_submit:
     methods: [POST]
 
 jo_cancel:
-    path: /job-order/{id}
-    controller: App\Controller\JobOrderController::cancel
+    path: /job-order/cancel/{id}
+    controller: App\Controller\JobOrderController::cancelJobOrder
     methods: [DELETE]
 
 jo_search:
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index d2542a25..9edbff58 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -162,6 +162,10 @@ span.has-danger,
 	font-weight: 700;
 }
 
+.m-form__actions .btn + .btn {
+	margin-left: 4px;
+}
+
 @media (min-width: 995px) {
 	.modal-lg {
 		max-width: 1024px;
diff --git a/src/Controller/JobOrderController.php b/src/Controller/JobOrderController.php
index 4a9ca7df..2c49b2e4 100644
--- a/src/Controller/JobOrderController.php
+++ b/src/Controller/JobOrderController.php
@@ -1082,10 +1082,6 @@ class JobOrderController extends BaseController
         ]);
     }
 
-
-
-
-
     public function openRiderForm($id)
     {
         $this->denyAccessUnlessGranted('jo_open.list', null, 'No access.');
@@ -1208,14 +1204,31 @@ class JobOrderController extends BaseController
         ]);
     }
 
+    public function cancelJobOrder(Request $req, $id)
+    {
+        $this->denyAccessUnlessGranted('joborder.cancel', null, 'No access.');
 
+        // get object data
+        $em = $this->getDoctrine()->getManager();
+        $obj = $em->getRepository(JobOrder::class)->find($id);
 
+        // make sure this object exists
+        if (empty($obj))
+            throw $this->createNotFoundException('The item does not exist');
 
+        // cancel job order
+        $obj->setStatus(JOStatus::CANCELLED);
 
+        // save
+        $em->flush();
 
+        // return successful response
+        return $this->json([
+            'success' => 'Job order has been cancelled!'
+        ]);
+    }
 
     // TODO: re-enable search, figure out how to group the orWhere filters into one, so can execute that plus the pending filter
-
     // check if datatable filter is present and append to query
     protected function setQueryFilters($datatable, &$query, $qb, $hubs, $tier, $status)
     {
diff --git a/templates/job-order/form.html.twig b/templates/job-order/form.html.twig
index 82f2ecfd..6b28fd71 100644
--- a/templates/job-order/form.html.twig
+++ b/templates/job-order/form.html.twig
@@ -622,6 +622,9 @@
 								<div class="row">
 									<div class="col-lg-12">
 										<button type="submit" class="btn btn-success">{{ mode == 'update-fulfillment' ? 'Fulfill' : 'Submit' }}</button>
+										{% if mode != 'create' and is_granted('joborder.cancel') %}
+											<a href="{{ url('jo_cancel', {'id': obj.getID}) }}" class="btn btn-danger btn-cancel-job-order">Cancel Job Order</button>
+										{% endif %}
 										{% if mode != 'create' %}
 											<a href="{{ return_url }}" class="btn btn-secondary">Back</a>
 										{% endif %}
@@ -1256,6 +1259,36 @@ $(function() {
 
 		var ticketTable = $("#data-tickets").mDatatable(ticketOptions);
 	{% endif %}
+
+	// cancel job order
+	$(".btn-cancel-job-order").click(function(e) {
+		var url = $(this).prop('href');
+
+		e.preventDefault();
+
+		swal({
+			title: 'Confirmation',
+			html: 'Are you sure you want to cancel this job order?',
+			type: 'warning',
+			showCancelButton: true
+		}).then((result) => {
+			if (result.value) {
+				$.ajax({
+					method: "DELETE",
+					url: url
+				}).done(function(response) {
+					swal({
+						title: 'Done!',
+						text: response.success,
+						type: 'success',
+						onClose: function() {
+							window.location.href = "{{ return_url }}";
+						}
+					});
+				});
+			}
+		});
+	});
 });
 </script>
 {% endblock %}