diff --git a/public/src/admin/manage/category.js b/public/src/admin/manage/category.js
index 7a7718c7ad..ecfa19ca36 100644
--- a/public/src/admin/manage/category.js
+++ b/public/src/admin/manage/category.js
@@ -235,8 +235,27 @@ define('admin/manage/category', [
 		} else {
 			value = $(el).val();
 		}
+		var dataName = $(el).attr('data-name');
+		var fields = dataName.match(/[^\][.]+/g);
 
-		updateHash[$(el).attr('data-name')] = value;
+		function setNestedFields(obj, index) {
+			if (index === fields.length) {
+				return;
+			}
+			obj[fields[index]] = obj[fields[index]] || {};
+			if (index === fields.length - 1) {
+				obj[fields[index]] = value;
+			}
+			setNestedFields(obj[fields[index]], index + 1);
+		}
+
+		if (fields && fields.length) {
+			if (fields.length === 1) { // simple field name ie data-name="name"
+				updateHash[fields[0]] = value;
+			} else if (fields.length > 1) { // nested field name ie data-name="name[sub1][sub2]"
+				setNestedFields(updateHash, 0);
+			}
+		}
 
 		app.flags = app.flags || {};
 		app.flags._unsaved = true;
diff --git a/src/views/admin/manage/category.tpl b/src/views/admin/manage/category.tpl
index 869e23d42e..c1958f0037 100644
--- a/src/views/admin/manage/category.tpl
+++ b/src/views/admin/manage/category.tpl
@@ -39,6 +39,7 @@
 							<input type="color" id="cid-{category.cid}-color" placeholder="#ffffff" data-name="color" value="{category.color}" class="form-control category_color" />
 						</div>
 					</div>
+
 					<div class="col-sm-4 col-xs-12">
 						<div class="form-group">
 							<label for="cid-{category.cid}-imageClass">