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 ce6cbc9b79..3c02be1073 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
@@ -340,7 +340,7 @@
   .editors-document-type-canvas.is-in-sorting-mode {
 
     .edt-property {
-      height: 50px;
+      height: 40px;
       margin-bottom: 10px;
       background: #E9E9E9;
       color: @grayDarker;
@@ -350,7 +350,7 @@
     }
 
     .edt-property-meta {
-      padding: 15px 0 0 10px;
+      padding: 10px 0 0 10px;
       width: auto;
       flex: 1;
       .icon {
@@ -487,3 +487,95 @@
   }
 
 }
+
+/* ---------- DIALOGS ---------- */
+
+.content-type-editor-dialog.edit-property-settings {
+
+  .title-wrapper {
+    float: left;
+    width: 300px;
+    input.input-style-underline {
+      border: none;
+      //border-bottom: 1px solid #cccccc;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 0 0 0;
+      margin-bottom: 10px;
+      font-size: 16px;
+      font-weight: bold;
+      &:focus {
+        outline: none;
+      }
+    }
+    .alias {
+      font-size: 13px;
+      color: @grayLight;
+    }
+  }
+
+  .editor-placeholder {
+    border: 2px dashed @grayLight;
+    width: 100%;
+    height: 80px;
+    line-height: 80px;
+    text-align: center;
+    display: block;
+    border-radius: 5px;
+    color: @gray;
+    font-weight: bold;
+    font-size: 13px;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .editor {
+    margin-bottom: 10px;
+    .editor-icon-wrapper {
+      border: 1px solid @grayLight;
+      width: 60px;
+      height: 60px;
+      text-align: center;
+      line-height: 60px;
+      border-radius: 5px;
+      float: left;
+      margin-right: 20px;
+      &:hover {
+        text-decoration: none;
+        border-color: @blueLight;
+      }
+      .icon {
+        font-size: 26px;
+      }
+    }
+    .editor-details {
+      float: left;
+      margin-top: 10px;
+      .editor-name {
+        font-weight: bold;
+      }
+      .editor-editor {
+        font-size: 12px;
+      }
+    }
+  }
+
+  textarea.description {
+    width: 100%;
+    box-sizing: border-box;
+    border: none;
+  }
+
+  .checkbox {
+    padding-left: 0;
+    margin-bottom: 20px;
+  }
+
+  .umb-editor {
+    width: 100%;
+  }
+
+}
+
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editpropertysettings/editpropertysettings.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editpropertysettings/editpropertysettings.html
index ad85f39bbc..c850d604d7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editpropertysettings/editpropertysettings.html
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editpropertysettings/editpropertysettings.html
@@ -1,51 +1,63 @@
 <div ng-controller="Umbraco.Editors.DocumentType.EditPropertySettingsController">
-    <div class="umb-overlay-body">
+    <div class="umb-overlay-body content-type-editor-dialog edit-property-settings">
 
         <form>
 
-            <h5>Property settings</h5>
+            <div class="umb-control-group clearfix">
 
-            <label>Name</label>
-            <input type="text" class="input-full-width" ng-model="model.property.label" />
+                <div class="title-wrapper">
+                    <input class="input-style-underline" ng-model="model.property.label" placeholder="Enter a name..." umb-auto-focus />
+                    <a href="" class="alias">
+                        <i class="icon icon-lock"></i>
+                        <span>{{ model.property.alias }}</span>
+                    </a>
+                </div>
 
-            <label>Alias</label>
-            <input type="text" class="input-full-width" ng-model="model.property.alias" />
+            </div>
 
-            <label>Description</label>
-            <textarea class="input-full-width" ng-model="model.property.description"></textarea>
+            <div class="umb-control-group clearfix">
+                <textarea class="description" ng-model="model.property.description" placeholder="Add your description here..."></textarea>
+            </div>
 
-            <h5>Validation</h5>
+            <div class="umb-control-group clearfix">
 
-            <label>Mandatory</label>
-            <input type="checkbox" ng-model="model.property.validation.mandatory">
-            <small>Lorem ipsum dolor</small>
+                <a href="" ng-if="!model.property.editor" class="editor-placeholder" ng-click="model.changePropertyEditor(model.property)">Add Editor</a>
 
-            <label>Validation</label>
-            <div>
-                <select class="umb-editor umb-dropdown">
+                <div class="editor clearfix" ng-if="model.property.editor">
+
+                    <a href="" class="editor-icon-wrapper" ng-click="model.changePropertyEditor(model.property)">
+                        <i class="icon {{ model.property.dataTypeIcon }}" ng-class="{'icon-autofill': model.property.dataType.icon == null}"></i>
+                    </a>
+
+                    <div class="editor-details">
+                        <div class="editor-name">{{ model.property.dataTypeName }}</div>
+                        <div class="editor-editor">{{ model.property.editor }}</div>
+                    </div>
+
+                </div>
+
+                <button class="btn" ng-click="model.editDataType(model.property)" ng-if="model.property.editor">Change editor settings</button>
+
+            </div>
+
+            <div class="umb-control-group clearfix">
+
+                <label class="checkbox">
+                    <input type="checkbox"> Mandatory
+                </label>
+
+                <select class="umb-editor umb-dropdown" placeholder="Validation">
                     <option>Email</option>
                     <option>Number</option>
                     <option>Tekst</option>
                     <option>Etc...</option>
                 </select>
+
             </div>
 
-            <h5>Property type</h5>
-
-            <label>Icon</label>
-            <i class="{{ model.property.dataType.icon }}" ng-class="{'icon-autofill': model.property.dataType.icon == null}"></i>
-
-            <label>Data type</label>
-            <div>{{ model.property.dataTypeName }}</div>
-
-            <label>Editor</label>
-            <div>{{ model.property.editor }}</div>
-
-            <button class="btn" ng-click="model.changePropertyEditor(model.property)">Change property editor</button>
-
-            <button class="btn" ng-click="model.editDataType(model.property)">Change editor settings</button>
-
+            <!--
             <pre>{{ model | json }}</pre>
+            -->
 
         </form>
 
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 f09a6ba9e7..7e05fac8d8 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
@@ -295,6 +295,9 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
 		// set indicator on property to tell the dialog is open - is used to set focus on the element
 		property.dialogIsOpen = true;
 
+		// set property to active
+		property.propertyState = "active";
+
 		$scope.dialogModel.changePropertyEditor = function(property) {
 			$scope.choosePropertyType(property);
 		};
@@ -304,24 +307,33 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
 		};
 
 		$scope.dialogModel.submit = function(model){
+
 			property.dialogIsOpen = false;
+
 			$scope.showDialog = false;
 			$scope.dialogModel = null;
+
+			// push new init property to scope
+			addInitPropertyOnActiveTab();
+
 		};
 
 		$scope.dialogModel.close = function(model){
 			$scope.showDialog = false;
 			$scope.dialogModel = null;
+
+			// push new init property to scope
+			addInitPropertyOnActiveTab();
 		};
 
 	};
 
 	$scope.choosePropertyType = function(property) {
 
-		$scope.showDialog = true;
 		$scope.dialogModel = {};
 		$scope.dialogModel.title = "Choose property type";
 		$scope.dialogModel.view = "views/documentType/dialogs/property.html";
+		$scope.showDialog = true;
 
 		property.dialogIsOpen = true;
 
@@ -341,7 +353,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
 				console.log(property);
 
 				// open data type configuration
-				$scope.configDataType(property);
+				$scope.editPropertyTypeSettings(property);
 
 				// push new init tab to scope
 				addInitTab();
@@ -351,8 +363,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
 		};
 
 		$scope.dialogModel.close = function(model){
-			$scope.dialogModel = null;
-			$scope.showDialog = false;
+			$scope.editPropertyTypeSettings(property);
 		};
 
 	};
