diff --git a/config/acl.yaml b/config/acl.yaml
index 25e04dbc..36f0b2b3 100644
--- a/config/acl.yaml
+++ b/config/acl.yaml
@@ -266,6 +266,8 @@ access_keys:
           label: Walk-in Edit
         - id: jo_autoassign.test
           label: Autoassign Test
+        - id: jo_hub.view
+          label: Hub View
 
     - id: support
       label: Customer Support Access
diff --git a/config/menu.yaml b/config/menu.yaml
index b0096cf5..0adf524b 100644
--- a/config/menu.yaml
+++ b/config/menu.yaml
@@ -122,6 +122,10 @@ main_menu:
       acl: jo_all.list
       label: View All
       parent: joborder
+    - id: jo_hub_view
+      acl: jo_hub.view
+      label: Hub View
+      parent: joborder
 
     - id: support
       acl: support.menu
diff --git a/config/resq.menu.yaml b/config/resq.menu.yaml
index b0096cf5..69f0b806 100644
--- a/config/resq.menu.yaml
+++ b/config/resq.menu.yaml
@@ -122,6 +122,9 @@ main_menu:
       acl: jo_all.list
       label: View All
       parent: joborder
+    - id: jo_hub.view
+      label: Hub View
+      parent: joborder
 
     - id: support
       acl: support.menu
diff --git a/config/routes/job_order.yaml b/config/routes/job_order.yaml
index f239402d..ab505c42 100644
--- a/config/routes/job_order.yaml
+++ b/config/routes/job_order.yaml
@@ -235,3 +235,8 @@ jo_autoassign_test_submit:
     path: /job-order/autoassign
     controller: App\Controller\JobOrderController::autoAssignSubmit
     methods: [POST]
+
+jo_hub_view:
+    path: /job-order/hub-view
+    controller: App\Controller\JobOrderController::hubView
+    methods: [GET]
diff --git a/src/Controller/JobOrderController.php b/src/Controller/JobOrderController.php
index d8866203..bd9c67ad 100644
--- a/src/Controller/JobOrderController.php
+++ b/src/Controller/JobOrderController.php
@@ -1065,6 +1065,21 @@ class JobOrderController extends Controller
         ]);
     }
 
+    /**
+     * @Menu(selected="jo_hub_view")
+     */
+    public function hubView(JobOrderHandlerInterface $jo_handler)
+    {
+        $this->denyAccessUnlessGranted('jo_hub.view', null, 'No access.');
+
+        $template = $jo_handler->getTwigTemplate('jo_hub_list');
+
+        $params = $jo_handler->getOtherParameters();
+        $params['table_refresh_rate'] = $this->container->getParameter('job_order_refresh_interval');
+
+        return $this->render($template, $params);
+    }
+
     /**
      * @Menu(selected="jo_autoassign")
      */
diff --git a/src/Service/JobOrderHandler/ResqJobOrderHandler.php b/src/Service/JobOrderHandler/ResqJobOrderHandler.php
index 54deda2f..e8693945 100644
--- a/src/Service/JobOrderHandler/ResqJobOrderHandler.php
+++ b/src/Service/JobOrderHandler/ResqJobOrderHandler.php
@@ -2341,6 +2341,9 @@ class ResqJobOrderHandler implements JobOrderHandlerInterface
         // get riders for dropdown
         $params['riders'] = $this->em->getRepository(Rider::class)->findAll();
 
+        // get hubs for dropdown
+        $params['hubs'] = $this->em->getRepository(Hub::class)->findAll();
+
         return $params;
     }
 
@@ -2509,6 +2512,7 @@ class ResqJobOrderHandler implements JobOrderHandlerInterface
         $this->template_hash['jo_list_open'] = 'job-order/list.open.html.twig';
         $this->template_hash['jo_list_all'] = 'job-order/list.all.html.twig';
         $this->template_hash['jo_popup'] = 'job-order/popup.html.twig';
+        $this->template_hash['jo_hub_list'] = 'job-order/list.hubview.html.twig';
     }
 
     protected function checkTier($tier)
diff --git a/templates/job-order/list.hubview.html.twig b/templates/job-order/list.hubview.html.twig
new file mode 100644
index 00000000..c0c69003
--- /dev/null
+++ b/templates/job-order/list.hubview.html.twig
@@ -0,0 +1,175 @@
+{% 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 (Hub View)
+                </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="hub_list" name="hub_list">
+                                                        <option value="">All Hubs</option>
+                                                        {% for hub in hubs %}
+                                                            <option value="{{ hub.getID }}">{{ hub.getName }} </option>
+                                                        {% endfor %}
+                                                    </select>
+                                                </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: 'customer_name',
+                    title: 'Customer'
+                },
+                {
+                    field: 'delivery_address',
+                    title: 'Customer 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) {
+                        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 %}