diff --git a/webroot/monitor/infra/underlay/ui/js/monitor_infra_underlay.js b/webroot/monitor/infra/underlay/ui/js/monitor_infra_underlay.js
index a55556390..a360d1a4f 100644
--- a/webroot/monitor/infra/underlay/ui/js/monitor_infra_underlay.js
+++ b/webroot/monitor/infra/underlay/ui/js/monitor_infra_underlay.js
@@ -141,6 +141,10 @@ underlayModel.prototype.formTree = function() {
     this.setTree(tree);
 }
 
+underlayModel.prototype.getFlowPath = function() {
+    return this.flowPath;
+}
+
 underlayModel.prototype.getNodes = function() {
     return this.nodes;
 }
@@ -257,6 +261,14 @@ underlayModel.prototype.getVNsUnderVrouter = function(vrouter) {
     return this.getChildren(vrouter, "virtual-network");
 }
 
+underlayModel.prototype.setFlowPath = function(response) {
+    if(null !== response && typeof response !== "undefined") {
+        this.flowPath = response;
+    } else {
+        this.flowPath = {};
+    }
+}
+
 underlayModel.prototype.setTors = function(tors) {
     if(null !== tors && typeof tors !== "undefined" &&
         tors.length > 0) {
@@ -1719,8 +1731,8 @@ underlayView.prototype.highlightPath = function(response, data) {
     var elementMap = _this.getElementMap();
     var conElements = _this.getConnectedElements();
     var graph      = _this.getGraph();
-    var nodes      = response.nodes;
-    var links      = response.links;
+    var nodes      = ifNull(response.nodes,[]);
+    var links      = ifNull(response.links,[]);
     var adjList = this.prepareData("virtual-router");
     var nodeNames = [];
     for(var i=0; i<nodes.length; i++) {
@@ -1868,8 +1880,8 @@ underlayView.prototype.getMarkers = function() {
     marker.setAttribute('orient', 'auto');
     marker.setAttribute('markerWidth', '30');
     marker.setAttribute('markerHeight', '30');
-    marker.setAttribute('refX', '3');
-    marker.setAttribute('refY', '.5');
+    marker.setAttribute('refX', '2.5');
+    marker.setAttribute('refY', '3');
 
     var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     path.setAttribute('d', "M0,0 L0,3 L3,0");
@@ -1901,8 +1913,60 @@ underlayView.prototype.getMarkers = function() {
     path2.setAttribute('d', "M0,0 L3,3 L3,0");
     path2.setAttribute('style', "stroke:#85b9dd; fill:#85b9dd;");
     marker2.appendChild(path2);
+    
+    var marker3 = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
+    marker3.setAttribute('id', 'bezierUp');
+    marker3.setAttribute('orient', 'auto');
+    marker3.setAttribute('markerWidth', '30');
+    marker3.setAttribute('markerHeight', '30');
+    marker3.setAttribute('refX', '.5');
+    marker3.setAttribute('refY', '3.7');  
+
+    var path3 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path3.setAttribute('d', "M0,4 L4,0 L4,4");
+    path3.setAttribute('style', "stroke-width:0px;fill:#85b9dd;");
+    marker3.appendChild(path3);
+    
+    var marker4 = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
+    marker4.setAttribute('id', 'upDeviated');
+    marker4.setAttribute('orient', 'auto');
+    marker4.setAttribute('markerWidth', '30');
+    marker4.setAttribute('markerHeight', '30');
+    marker4.setAttribute('refX', '-1');
+    marker4.setAttribute('refY', '1');    
+
+    var path4 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path4.setAttribute('d', "M0,0 L3,3 L0,3");
+    path4.setAttribute('style', "stroke:#85b9dd; fill:#85b9dd;");
+    marker4.appendChild(path4);
+    
+    var marker5 = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
+    marker5.setAttribute('id', 'bezierDown');
+    marker5.setAttribute('orient', 'auto');
+    marker5.setAttribute('markerWidth', '30');
+    marker5.setAttribute('markerHeight', '30');
+    marker5.setAttribute('refX', '2.5');
+    marker5.setAttribute('refY', '.5');
+
+    var path5 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path5.setAttribute('d', "M0,0 L0,3 L3,0");
+    path5.setAttribute('style', "stroke:#85b9dd; fill:#85b9dd;");
+    marker5.appendChild(path5);
+    
+    var marker6 = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
+    marker6.setAttribute('id', 'downDeviated');
+    marker6.setAttribute('orient', 'auto');
+    marker6.setAttribute('markerWidth', '30');
+    marker6.setAttribute('markerHeight', '30');
+    marker6.setAttribute('refX', '5.5');
+    marker6.setAttribute('refY', '3');    
+
+    var path6 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path6.setAttribute('d', "M0,0 L3,3 L3,0");
+    path6.setAttribute('style', "stroke:#85b9dd; fill:#85b9dd;");
+    marker6.appendChild(path6);
 
-    return [marker, marker1, marker2];
+    return [marker, marker1, marker2, marker3, marker4, marker5, marker6];
 }
 
 underlayView.prototype.showChildrenOfType = function(parent, child_type) {
@@ -2432,6 +2496,9 @@ underlayView.prototype.renderTracePath = function(options) {
                     data: postData
                 }
             }).done(function(response) {
+                if(typeof underlayRenderer === 'object') {
+                    underlayRenderer.getModel().setFlowPath(response);
+                }
                 _this.highlightPath(response, {data: postData});
             }).fail(function(error,status) {
                 _this.resetTopology(false);
@@ -2520,6 +2587,9 @@ underlayView.prototype.renderTracePath = function(options) {
                     data: postData
                 }
             }).done(function(response) {
+                if(typeof underlayRenderer === 'object') {
+                    underlayRenderer.getModel().setFlowPath(response);
+                }
                 _this.highlightPath(response, {data: postData});
             }).fail(function(error,status) {
                 _this.resetTopology();
@@ -2970,16 +3040,47 @@ underlayView.prototype.showPath = function(connectionWrapIds, offsetWidth) {
         return;
     var hopLength = connectionWrapIds.length;
     for(var i=0;i<hopLength;i++) {
-        this.addOffsetPath(connectionWrapIds[i],offsetWidth);
+        var isDirectionCrt = this.checkLinkDirection(connectionWrapIds[i]);
+        this.addOffsetPath(connectionWrapIds[i],offsetWidth,isDirectionCrt);
     }
 }
 
-underlayView.prototype.addOffsetPath = function(connectionWrapId, offsetWidth) {
+underlayView.prototype.checkLinkDirection = function (connectionWrapId) {
+    var connectionWrapElem = $('#' + connectionWrapId),flowPath = {};
+    if(typeof underlayRenderer === 'object') {
+        flowPath = underlayRenderer.getModel().getFlowPath();
+    }
+    if(connectionWrapElem.length > 0) {
+        connectionWrapElem = $(connectionWrapElem[0]);
+    } else {
+        return;
+    }
+    var linkId = $(connectionWrapElem).parent().attr('model-id');
+    var linkAttrs = this.getGraph().getCell(linkId).attributes;
+    var sourceId = linkAttrs.source.id;
+    var destId = linkAttrs.target.id;
+    var srcEl = this.getGraph().getCell(sourceId);
+    var destEl = this.getGraph().getCell(destId);
+    var srcNodeName = getValueByJsonPath(srcEl,'attributes;nodeDetails;name','-');
+    var destNodeName = getValueByJsonPath(destEl,'attributes;nodeDetails;name','-');
+    var isDirectionCrt = false,links = getValueByJsonPath(flowPath,'links',[]);
+    for(var i = 0; i < links.length; i ++) {
+        if(srcNodeName == getValueByJsonPath(links[i],'endpoints;0','-') &&
+                destNodeName == getValueByJsonPath(links[i],'endpoints;1','-')) {
+            isDirectionCrt = true
+            break;
+        }
+    }
+    return isDirectionCrt;
+}
+
+underlayView.prototype.addOffsetPath = function(connectionWrapId, offsetWidth,isDirectionCrt) {
     var connectionWrapElem = $('#' + connectionWrapId);
-    if(connectionWrapElem.length > 0)
+    if(connectionWrapElem.length > 0) {
         connectionWrapElem = $(connectionWrapElem[0]);
-    else
+    } else {
         return;
+    }
     var path = connectionWrapElem.attr('d');
     var pathCoords;
     if(typeof(path) == 'string') {
@@ -2989,29 +3090,49 @@ underlayView.prototype.addOffsetPath = function(connectionWrapId, offsetWidth) {
             pathCoords = $.map(pathCoords,function(val) {
                 return parseFloat(val);
             });
-            var offsetPath; 
+            var offsetPath;
             if(offsetWidth < 0) {
                 offsetPath = connectionWrapElem.clone().prop('id',connectionWrapId + '_down');
             } else {
                 offsetPath = connectionWrapElem.clone().prop('id',connectionWrapId + '_up');
             }
             var curve = new Bezier(pathCoords);
-            offsetPath.attr('marker-end',"url(#head)");
+            var inclinedVerticalLine = false;
             if(curve._linear != true) {
+            	if(isDirectionCrt) {
+            	    offsetWidth = -offsetWidth;
+            	    offsetPath.attr('marker-start',"url(#bezierUp)");
+            	} else {
+            	    offsetPath.attr('marker-end',"url(#bezierDown)");
+            	}
+            	//Hack,till we fix the issue,links b/w TOR and SPINES are not vertical 
+            	if(Math.abs(pathCoords[pathCoords.length - 2] - pathCoords[0]) <= 10) {
+            	    inclinedVerticalLine = true;
+            	    if(isDirectionCrt) {
+            	        offsetPath.attr('marker-start','url(#upDeviated)');
+            	    } else {
+            	        offsetPath.attr('marker-end','url(#downDeviated)');
+            	    }
+            	}
                 var offsetPathStr = this.getOffsetBezierPath(pathCoords,offsetWidth);
                 var offsetPathCords = offsetPathStr.split(' ');
                 var offsetPathCordsLen = offsetPathCords.length;
                 var lastX = offsetPathCords[offsetPathCords.length - 2];
-                lastX = parseFloat(lastX) - 10;
-                offsetPathCords[offsetPathCords.length - 2] = lastX;
+                if(!isDirectionCrt && !inclinedVerticalLine) {
+                    lastX = parseFloat(lastX) - 10;
+                    offsetPathCords[offsetPathCords.length - 2] = lastX;
+                } else if (isDirectionCrt && !inclinedVerticalLine)  {
+                    lastX = parseFloat(lastX) + 10;
+                    offsetPathCords[offsetPathCords.length - 2] = lastX;
+                }
                 offsetPath.attr('d',offsetPathCords.join(' '));
             } else {
                 //Vertical line
                 if(pathCoords[0] == pathCoords[6]) {
                     //Pointing upwards/downwards
-                    if(pathCoords[1] > pathCoords[7]) {
+                    if(isDirectionCrt) {
                         offsetPath.attr('transform','translate(' + offsetWidth + ',0)');
-                        offsetPath.attr('marker-end',"url(#up)");
+                        offsetPath.attr('marker-start',"url(#up)");
                     } else {
                         offsetPath.attr('transform','translate(-' + offsetWidth + ',0)');
                         offsetPath.attr('marker-end',"url(#down)");
@@ -3023,10 +3144,10 @@ underlayView.prototype.addOffsetPath = function(connectionWrapId, offsetWidth) {
                 }
             }
             
-            if(offsetWidth < 0) {
-                offsetPath.attr('class','connection-wrap-down');
-            } else {
+            if(isDirectionCrt) {
                 offsetPath.attr('class','connection-wrap-up');
+            } else {
+                offsetPath.attr('class','connection-wrap-down');
             }
             offsetPath.insertAfter(connectionWrapElem);
         }
@@ -3059,8 +3180,6 @@ underlayView.prototype.destroy = function() {
     }
 }
 
-
-
 var underlayController = function (model, view) {
     this.model = model || new underlayModel({nodes:[], links:[]});
     this.view  = view  || new new underlayView(this._model);
@@ -3098,7 +3217,9 @@ underlayController.prototype.getModelData = function(cfg) {
                     //Enabling the below tabs only on success of ajax calls.
                     $("#underlay_tabstrip").tabs('enable');
                     //Rendering the first search flows tab
-                    underlayView.prototype.renderFlowRecords();
+                    if(typeof underlayRenderer === "object"){
+                        underlayRenderer.getView().renderFlowRecords();
+                    }
                 }
             },
             failureCallback : function (err) {