diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index dd0e4d3e77..5dc4b8658f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -154,47 +154,38 @@ ul.color-picker li a  {
 }
 
 /* pre-value editor */
-/*.control-group.color-picker-preval:before {
-    content: "";
+.control-group.color-picker-preval .handle {
+    float: left;
     display: inline-block;
-    vertical-align: middle;
-    height: 100%;
-}*/
-
-/*.control-group.color-picker-preval div.thumbnail {
-    display: inline-block;
-    vertical-align: middle;
-}*/
+    margin: 5px 3px 5px 0;
+}
 .control-group.color-picker-preval div.color-picker-prediv {
     display: inline-block;
-    width: 60%;
+    width: 50%;
 }
 
 .control-group.color-picker-preval pre {
     display: inline;
-    margin-right: 20px;
+    margin-right: 10px;
     margin-left: 10px;
     width: 50%;
     white-space: nowrap;
     overflow: hidden;
     margin-bottom: 0;
     vertical-align: middle;
-}
-
-.control-group.color-picker-preval btn {
-    //vertical-align: middle;
+    padding-top: 7px;
+    padding-bottom: 7px;
 }
 
 .control-group.color-picker-preval input[type="text"] {
     min-width: 40%;
     width: 40%;
     display: inline-block;
-    margin-right: 20px;
     margin-top: 1px;
 }
 
 .control-group.color-picker-preval label {
-    border: solid @white 1px;
+    border: 1px solid @white;
     padding: 6px;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js
index 5230f9ef2c..03defbc930 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js
@@ -1,5 +1,41 @@
 function ColorPickerController($scope) {
 
+    //setup the default config
+    var config = {
+        items: [],
+        multiple: false
+    };
+    
+    //map the user config
+    angular.extend(config, $scope.model.config);
+
+    //map back to the model
+    $scope.model.config = config;
+    
+    function convertArrayToDictionaryArray(model) {
+        //now we need to format the items in the dictionary because we always want to have an array
+        var newItems = [];
+        for (var i = 0; i < model.length; i++) {
+            newItems.push({ id: model[i], sortOrder: 0, value: model[i] });
+        }
+
+        return newItems;
+    }
+
+
+    function convertObjectToDictionaryArray(model) {
+        //now we need to format the items in the dictionary because we always want to have an array
+        var newItems = [];
+        var vals = _.values($scope.model.config.items);
+        var keys = _.keys($scope.model.config.items);
+
+        for (var i = 0; i < vals.length; i++) {
+            var label = vals[i].value ? vals[i].value : vals[i];
+            newItems.push({ id: keys[i], sortOrder: vals[i].sortOrder, value: label });
+        }
+
+        return newItems;
+    }
     $scope.isConfigured = $scope.model.config && $scope.model.config.items && _.keys($scope.model.config.items).length > 0;
 
     if ($scope.isConfigured) {
@@ -13,6 +49,8 @@ function ColorPickerController($scope) {
         initActiveColor();
     }
 
+    //sort the values
+    $scope.model.config.items.sort(function (a, b) { return (a.sortOrder > b.sortOrder) ? 1 : ((b.sortOrder > a.sortOrder) ? -1 : 0); });
     $scope.toggleItem = function (color) {
 
         var currentColor = ($scope.model.value && $scope.model.value.hasOwnProperty("value"))
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.prevalues.html
index 2b917e69f8..2d342c92fc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.prevalues.html
@@ -1,13 +1,16 @@
 <div ng-controller="Umbraco.PrevalueEditors.MultiColorPickerController">
     <div class="control-group color-picker-preval">
         <input name="newColor" type="hidden" />
-        <label for="newColor" val-highlight="hasError">#{{newColor}}</label>
+        <label for="newColor" val-highlight="{{hasError}}">#{{newColor}}</label>
         <input name="newLabel" type="text" ng-model="newLabel" class="umb-editor color-label" placeholder="Label" />
         <button class="btn add" ng-click="add($event)"><localize key="general_add">Add</localize></button>
     </div>
-    <div class="control-group color-picker-preval" ng-repeat="item in model.value">
-        <div class="thumbnail span1" hex-bg-color="{{item.value}}" bg-orig="transparent"></div>
-        <div class="color-picker-prediv"><pre>#{{item.value}} - {{item.label}}</pre></div>
-        <button class="btn btn-danger" ng-click="remove(item, $event)"><localize key="general_remove">Remove</localize></button>
+    <div ui-sortable="sortableOptions" ng-model="model.value">
+        <div class="control-group color-picker-preval" ng-repeat="item in model.value">
+            <i class="icon icon-navigation handle"></i>
+            <div class="thumbnail span1" hex-bg-color="{{item.value}}" bg-orig="transparent"></div>
+            <div class="color-picker-prediv"><pre>#{{item.value}}</pre><span>{{item.label}}</span></div>
+            <button class="btn btn-danger" ng-click="remove(item, $event)"><localize key="general_remove">Remove</localize></button>
+        </div>
     </div>
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
index e0e744062b..3751117485 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
@@ -68,6 +68,10 @@
                     });
                 }
             }
+
+            //ensure the items are sorted by the provided sort order
+            items.sort(function (a, b) { return (a.sortOrder > b.sortOrder) ? 1 : ((b.sortOrder > a.sortOrder) ? -1 : 0); });
+
             //now make the editor model the array
             $scope.model.value = items;
         }
@@ -116,6 +120,39 @@
 
         };
 
+        $scope.sortableOptions = {
+            axis: 'y',
+            containment: 'parent',
+            cursor: 'move',
+            handle: ".handle, .thumbnail",
+            items: '> div.control-group',
+            tolerance: 'pointer',
+            update: function (e, ui) {
+                // Get the new and old index for the moved element (using the text as the identifier, so 
+                // we'd have a problem if two prevalues were the same, but that would be unlikely)
+                var newIndex = ui.item.index();
+                var movedPrevalueText = $('pre', ui.item).text();
+                var originalIndex = getElementIndexByPrevalueText(movedPrevalueText);
+
+                //// Move the element in the model
+                if (originalIndex > -1) {
+                    var movedElement = $scope.model.value[originalIndex];
+                    $scope.model.value.splice(originalIndex, 1);
+                    $scope.model.value.splice(newIndex, 0, movedElement);
+                }
+            }
+        };
+
+        function getElementIndexByPrevalueText(value) {
+            for (var i = 0; i < $scope.model.value.length; i++) {
+                if ($scope.model.value[i].value === value) {
+                    return i;
+                }
+            }
+
+            return -1;
+        }
+
         //load the separate css for the editor to avoid it blocking our js loading
         assetsService.loadCss("lib/spectrum/spectrum.css", $scope);
     });