diff --git a/src/Service/JobOrderHandler/CMBJobOrderHandler.php b/src/Service/JobOrderHandler/CMBJobOrderHandler.php
index 50ef719f..61eb09b5 100644
--- a/src/Service/JobOrderHandler/CMBJobOrderHandler.php
+++ b/src/Service/JobOrderHandler/CMBJobOrderHandler.php
@@ -2807,7 +2807,7 @@ class CMBJobOrderHandler implements JobOrderHandlerInterface
         $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_list_all'] = 'job-order/cmb.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';
         $this->template_hash['jo_walkin_form'] = 'job-order/cmb.form.walkin.html.twig';
diff --git a/templates/job-order/cmb.list.all.html.twig b/templates/job-order/cmb.list.all.html.twig
new file mode 100644
index 00000000..1e8b6511
--- /dev/null
+++ b/templates/job-order/cmb.list.all.html.twig
@@ -0,0 +1,202 @@
+{% 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 (All)
+                </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 class="input-group">
+                                                    <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_all_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: 'plate_number',
+                    title: 'Plate #'
+                },
+                {
+                    field: 'car_model',
+                    title: 'Car Model'
+                },
+                {
+                    field: 'customer_name',
+                    title: 'Customer'
+                },
+                {
+                    field: 'service_type',
+                    title: 'Service Type',
+                },
+                {
+                    field: 'delivery_address',
+                    title: 'Customer Area'
+                },
+                {
+                    field: 'type',
+                    title: 'Schedule'
+                },
+                {
+                    field: 'date_schedule',
+                    title: 'Scheduled Date'
+                },
+                {
+                    field: 'rider_name',
+                    title: 'Rider'
+                },
+                {
+                    field: 'rider_plate_number',
+                    title: 'Rider Plate #'
+                },
+                {
+                    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.update_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"><i class="la la-edit"></i></a>';
+                        actions += '<a href="' + row.meta.pdf_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="PDF" target="_blank"><i class="la la-file-o"></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() {
+                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 %}