diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
index 2d44b3e9d..ee36b1f5d 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Scripts/orchard-designertools-shapetracing.js
@@ -20,7 +20,7 @@
 
                     for (i = 0; i < classes.length; i++) {
                         if (classes[i].indexOf("zone-") === 0) {
-                            $(this).append('<div class="zone-name">' + classes[i].substr(classes[i].indexOf("-")+1) + '</div>');
+                            $(this).append('<div class="zone-name">' + classes[i].substr(classes[i].indexOf("-") + 1) + '</div>');
                         }
                     }
 
@@ -39,5 +39,43 @@
                 _this.prev().show("fast", function () { _this.addClass(open).html("&laquo;"); });
             }
         });
+
+        $("div.shape-tracing.wrapper").click(function (e) {
+            var _this = $(this);
+            var classes = $(this).attr("class").split(' ');
+            e.stopPropagation();
+            for (i = 0; i < classes.length; i++) {
+                if (classes[i].indexOf("shapeId-") === 0) {
+                    var shapeId = classes[i].substr(classes[i].indexOf("-") + 1);
+                    $("div.shape-tracing.wrapper").toggleClass('selected', false);
+                    _this.toggleClass('selected', true);
+                    $("div.shape-tracing.meta").toggle(false);
+                    $("div.shape-tracing.meta.shapeId-" + shapeId).toggle(true);
+                }
+            }
+        });
+
+        /* tabs */
+        function bindTab(selector) {
+            $('li' + selector).click(function () {
+                var _this = $(this);
+
+                // toggle the selected class on the tab li
+                _this.parent().children('li').toggleClass('selected', false);
+                _this.toggleClass('selected', true);
+
+                // hide all tabs and display the selected one
+                var wrapper = _this.parent().parent().first();
+                wrapper.children('.content').children().toggle(false);
+                wrapper.children('.content').children('div' + selector).toggle(true);
+            });
+        }
+
+        bindTab('.shape');
+        bindTab('.model');
+        bindTab('.placement');
+        bindTab('.templates');
+        bindTab('.source');
+        bindTab('.html');
     });
 })(jQuery);
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css
index 1f66e6c95..91168a8a9 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Styles/orchard-designertools-shapetracing.css
@@ -12,9 +12,6 @@
     position:fixed;
     top:0;
 }
-#debug-control :hover {
-    color:yellow;
-}
 #debug-control .debug-active {
     color:Lime;
 }
@@ -48,30 +45,27 @@
     min-width:20px;
     min-height:20px;
 }
