diff --git a/src/Controller/JobOrderController.php b/src/Controller/JobOrderController.php
index c06383c7..44265309 100644
--- a/src/Controller/JobOrderController.php
+++ b/src/Controller/JobOrderController.php
@@ -282,7 +282,7 @@ class JobOrderController extends Controller
             else
             {
                 $rows[$key]['meta']['update_url'] = $this->generateUrl($tier_params['edit_route'], ['id' => $jo_id]);
-                $rows[$key]['meta']['onestep_edit_url'] = $this->generateUrl('jo_onestep_edit_form', ['id' => $jo_id]);
+                $rows[$key]['meta']['onestep_edit_url'] = $this->generateUrl($tier_params['edit_route'], ['id' => $jo_id]);
                 $rows[$key]['meta']['pdf_url'] = $this->generateUrl('jo_pdf_form', ['id' => $jo_id]);
             }
             
@@ -430,7 +430,7 @@ class JobOrderController extends Controller
      * @Menu(selected="jo_fulfill")
      */
     public function fulfillmentForm(JobOrderHandlerInterface $jo_handler, $id,
-                                    GISManagerInterface $gis)
+                                    GISManagerInterface $gis, EntityManagerInterface $em)
     {
         $this->denyAccessUnlessGranted('jo_fulfill.list', null, 'No access.');
 
@@ -443,6 +443,8 @@ class JobOrderController extends Controller
             throw $this->createNotFoundException($e->getMessage());
         }
 
+        $params['vmfgs'] = $em->getRepository(VehicleManufacturer::class)->findAll();
+        $params['vmakes'] = $em->getRepository(Vehicle::class)->findAll();
         $params['submit_url'] = $this->generateUrl('jo_fulfill_submit', ['id' => $id]);
         $params['return_url'] = $this->generateUrl('jo_fulfill');
         $params['map_js_file'] = $gis->getJSJOFile();
diff --git a/src/Service/JobOrderHandler/CMBJobOrderHandler.php b/src/Service/JobOrderHandler/CMBJobOrderHandler.php
index 80e4158e..06f1fb72 100644
--- a/src/Service/JobOrderHandler/CMBJobOrderHandler.php
+++ b/src/Service/JobOrderHandler/CMBJobOrderHandler.php
@@ -2779,19 +2779,11 @@ class CMBJobOrderHandler implements JobOrderHandlerInterface
         //       $this->template_hash = [ 
         //           'blah' => 'blah',
         //       ];
-        $this->template_hash['jo_incoming_form'] = 'job-order/cmb.form.html.twig';
-        $this->template_hash['jo_open_edit_form'] = 'job-order/cmb.form.html.twig';
         $this->template_hash['jo_incoming_vehicle_form'] = 'job-order/cmb.form.html.twig'; 
-        $this->template_hash['jo_processing_form'] = 'job-order/cmb.form.html.twig';
-        $this->template_hash['jo_assigning_form'] = 'job-order/cmb.form.html.twig';
-        $this->template_hash['jo_fulfillment_form'] = 'job-order/cmb.form.html.twig';
-        $this->template_hash['jo_open_hub_form'] = 'job-order/cmb.form.html.twig';
-        $this->template_hash['jo_open_rider_form'] = 'job-order/cmb.form.html.twig';
-        $this->template_hash['jo_all_form'] = 'job-order/cmb.form.html.twig';
-        $this->template_hash['jo_list_processing'] = 'job-order/list.processing.html.twig';
-        $this->template_hash['jo_list_assigning'] = 'job-order/list.assigning.html.twig';
-        $this->template_hash['jo_list_fulfillment'] = 'job-order/list.fulfillment.html.twig';
-        $this->template_hash['jo_list_open'] = 'job-order/list.open.html.twig';
+        $this->template_hash['jo_fulfillment_form'] = 'job-order/cmb.form.onestep.html.twig';
+        $this->template_hash['jo_all_form'] = 'job-order/cmb.form.onestep.html.twig';
+        $this->template_hash['jo_list_fulfillment'] = 'job-order/cmb.list.fulfillment.html.twig';
+        $this->template_hash['jo_list_open'] = 'job-order/cmb.list.open.html.twig';
         $this->template_hash['jo_list_all'] = 'job-order/list.all.html.twig';
         $this->template_hash['jo_onestep_form'] = 'job-order/cmb.form.onestep.html.twig';
         $this->template_hash['jo_onestep_edit_form'] = 'job-order/cmb.form.onestep.html.twig';
diff --git a/templates/job-order/cmb.form.onestep.html.twig b/templates/job-order/cmb.form.onestep.html.twig
index 0d9bac9f..4c913bca 100644
--- a/templates/job-order/cmb.form.onestep.html.twig
+++ b/templates/job-order/cmb.form.onestep.html.twig
@@ -389,7 +389,7 @@
                             <div class="m-form__section">
                                 <div class="m-form__heading">
                                     <h3 class="m-form__heading-title">
