diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.controller.js
index 3ce795b01e..33204f4a74 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.controller.js
@@ -6,7 +6,7 @@
  * @description
  * The controller for the content type editor templates sub view
  */
-(function() {
+(function () {
     'use strict';
 
     function TemplatesController($scope, entityResource, contentTypeHelper, templateResource, $routeParams) {
@@ -16,33 +16,35 @@
         var vm = this;
 
         vm.availableTemplates = [];
+        vm.canCreateTemplate = false;
         vm.updateTemplatePlaceholder = false;
 
+        vm.createTemplate = createTemplate;
 
         /* ---------- INIT ---------- */
 
-        init(function () {
+        function onInit() {
 
-            // update placeholder template information on new doc types
-            if (!$routeParams.notemplate && $scope.model.id === 0) {
-                vm.updateTemplatePlaceholder = true;
-                vm.availableTemplates = contentTypeHelper.insertTemplatePlaceholder(vm.availableTemplates);
-            }
-        });
-
-        function init(callback) {
-
-            entityResource.getAll("Template").then(function(templates){
+            entityResource.getAll("Template").then(function (templates) {
 
                 vm.availableTemplates = templates;
 
-                callback();
+                // update placeholder template information on new doc types
+                if (!$routeParams.notemplate && $scope.model.id === 0) {
+                    vm.updateTemplatePlaceholder = true;
+                    vm.availableTemplates = contentTypeHelper.insertTemplatePlaceholder(vm.availableTemplates);
+                }
+
+                checkIfTemplateExists();
 
             });
 
         }
 
-        vm.createTemplate = function () {
+        function createTemplate() {
+
+            vm.createTemplateButtonState = "busy";
+
             templateResource.getScaffold(-1).then(function (template) {
 
                 template.alias = $scope.model.alias;
@@ -50,24 +52,39 @@
 
                 templateResource.save(template).then(function (savedTemplate) {
 
-                    init(function () {
+                    // add icon
+                    savedTemplate.icon = "icon-layout";
+                    
+                    vm.availableTemplates.push(savedTemplate);
+                    vm.canCreateTemplate = false;
 
-                        var newTemplate = vm.availableTemplates.filter(function (t) { return t.id === savedTemplate.id });
-                        if (newTemplate.length > 0) {
-                            $scope.model.allowedTemplates.push(newTemplate[0]);
+                    $scope.model.allowedTemplates.push(savedTemplate);
 
-                            if ($scope.model.defaultTemplate === null) {
-                                $scope.model.defaultTemplate = newTemplate[0];
-                            }
-                        }
+                    if ($scope.model.defaultTemplate === null) {
+                        $scope.model.defaultTemplate = savedTemplate;
+                    }
 
-                    });
+                    vm.createTemplateButtonState = "success";
 
+                }, function() {
+                    vm.createTemplateButtonState = "error";
                 });
 
+            }, function() {
+                vm.createTemplateButtonState = "error";
             });
+        };
+
+        function checkIfTemplateExists() {
+            var existingTemplate = vm.availableTemplates.find(function (availableTemplate) {
+                return (availableTemplate.name === $scope.model.name || availableTemplate.placeholder);
+            });
+
+            vm.canCreateTemplate = existingTemplate ? false : true;
         }
 
+        onInit();
+
     }
 
     angular.module("umbraco").controller("Umbraco.Editors.DocumentType.TemplatesController", TemplatesController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.html b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.html
index c02bb78de7..8cc1081b3e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.html
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.html
@@ -7,20 +7,26 @@
 
     <div class="sub-view-column-right">
 
-        <umb-grid-selector ng-if="vm.availableTemplates"
-                           selected-items="model.allowedTemplates"
-                           available-items="vm.availableTemplates"
-                           default-item="model.defaultTemplate"
-                           item-name="template"
-                           name="model.name"
-                           alias="model.alias"
-                           update-placeholder="vm.updateTemplatePlaceholder">
+        <umb-grid-selector
+            ng-if="vm.availableTemplates"
+            selected-items="model.allowedTemplates"
+            available-items="vm.availableTemplates"
+            default-item="model.defaultTemplate"
+            item-name="template"
+            name="model.name"
+            alias="model.alias"
+            update-placeholder="vm.updateTemplatePlaceholder">
         </umb-grid-selector>
 
-        <button type="button" ng-click="vm.createTemplate()" class="btn btn-info" ng-show="model.allowedTemplates.length == 0">
-            <i class="icon icon-add"></i>
-            <localize key="shortcuts_addTemplate">Add template</localize>
-        </button>
+        <umb-button
+            ng-if="vm.canCreateTemplate"
+            type="button"
+            button-style="info"
+            action="vm.createTemplate()"
+            state="vm.createTemplateButtonState"
+            label-key="settings_createMatchingTemplate">
+        </umb-button>
+
     </div>
 
 </div>