-.debug-shapes  body
-{
+
+.debug-shapes  body {
     margin-top:25px;
 }
 
-.debug-shapes .shape-tracing .wrapper :hover {
-    background:#E0E9EE;
-}
-
-.shape-tracing .meta {
-    display:none;
-}
-
-.debug-shapes .shape-tracing .meta  {
+.debug-shapes div.shape-tracing.meta  {
     clear:both;
     display:block;
-    background:#cfc;
+    background:#ccc;
     font-size:9pt;
     font-family:Segoe;
     color:black;
     margin-top:5px;
+    position:fixed;
+    left: 0px;
+    bottom: 0px;
+    width:100%;
+    z-index:999;
 }
 
-.debug-zones .Zone { 
+.debug-zones .shapeType-Zone { 
     border:1px dashed grey;
     margin:5px;
     position: relative;
@@ -84,10 +78,6 @@
     opacity: 0.7;    
 }
 
-.debug-shapes .Zone :hover {
-    background:#E0E9EE;
-}
-
 .meta .shape {
     color:black;
 }
@@ -98,4 +88,53 @@
 
 .meta .wrappers {
     color:green;
-}
\ No newline at end of file
+}
+
+.debug-shapes div.wrapper.selected  {
+    background-color:#BAFFC3;
+}
+
+/* tabs */
+
+ul.debuggerMenu { margin:8px 0 -8px 0; }
+
+.debuggerMenu li {
+    color:#4053DE;
+    display: inline;
+    font-size:15px;
+    line-height:32px;
+}
+.debuggerMenu li {
+    margin:0 2px;
+    padding: 8px 18px 7px 18px;
+}
+.debuggerMenu li.middle, .debuggerMenu li.first, .debuggerMenu li.last {
+    border:1px solid #E4E5E6;
+    border-bottom:none;
+    background-color: #F5F5F5;
+}
+.debuggerMenu li.first {
+    margin-left:16px;
+}
+.debuggerMenu li.selected {
+    background-color: #fff;
+}
+.debuggerMenu li.selected, .debuggerMenu li:hover {
+    background-color: #fff;
+}
+.debuggerMenu li.selected a {
+    color: #3A822E;
+}
+
+.debug-shapes div.shape-tracing.meta .content {
+    background-color: #fff;
+    padding: 20px;
+    margin:8px 0 0 0;
+    border: 1px solid #e4e5e6;
+    height:10em;
+    overflow:scroll;
+     /*CSS3 properties*/
+     border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+}
diff --git a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracing.Wrapper.cshtml b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracing.Wrapper.cshtml
index 761b1face..2ac94ade1 100644
--- a/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracing.Wrapper.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.DesignerTools/Views/ShapeTracing.Wrapper.cshtml
@@ -4,8 +4,7 @@
 @using System.Xml;
 
 @{
-    Script.Require("jQuery");
-    Script.Include("tooltip.min.js");
+    Script.Require("jQueryUI_Tabs");
     Script.Include("orchard-designertools-shapetracing.js");
     Style.Include("orchard-designertools-shapetracing.css");
 
@@ -13,6 +12,7 @@
     var shapeTable = workContext.Resolve<IShapeTableManager>().GetShapeTable(workContext.CurrentTheme.Id);
     var descriptor = shapeTable.Descriptors[Model.Metadata.Type];
 }
+
 @functions {
     string FormatShapeFilename(string type, string themeId) {
         return "~/Themes/" + themeId + "/Views/" + type.Replace("__", "-").Replace("_", ".") + ".cshtml";
@@ -28,34 +28,66 @@
     }
 }
 
-<div class="shape-tracing wrapper @Model.Metadata.Type">
-    @Display(Model.Metadata.ChildContent)
+<div class="shape-tracing wrapper shapeType-@Model.Metadata.Type shapeId-@Model.GetHashCode() " title="@Model.Metadata.Type">
+	@Display(Model.Metadata.ChildContent)
 
-    <div class="shape-tracing meta">
-        <div class="shape">
-            Shape: @Model.Metadata.Type <br />
-            Definition: @descriptor.BindingSource  <br />
-            Display Type: @(Model.Metadata.DisplayType  ?? "n/a")<br />
-            Position: @(Model.Metadata.Position ?? "n/a") <br />
-            Placement Source: @(Model.Metadata.PlacementSource ?? "n/a") <br />
-        </div>
+    <div class="shape-tracing meta shapeId-@Model.GetHashCode()" style="display:none">
+		<ul class="debuggerMenu">
+			<li class="shape selected first"><a href="#">Shape</a></li>
+			<li class="model middle"><a href="#">Model</a></li>
+			<li class="placement middle"><a href="#">Placement</a></li>
+			<li class="templates middle"><a href="#">Templates</a></li>
+			<li class="source middle"><a href="#">Source</a></li>
+			<li class="html last"><a href="#">HTML</a></li>
+		</ul>
 
-        <div class="alternates">
-            @foreach(var alternate in Model.Metadata.Alternates) {
-                var formatted = @FormatShapeFilename(alternate, workContext.CurrentTheme.Id);
-                <div>@formatted</div>
-            }
-        </div>
-        <div class="wrappers">
-            @foreach(var wrapper in Model.Metadata.Wrappers) {
-                if(wrapper != "ShapeTracing_Wrapper") {
-                    var formatted = @FormatShapeFilename(wrapper, workContext.CurrentTheme.Id);
-                    <div>@formatted</div>
-                }
-            }
-        </div>
-        <div class="dump" style="display:none">
-            <pre>@DumpObject((object)Model)</pre>
-        </div>
-    </div>
+		<div class="content">
+			<div class="shape">
+				Shape: @Model.Metadata.Type <br />
+				Definition: @descriptor.BindingSource  <br />
+				Display Type: @(Model.Metadata.DisplayType  ?? "n/a")<br />
+				Position: @(Model.Metadata.Position ?? "n/a") <br />
+				Placement Source: @(Model.Metadata.PlacementSource ?? "n/a") <br />
+			</div>
+			
+			<div class="model" style="display:none">
+				<pre>@DumpObject((object)Model)</pre>
+			</div>
+
+			<div class="placement" style="display:none">
+				@if(Model.Metadata.PlacementSource != null) {
+					// System.IO.File.ReadAllText(VirtualPathUtility.GetFileName(Model.Metadata.PlacementSource))
+				} 
+				else {
+					<div>n/a</div>
+				}
+			</div>
+
+			<div class="templates" style="display:none">
+				<div class="alternates">
+					<span>Alternates</span>
+					@foreach(var alternate in Model.Metadata.Alternates) {
+						var formatted = @FormatShapeFilename(alternate, workContext.CurrentTheme.Id);
+						<div>@formatted</div>
+					}
+				</div>
+				<div class="wrappers">
+					<span >Wrappers</span>
+					@foreach(var wrapper in Model.Metadata.Wrappers) {
+						if(wrapper != "ShapeTracing_Wrapper") {
+							var formatted = @FormatShapeFilename(wrapper, workContext.CurrentTheme.Id);
+							<div>@formatted</div>
+						}
+					}
+				</div>
+			</div>
+
+			<div class="source" style="display:none">
+			</div>
+
+			<div class="html" style="display:none">
+				<pre>@HttpUtility.HtmlEncode(Display(Model.Metadata.ChildContent))</pre>
+			</div>
+		</div>
+	</div>
 </div>