diff --git a/src/Service/JobOrderHandler/ResqJobOrderHandler.php b/src/Service/JobOrderHandler/ResqJobOrderHandler.php
index 5f88b057..5fc399b6 100644
--- a/src/Service/JobOrderHandler/ResqJobOrderHandler.php
+++ b/src/Service/JobOrderHandler/ResqJobOrderHandler.php
@@ -2553,6 +2553,10 @@ class ResqJobOrderHandler implements JobOrderHandlerInterface
         $this->fillDropdownParameters($params);
         $this->fillFormTags($params);
 
+        // get the rider data to display for table
+        $rider_data = $this->getRiderDataForAssignment($obj);
+        $params['rider_data'] = $rider_data;
+
         // get template to display
         $params['template'] = $this->getTwigTemplate('jo_assigning_form');
         $params['obj'] = $obj;
@@ -2818,6 +2822,10 @@ class ResqJobOrderHandler implements JobOrderHandlerInterface
         $this->fillDropdownParameters($params);
         $this->fillFormTags($params);
 
+        // get the rider data to display for table
+        $rider_data = $this->getRiderDataForAssignment($obj);
+        $params['rider_data'] = $rider_data;
+
         $params['obj'] = $obj;
         $params['status_cancelled'] = JOStatus::CANCELLED;
         // get template to display
@@ -3495,6 +3503,48 @@ class ResqJobOrderHandler implements JobOrderHandlerInterface
         ];
     }
 
+    protected function getRiderDataForAssignment($obj)
+    {
+        $hub = $obj->getHub();
+
+        $rider_data = [];
+
+        // get all active riders of hub
+        $active_riders = $hub->getActiveRiders();
+
+        // need to get first name, last name, contact number, plate number, status, image file
+        // status: Online (rider is logged in app), Offline (rider is not logged in app), In transit
+
+        foreach ($active_riders as $rider)
+        {
+            // in transit -  flag_available = 0 AND current_job_order is not null
+            // online - flag_available = 1
+            // offline - flag_available = 0 AND current_job_order is null
+            $rider_status = '';
+
+            if ($rider->isAvailable() == true)
+                $rider_status = 'Online';
+
+            if (($rider->isAvailable() == false) &&
+                ($rider->getCurrentJobOrder() == null))
+                $rider_status = 'Offline';
+
+            if (($rider->isAvailable() == false) &&
+                ($rider->getCurrentJobOrder() != null))
+                $rider_status = 'In transit';
+
+            $rider_data[$rider->getID()] = [
+                'first_name' => $rider->getFirstName(), 
+                'last_name' => $rider->getLastName(),
+                'contact_number' => $rider->getContactNumber(),
+                'plate_number' => $rider->getPlateNumber(),
+                'image_file' => $rider->getImageFile(),
+                'status' => $rider_status,
+            ];
+        }
+        return $rider_data;       
+    }
+
     // TODO: re-enable search, figure out how to group the orWhere filters into one, so can execute that plus the pending filter
     // check if datatable filter is present and append to query
     protected function setQueryFilters($datatable, &$query, $qb, $hubs, $tier, $status)
diff --git a/templates/job-order/form.html.twig b/templates/job-order/form.html.twig
index e57f8114..f6e43811 100644
--- a/templates/job-order/form.html.twig
+++ b/templates/job-order/form.html.twig
@@ -882,48 +882,64 @@
 											</h3>
 										</div>
 										<div class="form-group m-form__group row">
