diff --git a/config/acl.yaml b/config/acl.yaml
index abd73118..81b49726 100644
--- a/config/acl.yaml
+++ b/config/acl.yaml
@@ -270,6 +270,8 @@ access_keys:
           label: Autoassign Test
         - id: jo_hub.list
           label: Hub View
+        - id: jo_cancel.fulfill
+          label: Fulfill Cancelled JO
 
     - id: support
       label: Customer Support Access
diff --git a/config/routes/job_order.yaml b/config/routes/job_order.yaml
index 586ed81f..f31dd94b 100644
--- a/config/routes/job_order.yaml
+++ b/config/routes/job_order.yaml
@@ -253,3 +253,7 @@ jo_hub_view_form:
     controller: App\Controller\JobOrderController::hubViewForm
     methods: [GET]
 
+jo_fulfill_cancel_submit:
+    path: /job-order/fulfillcancel/{id}
+    controller: App\Controller\JobOrderController::fulfillCancelSubmit
+    methods: [POST]
diff --git a/src/Controller/JobOrderController.php b/src/Controller/JobOrderController.php
index f23fc73c..11d761eb 100644
--- a/src/Controller/JobOrderController.php
+++ b/src/Controller/JobOrderController.php
@@ -631,7 +631,6 @@ class JobOrderController extends Controller
         $params['vmfgs'] = $em->getRepository(VehicleManufacturer::class)->findAll();
         $params['vmakes'] = $em->getRepository(Vehicle::class)->findAll();
         $params['return_url'] = $this->generateUrl('jo_all');
-        $params['submit_url'] = '';
         $params['map_js_file'] = $gis->getJSJOFile();
 
         $template = $params['template'];
@@ -1153,6 +1152,31 @@ class JobOrderController extends Controller
         return $this->render($template, $params);
     }
 
+    public function fulfillCancelSubmit(Request $req, JobOrderHandlerInterface $jo_handler, $id)
+    {
+        $this->denyAccessUnlessGranted('jo_cancel.fulfill', null, 'No access.');
+
+        // TODO: make the service function to fulfill the cancelled JO
+        $error_array = [];
+        $result = $jo_handler->fulfillCancelledJobOrder($req, $id);
+ 
+        $error_array = $result['error_array'];
+ 
+        // check if any errors were found
+        if (!empty($error_array)) {
+            // return validation failure response
+            return $this->json([
+                'success' => false,
+                'errors' => $error_array
+            ], 422);
+        } 
+ 
+        // return successful response
+        return $this->json([
+            'success' => 'Changes have been saved!'
+        ]);
+    }
+
 
     /**
      * @Menu(selected="jo_autoassign")
diff --git a/src/Service/JobOrderHandler/ResqJobOrderHandler.php b/src/Service/JobOrderHandler/ResqJobOrderHandler.php
index 6380878a..5bbb3f2e 100644
--- a/src/Service/JobOrderHandler/ResqJobOrderHandler.php
+++ b/src/Service/JobOrderHandler/ResqJobOrderHandler.php
@@ -492,6 +492,8 @@ class ResqJobOrderHandler implements JobOrderHandlerInterface
                 ->setTypeID(JOEventType::OPEN_EDIT)
                 ->setJobOrder($obj);
 
+            error_log('open edit?');
+
             if ($user != null)
             {
                 $event->setUser($user);
@@ -1562,6 +1564,18 @@ class ResqJobOrderHandler implements JobOrderHandlerInterface
         $this->fillDropdownParameters($params);
         $this->fillFormTags($params);
 
+        // check JO status to determine the mode and submit_url to return
+        if ($obj->getStatus() == JOStatus::CANCELLED)
+        {
+            $params['mode'] = 'fulfill-cancel';
+            $params['submit_url'] = 'jo_fulfill_cancel_submit';
+        }
+        else
+        {
+            $params['mode'] = 'update-all';
+            $params['submit_url'] = '';
+        }
+
          // get template to display
         $params['template'] = $this->getTwigTemplate('jo_all_form');
 
@@ -2969,4 +2983,37 @@ class ResqJobOrderHandler implements JobOrderHandlerInterface
         return $params;
     }
 
+    public function fulfillCancelledJobOrder(Request $req, $id)
+    {
+        // initialize error list
+        $error_array = [];
+
+        // get object data
+        $em = $this->em;
+        $obj = $em->getRepository(JobOrder::class)->find($id);
+
+        // make sure this object exists
+        if (empty($obj))
+            throw new NotFoundHttpException('The item does not exist');
+
+        $obj->fulfill();
+
+        // the event
+        $event = new JOEvent();
+        $event->setDateHappen(new DateTime())
+            ->setTypeID(JOEventType::FULFILL)
+            ->setJobOrder($obj);
+
+        // get current user
+        $user = $this->security->getUser();
+        if ($user != null)
+        {
+            $event->setUser($user);
+        }
+
+        $event->setUser($user);
+        $em->persist($event);
+        $em->flush();
+    }
+
 }
diff --git a/templates/job-order/form.html.twig b/templates/job-order/form.html.twig
index bba70b39..9d8d5dc4 100644
--- a/templates/job-order/form.html.twig
+++ b/templates/job-order/form.html.twig
@@ -848,7 +848,11 @@
 								<div class="row">
 									<div class="col-lg-12">
 										{% if mode != 'update-all' %}
+                                                                                    {% if mode == 'fulfill-cancel' %}
+                                                                                        <a href="{{ url('jo_fulfill_cancel_submit', {'id': obj.getID}) }}" class="btn btn-success btn-fulfill-cancel-job-order">Fulfill</a>
+                                                                                    {% else %}
 											<button type="submit" class="btn btn-success">{{ mode == 'update-fulfillment' ? 'Fulfill' : 'Submit' }}</button>
+                                                                                    {% endif %}
 										{% endif %}
                                         {% if ftags.set_map_coordinate and is_granted('joborder.cancel') and not obj.isCancelled %}
 											<a href="{{ url('jo_cancel', {'id': obj.getID}) }}" class="btn btn-danger btn-cancel-job-order">Cancel Job Order</a>
@@ -1768,6 +1772,28 @@ $(function() {
 			});
 		});
 	});
+
+        // fulfill cancelled job order
+        $(".btn-fulfill-cancel-job-order").click(function(e) {
+            var url = $(this).prop('href');
+
+            e.preventDefault();
+
+            $.ajax({
+                method: "POST",
+                url: url,
+            }).done(function(response) {
+                swal({
+                    title: 'Done!',
+                    text: response.success,
+                    type: 'success',
+                    onClose: function() {
+                        window.location.href = "{{ return_url }}";
+                    }
+                });
+            });
+
+        });
 });
 </script>
 {% endblock %}