diff --git a/src/Umbraco.Web.UI.Client/src/views/datatypes/datatype.edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/datatypes/datatype.edit.controller.js
index 7ade362473..bb45968d5b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/datatypes/datatype.edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/datatypes/datatype.edit.controller.js
@@ -14,7 +14,10 @@ function DataTypeEditController($scope, $routeParams, appState, navigationServic
     //setup scope vars
     vm.page = {};
     vm.page.loading = false;
-    
+    vm.page.menu = {};
+    vm.page.menu.currentSection = appState.getSectionState("currentSection");
+    vm.page.menu.currentNode = null;
+
     //set up the standard data type props
     vm.properties = {
         selectedEditor: {
@@ -51,7 +54,7 @@ function DataTypeEditController($scope, $routeParams, appState, navigationServic
     
     function setHeaderNameState(content) {
         if(content.isSystem == 1) {
-            $scope.page.nameLocked = true;
+            vm.page.nameLocked = true;
         }
     }
     
@@ -88,6 +91,7 @@ function DataTypeEditController($scope, $routeParams, appState, navigationServic
                 vm.page.loading = false;
 
             });
+
     }
 
     function saveDataType() {
@@ -208,7 +212,7 @@ function DataTypeEditController($scope, $routeParams, appState, navigationServic
         
         var labelKeys = [
             "general_settings",
-            "macro_parameters"
+            "editdatatype_relations"
         ];
         
         localizationService.localizeMany(labelKeys).then(function (values) {
@@ -224,7 +228,7 @@ function DataTypeEditController($scope, $routeParams, appState, navigationServic
                 {
                     "name": values[1],
                     "alias": "parameters",
-                    "icon": "icon-list",
+                    "icon": "icon-molecular-network",
                     "view": "views/datatypes/views/datatype.relations.html"
                 }
             ];
diff --git a/src/Umbraco.Web.UI.Client/src/views/datatypes/views/datatype.relations.controller.js b/src/Umbraco.Web.UI.Client/src/views/datatypes/views/datatype.relations.controller.js
new file mode 100644
index 0000000000..6fdcaf9650
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/datatypes/views/datatype.relations.controller.js
@@ -0,0 +1,39 @@
+/**
+ * @ngdoc controller
+ * @name Umbraco.Editors.DataType.RelationsController
+ * @function
+ *
+ * @description
+ * The controller for the relations view of the datatype editor
+ */
+function DataTypeRelationsController($scope, $routeParams, dataTypeResource) {
+    
+    var vm = this;
+
+    vm.relations = {};
+    vm.hasRelations = false;
+    
+    vm.view = {};
+    vm.view.loading = true;
+
+    //we are editing so get the content item from the server
+    dataTypeResource.getRelations($routeParams.id)
+    .then(function(data) {
+
+        console.log("got: ", data);
+
+        vm.view.loading = false;
+        vm.relations = data;
+
+        vm.hasRelations = vm.relations.documentTypes.length > 0 || vm.relations.mediaTypes.length > 0 || vm.relations.memberTypes.length > 0;
+
+
+        console.log("vm: ", vm);
+
+    });
+
+
+
+}
+
+angular.module("umbraco").controller("Umbraco.Editors.DataType.RelationsController", DataTypeRelationsController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/datatypes/views/datatype.relations.html b/src/Umbraco.Web.UI.Client/src/views/datatypes/views/datatype.relations.html
index 43266ddafc..c2b8a305ff 100644
--- a/src/Umbraco.Web.UI.Client/src/views/datatypes/views/datatype.relations.html
+++ b/src/Umbraco.Web.UI.Client/src/views/datatypes/views/datatype.relations.html
@@ -1,34 +1,87 @@
-<umb-box>
+<div ng-controller="Umbraco.Editors.DataType.RelationsController as vm">
+    <umb-box>
 
-    <umb-box-content>
+        <umb-box-content>
 
-        <umb-control-group label="Id" ng-if="vm.showIdentifier">
-            <div>{{vm.content.id}}</div>
-            <small>{{vm.content.key}}</small>
-        </umb-control-group>
+            <umb-load-indicator ng-if="vm.view.loading === true"></umb-load-indicator>
 
-        <umb-property property="vm.properties.selectedEditor">
-            <div>
-                <select name="vm.selectedEditor"
-                        ng-model="vm.content.selectedEditor"
-                        required
-                        ng-options="e.alias as e.name for e in vm.content.availableEditors"></select>
-                <span ng-messages="contentForm.selectedEditor.$error" show-validation-on-submit>
-                    <span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
-                </span>
-            </div>
+            <umb-empty-state size="small" ng-if="vm.view.loading === false && vm.hasRelations === false">
+                <localize key="relation_DataTypenoRelations">This Data Type has no relations.</localize>
+            </umb-empty-state>
 
-        </umb-property>
+            <!-- Document Types -->
+            <umb-control-group label="@relation_labelToDocumentTypes" ng-if="vm.view.loading === false && vm.hasRelations === true">
 
-        <umb-property property="vm.properties.selectedEditorId">
-            <div>{{vm.content.selectedEditor}}</div>
-        </umb-property>
+                <div ng-if="vm.relations.documentTypes.length < 1">
+                    <localize key="relation_noDocumentType">No relations for Document Types.</localize>
+                </div>
+                <div ng-if="vm.relations.documentTypes.length > 0">
+                    <table class="table">
+                        <tr>
+                            <th colspan="2"><localize key="general_name">Name</localize></th>
+                            <th><localize key="content_alias">Alias</localize></th>
+                            <th></th>
+                        </tr>
+                        <tr ng-repeat="relation in vm.relations.documentTypes">
+                            <td style="width:12px"><i class="icon icon-{{relation.icon}}"></i></td>
+                            <td>{{relation.name}}</td>
+                            <td>{{relation.alias}}</td>
+                            <td style="width:32px"><a href="{{relation.udi}}"><localize key="general_open">Open</localize><a></td>
+                        </tr>
+                    </table>
+                </div>
+                
+            </umb-control-group>
 
-        <umb-property property="preValue"
-                      ng-repeat="preValue in vm.preValues">
-            <umb-property-editor model="preValue" is-pre-value="true"></umb-property-editor>
-        </umb-property>
+            <!-- Media Types -->
+            <umb-control-group label="@relation_labelToMediaTypes" ng-if="vm.view.loading === false && vm.hasRelations === true">
 
-    </umb-box-content>
+                <div ng-if="vm.relations.mediaTypes.length < 1">
+                    <localize key="relation_noMediaType">No relations for Media Types.</localize>
+                </div>
+                <div ng-if="vm.relations.mediaTypes.length > 0">
+                    <table class="table">
+                        <tr>
+                            <th colspan="2"><localize key="general_name">Name</localize></th>
+                            <th><localize key="content_alias">Alias</localize></th>
+                            <th></th>
+                        </tr>
+                        <tr ng-repeat="relation in vm.relations.mediaTypes">
+                            <td style="width:12px"><i class="icon icon-{{relation.icon}}"></i></td>
+                            <td>{{relation.name}}</td>
+                            <td>{{relation.alias}}</td>
+                            <td style="width:32px"><a href="{{relation.udi}}"><localize key="general_open">Open</localize><a></td>
+                        </tr>
+                    </table>
+                </div>
+                
+            </umb-control-group>
 
-</umb-box>
+            <!-- Member Types -->
+            <umb-control-group label="@relation_labelToMemberTypes" ng-if="vm.view.loading === false && vm.hasRelations === true">
+
+                    <div ng-if="vm.relations.memberTypes.length < 1">
+                        <localize key="relation_noMemberType">No relations for Member Types.</localize>
+                    </div>
+                    <div ng-if="vm.relations.memberTypes.length > 0">
+                        <table class="table">
+                            <tr>
+                                <th colspan="2"><localize key="general_name">Name</localize></th>
+                                <th><localize key="content_alias">Alias</localize></th>
+                                <th></th>
+                            </tr>
+                            <tr ng-repeat="relation in vm.relations.memberTypes">
+                                <td style="width:12px"><i class="icon icon-{{relation.icon}}"></i></td>
+                                <td>{{relation.name}}</td>
+                                <td>{{relation.alias}}</td>
+                                <td style="width:32px"><a href="{{relation.udi}}"><localize key="general_open">Open</localize><a></td>
+                            </tr>
+                        </table>
+                    </div>
+                    
+                </umb-control-group>
+
+        </umb-box-content>
+
+    </umb-box>
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/datatypes/views/datatype.settings.html b/src/Umbraco.Web.UI.Client/src/views/datatypes/views/datatype.settings.html
index d5d49ca8fb..d37aa2fcd0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/datatypes/views/datatype.settings.html
+++ b/src/Umbraco.Web.UI.Client/src/views/datatypes/views/datatype.settings.html
@@ -2,17 +2,17 @@
 
     <umb-box-content>
 
-        <umb-control-group label="Id" ng-if="showIdentifier">
-            <div>{{content.id}}</div>
-            <small>{{content.key}}</small>
+        <umb-control-group label="Id" ng-if="model.showIdentifier">
+            <div>{{model.content.id}}</div>
+            <small>{{model.content.key}}</small>
         </umb-control-group>
 
-        <umb-property property="properties.selectedEditor">
+        <umb-property property="model.properties.selectedEditor">
             <div>
                 <select name="selectedEditor"
-                        ng-model="content.selectedEditor"
+                        ng-model="model.content.selectedEditor"
                         required
-                        ng-options="e.alias as e.name for e in content.availableEditors"></select>
+                        ng-options="e.alias as e.name for e in model.content.availableEditors"></select>
                 <span ng-messages="contentForm.selectedEditor.$error" show-validation-on-submit>
                     <span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
                 </span>
@@ -20,15 +20,15 @@
 
         </umb-property>
 
-        <umb-property property="properties.selectedEditorId">
-            <div>{{content.selectedEditor}}</div>
+        <umb-property property="model.properties.selectedEditorId">
+            <div>{{model.content.selectedEditor}}</div>
         </umb-property>
 
         <umb-property property="preValue"
-                      ng-repeat="preValue in preValues">
+                    ng-repeat="preValue in model.preValues">
             <umb-property-editor model="preValue" is-pre-value="true"></umb-property-editor>
         </umb-property>
 
     </umb-box-content>
 
-</umb-box>
+</umb-box>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index 96387b7d26..9d6f40ee4f 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2165,4 +2165,14 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="openCloseBackofficeHelp">Open/Close backoffice help</key>
     <key alias="openCloseBackofficeProfileOptions">Open/Close your profile options</key>
   </area>
+  <area alias="relations">
+    <key alias="tabName">Relations</key>
+    <key alias="DataTypenoRelations">This Data Type has no relations.</key>
+    <key alias="labelToDocumentTypes">Relations to Document Types</key>
+    <key alias="noDocumentType">No relations to Document Types.</key>
+    <key alias="labelToMediaTypes">Relations to Media Types</key>
+    <key alias="noMediaType">No relations to Media Types.</key>
+    <key alias="labelToMemberTypes">Relations to Member Types</key>
+    <key alias="noMemberType">No relations to Member Types.</key>
+  </area>
 </language>