diff --git a/src/Umbraco.Web.UI.Client/src/less/rte.less b/src/Umbraco.Web.UI.Client/src/less/rte.less
index a4d6387012..ccf52acc53 100644
--- a/src/Umbraco.Web.UI.Client/src/less/rte.less
+++ b/src/Umbraco.Web.UI.Client/src/less/rte.less
@@ -66,6 +66,13 @@
 
 
 /* pre-value editor */
-.rte-editor-preval .control-group .controls > div > label .mce-ico {
-    line-height: 20px;
+.rte-editor-preval .control-group .controls > div > label {
+    cursor: pointer !important;
+
+    .mce-cmd .checkbox {
+        padding-right: 0;
+    }
+    .mce-ico {
+        line-height: 20px;
+    }
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js
index 1b489d6283..41097f9e9a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js
@@ -31,26 +31,21 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController",
                 var icon = getFontIcon(obj.alias);
                 return angular.extend(obj, {
                     fontIcon: icon.name,
-                    isCustom: icon.isCustom
+                    isCustom: icon.isCustom,
+                    selected: $scope.model.value.toolbar.indexOf(obj.alias) >= 0
                 });
             });
         });
 
         stylesheetResource.getAll().then(function(stylesheets){
             $scope.stylesheets = stylesheets;
+
+            _.each($scope.stylesheets, function (stylesheet) {
+                // support both current format (full stylesheet path) and legacy format (stylesheet name only) 
+                stylesheet.selected = $scope.model.value.stylesheets.indexOf(stylesheet.path) >= 0 ||$scope.model.value.stylesheets.indexOf(stylesheet.name) >= 0;
+            });
         });
 
-        $scope.commandSelected = function(cmd) {
-            cmd.selected = $scope.model.value.toolbar.indexOf(cmd.alias) >= 0;
-            return cmd.selected;
-        };
-
-        $scope.cssSelected = function (css) {
-            // support both current format (full stylesheet path) and legacy format (stylesheet name only) 
-            css.selected = $scope.model.value.stylesheets.indexOf(css.path) >= 0 ||$scope.model.value.stylesheets.indexOf(css.name) >= 0;
-            return css.selected;
-        }
-
         $scope.selectCommand = function(command){
             var index = $scope.model.value.toolbar.indexOf(command.alias);
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.html
index 463b1a03e0..ca6178fea9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.html
@@ -3,11 +3,10 @@
     <umb-control-group label="Toolbar" description="Pick the toolbar options that should be available when editing">
         <div ng-repeat="cmd in tinyMceConfig.commands">
             <label>
-                <input type="checkbox"
-                       ng-checked="commandSelected(cmd)"
-                       ng-model="cmd.selected"
-                       ng-change="selectCommand(cmd)" />
-
+                <umb-checkbox model="cmd.selected"
+                              on-change="selectCommand(cmd)"
+                              class="mce-cmd" />
+                
                 <!--<img ng-src="{{cmd.icon}}" />-->
                 <i class="mce-ico" ng-class="(cmd.isCustom ? ' mce-i-custom ' : ' mce-i-') + cmd.fontIcon"></i>
 
@@ -18,20 +17,18 @@
 
     <umb-control-group label="Stylesheets" description="Pick the stylesheets whose editor styles should be available when editing">
         <div ng-repeat="css in stylesheets">
-            <label>
-                <input type="checkbox"
-                       ng-checked="cssSelected(css)"
-                       ng-model="css.selected"
-                       ng-change="selectStylesheet(css)" />
-                {{css.name}}
-            </label>
+
+            <umb-checkbox
+                model="css.selected"
+                on-change="selectStylesheet(css)"
+                text="{{css.name}}"/>
         </div>
     </umb-control-group>
 
     <umb-control-group label="Ignore user start nodes" description="Selecting this option allows a user to choose nodes that they normally don't have access to.<br /> <em>Note: this applies only to rich text editors in this grid editor.</em>">
         <div>
             <label>
-                <input type="checkbox" ng-model="model.value.ignoreUserStartNodes" />
+                <umb-checkbox model="model.value.ignoreUserStartNodes"/>
             </label>
         </div>
     </umb-control-group>