diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
index 70c0413350..4366cb3f10 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
@@ -19,10 +19,11 @@
 
                 $timeout(function () {
 
-                    var element = angular.element(scope.element);
-                    var offset = element.offset();
-                    var width = element.outerWidth(true);
-                    var height = element.outerHeight(true);
+                    // The element to highlight
+                    var highlightElement = angular.element(scope.element);
+                    var offset = highlightElement.offset();
+                    var width = highlightElement.outerWidth(true);
+                    var height = highlightElement.outerHeight(true);
 
                     // Rounding numbers
                     var topDistance = offset.top.toFixed();
@@ -30,10 +31,18 @@
                     var leftDistance = offset.left.toFixed();
                     var leftAndWidth = (offset.left + width).toFixed();
 
-                    angular.element(".rect-left").css({ "width": leftDistance });
-                    angular.element(".rect-top").css({ "height": topDistance, "x": leftDistance });
-                    angular.element(".rect-bot").css({ "height": "100%", "y": topAndHeight, "x": leftDistance });
-                    angular.element(".rect-right").css({ "x": leftAndWidth, "y": topDistance, "height": height });
+                    // The four rectangles
+                    var rectTop = el.find(".umb-backdrop__rect--top");
+                    var rectRight = el.find(".umb-backdrop__rect--right");
+                    var rectBottom = el.find(".umb-backdrop__rect--bottom");
+                    var rectLeft = el.find(".umb-backdrop__rect--left");
+                    
+                    // Add the css
+                    rectTop.css({ "height": topDistance, "x": leftDistance });
+                    rectRight.css({ "x": leftAndWidth, "y": topDistance, "height": height });
+                    rectBottom.css({ "height": "100%", "y": topAndHeight, "x": leftDistance });                    
+                    rectLeft.css({ "width": leftDistance });
+
                 });
 
             }
@@ -47,9 +56,13 @@
                 setHighlight();
             }));
 
-            $(window).on('resize.umbBackdrop', resize);
+            $(window).on("resize.umbBackdrop", resize);
 
-            scope.$on('$destroy', function () {
+            scope.$on("$destroy", function () {
+                // unbind watchers
+                for (var e in events) {
+                    events[e]();
+                }
                 $(window).off("resize.umbBackdrop");
             });
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 1b9828e8ab..47c7f8e5b2 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -82,6 +82,7 @@
 
 // Umbraco Components
 @import "components/application/umb-tour.less";
+@import "components/application/umb-backdrop.less";
 @import "components/editor.less";
 @import "components/overlays.less";
 @import "components/card.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less
new file mode 100644
index 0000000000..5a54eaeed0
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less
@@ -0,0 +1,16 @@
+.umb-backdrop {
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+}
+
+.umb-backdrop__rect {
+    position: absolute;
+    pointer-events: all;
+    opacity: 0.5;
+    margin: 0;
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less
index ab4f1abdb8..50d1aec360 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less
@@ -46,22 +46,4 @@
 .umb-tour__content {
     margin-bottom: 20px;
     line-height: 24px;
-}
-
-// SVG Backdrop
-.umb-tour__canvas {
-    height: 100%;
-    width: 100%;
-    position: fixed;
-    z-index: 9999;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-}
-
-.umb-tour__rect {
-    position: absolute;
-    pointer-events: all;
-    opacity: 0.5;
-    margin: 0;
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html
index 6cb587c63c..220a4daa2f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html
@@ -1,15 +1,15 @@
 <div>
     <!-- Backdrop with highlight -->
-    <svg ng-if="element" class="umb-tour__canvas" xmlns="http://www.w3.org/2000/svg" version="1.1">
-        <rect class="rect-left umb-tour__rect" height="100%"/>
-        <rect class="rect-top umb-tour__rect" width="100%"/>
-        <rect class="rect-bot umb-tour__rect" width="100%"/>
-        <rect class="rect-right umb-tour__rect" height="100%" width="100%"/>
+    <svg ng-if="element" class="umb-backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1">
+        <rect class="umb-backdrop__rect umb-backdrop__rect--left" height="100%"/>
+        <rect class="umb-backdrop__rect umb-backdrop__rect--top" width="100%"/>
+        <rect class="umb-backdrop__rect umb-backdrop__rect--bottom" width="100%"/>
+        <rect class="umb-backdrop__rect umb-backdrop__rect--right" height="100%" width="100%"/>
     </svg>
 
     <!-- Full screen backdrop -->
-    <svg ng-if="!element" class="umb-tour__canvas" xmlns="http://www.w3.org/2000/svg" version="1.1">
-        <rect  class="umb-tour__rect" height="100%" width="100%"/>
+    <svg ng-if="!element" class="umb-backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1">
+        <rect  class="umb-backdrop__rect" height="100%" width="100%"/>
     </svg>
 
 </div>
\ No newline at end of file