diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
index df92ae1c90..a0816b1379 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
@@ -148,10 +148,12 @@
                     var found = _.find(filteredAvailableCompositeTypes, function (f) {
                         return current.contentType.alias === f.contentType.alias;
                     });
+
                     //allow if the item was  found in the response (allowed) list - 
-                    // and ensure its set to allowed if it is currently checked
-                    current.allowed = (selectedContentTypeAliases.indexOf(current.contentType.alias) !== -1) ||
-                                        ((found !== null && found !== undefined) ? found.allowed : false);
+                    // and ensure its set to allowed if it is currently checked,
+                    // DO not allow if it's a locked content type.
+                    current.allowed = scope.model.lockedCompositeContentTypes.indexOf(current.contentType.alias) === -1 &&
+                        (selectedContentTypeAliases.indexOf(current.contentType.alias) !== -1) || ((found !== null && found !== undefined) ? found.allowed : false);
 
                 });
             });
@@ -167,6 +169,20 @@
 
       }
 
+        function setupAvailableContentTypesModel(result) {
+            scope.compositionsDialogModel.availableCompositeContentTypes = result;            
+            //iterate each one and set it up
+            _.each(scope.compositionsDialogModel.availableCompositeContentTypes, function (c) {
+                //set the inherited flags
+                c.inherited = false;
+                if (scope.model.lockedCompositeContentTypes.indexOf(c.contentType.alias) > -1) {
+                    c.inherited = true;
+                }
+                // convert icons for composite content types
+                iconHelper.formatContentTypeIcons([c.contentType]);
+            });
+        }
+
       /* ---------- DELETE PROMT ---------- */
 
       scope.togglePrompt = function (object) {
@@ -312,12 +328,7 @@
           $q.all([
               //get available composite types
               availableContentTypeResource(scope.model.id, [], propAliasesExisting).then(function (result) {
-                  scope.compositionsDialogModel.availableCompositeContentTypes = result;
-                  var contentTypes = _.map(scope.compositionsDialogModel.availableCompositeContentTypes, function(c) {
-                      return c.contentType;
-                  });
-                  // convert icons for composite content types
-                  iconHelper.formatContentTypeIcons(contentTypes);                  
+                  setupAvailableContentTypesModel(result);
               }),
               //get content type count
               countContentTypeResource().then(function(result) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.controller.js
index 4188b331e3..7a908a7260 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.controller.js
@@ -5,7 +5,6 @@
 
         var vm = this;
 
-        vm.isDisabled = isDisabled;
         vm.isSelected = isSelected;
 
         function isSelected(alias) {
@@ -13,12 +12,6 @@
                 return true;
             }
         }
-
-        function isDisabled(alias) {
-            if($scope.model.contentType.lockedCompositeContentTypes.indexOf(alias) !== -1) {
-                return true;
-            }
-        }
 	}
 
 	angular.module("umbraco").controller("Umbraco.Overlays.CompositionsOverlay", CompositionsOverlay);
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.html
index a113e8309c..d5cc52b942 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/compositions/compositions.html
@@ -1,56 +1,54 @@
 <div ng-controller="Umbraco.Overlays.CompositionsOverlay as vm">
 
     <div class="umb-control-group">
-       <div class="form-search">
-          <i class="icon-search"></i>
-          <input type="text"
-             style="width: 100%"
-             ng-model="searchTerm"
-             class="umb-search-field search-query input-block-level"
-             placeholder="Filter..."
-             umb-auto-focus>
-       </div>
+        <div class="form-search">
+            <i class="icon-search"></i>
+            <input type="text"
+                   style="width: 100%"
+                   ng-model="searchTerm"
+                   class="umb-search-field search-query input-block-level"
+                   placeholder="Filter..."
+                   umb-auto-focus>
+        </div>
     </div>
 
     <div class="umb-control-group">
-       <small>Inherit tabs and properties from an existing document type. New tabs will be added to the current document type or merged if a tab with an identical name exists.</small>
+        <small>Inherit tabs and properties from an existing document type. New tabs will be added to the current document type or merged if a tab with an identical name exists.</small>
     </div>
 
-<umb-empty-state
-    ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes <= 1"
-    position="center">
-    There are no content types available to use as a composition.
-</umb-empty-state>
-<umb-empty-state
-    ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1"
-    position="center">
-    This content type is used in a composition, and therefore cannot be composed itself.
-</umb-empty-state>
+    <umb-empty-state
+        ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes <= 1"
+        position="center">
+        There are no content types available to use as a composition.
+    </umb-empty-state>
+    <umb-empty-state
+        ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1"
+        position="center">
+        This content type is used in a composition, and therefore cannot be composed itself.
+    </umb-empty-state>
 
     <ul class="umb-checkbox-list">
-   <li class="umb-checkbox-list__item" 
-       
-       ng-repeat="compositeContentType in model.availableCompositeContentTypes | filter:searchTerm" 
-       ng-class="{'-disabled': vm.isDisabled(compositeContentType.contentType.alias), '-selected': vm.isSelected(compositeContentType.contentType.alias)}">
-       
-      <div class="umb-checkbox-list__item-checkbox"            
-           ng-class="{ '-selected': model.compositeContentTypes.indexOf(compositeContentType.contentType.alias)+1 }">
-         <input type="checkbox"                
-            id="umb-overlay-comp-{{compositeContentType.contentType.key}}"
-            checklist-model="model.compositeContentTypes"
-            checklist-value="compositeContentType.contentType.alias"
-            ng-change="model.selectCompositeContentType(compositeContentType.contentType)"
-            ng-disabled="compositeContentType.allowed===false" />
-      </div>
+        <li class="umb-checkbox-list__item"
 
-          <label for="umb-overlay-comp-{{compositeContentType.contentType.key}}" class="umb-checkbox-list__item-text" ng-class="{'-faded': vm.isDisabled(compositeContentType.contentType.alias)}">
-         <i class="{{ compositeContentType.contentType.icon }} umb-checkbox-list__item-icon"></i>
-         {{ compositeContentType.contentType.name }}
-              <span class="umb-checkbox-list__item-caption" ng-if="vm.isDisabled(compositeContentType.contentType.alias)">(inherited)</span>
-          </label>
+            ng-repeat="compositeContentType in model.availableCompositeContentTypes | filter:searchTerm"
+            ng-class="{'-disabled': compositeContentType.allowed===false, '-selected': vm.isSelected(compositeContentType.contentType.alias)}">
 
+            <div class="umb-checkbox-list__item-checkbox"
+                 ng-class="{ '-selected': model.compositeContentTypes.indexOf(compositeContentType.contentType.alias)+1 }">
+                <input type="checkbox"
+                       id="umb-overlay-comp-{{compositeContentType.contentType.key}}"
+                       checklist-model="model.compositeContentTypes"
+                       checklist-value="compositeContentType.contentType.alias"
+                       ng-change="model.selectCompositeContentType(compositeContentType.contentType)"
+                       ng-disabled="compositeContentType.allowed===false"/>
+            </div>
 
-       </li>
+            <label for="umb-overlay-comp-{{compositeContentType.contentType.key}}" class="umb-checkbox-list__item-text" ng-class="{'-faded': compositeContentType.allowed===false}">
+                <i class="{{ compositeContentType.contentType.icon }} umb-checkbox-list__item-icon"></i>
+                {{ compositeContentType.contentType.name }}
+                <span class="umb-checkbox-list__item-caption" ng-if="compositeContentType.inherited">(inherited)</span>
+            </label>
+
+        </li>
     </ul>
-
-</div>
+</div>
\ No newline at end of file