-											<div class="col-lg-12">
-												<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="riders-table" class="table table-compact table-hover table-clickable table-vcenter m-table">
-														<thead>
-															<tr>
-																<th></th>
-																<th>First Name</th>
-																<th>Last Name</th>
-																<th>Contact No.</th>
-																<th>Plate Number</th>
-																<th>Status</th>
-															</tr>
-														</thead>
-														<tbody>
-                                                            {% set avail_riders = obj.getHub.getAvailableRiders|default([]) %}
-															<tr class="placeholder-row{{ obj.getHub and avail_riders|length > 0 ? ' hide' }}">
-																<td colspan="6">
-																	No riders available.
-																</td>
-															</tr>
+                                                                                    <div class="col-lg-12">
+                                                                                        <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="riders-table" class="table table-compact table-hover table-clickable table-vcenter m-table">
+                                                                                                <thead>
+                                                                                                    <tr>
+                                                                                                        <th></th>
+                                                                                                        <th>First Name</th>
+                                                                                                        <th>Last Name</th>
+                                                                                                        <th>Contact No.</th>
+                                                                                                        <th>Plate Number</th>
+                                                                                                        <th>Status</th>
+                                                                                                    </tr>
+                                                                                                </thead>
+                                                                                                <tbody>
+                                                                                                <!--
+                                                                                                    {% set avail_riders = obj.getHub.getAvailableRiders|default([]) %}
+                                                                                                    <tr class="placeholder-row{{ obj.getHub and avail_riders|length > 0 ? ' hide' }}">
+                                                                                                        <td colspan="6">
+                                                                                                            No riders available.
+                                                                                                        </td>
+                                                                                                    </tr>
 
-															{% if obj.getHub %}
-																{% for rider in avail_riders %}
-																	<tr data-id="{{ rider.getID }}"{{ obj.getRider and obj.getRider.getID == rider.getID ? ' class="m-table__row--primary"' }}>
-																		<td>
-																			<div class="user-portrait-sm" style="background-image: url('{{ rider.getImageFile ? "/uploads/" ~ rider.getImageFile : "/assets/images/user.gif" }}');"></div>
-																		</td>
-																		<td>{{ rider.getFirstName }}</td>
-																		<td>{{ rider.getLastName }}</td>
-																		<td>{{ rider.getContactNumber }}</td>
-																		<td>{{ rider.getPlateNumber }}</td>
-																		<td></td>
-																	</tr>
-																{% endfor %}
-															{% endif %}
-														</tbody>
-													</table>
-												</div>
-											</div>
-										</div>
+                                                                                                    {% if obj.getHub %}
+                                                                                                        {% for rider in avail_riders %}
+                                                                                                            <tr data-id="{{ rider.getID }}"{{ obj.getRider and obj.getRider.getID == rider.getID ? ' class="m-table__row--primary"' }}>
+                                                                                                                <td>
+                                                                                                                    <div class="user-portrait-sm" style="background-image: url('{{ rider.getImageFile ? "/uploads/" ~ rider.getImageFile : "/assets/images/user.gif" }}');"></div>
+                                                                                                                </td>
+                                                                                                                <td>{{ rider.getFirstName }}</td>
+                                                                                                                <td>{{ rider.getLastName }}</td>
+                                                                                                                <td>{{ rider.getContactNumber }}</td>
+                                                                                                                <td>{{ rider.getPlateNumber }}</td>
+                                                                                                                <td></td>
+                                                                                                            </tr>
+                                                                                                        {% endfor %}
+                                                                                                    {% endif %}
+                                                                                                -->
+                                                                                                    {% if obj.getHub %}
+                                                                                                        {% for key, data in rider_data %}
+                                                                                                            <tr data-id="{{ key }}" {{ obj.getRider and obj.getRider.getID == key ? ' class="m-table__row--primary"' }}>
+                                                                                                                <td>
+                                                                                                                    <div class="user-portrait-sm" style="background-image: url('{{ data['image_file'] ? "/uploads/" ~ data['image_file'] : "/assets/images/user.gif" }}');"></div>
+                                                                                                                </td>
+                                                                                                                <td> {{ data['first_name'] }} </td>
+                                                                                                                <td> {{ data['last_name'] }} </td>
+                                                                                                                <td> {{ data['contact_number'] }} </td>
+                                                                                                                <td> {{ data['plate_number'] }} </td>
+                                                                                                                <td> {{ data['status'] }} </td> 
+                                                                                                            </tr>
+                                                                                                        {% endfor %}
+                                                                                                    {% endif %}
+                                                                                                </tbody>
+                                                                                            </table>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
 									</div>
 								{% endif %}