diff --git a/less/groups.less b/less/groups.less
index 538ae7a5..fed88385 100644
--- a/less/groups.less
+++ b/less/groups.less
@@ -126,6 +126,12 @@
 			}
 		}
 	}
+	
+	.user-title-option {
+		.badge-color-label {
+			margin: 10px 0;
+		}
+	}
 }
 
 .groups.list {
diff --git a/templates/groups/details.tpl b/templates/groups/details.tpl
index a92794f6..2eed60cc 100644
--- a/templates/groups/details.tpl
+++ b/templates/groups/details.tpl
@@ -176,10 +176,10 @@
 					<div class="form-group user-title-option">
 						<label>[[groups:details.badge_preview]]</label><br />
 						<span class="label<!-- IF !group.userTitleEnabled --> hide<!-- ENDIF !group.userTitleEnabled -->" style="background-color: {group.labelColor}"><i class="fa<!-- IF group.icon -->{group.icon}<!-- ENDIF group.icon -->"></i> <!-- IF group.userTitle -->{group.userTitle}<!-- ELSE -->{group.displayName}<!-- ENDIF group.userTitle --></span>
-
 						<button component="groups/userTitleOption" type="button" class="btn btn-default btn-sm" data-action="icon-select"<!-- IF !group.userTitleEnabled --> disabled<!-- ENDIF !group.userTitleEnabled -->>[[groups:details.change_icon]]</button>
-						<button component="groups/userTitleOption" type="button" class="btn btn-default btn-sm" data-action="color-select"<!-- IF !group.userTitleEnabled --> disabled<!-- ENDIF !group.userTitleEnabled -->>[[groups:details.change_colour]]</button>
-						<input type="hidden" name="labelColor" value="<!-- IF group.labelColor -->{group.labelColor}<!-- ENDIF group.labelColor -->" />
+						</br>
+						<label class="badge-color-label">[[groups:details.label_colour]]</label>
+						<input component="groups/userTitleOption" type="color" name="labelColor" size="7" value="<!-- IF group.labelColor -->{group.labelColor}<!-- ENDIF group.labelColor -->" />
 						<input type="hidden" name="icon" value="<!-- IF group.icon -->{group.icon}<!-- ENDIF group.icon -->" />
 						<div id="icons" class="hidden">
 							<div class="icon-container">