diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.controller.js
index 071f4c6480..45e95454ea 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.controller.js
@@ -23,6 +23,7 @@
 
         vm.addChild = addChild;
         vm.removeChild = removeChild;
+        vm.toggle = toggle;
 
         /* ---------- INIT ---------- */
 
@@ -75,6 +76,18 @@
            $scope.model.allowedContentTypes.splice(selectedChildIndex, 1);
         }
 
+        /**
+         * Toggle the $scope.model.allowAsRoot value to either true or false
+         */
+        function toggle(){
+            if($scope.model.allowAsRoot){
+                $scope.model.allowAsRoot = false;
+                return;
+            }
+
+            $scope.model.allowAsRoot = true;
+        }
+
     }
 
     angular.module("umbraco").controller("Umbraco.Editors.DocumentType.PermissionsController", PermissionsController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.html b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.html
index d9c7d185da..6923cb5a6f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.html
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.html
@@ -7,10 +7,12 @@
             <small><localize key="contentTypeEditor_allowAsRootDescription" /></small>
         </div>
         <div class="sub-view-column-right">
-            <label class="checkbox no-indent" >
-                <input type="checkbox" ng-model="model.allowAsRoot" hotkey="alt+shift+r" />
-                <localize key="contentTypeEditor_allowAsRootCheckbox" />
-            </label>
+            <umb-toggle
+                checked="model.allowAsRoot"
+                on-click="vm.toggle()"
+                hotkey="alt+shift+r"
+                >
+            </umb-toggle>
         </div>
 
     </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.controller.js b/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.controller.js
index 9d7cb8a1da..f8595be251 100644
--- a/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.controller.js
@@ -13,6 +13,7 @@
 
         vm.addChild = addChild;
         vm.removeChild = removeChild;
+        vm.toggle = toggle;
 
         /* ---------- INIT ---------- */
 
@@ -65,6 +66,18 @@
            $scope.model.allowedContentTypes.splice(selectedChildIndex, 1);
         }
 
+        /**
+         * Toggle the $scope.model.allowAsRoot value to either true or false
+         */
+        function toggle(){
+            if($scope.model.allowAsRoot){
+                $scope.model.allowAsRoot = false;
+                return;
+            }
+
+            $scope.model.allowAsRoot = true;
+        }
+
     }
 
     angular.module("umbraco").controller("Umbraco.Editors.MediaType.PermissionsController", PermissionsController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.html b/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.html
index 7c9811e37a..d2cd50b8d7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.html
+++ b/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.html
@@ -7,10 +7,12 @@
             <small><localize key="contentTypeEditor_allowAsRootDescription" /></small>
         </div>
         <div class="sub-view-column-right">
-            <label class="checkbox no-indent" >
-                <input type="checkbox" ng-model="model.allowAsRoot" hotkey="alt+shift+r" />
-                <localize key="contentTypeEditor_allowAsRootCheckbox" />
-            </label>
+            <umb-toggle
+                checked="model.allowAsRoot"
+                on-click="vm.toggle()"
+                hotkey="alt+shift+r"
+                >
+            </umb-toggle>
         </div>
 
     </div>