diff --git a/src/Controller/HubController.php b/src/Controller/HubController.php
index ffce16f6..aeaaec7a 100644
--- a/src/Controller/HubController.php
+++ b/src/Controller/HubController.php
@@ -314,6 +314,7 @@ class HubController extends Controller
                 'name' => $hub->getName(),
                 'branch' => $hub->getBranch(),
                 'cnum' => $hub->getContactNumbers(),
+                'distance' => $hub_res['distance'],
             ];
         }
 
diff --git a/src/Service/MapTools.php b/src/Service/MapTools.php
index f02618ba..6aa5848c 100644
--- a/src/Service/MapTools.php
+++ b/src/Service/MapTools.php
@@ -84,10 +84,23 @@ class MapTools
         {
             //error_log($row[0]->getName() . ' - ' . $row['dist']);
             $hubs[] = $row[0];
+
+            // get coordinates of hub
+            $hub_coordinates = $row[0]->getCoordinates();
+
+            $cust_lat = $point->getLatitude();
+            $cust_lng = $point->getLongitude();
+
+            $hub_lat = $hub_coordinates->getLatitude();
+            $hub_lng = $hub_coordinates->getLongitude();
+
+            // get distance in kilometers from customer point to hub point
+            $dist = $this->distance($cust_lat, $cust_lng, $hub_lat, $hub_lng);
+
             $final_data[] = [
                 'hub' => $row[0],
                 'db_distance' => $row['dist'],
-                'distance' => 0,
+                'distance' => $dist,
                 'duration' => 0,
             ];
         }
@@ -135,4 +148,18 @@ class MapTools
         return $final_data;
         */
     }
+
+    protected function distance($lat1, $lon1, $lat2, $lon2) 
+    {
+        if (($lat1 == $lat2) && ($lon1 == $lon2)) 
+            return 0;
+    
+        $theta = $lon1 - $lon2;
+        $dist = sin(deg2rad($lat1)) * sin(deg2rad($lat2)) +  cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta));
+        $dist = acos($dist);
+        $dist = rad2deg($dist);
+        $miles = $dist * 60 * 1.1515;
+
+        return round(($miles * 1.609344), 1);
+    }
 }
diff --git a/templates/job-order/cmb.form.onestep.html.twig b/templates/job-order/cmb.form.onestep.html.twig
index 8eced3cc..8e4ac45d 100644
--- a/templates/job-order/cmb.form.onestep.html.twig
+++ b/templates/job-order/cmb.form.onestep.html.twig
@@ -381,18 +381,21 @@
                                                         <th>Hub</th>
                                                         <th>Branch</th>
                                                         <th>Contact Numbers</th>
+                                                        <th>Distance in KM</th>
                                                         <th>Action</th>
                                                     </tr>
                                                 </thead>
                                                 <tbody id="nearest_hubs">