-                                        {% if mode == 'view-all' %}
+                                        {% if mode in ['view-all', 'update-fulfillment'] %}
                                             Assigned Hub
                                         {% else %}
                                             Nearest Hubs
@@ -436,7 +436,7 @@
                             <div class="m-form__section">
                                 <div class="m-form__heading">
                                     <h3 class="m-form__heading-title">
-                                        {% if mode == 'view-all' %}
+                                        {% if mode in ['view-all', 'update-fulfillment'] %}
                                             Assigned Rider
                                         {% else %}
                                             Rider Assignment
@@ -464,7 +464,7 @@
                                                     </tr>
                                                 </thead>
                                                 <tbody id="riders">
-                                                {% if mode in ['onestep-edit', 'view-all'] %}
+                                                {% if mode in ['onestep-edit', 'view-all', 'update-fulfillment'] %}
                                                     {% set avail_riders = obj.getHub.getAvailableRiders|default([]) %}
                                                     <tr class="placeholder-row{{ obj.getHub and avail_riders|length > 0 ? ' hide' }}">
                                                         <td colspan="5">
@@ -474,7 +474,7 @@
 
                                                     {% if obj.getHub %}
                                                         {% for rider in avail_riders %}
-                                                            {% if mode == 'view-all' %}
+                                                            {% if mode in ['view-all', 'update-fulfillment'] %}
                                                                 <tr data-id="{{ rider.getID }}"{{ obj.getRider and obj.getRider.getID == rider.getID ? ' ' }}">
                                                             {% else %} 
                                                                 <tr data-id="{{ rider.getID }}"{{ obj.getRider and obj.getRider.getID == rider.getID ? ' class="m-table__row--primary"' }}">
@@ -512,9 +512,9 @@
                                     <div class="form-group m-form__group row">
                                         <div class="col-lg-6">
                                             <div class="col-lg-12 form-group-inner">
-                                                <select class="form-control m-input sc-select" name="service_charges[]">
+                                                <select class="form-control m-input sc-select" name="service_charges">
                                                     {% for key, sc in service_charges %}
-                                                        <option value="{{ sc.getID }}"{{ jo_sc.id == sc.getID ? ' selected' }}>{{ sc.getName }}</option>
+                                                        <option value="{{ sc.getID }}" data-amount="{{ sc.getAmount }}"{{ jo_sc.id == sc.getID ? ' selected' }}>{{ sc.getName }}</option>
                                                     {% endfor %}
                                                 </select>
                                             </div>
@@ -653,7 +653,7 @@
                                 <div class="row">
                                     <div class="col-lg-12">
                                         {% if mode != 'view-all' %}
