diff --git a/config/routes/hub.yaml b/config/routes/hub.yaml
index cad33e2b..d28498ec 100644
--- a/config/routes/hub.yaml
+++ b/config/routes/hub.yaml
@@ -38,3 +38,8 @@ hub_nearest:
     path: /ajax/nearest_hubs
     controller: App\Controller\HubController::nearest
     methods: [GET]
+
+hub_riders:
+    path: /ajax/hubs/riders
+    controller: App\Controller\HubController::getHubRiders
+    methods: [GET]
diff --git a/src/Controller/HubController.php b/src/Controller/HubController.php
index 77c07f3b..531e290a 100644
--- a/src/Controller/HubController.php
+++ b/src/Controller/HubController.php
@@ -320,4 +320,47 @@ class HubController extends Controller
             'hubs' => $hubs,
         ]);
     }
+
+    public function getHubRiders(Request $req)
+    {
+        // get hub id
+        $hub_id = $req->query->get('id');
+
+        // get hub
+        $em = $this->getDoctrine()->getManager();
+        $hub = $em->getRepository(Hub::class)->find($hub_id);
+
+        // make sure this row exists
+        if (empty($hub))
+            throw $this->createNotFoundException('The item does not exist');
+
+        //TODO: get available riders sort by proximity, show 10
+        $available_riders = $hub->getAvailableRiders();
+
+        $riders = [];
+
+        // TODO: remove this later when we don't get all available riders
+        $riders_limit = 5;
+        $num_riders = 0;
+
+        foreach ($available_riders as $rider)
+        {
+            if ($num_riders > $riders_limit)
+                break;
+
+            $riders[] = [
+                'id' => $rider->getID(),
+                'first_name' => $rider->getFirstName(),
+                'last_name' => $rider->getLastName(),
+                'contact_num' => $rider->getContactNumber(),
+                'plate_num' => $rider->getPlateNumber(),
+            ];
+
+            $num_riders++;
+        }
+
+        return $this->json([
+            'riders' => $riders,
+        ]);
+    }
 }
diff --git a/templates/job-order/form.onestep.html.twig b/templates/job-order/form.onestep.html.twig
index 0333a75f..9a00f9b8 100644
--- a/templates/job-order/form.onestep.html.twig
+++ b/templates/job-order/form.onestep.html.twig
@@ -388,7 +388,8 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="m-form__heading">
+                            <div class="m-form__section">
+                                <div class="m-form__heading">
                                     <h3 class="m-form__heading-title">
                                         Rider Assignment
                                     </h3>
@@ -398,14 +399,13 @@
                                         <label>Click on a row to select a rider</label>
                                         <div class="form-control-feedback hide" data-field="rider"></div>
                                         <div class="table-frame" data-name="rider">
-                                            <table id="riderss-table" class="table table-compact table-hover table-clickable m-table">
+                                            <table id="riders-table" class="table table-compact table-hover table-clickable m-table">
                                                 <thead>
                                                     <tr>
                                                         <th>First Name</th>
                                                         <th>Last Name</th>
                                                         <th>Contact No.</th>
                                                         <th>Plate Number</th>
-                                                        <th>Status</th>
                                                         <th>Action</th>
                                                     </tr>
                                                 </thead>
@@ -944,6 +944,24 @@ $(function() {
             selectedHub = id;
 
             // get riders of hub
+            // get  hub riders ajax
+            var rider_table = '';
+            $.getJSON("{{ url('hub_riders') }}?id=" + selectedHub, function(data) {
+                var riders = data['riders'];
+                for (i in riders) {
+                    var rider = riders[i];
+
+                    rider_table += '<tr data-id=' + rider['id'] + '>';
+                    rider_table += '<td>' + rider['first_name'] + '</td>';
+                    rider_table += '<td>' + rider['last_name'] + '</td>';
+                    rider_table += '<td>' + rider['contact_num'] + '</td>';
+                    rider_table += '<td>' + rider['plate_num'] + '</td>';
+                    rider_table += '<td></td>';
+                    rider_table += '</tr>';
+                }
+
+                $('#riders').html(rider_table);
+            });
         });
     });