diff --git a/public/assets/js/map_mqtt.js b/public/assets/js/map_mqtt.js
index 250e00c6..65736b4c 100644
--- a/public/assets/js/map_mqtt.js
+++ b/public/assets/js/map_mqtt.js
@@ -36,6 +36,10 @@ class MapEventHandler {
             // subscribe to rider status
             console.log('subscribing to ' + my.options.channels.rider_status);
             my.mqtt.subscribe(my.options.channels.rider_status);
+
+            // subscribe to rider availability
+            console.log('subscribing to ' + my.options.channels.rider_availability);
+            my.mqtt.subscribe(my.options.channels.rider_availability);
         }
 
         if (my.options.track_jo) {
@@ -76,6 +80,17 @@ class MapEventHandler {
     handleRider(chan_split, payload) {
         console.log("rider message");
         switch (chan_split[2]) {
+             case "availability":
+                console.log("got availability for rider " + chan_split[1] + " - " + payload);
+                switch (payload) {
+                    case 'rider_offline':
+                        this.dashmap.removeRiderMarker(chan_split[1]);
+                        break;
+                    case 'rider_online':
+                        this.dashmap.putRiderAvailableMarker(chan_split[1], lat, lng);
+                        break;
+                }
+                break;
             case "location":
                 console.log("got location for rider " + chan_split[1] + " - " + payload);
                 var pl_split = payload.split(':');
@@ -88,7 +103,7 @@ class MapEventHandler {
                 var lat = parseFloat(pl_split[0]);
                 var lng = parseFloat(pl_split[1]);
 
-                // TODO: check if available or not
+                // TODO: cache rider availability status and check before displaying icon
                 this.dashmap.putRiderAvailableMarker(chan_split[1], lat, lng);
                 break;
             case "status":
diff --git a/src/Service/RiderAPIHandler/CMBRiderAPIHandler.php b/src/Service/RiderAPIHandler/CMBRiderAPIHandler.php
index 7ec2f592..066b76d4 100644
--- a/src/Service/RiderAPIHandler/CMBRiderAPIHandler.php
+++ b/src/Service/RiderAPIHandler/CMBRiderAPIHandler.php
@@ -281,6 +281,10 @@ class CMBRiderAPIHandler implements RiderAPIHandlerInterface
 
         $this->em->flush();
 
+        // send mqtt event to put rider on map
+        $channel = 'rider/' . $rider->getID() . '/availability';
+        $this->mclient->publish($channel, 'rider_online');
+
         return $data;
     }
 
@@ -301,6 +305,10 @@ class CMBRiderAPIHandler implements RiderAPIHandlerInterface
 
         $this->em->flush();
 
+        // send mqtt event to remove rider from map
+        $channel = 'rider/' . $rider->getID() . '/availability';
+        $this->mclient->publish($channel, 'rider_offline');
+
         return $data;
 
     }
diff --git a/templates/home.html.twig b/templates/home.html.twig
index ebe8cff3..8e5b1760 100644
--- a/templates/home.html.twig
+++ b/templates/home.html.twig
@@ -54,7 +54,8 @@ function initEventHandler(dashmap, icons, ssl) {
             'rider_status': 'rider/+/status',
             'jo_location': 'jo/+/location',
             'jo_status': 'jo/+/status',
-            'jo_origin': 'jo/+/origin'
+            'jo_origin': 'jo/+/origin',
+            'rider_availability': 'rider/+/availability'
         },
     };