diff --git a/templates/job-order/cmb.form.onestep.html.twig b/templates/job-order/cmb.form.onestep.html.twig
index 1b043791..947de9c5 100644
--- a/templates/job-order/cmb.form.onestep.html.twig
+++ b/templates/job-order/cmb.form.onestep.html.twig
@@ -380,17 +380,19 @@
                                                     <tr>
                                                         <th>Hub</th>
                                                         <th>Branch</th>
-                                                        <!--
-                                                        <th class="text-right">Distance</th>
-                                                        <th class="text-right">Travel Time</th>
-                                                        <th class="text-right">Available Riders</th>
-                                                        <th class="text-right">Jobs For Assignment</th>
-                                                        -->
                                                         <th>Contact Numbers</th>
                                                         <th>Action</th>
                                                     </tr>
                                                 </thead>
                                                 <tbody id="nearest_hubs">
+                                                {% if mode in ['onestep-edit'] %}
+                                                    {% for hub in hubs %}
+                                                        <tr data-id="{{ hub.hub.getID }}"{{ obj.getHub and obj.getHub.getID == hub.hub.getID ? ' class="m-table__row--primary"' }}>
+                                                        <td>{{ hub.hub.getName }}</td>
+                                                        <td>{{ hub.hub.getBranch }}</td>
+                                                        <td>{{ hub.hub.getContactNumbers }}</td>
+                                                    {% endfor %}
+                                                {% endif %}
                                                 </tbody>
                                             </table>
                                         </div>
@@ -422,6 +424,24 @@
                                                     </tr>
                                                 </thead>
                                                 <tbody id="riders">
+                                                {% if mode in ['onestep-edit'] %}
+                                                    {% set avail_riders = obj.getHub.getAvailableRiders|default([]) %}
+                                                    <tr class="placeholder-row{{ obj.getHub and avail_riders|length > 0 ? ' hide' }}">
+                                                        <td colspan="5">
+                                                            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>{{ rider.getFirstName }}</td>
+                                                                <td>{{ rider.getLastName }}</td>
+                                                                <td>{{ rider.getContactNumber }}</td>
+                                                                <td>{{ rider.getPlateNumber }}</td>
+                                                        {% endfor %}
+                                                    {% endif %}
+                                                {% endif %}
                                                 </tbody>
                                             </table>
                                         </div>
@@ -623,25 +643,28 @@ $(function() {
 
         var marker = L.marker([lat, lng], { icon: icon_customer });
 
-        // get nearest hubs ajax
-        var hub_table = '';
-        $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
-            var hubs = data['hubs'];
-            for (i in hubs) {
-                var hub = hubs[i];
-                var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
-                hubLayerGroup.addLayer(hub_marker);
+        {% if mode in ['onestep'] %}
+            // get nearest hubs ajax
+            var hub_table = '';
+            $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
+                var hubs = data['hubs'];
+                for (i in hubs) {
+                    var hub = hubs[i];
+                    var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
+                    hubLayerGroup.addLayer(hub_marker);
 
-                hub_table += '<tr data-id=' + hub['id'] + '>';
-                hub_table += '<td>' + hub['name'] + '</td>';
-                hub_table += '<td>' + hub['branch'] + '</td>';
-                hub_table += '<td>' + hub['cnum'] + '</td>';
-                hub_table += '<td></td>';
-                hub_table += '</tr>';
-            }
+                    hub_table += '<tr data-id=' + hub['id'] + '>';
+                    hub_table += '<td>' + hub['name'] + '</td>';
+                    hub_table += '<td>' + hub['branch'] + '</td>';
+                    hub_table += '<td>' + hub['cnum'] + '</td>';
+                    hub_table += '<td></td>';
+                    hub_table += '</tr>';
+                }
 
-            $('#nearest_hubs').html(hub_table);
-        });
+                $('#nearest_hubs').html(hub_table);
+            
+            });
+        {% endif %}
 
         // add marker to layer group
         markerLayerGroup.addLayer(marker);
@@ -776,6 +799,8 @@ $(function() {
     {% if mode in ['onestep-edit'] %}
         var lat = {{ obj.getCoordinates.getLatitude }};
         var lng = {{ obj.getCoordinates.getLongitude }};
+        var hub = {{ obj.getHub.getID }};
+        var rider = {{ obj.getRider.getID }};
 
         selectPoint(lat, lng);
 
diff --git a/templates/job-order/form.onestep.html.twig b/templates/job-order/form.onestep.html.twig
index f7a60b1f..84bc8eac 100644
--- a/templates/job-order/form.onestep.html.twig
+++ b/templates/job-order/form.onestep.html.twig
@@ -383,6 +383,14 @@
                                                     </tr>
                                                 </thead>
                                                 <tbody id="nearest_hubs">
+                                                {% if mode in ['onestep-edit'] %}
+                                                    {% for hub in hubs %}
+                                                        <tr data-id="{{ hub.hub.getID }}"{{ obj.getHub and obj.getHub.getID == hub.hub.getID ? ' class="m-table__row--primary"' }}>
+                                                        <td>{{ hub.hub.getName }}</td>
+                                                        <td>{{ hub.hub.getBranch }}</td>
+                                                        <td>{{ hub.hub.getContactNumbers }}</td>
+                                                    {% endfor %}
+                                                {% endif %}
                                                 </tbody>
                                             </table>
                                         </div>
@@ -412,6 +420,24 @@
                                                     </tr>
                                                 </thead>
                                                 <tbody id="riders">
+                                                {% if mode in ['onestep-edit'] %}
+                                                    {% set avail_riders = obj.getHub.getAvailableRiders|default([]) %}
+                                                    <tr class="placeholder-row{{ obj.getHub and avail_riders|length > 0 ? ' hide' }}">
+                                                        <td colspan="5">
+                                                            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>{{ rider.getFirstName }}</td>
+                                                                <td>{{ rider.getLastName }}</td>
+                                                                <td>{{ rider.getContactNumber }}</td>
+                                                                <td>{{ rider.getPlateNumber }}</td>
+                                                        {% endfor %}
+                                                    {% endif %}
+                                                {% endif %}
                                                 </tbody>
                                             </table>
                                         </div>
@@ -607,6 +633,7 @@ $(function() {
 
     function selectPoint(lat, lng)
     {
+        alert('selectPoint');
         // clear markers
         markerLayerGroup.clearLayers();
         hubLayerGroup.clearLayers();