diff --git a/src/Umbraco.Web.UI.Client/src/views/datatype/datatype.edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/datatype/datatype.edit.controller.js
index 9731e6a63f..170b7873ff 100644
--- a/src/Umbraco.Web.UI.Client/src/views/datatype/datatype.edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/datatype/datatype.edit.controller.js
@@ -8,9 +8,12 @@
  */
 function DataTypeEditController($scope, $routeParams, $location, appState, navigationService, treeService, dataTypeResource, notificationsService,  angularHelper, serverValidationManager, contentEditingHelper, formHelper, editorState) {
 
-    //setup scope vars    
-    $scope.currentSection = appState.getSectionState("currentSection");
-    $scope.currentNode = null; //the editors affiliated node
+    //setup scope vars
+    $scope.page = {};
+    $scope.page.nameLocked = false;
+    $scope.page.menu = {};
+    $scope.page.menu.currentSection = appState.getSectionState("currentSection");
+    $scope.page.menu.currentNode = null;
 
     //method used to configure the pre-values when we retrieve them from the server
     function createPreValueProps(preVals) {
@@ -51,6 +54,8 @@ function DataTypeEditController($scope, $routeParams, $location, appState, navig
                 $scope.preValuesLoaded = true;
                 $scope.content = data;
 
+                setHeaderNameState($scope.content);
+
                 //set a shared state
                 editorState.set($scope.content);
             });
@@ -64,7 +69,9 @@ function DataTypeEditController($scope, $routeParams, $location, appState, navig
                 $scope.content = data;
 
                 createPreValueProps($scope.content.preValues);
-                
+
+                setHeaderNameState($scope.content);
+
                 //share state
                 editorState.set($scope.content);
 
@@ -75,7 +82,7 @@ function DataTypeEditController($scope, $routeParams, $location, appState, navig
                 serverValidationManager.executeAndClearAllSubscriptions();
                 
                 navigationService.syncTree({ tree: "datatype", path: [String(data.id)] }).then(function (syncArgs) {
-                    $scope.currentNode = syncArgs.node;
+                    $scope.page.menu.currentNode = syncArgs.node;
                 });
             });
     }
@@ -91,13 +98,23 @@ function DataTypeEditController($scope, $routeParams, $location, appState, navig
                     $scope.preValuesLoaded = true;
                     $scope.content.preValues = data;
                     createPreValueProps($scope.content.preValues);
-                    
+
+                    setHeaderNameState($scope.content);
+
                     //share state
                     editorState.set($scope.content);
                 });
         }
     });
 
+    function setHeaderNameState(content) {
+
+      if(content.isSystem == 1) {
+         $scope.page.nameLocked = true;
+      }
+
+    }
+
     $scope.save = function() {
 
         if (formHelper.submitForm({ scope: $scope, statusMessage: "Saving..." })) {
@@ -115,11 +132,13 @@ function DataTypeEditController($scope, $routeParams, $location, appState, navig
                         }
                     });
 
+                    setHeaderNameState($scope.content);
+
                     //share state
                     editorState.set($scope.content);
 
                     navigationService.syncTree({ tree: "datatype", path: [String(data.id)], forceReload: true }).then(function (syncArgs) {
-                        $scope.currentNode = syncArgs.node;
+                        $scope.page.menu.currentNode = syncArgs.node;
                     });
                     
                 }, function(err) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/datatype/edit.html b/src/Umbraco.Web.UI.Client/src/views/datatype/edit.html
index 4d365174fb..c51f0216e3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/datatype/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/datatype/edit.html
@@ -1,68 +1,62 @@
-<form novalidate name="contentForm" 
-      ng-controller="Umbraco.Editors.DataType.EditController" 
-      ng-show="loaded" 
-      ng-submit="save()"
-      val-form-manager>
-    <umb-panel>
+<form name="contentForm"
+   ng-controller="Umbraco.Editors.DataType.EditController"
+   ng-show="loaded"
+   ng-submit="save()"
+   novalidate
+   val-form-manager>
 
-        <umb-header>
+   <umb-editor-view>
 
-            <div class="span7">                
-                <umb-content-name
-                    ng-disabled="content.isSystem == 1"
-                    placeholder="@placeholders_entername"
-                    ng-model="content.name"/>
+      <umb-editor-header
+         menu="page.menu"
+         name="content.name"
+         name-locked="page.nameLocked">
+      </umb-editor-header>
+
+
+      <umb-editor-container class="form-horizontal">
+
+         <umb-property property="properties.selectedEditor">
+             <div>
+                 <select name="selectedEditor"
+                        ng-model="content.selectedEditor"
+                        required
+                        ng-options="e.alias as e.name for e in content.availableEditors"></select>
+                 <span class="help-inline" val-msg-for="selectedEditor" val-toggle-msg="required">Required</span>
+             </div>
+
+         </umb-property>
+
+         <umb-property property="properties.selectedEditorId">
+             <div>{{content.selectedEditor}}</div>
+         </umb-property>
+
+
+         <umb-property
+             property="preValue"
+             ng-repeat="preValue in preValues">
+
+             <umb-editor model="preValue" is-pre-value="true"></umb-editor>
+         </umb-property>
+
+      </umb-editor-container>
+
+
+      <umb-editor-footer>
+
+         <umb-editor-footer-content-right>
+
+            <div class="btn-group">
+                <button type="submit" data-hotkey="ctrl+s" class="btn btn-success">
+                    <localize key="buttons_save">Save</localize>
+                </button>
             </div>
 
-            <div class="span5">
-                <div class="btn-toolbar pull-right umb-btn-toolbar">
-                    <umb-options-menu ng-show="currentNode"
-                        current-node="currentNode" 
-                        current-section="{{currentSection}}">                        
-                    </umb-options-menu>
-                </div>
-            </div>
-        </umb-header>
-        
-        <div class="umb-panel-body umb-scrollable row-fluid">
-            <div class="tab-content form-horizontal" style="padding-bottom: 90px">
-                <div class="umb-pane">
-                    
-                    <umb-property property="properties.selectedEditor">                        
-                        <div>
-                            <select name="selectedEditor"
-                                    ng-model="content.selectedEditor" 
-                                    required  
-                                    ng-options="e.alias as e.name for e in content.availableEditors"></select>
-                            <span class="help-inline" val-msg-for="selectedEditor" val-toggle-msg="required">Required</span>
-                        </div>
+         </umb-editor-footer-content-right>
 
-                    </umb-property>
-                    
-                    <umb-property property="properties.selectedEditorId">
-                        <div>{{content.selectedEditor}}</div>
-                    </umb-property>
-                    
-                    
-                    <umb-property 
-                        property="preValue" 
-                        ng-repeat="preValue in preValues">
-                        
-                        <umb-editor model="preValue" is-pre-value="true"></umb-editor>
-                    </umb-property>
+      </umb-editor-footer>
 
 
-                    <div class="umb-tab-buttons" detect-fold>
-                        <div class="btn-group">
-                            <button type="submit" data-hotkey="ctrl+s" class="btn btn-success">
-                                <localize key="buttons_save">Save</localize>
-                            </button>
-                        </div>
-                    </div>
+   </umb-editor-view>
 
-                </div>
-            </div>
-        </div>
-
-    </umb-panel>
 </form>