-                                                {% if mode in ['onestep-edit'] %}
+                                                <!-- {% 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>
+                                                        <td></span></td>
+                                                        <td></td>
                                                     {% endfor %}
-                                                {% endif %}
+                                                {% endif %} -->
                                                 </tbody>
                                             </table>
                                         </div>
@@ -662,6 +665,7 @@ $(function() {
                     hub_table += '<td>' + hub['name'] + '</td>';
                     hub_table += '<td>' + hub['branch'] + '</td>';
                     hub_table += '<td>' + hub['cnum'] + '</td>';
+                    hub_table += '<td>' + hub['distance'] + '</td>';
                     hub_table += '<td></td>';
                     hub_table += '</tr>';
                 }
@@ -673,13 +677,30 @@ $(function() {
 
         {% if mode in ['onestep-edit'] %}
             // 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 (selected_hub == hub['id']) {
+                        hub_table += '<tr data-id=' + hub['id'] + ' class="m-table__row--primary"' + '>';
+                    }
+                    else {
+                        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>' + hub['distance'] + '</td>';
+                    hub_table += '<td></td>';
+                    hub_table += '</tr>';
+
                 }
+
+                $('#nearest_hubs').html(hub_table);
             });
         {% endif %}
 
diff --git a/templates/job-order/form.onestep.html.twig b/templates/job-order/form.onestep.html.twig
index 120943ad..8e4ac45d 100644
--- a/templates/job-order/form.onestep.html.twig
+++ b/templates/job-order/form.onestep.html.twig
@@ -36,7 +36,9 @@
                                 <div class="m-form__section m-form__section--first">
                                     <div class="form-group m-form__group row">
                                         <div class="col-lg-6">
-                                            <label data-field="customer_vehicle">Select a vehicle:</label>
+                                            <label data-field="customer_vehicle">Select a vehicle:
+                                                <span style="color:red"> *</span>
+                                            </label>
                                             <select class="form-control m-select2" id="customer-vehicle" name="customer_vehicle"></select>
                                             <div class="form-control-feedback hide" data-field="customer_vehicle"></div>
                                         </div>
@@ -326,7 +328,9 @@
                                 </div>
                                 <div class="form-group m-form__group row">
                                     <div class="col-lg-6">
-                                        <label data-field="delivery_address">Delivery Address</label>
+                                        <label data-field="delivery_address">Delivery Address
+                                            <span style="color:red"> *</span>
+                                        </label>
                                         <textarea name="delivery_address" class="form-control m-input" rows="4">{{ obj.getDeliveryAddress }}</textarea>
                                         <div class="form-control-feedback hide" data-field="delivery_address"></div>
                                     </div>
@@ -338,7 +342,9 @@
                                 </div>
                                 <div class="form-group m-form__group row">
                                     <div class="col-lg-12">
-                                        <label name="coordinates" data-field="coordinates">Coordinates</label>
+                                        <label name="coordinates" data-field="coordinates">Coordinates
+                                            <span style="color:red"> *</span>
+                                        </label>
                                         <div class="form-control-feedback hide" data-field="coordinates"></div>
                                         <input type="hidden" id="map_lat" name="coord_lat" value="">
                                         <input type="hidden" id="map_lng" name="coord_lng" value="">
@@ -363,7 +369,9 @@
                                 </div>
                                 <div class="form-group m-form__group row">
                                     <div class="col-lg-12">
-                                        <label name="hub" data-field="hub">Click on a row to select a hub</label>
+                                        <label name="hub" data-field="hub">Click on a row to select a hub
+                                            <span style="color:red"> *</span>
+                                        </label>
                                         <div class="form-control-feedback hide" data-field="hub"></div>
                                         <input type="hidden" id="hub-field" name="hub_id" value="">
                                         <div class="table-frame" data-name="hub">
@@ -372,25 +380,22 @@
                                                     <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>Distance in KM</th>
                                                         <th>Action</th>
                                                     </tr>
                                                 </thead>
                                                 <tbody id="nearest_hubs">
-                                                {% if mode in ['onestep-edit'] %}
+                                                <!-- {% 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>
+                                                        <td></span></td>
+                                                        <td></td>
                                                     {% endfor %}
-                                                {% endif %}
+                                                {% endif %} -->
                                                 </tbody>
                                             </table>
                                         </div>
@@ -405,7 +410,9 @@
                                 </div>
                                 <div class="form-group m-form__group row">
                                     <div class="col-lg-12">
-                                        <label name="rider" data-field="rider">Click on a row to select a rider</label>
+                                        <label name="rider" data-field="rider">Click on a row to select a rider
+                                            <span style="color:red"> *</span>
+                                        </label>
                                         <div class="form-control-feedback hide" data-field="rider"></div>
                                         <input type="hidden" id="rider-field" name="rider_id" value="">
                                         <div class="table-frame" data-name="rider">
@@ -658,24 +665,42 @@ $(function() {
                     hub_table += '<td>' + hub['name'] + '</td>';
                     hub_table += '<td>' + hub['branch'] + '</td>';
                     hub_table += '<td>' + hub['cnum'] + '</td>';
+                    hub_table += '<td>' + hub['distance'] + '</td>';
                     hub_table += '<td></td>';
                     hub_table += '</tr>';
                 }
 
                 $('#nearest_hubs').html(hub_table);
-
+            
             });
         {% endif %}
 
         {% if mode in ['onestep-edit'] %}
             // 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 (selected_hub == hub['id']) {
+                        hub_table += '<tr data-id=' + hub['id'] + ' class="m-table__row--primary"' + '>';
+                    }
+                    else {
+                        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>' + hub['distance'] + '</td>';
+                    hub_table += '<td></td>';
+                    hub_table += '</tr>';
+
                 }
+
+                $('#nearest_hubs').html(hub_table);
             });
         {% endif %}