diff --git a/config/routes/job_order.yaml b/config/routes/job_order.yaml
index be379be8..139b208f 100644
--- a/config/routes/job_order.yaml
+++ b/config/routes/job_order.yaml
@@ -195,3 +195,9 @@ jo_onestep_edit_submit:
     path: /job-order/onestep/{id}/edit
     controller: App\Controller\JobOrderController::oneStepEditSubmit
     methods: [POST]
+
+jo_ajax_popup:
+    path: /job-order/{id}/popup
+    controller: App\Controller\JobOrderController::popupInfo
+    methods: [GET]
+
diff --git a/src/Controller/CustomerController.php b/src/Controller/CustomerController.php
index 5c15bfaa..7421fec0 100644
--- a/src/Controller/CustomerController.php
+++ b/src/Controller/CustomerController.php
@@ -5,6 +5,9 @@ namespace App\Controller;
 use App\Ramcar\CrudException;
 
 use App\Service\CustomerHandlerInterface;
+use App\Entity\Customer;
+
+use Doctrine\ORM\EntityManagerInterface;
 
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
diff --git a/src/Controller/JobOrderController.php b/src/Controller/JobOrderController.php
index 4a5a7bf3..039ea37d 100644
--- a/src/Controller/JobOrderController.php
+++ b/src/Controller/JobOrderController.php
@@ -8,6 +8,7 @@ use App\Ramcar\InvoiceCriteria;
 use App\Entity\CustomerVehicle;
 use App\Entity\Promo;
 use App\Entity\Battery;
+use App\Entity\JobOrder;
 
 use App\Service\InvoiceGeneratorInterface;
 use App\Service\JobOrderHandlerInterface;
@@ -20,6 +21,8 @@ use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Bundle\FrameworkBundle\Controller\Controller;
 
+use Sensio\Bundle\FrameworkExtraBundle\Configuration\ParamConverter;
+
 use Catalyst\MenuBundle\Annotation\Menu;
 
 class JobOrderController extends Controller
@@ -908,4 +911,15 @@ class JobOrderController extends Controller
             'success' => 'Changes have been saved!'
         ]);
     }
+
+    /**
+     * @ParamConverter("jo", class="App\Entity\JobOrder")
+     */
+    public function popupInfo(JobOrder $jo)
+    {
+        if ($jo == null)
+            return new Response('No job order data');
+
+        return $this->render('job-order/popup.html.twig', [ 'jo' => $jo ]);
+    }
 }
diff --git a/templates/home.html.twig b/templates/home.html.twig
index 88ae8aa2..f55fe863 100644
--- a/templates/home.html.twig
+++ b/templates/home.html.twig
@@ -22,7 +22,8 @@ function initMap() {
     var default_lng = {% trans %}default_long{% endtrans %};
 
     var rider_popup_url = '/riders/[id]/popup';
-    map = mapCreate('dashboard_map', default_lat, default_lng, 'road', 13, rider_popup_url);
+    var cust_popup_url = '/job-order/[id]/popup';
+    map = mapCreate('dashboard_map', default_lat, default_lng, 'road', 13, rider_popup_url, cust_popup_url);
 }
 </script>
 
diff --git a/templates/job-order/popup.html.twig b/templates/job-order/popup.html.twig
new file mode 100644
index 00000000..509c7296
--- /dev/null
+++ b/templates/job-order/popup.html.twig
@@ -0,0 +1,8 @@
+{% set cust = jo.getCustomer %}
+{% set cv = jo.getCustomerVehicle %}
+<strong>{{ cust.getNameDisplay }}</strong><br>
+{{ cv.getPlateNumber }}<br>
+<a href="">Job Order #{{ jo.getID }}</a><br>
+{{ jo.getServiceTypeName }}<br>
+{{ jo.getStatusText }}
+
diff --git a/templates/map/initOpenStreetMap.js b/templates/map/initOpenStreetMap.js
index 469fffa3..358b91d4 100644
--- a/templates/map/initOpenStreetMap.js
+++ b/templates/map/initOpenStreetMap.js
@@ -6,8 +6,9 @@
 <script>
 
 var rider_markers = {};
+var cust_markers = {};
 
-function mapCreate(div_id, center_lat, center_lng, map_type, zoom, rider_popup_url) {
+function mapCreate(div_id, center_lat, center_lng, map_type, zoom, rider_popup_url, cust_popup_url) {
     var map = L.map(div_id).setView(
         [center_lat, center_lng],
         zoom
@@ -80,27 +81,25 @@ function mapCreate(div_id, center_lat, center_lng, map_type, zoom, rider_popup_u
 
             // create rider markers
             if (rider_data['has_jo']) {
-                /*
                 var jo_data = rider_data['jo'];
-                rider_popup += '<br>';
-                rider_popup += '<a href="' + jo_data['url'] + '">Job Order #' + jo_data['id'] + '</a><br>';
-                rider_popup += jo_data['stype'] + '<br>';
-                rider_popup += jo_data['status'] + '<br><br>';
-                rider_popup += jo_data['cname'] + '<br>';
-                rider_popup += jo_data['plate'];
-
-                var cust_popup = '<strong>' + jo_data['cname'] + '</strong><br>';
-                cust_popup += jo_data['plate'] + '<br>';
-                cust_popup += '<a href="' + jo_data['url'] + '">Job Order #' + jo_data['id'] + '</a><br>';
-                cust_popup += jo_data['stype'] + '<br>';
-                cust_popup += jo_data['status'];
-                */
 
                 // rider_markers[rider_id] = L.marker([lat, long], { icon: icon_rider_active_jo }).bindPopup(rider_popup);
                 rider_markers[rider_id] = L.marker([lat, long], { icon: icon_rider_active_jo }).bindPopup('Loading...');
-                var cust_marker = L.marker([clat, clong], { icon: icon_customer }).bindPopup('Loading...');
-                lg_cust.addLayer(cust_marker);
+                // var cust_marker = L.marker([clat, clong], { icon: icon_customer }).bindPopup('Loading...');
+                cust_markers[jo_data['id']] = L.marker([clat, clong], { icon: icon_customer }).bindPopup('Loading...');
+                lg_cust.addLayer(cust_markers[jo_data['id']]);
                 lg_jo_rider.addLayer(rider_markers[rider_id]);
+
+                // customer popup ajax
+                cust_markers[jo_data['id']].on('click', function(e) {
+                    var popup = e.target.getPopup();
+                    var url = cust_popup_url.replace('[id]', jo_data['id']);
+                    console.log(url);
+                    $.get(url).done(function(data) {
+                        popup.setContent(data);
+                        popup.update();
+                    });
+                });
             } else {
                 // rider_markers[rider_id]= L.marker([lat, long], { icon: icon_rider_available }).bindPopup(rider_popup);
                 rider_markers[rider_id]= L.marker([lat, long], { icon: icon_rider_available }).bindPopup('Loading...');