diff --git a/css/leaflet-routing.css b/css/leaflet-routing.css
index cb0b24f..89a2b0e 100644
--- a/css/leaflet-routing.css
+++ b/css/leaflet-routing.css
@@ -1,5 +1,5 @@
 div.line-mouse-marker {
   background-color: #ffffff;
-  border: 2px solid black;
-  border-radius: 10px;
+  border: 4px solid rgba(0, 51, 255, 0.6);
+  border-radius: 8px;
 }
diff --git a/js/plugin/Routing.js b/js/plugin/Routing.js
index 2679f8f..6cc2c20 100644
--- a/js/plugin/Routing.js
+++ b/js/plugin/Routing.js
@@ -8,12 +8,23 @@ BR.Routing = L.Routing.extend({
             */
             draw: false
         },
-        snapping: null
+        snapping: null,
+        zIndexOffset: -2000
     },
 
     onAdd: function (map) {
         var container = L.Routing.prototype.onAdd.call(this, map);
 
+        // turn line mouse marker off while over waypoint marker
+        this.on('waypoint:mouseover', this._edit._segmentOnMouseout, this._edit);
+        this.on('waypoint:mouseout', this._edit._segmentOnMouseover, this._edit);
+
+        this._edit._mouseMarker.setIcon(L.divIcon({
+          className: 'line-mouse-marker'
+          ,iconAnchor: [8, 8] // size/2 + border/2
+          ,iconSize: [8, 8]
+        }));
+
         this._draw.on('enabled', function() {
             // crosshair cursor
             L.DomUtil.addClass(map.getContainer(), 'routing-draw-enabled');