diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less
index 1b7b4f3b31..1367faf3c7 100644
--- a/src/Umbraco.Web.UI.Client/src/less/gridview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less
@@ -614,7 +614,108 @@
     background: @grayLight
 }
 
+/* New template preview */
+.usky-grid {
 
+	.templates-preview {
+		display: inline-block;
+		width: 100%;
+		text-align: center;
+
+		small {
+			position: absolute;
+			width: 100%;
+			left: 0;
+			bottom: -25px;
+			padding-top: 15px;
+		}
+
+		.help-text {
+			margin: 35px 35px 0 0;
+		}
+	}
+
+	.preview-rows {
+		display: inline-block;
+		position: relative;
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+		width: 125px;
+		margin: 35px 40px 15px 0;	
+		border: 2px solid @grayLight; /* @grayLight */
+		transition: border 200ms linear;
+
+		&:hover {
+			border-color: @blue;
+			cursor: pointer;
+		}
+	
+		.preview-row {
+			display: inline-block;
+			width: 100%;
+			vertical-align: bottom;
+		}
+	}
+
+	.preview-rows.layout {
+		height: 180px;
+		padding: 2px;
+
+		.preview-row {
+			height: 100%;
+		}
+
+		.preview-col {
+			height: 100%;
+			border: dashed 1px @grayLight;
+		}
+
+		.preview-cell {
+			background-color: @grayLighter;
+		}
+		.preview-overlay {
+			display: none;
+		}
+	}
+
+	.preview-rows.columns {
+		min-height: 18px;
+		line-height: 11px;
+		padding: 1px;
+	}
+
+	.preview-col {
+		display: block;
+		float: left;
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+		width: 33.3%; /* temp value */
+		height: 10px;
+		margin: 0;
+		border: 1px solid @white; /* @white */
+
+		.preview-cell {
+			display: block;
+			width: 100%;
+			height: 100%;
+			background-color: @grayLight; /* @grayLight */
+			margin: 0 1px 1px 0;
+		}
+	}
+	
+	.preview-overlay {
+		display: block;
+        width: 100%;
+        position: absolute;
+        height: 100%;
+        top: 0;
+        box-sizing: border-box;
+        left: 0;
+        border: 3px solid white;
+	}
+}
 
  /**************************************************************************************************/
  /* overlay */
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
index 76a6267825..e8ce3f9316 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
@@ -3,27 +3,40 @@
 <div ng-if="contentReady">
     
     <!-- Template picker -->
-    <div class="uSky-templates tb" ng-show="!model.value || model.value == ''">
-        <div class="tr">
-            <div class="td middle">
-                <div class="uSky-templates-template"
-                    ng-repeat="template in model.config.items.templates" style="">
-                    <div class="tb" ng-click="addTemplate(template)">
-                        <div class="tr">
-                            <div class="td uSky-templates-column"
+
+    <div class="templates-preview"
+                    ng-show="!model.value || model.value == ''">
+                
+        <div class="preview-rows layout"
+                        ng-repeat="template in model.config.items.templates"
+                        ng-click="addTemplate(template)">
+            
+            <div class="preview-row">
+                
+                <div class="preview-col"
                                 ng-class="{last:$last}"
                                 ng-repeat="section in template.sections"
                                 ng-style="{width: percentage(section.grid) + '%'}">
-                            </div>
-                        </div>
+                    
+                    <div class="preview-cell">
                     </div>
+    
                 </div>
-
-                <br/>
-                <div class="help-text">To start, select a layout for your grid</div>
+                                        
             </div>
-        </div>
-    </div>
+
+            <div class="preview-overlay">
+            </div>
+
+            <small>{{layout.name}}</small>
+
+        </div> <!-- .templates-preview-rows -->
+
+        <p><span class="help-text">Add rows to your layout</span></p>
+
+
+    </div> <!-- .templates-preview -->
+
     <!-- template picker end -->
 
     <!-- Grids -->
@@ -188,35 +201,40 @@
 
 
                 <!-- column tools -->
-                <div class="usky-templates-columns tb">
-
-                    <div class="tr">
-                        <div class="td middle">
-                            <ul>
-                                <li ng-repeat="layout in  section.$allowedLayouts" ng-show="layout.areas.length > 0">
-                                    <div class="tb mainTbpt" ng-click="addRow(section, layout)">
-                                        <div class="tr">
-                                            <div ng-style="{width: percentage(area.grid) + '%'}"
-                                                 class="mainTdpt td"
-                                                 ng-repeat="area in layout.areas">
-                                                 <span></span>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <small>{{layout.name}}</small>
-                                </li>
-                            </ul>
-
+                
+                <div class="templates-preview">
+                
+                    <div class="preview-rows columns"
+                                    ng-repeat="layout in  section.$allowedLayouts"
+                                    ng-show="layout.areas.length > 0"
+                                    ng-click="addRow(section, layout)">
+                        
+                        <div class="preview-row">
+                            
+                            <div class="preview-col" ng-style="{width: percentage(area.grid) + '%'}" ng-repeat="area in layout.areas">
+                                
+                                <div class="preview-cell">
+                                </div>
+                
+                            </div>
+                                                    
                         </div>
-                    </div>
-                    <div class="tr">
-                        <div class="td middle">
-                            <br />
-                            <span class="help-text">Add rows to your layout</span>
+
+                        <div class="preview-overlay">
                         </div>
-                    </div>
-                </div>
+
+                        <small>{{layout.name}}</small>
+
+                    </div> <!-- .templates-preview-rows -->
+
+
+                    <p>
+                        <span class="help-text">Add rows to your layout</span>
+                    </p>
+            
+
+                </div> <!-- .templates-preview -->
+                
                 <!-- column tools end -->
 
             </div>