diff --git a/platform/features/timeline/res/templates/timeline.html b/platform/features/timeline/res/templates/timeline.html
index 2a87921f29..942a3f0e8f 100644
--- a/platform/features/timeline/res/templates/timeline.html
+++ b/platform/features/timeline/res/templates/timeline.html
@@ -77,7 +77,8 @@
         <mct-splitter></mct-splitter>
 
         <!-- BOTTOM PANE RESOURCE LEGEND -->
-        <div mct-resource-graph-drop class="split-pane-component abs l-timeline-pane t-pane-h l-pane-btm s-timeline-resource-legend l-timeline-resource-legend" ng-class="{'drop-over': resourceGraphLegendropOver }">
+        <div mct-resource-graph-drop
+             class="split-pane-component abs l-timeline-pane t-pane-h l-pane-btm s-timeline-resource-legend l-timeline-resource-legend">
             <div class="l-title s-title">{{ngModel.title}}Resource Graph Legend</div>
             <div class="l-legend-items legend">
                 <mct-include key="'timeline-legend-item'"
diff --git a/platform/features/timeline/src/directives/MCTResourceGraphDrop.js b/platform/features/timeline/src/directives/MCTResourceGraphDrop.js
index 6dbb4437b7..86ccabb2e6 100644
--- a/platform/features/timeline/src/directives/MCTResourceGraphDrop.js
+++ b/platform/features/timeline/src/directives/MCTResourceGraphDrop.js
@@ -36,8 +36,15 @@ define(
             function link(scope, element, attrs) {
                 // Handle dragover
                 element.on('dragover', function (e) {
-                    scope.resourceGraphLegendropOver = true;
-                    scope.$apply();
+                    var swimlane = dndService.getData(
+                        SwimlaneDragConstants.TIMELINE_SWIMLANE_DRAG_TYPE
+                    );
+
+                    if (typeof swimlane !== "undefined" && !swimlane.graph()) {
+                        element.addClass('drop-over');
+                        scope.$apply();
+                        e.preventDefault();
+                    }
                 });
                 // Handle drops
                 element.on('drop', function (e) {
@@ -45,15 +52,19 @@ define(
                         SwimlaneDragConstants.TIMELINE_SWIMLANE_DRAG_TYPE
                     );
 
+                    element.removeClass('drop-over');
+
                     // Only toggle if the graph isn't already set
-                    if (!swimlane.graph()) {
+                    if (typeof swimlane !== "undefined" && !swimlane.graph()) {
                         swimlane.toggleGraph();
+                        e.preventDefault();
                     }
                 });
                 // Clear highlights when drag leaves this swimlane
-                element.on('dragleave', function () {
-                    scope.resourceGraphLegendropOver = false;
+                element.on('dragleave', function (e) {
+                    element.removeClass('drop-over');
                     scope.$apply();
+                    e.preventDefault();
                 });
             }