diff --git a/config/routes/job_order.yaml b/config/routes/job_order.yaml
index 5b5eadbe..f31dd94b 100644
--- a/config/routes/job_order.yaml
+++ b/config/routes/job_order.yaml
@@ -254,6 +254,6 @@ jo_hub_view_form:
     methods: [GET]
 
 jo_fulfill_cancel_submit:
-    path: /job-order/all/{id}
+    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 0d766b6d..11d761eb 100644
--- a/src/Controller/JobOrderController.php
+++ b/src/Controller/JobOrderController.php
@@ -1157,9 +1157,8 @@ class JobOrderController extends Controller
         $this->denyAccessUnlessGranted('jo_cancel.fulfill', null, 'No access.');
 
         // TODO: make the service function to fulfill the cancelled JO
-        /*
         $error_array = [];
-        $result = $jo_handler->openEditJobOrder($req, $id);
+        $result = $jo_handler->fulfillCancelledJobOrder($req, $id);
  
         $error_array = $result['error_array'];
  
@@ -1170,7 +1169,7 @@ class JobOrderController extends Controller
                 'success' => false,
                 'errors' => $error_array
             ], 422);
-        } */
+        } 
  
         // return successful response
         return $this->json([
diff --git a/src/Service/JobOrderHandler/ResqJobOrderHandler.php b/src/Service/JobOrderHandler/ResqJobOrderHandler.php
index e25c2b4a..da1690c5 100644
--- a/src/Service/JobOrderHandler/ResqJobOrderHandler.php
+++ b/src/Service/JobOrderHandler/ResqJobOrderHandler.php
@@ -2968,4 +2968,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 ffa39b96..9d8d5dc4 100644
--- a/templates/job-order/form.html.twig
+++ b/templates/job-order/form.html.twig
@@ -849,7 +849,7 @@
 									<div class="col-lg-12">
 										{% if mode != 'update-all' %}
                                                                                     {% if mode == 'fulfill-cancel' %}
-                                                                                        <button type="submit" class="btn btn-success"> Fulfill </button>
+                                                                                        <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 %}
@@ -1772,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 %}