@@ -386,9 +397,6 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
 					// open settings dialog
 					$scope.editPropertyTypeSettings(property);
 
-					// push new init property to scope
-					addInitPropertyOnActiveTab();
-
 				});
 
 			});
@@ -396,8 +404,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
 		};
 
 		$scope.dialogModel.close = function(model){
-			$scope.showDialog = false;
-			$scope.dialogModel = null;
+			$scope.editPropertyTypeSettings(property);
 		};
 
 	};
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html
index 3fc96990e2..cb8a24af61 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html
@@ -65,32 +65,13 @@
                                 <input class="tab-title-input" type="text" ng-model="tab.name" ng-class="{'tab-title-placeholder': tab.name == ''}" ng-change="updateTabTitle(tab)" umb-blur="updateTabTitle(tab)" ng-disabled="tab.inherited" umb-auto-focus umb-auto-resize />
                             </div>
 
-                            <!--
-                            <div tabindex="-1" class="edt-tab-actions">
-
-                                <div class="tab-action">
-                                    <div href="" class="umb-btn-round umb-btn-round-small" ng-click="deleteTab($index)">
-                                        <i class="icon icon-trash"></i>
-                                    </div>
-                                </div>
-
-                                <div class="tab-action edt-tab-handle" ng-if="contentType.groups.length > 1">
-                                    <div href="" class="umb-btn-round umb-btn-round-small">
-                                        <i class="icon icon-navigation"></i>
-                                    </div>
-                                </div>
-
-                            </div>
-                            -->
-
-
                             <div class="edt-property-group">
                                 <ul class="edt-property-list no-style-list" ui-sortable="sortableOptionsEditor"
                                     ng-model="tab.properties" class="no-style-list">
                                     <li ng-repeat="property in tab.properties">
 
                                         <!-- Init property / Property placeholder / add new property -->
-                                        <div class="edt-property" ng-show="property.propertyState=='init'" ng-class="{'property-state-init animated fadeIn': property.propertyState=='init'}" ng-click="choosePropertyType(property, tab)">
+                                        <div class="edt-property" ng-show="property.propertyState=='init'" ng-class="{'property-state-init animated fadeIn': property.propertyState=='init'}" ng-click="editPropertyTypeSettings(property)">
 
                                             <div class="edt-property-meta">
                                                 <div class="placeholder-input-small"></div>
@@ -142,7 +123,7 @@
 
                                             <!-- property preview -->
                                             <!-- ng-if="tab.tabState=='active'" -->
-                                            <div tabindex="-1" class="edt-property-preview" ng-click="choosePropertyType(property)">
+                                            <div tabindex="-1" class="edt-property-preview" ng-click="editPropertyTypeSettings(property)">
 
                                                 <span class="edt-property-preview-overlay">
                                                     <span class="overlay-text">Choose property type</span>