diff --git a/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less b/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less
index 0b6449953d..7c854faae1 100644
--- a/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less
+++ b/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less
@@ -598,23 +598,59 @@
 
 }
 
-/* ---------- SUB VIEWS COLUMNS ----------- */
+/* ---------- TEMPLATES GRID ------------ */
 
-.sub-view-columns {
+.templates-grid {
   display: flex;
-  margin-bottom: 40px;
-  h5 {
-    margin-top: 0;
-  }
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
-.sub-view-column-left {
-  flex: 0 0 250px;
-  margin-right: 70px;
+.template {
+  width: 125px;
+  height: 150px;
+  padding: 20px;
+  background: #f8f8f8;
+  border: 1px solid #CCCCCC;
+  text-align: center;
+  margin: 0 20px 20px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  animation: fadeIn 0.5s;
+  position: relative;
 }
 
-.sub-view-column-right {
-  flex: 1;
+.template .template-content .icon {
+  font-size: 50px;
+  color: #d9d9d9;
+}
+
+.template .remove-template {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  cursor: pointer;
+}
+
+.template .template-default-label {
+  font-size: 11px;
+  color: #d9d9d9;
+}
+
+.template .link-blue {
+  color: @blue;
+}
+
+.template.template-default {
+  border-width: 2px;
+}
+
+.template.template-placeholder {
+  border: 1px dashed #d9d9d9;
+  background: none;
+  cursor: pointer;
 }
 
 /* ---------- CHILD NODE TREE ---------- */
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/templates/templates.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/templates/templates.controller.js
new file mode 100644
index 0000000000..13645ab827
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/templates/templates.controller.js
@@ -0,0 +1,14 @@
+/**
+ * @ngdoc controller
+ * @name Umbraco.Editors.DocumentType.PropertyController
+ * @function
+ *
+ * @description
+ * The controller for the content type editor property dialog
+ */
+function AvailableTemplatesController($scope) {
+
+
+}
+
+angular.module("umbraco").controller("Umbraco.Editors.DocumentType.AvailableTemplatesController", AvailableTemplatesController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/templates/templates.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/templates/templates.html
new file mode 100644
index 0000000000..9fdb0db4fc
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/templates/templates.html
@@ -0,0 +1,10 @@
+<div ng-controller="Umbraco.Editors.DocumentType.AvailableTemplatesController">
+    <div class="dialog-grid">
+        <div class="dialog-grid-element" ng-repeat="availableTemplate in model.templates | filter:{show:true} | orderBy:'name'">
+            <a href="" ng-click="model.chooseTemplate(availableTemplate)">
+                <i class="icon icon-newspaper-alt"></i>
+                {{ availableTemplate.name }}
+            </a>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js
index 037042da0d..918fb306d2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js
@@ -46,7 +46,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
 		},
 		{
 			"name": "Templates",
-			"icon": "article",
+			"icon": "newspaper-alt",
 			"view": "views/documentType/views/templates/templates.html"
 		}
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.controller.js
new file mode 100644
index 0000000000..4cb4aec32d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.controller.js
@@ -0,0 +1,109 @@
+/**
+ * @ngdoc controller
+ * @name Umbraco.Editors.DocumentType.TemplatesController
+ * @function
+ *
+ * @description
+ * The controller for the content type editor templates sub view
+ */
+function TemplatesController($scope, contentTypeResource) {
+
+    /* ----------- SCOPE VARIABLES ----------- */
+
+    $scope.templates = {};
+    $scope.templates.availableTemplates = [];
+
+
+    /* ---------- INIT ---------- */
+
+    init();
+
+    function init() {
+
+        contentTypeResource.getAll().then(function(contentTypes){
+            $scope.templates.availableTemplates = contentTypes;
+
+            // we should be able to move this to a custom filter
+            angular.forEach($scope.templates.availableTemplates, function(template){
+
+                var exists = false;
+
+                angular.forEach($scope.contentType.allowedTemplates, function(allowedTemplate){
+
+                    if( template.alias === allowedTemplate.alias ) {
+                        exists = true;
+                    }
+
+                });
+
+                if(exists) {
+                    template.show = false;
+                } else {
+                    template.show = true;
+                }
+
+            });
+
+        });
+
+    }
+
+    $scope.removeTemplate = function(selectedTemplate) {
+
+        // splice from array
+        var selectedTemplateIndex = $scope.contentType.allowedTemplates.indexOf(selectedTemplate);
+        $scope.contentType.allowedTemplates.splice(selectedTemplateIndex, 1);
+
+        // show content type in content types array
+        for (var templateIndex = 0; templateIndex < $scope.templates.availableTemplates.length; templateIndex++) {
+
+            var template = $scope.templates.availableTemplates[templateIndex];
+
+            if( selectedTemplate.alias === template.alias ) {
+                template.show = true;
+            }
+        }
+
+    };
+
+    $scope.openTemplatesPicker = function($event){
+        $scope.showDialog = false;
+        $scope.dialogModel = {};
+        $scope.dialogModel.title = "Choose template";
+        $scope.dialogModel.templates = $scope.templates.availableTemplates;
+        $scope.dialogModel.event = $event;
+        $scope.dialogModel.view = "views/documentType/dialogs/templates/templates.html";
+        $scope.showDialog = true;
+
+        $scope.dialogModel.chooseTemplate = function(selectedTemplate) {
+
+            $scope.contentType.allowedTemplates.push(selectedTemplate);
+
+            for (var templateIndex = 0; templateIndex < $scope.templates.availableTemplates.length; templateIndex++) {
+
+                var template = $scope.templates.availableTemplates[templateIndex];
+
+                if( selectedTemplate.alias === template.alias ) {
+                    template.show = false;
+                }
+            }
+
+            $scope.showDialog = false;
+            $scope.dialogModel = null;
+        };
+
+        $scope.dialogModel.close = function(){
+            $scope.showDialog = false;
+            $scope.dialogModel = null;
+        };
+
+    };
+
+    $scope.setAsDefaultTemplate = function(template) {
+        $scope.contentType.defaultTemplate = {};
+        $scope.contentType.defaultTemplate = template;
+    };
+
+}
+
+angular.module("umbraco").controller("Umbraco.Editors.DocumentType.TemplatesController", TemplatesController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.html
index f8a268712f..730d0c0921 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.html
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.html
@@ -1 +1,49 @@
-templates
+<div class="sub-view-columns" ng-controller="Umbraco.Editors.DocumentType.TemplatesController">
+
+    <div class="sub-view-column-left">
+        <h5>Allowed Templates</h5>
+        <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate velit a velit consectetur luctus.</small>
+    </div>
+
+    <div class="sub-view-column-right">
+
+        <div class="templates-grid">
+
+            <div class="template template-default">
+                <div class="template-content">
+                    <i class="icon icon-newspaper-alt"></i>
+                    <div class="template-name">{{ contentType.defaultTemplate.name }}</div>
+                    <span class="template-default-label">(Default)</span>
+                </div>
+            </div>
+
+            <div class="template" ng-repeat="template in contentType.allowedTemplates | filter: { id:'!'+contentType.defaultTemplate.id }">
+                <div class="template-content">
+                    <i class="icon icon-newspaper-alt"></i>
+                    <div class="template-name">{{ template.name }}</div>
+                    <a href="" class="template-default-label link-blue" ng-click="setAsDefaultTemplate(template)">Set as default</a>
+                </div>
+                <i class="icon icon-trash remove-template" ng-click="removeTemplate(template)"></i>
+            </div>
+
+            <div class="template template-placeholder">
+                <div class="template-content">
+                    <div class="template-name" ng-click="openTemplatesPicker($event)">Choose template</div>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+
+    <umb-overlay
+            ng-style=""
+            ng-if="showDialog"
+            model="dialogModel"
+            animation="slide-in-right"
+            position="target"
+            view="dialogModel.view">
+    </umb-overlay>
+
+</div>
+