-                                            <button type="submit" class="btn btn-success">Submit</button>
+                                            <button type="submit" class="btn btn-success">{{ mode == 'update-fulfillment' ? 'Fulfill' : 'Submit' }}</button>
                                             {% 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>
                                             {% endif %}
@@ -801,7 +801,7 @@ $(function() {
             });
         {% endif %}
 
-        {% if mode in ['view-all'] %}
+        {% if mode in ['view-all', 'update-fulfillment'] %}
             var hub_table = '';
             $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
                 var hubs = data['hubs'];
@@ -963,7 +963,7 @@ $(function() {
         {% endif %}
     });
 
-    {% if mode in ['onestep-edit', 'view-all'] %}
+    {% if mode in ['onestep-edit', 'view-all', 'update-fulfillment'] %}
         var lat = {{ obj.getCoordinates.getLatitude }};
         var lng = {{ obj.getCoordinates.getLongitude }};
 
@@ -1357,7 +1357,7 @@ $(function() {
     var sc_array = [];
 
     // populate invoiceItems if editing so that we don't lose the battery
-    {% if mode in ['view-all', 'open-edit', 'onestep-edit', 'walk-in-edit'] %}
+    {% if mode in ['view-all', 'open-edit', 'onestep-edit', 'walk-in-edit', 'update-fulfillment'] %}
         {% if (obj.getInvoice and obj.getInvoice.getItems|length > 0) %}
             {% for item in obj.getInvoice.getItems %}
                 {% if item.getBattery() %}
diff --git a/templates/job-order/cmb.list.fulfillment.html.twig b/templates/job-order/cmb.list.fulfillment.html.twig
new file mode 100644
index 00000000..7cd98ad3
--- /dev/null
+++ b/templates/job-order/cmb.list.fulfillment.html.twig
@@ -0,0 +1,183 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+	<!-- BEGIN: Subheader -->
+    <div class="m-subheader">
+        <div class="d-flex align-items-center">
+            <div class="mr-auto">
+                <h3 class="m-subheader__title">
+                    Job Orders (Fulfillment)
+                </h3>
+            </div>
+        </div>
+    </div>
+    <!-- END: Subheader -->
+    <div class="m-content">
+        <!--Begin::Section-->
+        <div class="row">
+            <div class="col-xl-12">
+            	<div class="m-portlet m-portlet--mobile">
+                    <div class="m-portlet__body">
+                    	<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
+                        <div class="row align-items-center">
+                                <div class="col-xl-12">
+                                    <div class="form-group m-form__group row align-items-center">
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="data-rows-search">
+                                                <span class="m-input-icon__icon m-input-icon__icon--left">
+                                                    <span><i class="la la-search"></i></span>
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <div>
+                                                    <select class="form-control m-input" id="rider_list" name="rider_list">
+                                                        <option value="">All Riders</option>
+                                                        {% for rider in riders %}
+                                                            <option value="{{ rider.getID }}">{{ rider.getFirstName ~ ' ' ~ rider.getLastName }} </option>
+                                                        {% endfor %}
+                                                    </select>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <div class="input-daterange input-group" id="date-range">
+                                                    <input role="presentation" type="text" class="form-control m-input" id="date_start" name="date_start" placeholder="Start date" />
+                                                    <div class="input-group-append">
+                                                        <span class="input-group-text"><i class="la la-ellipsis-h"></i></span>
+                                                    </div>
+                                                    <input role="presentation" type="text" class="form-control" id="date_end" name="date_end" placeholder="End date" />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!--begin: Datatable -->
+                        <div id="data-rows"></div>
+                        <!--end: Datatable -->
+                    </div>
+                </div>
+			</div>
+		</div>
+	</div>
+{% endblock %}
+
+{% block scripts %}
+    <script>
+        $(function() {
+            $("#date-range").datepicker({
+                orientation: "bottom"
+            });
+
+            var options = {
+                data: {
+                    type: 'remote',
+                    source: {
+                        read: {
+                            url: '{{ url('jo_fulfill_rows') }}',
+                            method: 'POST'
+                        }
+                    },
+                    saveState: {
+                        cookie: false,
+                        webstorage: false
+                    },
+                    pageSize: 10,
+                    serverPaging: true,
+                    serverFiltering: true,
+                    serverSorting: true
+                },
+                rows: {
+                    beforeTemplate: function (row, data, index) {
+                        if (data.flag_advance) {
+                            $(row).addClass('m-table__row--danger');
+                        }
+                    }
+                },
+                columns: [
+                {
+                    field: 'id',
+                    title: 'JO Number'
+                },
+                {
+                    field: 'delivery_address',
+                    title: 'Customer Area'
+                },
+                {
+                    field: 'service_type',
+                    title: 'Type of Transaction'
+                },
+                {
+                    field: 'type',
+                    title: 'Schedule'
+                },
+                {
+                    field: 'date_schedule',
+                    title: 'Scheduled Date'
+                },
+                {
+                    field: 'status',
+                    title: 'Status'
+                },
+                {
+                   field: 'processor',
+                   title: 'Dispatcher'
+                },
+                {
+                    field: 'Actions',
+                    width: 110,
+                    title: 'Actions',
+                    sortable: false,
+                    overflow: 'visible',
+                    template: function (row, index, datatable) {
+                        var actions = '<a href="' + row.meta.onestep_edit_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="View / Edit"><i class="la la-edit"></i></a>';
+							
+                        return actions;
+                    },
+                }
+                ],
+                search: {
+                    onEnter: false,
+                    input: $('#data-rows-search'),
+                    delay: 400
+                }
+            };
+
+            var table = $("#data-rows").mDatatable(options);
+
+            // auto refresh table
+            setInterval(function() {
+                table.reload();
+            }, {{ table_refresh_rate }});
+
+
+            $("#rider_list").on("change", function() {
+                console.log($(this).val());
+                table.search($(this).val(), "rider");
+            });
+
+            $("#date_start").on("change", function() {
+                var date_start = $(this).val();
+                var date_end = $("[name='date_end']").val();
+                var date_array = [date_start, date_end];
+
+                table.search(date_array, "schedule_date");
+            });
+
+            $("#date_end").on("change", function() {
+                console.log($(this).val());
+
+                var date_end = $(this).val();
+                var date_start = $("[name='date_start']").val();
+                var date_array = [date_start, date_end];
+
+                table.search(date_array, "schedule_date");
+            });
+        });
+    </script>
+{% endblock %}
diff --git a/templates/job-order/cmb.list.open.html.twig b/templates/job-order/cmb.list.open.html.twig
new file mode 100644
index 00000000..bffdfd6c
--- /dev/null
+++ b/templates/job-order/cmb.list.open.html.twig
@@ -0,0 +1,190 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+	<!-- BEGIN: Subheader -->
+    <div class="m-subheader">
+        <div class="d-flex align-items-center">
+            <div class="mr-auto">
+                <h3 class="m-subheader__title">
+                    Job Orders (Open)
+                </h3>
+            </div>
+        </div>
+    </div>
+    <!-- END: Subheader -->
+    <div class="m-content">
+        <!--Begin::Section-->
+        <div class="row">
+            <div class="col-xl-12">
+            	<div class="m-portlet m-portlet--mobile">
+                    <div class="m-portlet__body">
+                    	<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
+                            <div class="row align-items-center">
+                                <div class="col-xl-12">
+                                    <div class="form-group m-form__group row align-items-center">
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="data-rows-search">
+                                                <span class="m-input-icon__icon m-input-icon__icon--left">
+                                                    <span><i class="la la-search"></i></span>
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <div>
+                                                    <select class="form-control m-input" id="rider_list" name="rider_list">
+                                                        <option value="">All Riders</option>
+                                                        {% for rider in riders %}
+                                                            <option value="{{ rider.getID }}">{{ rider.getFirstName ~ ' ' ~ rider.getLastName }} </option>
+                                                        {% endfor %}
+                                                    </select>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <div class="input-daterange input-group" id="date-range">
+                                                    <input role="presentation" type="text" class="form-control m-input" id="date_start" name="date_start" placeholder="Start date" />
+                                                    <div class="input-group-append">
+                                                        <span class="input-group-text"><i class="la la-ellipsis-h"></i></span>
+                                                    </div>
+                                                    <input role="presentation" type="text" class="form-control" id="date_end" name="date_end" placeholder="End date" />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!--begin: Datatable -->
+                        <div id="data-rows"></div>
+                        <!--end: Datatable -->
+                    </div>
+                </div>
+			</div>
+		</div>
+	</div>
+{% endblock %}
+
+{% block scripts %}
+    <script>
+        $(function() {
+            $("#date-range").datepicker({
+                orientation: "bottom"
+            });
+            var options = {
+                data: {
+                    type: 'remote',
+                    source: {
+                        read: {
+                            url: '{{ url('jo_open_rows') }}',
+                            method: 'POST'
+                        }
+                    },
+                    saveState: {
+                        cookie: false,
+                        webstorage: false
+                    },
+                    pageSize: 10,
+                    serverPaging: true,
+                    serverFiltering: true,
+                    serverSorting: true
+                },
+                rows: {
+                    beforeTemplate: function (row, data, index) {
+                        if (data.flag_advance) {
+                            $(row).addClass('m-table__row--danger');
+                        }
+
+                        if (data.is_mobile) {
+                            $(row).addClass('m-table__row--is_mobile');
+                        }
+                    }
+                },
+                columns: [
+                {
+                    field: 'id',
+                    title: 'JO #'
+                },
+                {
+                    field: 'plate_number',
+                    title: 'Plate #'
+                },
+                {
+                    field: 'customer_name',
+                    title: 'Customer'
+                },
+                {
+                    field: 'delivery_address',
+                    title: 'Area'
+                },
+                {
+                    field: 'type',
+                    title: 'Schedule'
+                },
+                {
+                    field: 'date_schedule',
+                    title: 'Scheduled Date'
+                },
+                {
+                    field: 'status',
+                    title: 'Status'
+                },
+                {
+                    field: 'processor',
+                    title: 'Dispatcher'
+                },
+                {
+                    field: 'Actions',
+                    width: 110,
+                    title: 'Actions',
+                    sortable: false,
+                    overflow: 'visible',
+                    template: function (row, index, datatable) {
+                        {% if is_granted('jo_onestep.edit') %}
+                            var actions = '<a href="' + row.meta.onestep_edit_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-reassign-hub" title="Edit"><i class="fa fa-file"></i></a>';
+                        {% endif %}
+							
+                        return actions;
+                    },
+                }
+                ],
+                search: {
+                    onEnter: false,
+                    input: $('#data-rows-search'),
+                    delay: 400
+                }
+            };
+
+            var table = $("#data-rows").mDatatable(options);
+
+            // auto refresh table
+            setInterval(function() {
+                table.reload();
+            }, {{ table_refresh_rate }});
+
+            $("#rider_list").on("change", function() {
+                table.search($(this).val(), "rider");
+            });
+
+            $("#date_start").on("change", function() {
+                var date_start = $(this).val();
+                var date_end = $("[name='date_end']").val();
+                var date_array = [date_start, date_end];
+
+                table.search(date_array, "schedule_date");
+            });
+
+            $("#date_end").on("change", function() {
+                console.log($(this).val());
+
+                var date_end = $(this).val();
+                var date_start = $("[name='date_start']").val();
+                var date_array = [date_start, date_end];
+
+                table.search(date_array, "schedule_date");
+            });
+        });
+    </script>
+{% endblock %}