diff --git a/admin/src/admin/static/js/dashboard.js b/admin/src/admin/static/js/dashboard.js
index 3842284..c091faf 100644
--- a/admin/src/admin/static/js/dashboard.js
+++ b/admin/src/admin/static/js/dashboard.js
@@ -11,26 +11,42 @@ $(document).ready(function() {
         return $('<span><i class="fa ' + $(icon.element).data('icon') + '"></i> ' + icon.text + '</span>');
     };
 
+    // Update background input when colorpicker is used
     $('#colorpicker-background').colorpicker().on('changeColor', function (e) {
         $('#colorpicker-background-input').val(e.color.toHex());
-        $('.right_col').css('background-color', e.color.toHex());
     });
 
-    $('#colorpicker-background-input').on('keyDown', function (e) {
-        $('#colorpicker-background').val(e.color.toHex());
+    // Update background colorpicker when input is used
+    $('#colorpicker-background-input').on('keyup', function (e) {
+        if ($('#colorpicker-background-input').val()[0] == '#' && $('#colorpicker-background-input').val().length == 7) {
+            $('#colorpicker-background').colorpicker('setValue', $('#colorpicker-background-input').val());
+        }
     })
 
+    // Update primary input when colorpicker is used
     $('#colorpicker-primary').colorpicker().on('changeColor', function (e) {
         $('#colorpicker-primary-input').val(e.color.toHex());
-        $('.left_col').css('background-color', e.color.toHex());
-        $('body').css('background-color', e.color.toHex());
     });
 
+    // Update primary colorpicker when input is used
+    $('#colorpicker-primary-input').on('keyup', function (e) {
+        if ($('#colorpicker-primary-input').val()[0] == '#' && $('#colorpicker-primary-input').val().length == 7) {
+            $('#colorpicker-primary').colorpicker('setValue', $('#colorpicker-primary-input').val());
+        }
+    })
+
+    // Update secondary input when colorpicker is used
     $('#colorpicker-secondary').colorpicker().on('changeColor', function (e) {
         $('#colorpicker-secondary-input').val(e.color.toHex());
-        $('.left_col').css('color', e.color.toHex());
     });
 
+    // Update primary colorpicker when input is used
+    $('#colorpicker-secondary-input').on('keyup', function (e) {
+        if ($('#colorpicker-secondary-input').val()[0] == '#' && $('#colorpicker-secondary-input').val().length == 7) {
+            $('#colorpicker-secondary').colorpicker('setValue', $('#colorpicker-secondary-input').val());
+        }
+    })
+
     init_logo_cropper()
     init_background_cropper()
 
@@ -235,7 +251,7 @@ function init_logo_cropper() {
     });
 
     // Import image
-    var $inputImage = $('#inputImage');
+    var $inputImage = $('#inputImageLogo');
     var URL = window.URL || window.webkitURL;
     var blobURL;
 
@@ -406,7 +422,7 @@ function init_background_cropper() {
     });
 
     // Import image
-    var $inputImage = $('#inputImage');
+    var $inputImage = $('#inputImageBackground');
     var URL = window.URL || window.webkitURL;
     var blobURL;
 
diff --git a/admin/src/admin/static/templates/pages/dashboard.html b/admin/src/admin/static/templates/pages/dashboard.html
index 441701e..1f96a31 100644
--- a/admin/src/admin/static/templates/pages/dashboard.html
+++ b/admin/src/admin/static/templates/pages/dashboard.html
@@ -110,7 +110,7 @@
 </style>
 <div class="row">
 	<!-- form color picker -->
-	<div class="col-lg-2 col-md-12 col-sm-12 col-xs-12">
+	<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
 	  <div class="x_panel">
 			<div class="x_title">
 				<h2>System colors</h2>
@@ -144,7 +144,7 @@
 	</div>
 	<!-- /form color picker -->
 	<!-- custom menu -->
-	<div class="col-lg-10 col-md-12 col-sm-12 col-xs-12">
+	<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
 	  <div class="x_panel">
 			<div class="x_title">
 				<h2>Custom menu</h2>
@@ -168,22 +168,22 @@
 					</div>
 				</div>
 				<div class="form-group row">
-					<div class="col-md-3 col-xs-12">
+					<div hidden>
+						<label class="control-label" for="apps_external-{{ menu_item.shortname }}-shortname">Shortname
+						</label>
+						<input readonly="readonly" id="apps_external-{{ menu_item.shortname }}-shortname"  value="{{ menu_item.shortname }}" class="roundbox form-control" name="apps_external-{{ menu_item.shortname }}-shortname" placeholder=""  type="text" required style="width: 100%;">
+					</div>
+					<div class="col-md-4 col-xs-12">
 						<label class="control-label" for="apps_external-{{ menu_item.shortname }}-name">Name <span class="required">*</span>
 						</label>
 						<input id="apps_external-{{ menu_item.shortname }}-name"  value="{{ menu_item.name }}" class="roundbox" name="apps_external-{{ menu_item.shortname }}-name" placeholder=""  type="text" required style="width: 100%;">
 					</div>
-					<div class="col-md-3 col-xs-12">
-						<label class="control-label" for="apps_external-{{ menu_item.shortname }}-shortname">Shortname <span class="required">*</span>
-						</label>
-						<input id="apps_external-{{ menu_item.shortname }}-shortname"  value="{{ menu_item.shortname }}" class="roundbox" name="apps_external-{{ menu_item.shortname }}-shortname" placeholder=""  type="text" required style="width: 100%;">
-					</div>
-					<div class="col-md-3 col-xs-12">
+					<div class="col-md-4 col-xs-12">
 						<label class="control-label" for="apps_external-{{ menu_item.shortname }}-href">Url <span class="required">*</span>
 						</label>
 						<input id="apps_external-{{ menu_item.shortname }}-href"  value="{{ menu_item.href }}" class="roundbox" name="apps_external-{{ menu_item.href }}-href" placeholder=""  type="text" required style="width: 100%;">
 					</div>
-					<div class="col-md-3 col-xs-12">
+					<div class="col-md-4 col-xs-12">
 						<label class="control-label" for="apps_external-{{ menu_item.shortname }}-icon">Icon <span class="required">*</span>
 						</label>
 						<select class="icon-dropdown" id="apps_external-{{ menu_item.shortname }}-icon" name="apps_external-{{ menu_item.shortname }}-icon">
@@ -288,8 +288,8 @@
 										<span class="fa fa-refresh"></span>
 										</span>
 									</button>
-									<label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
-										<input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
+									<label class="btn btn-primary btn-upload" for="inputImageLogo" title="Upload image file">
+										<input type="file" class="sr-only" id="inputImageLogo" name="file" accept="image/*">
 										<span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
 											<span class="fa fa-upload"></span>
 										</span>
@@ -391,8 +391,8 @@
 										<span class="fa fa-refresh"></span>
 										</span>
 									</button>
-									<label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
-										<input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
+									<label class="btn btn-primary btn-upload" for="inputImageBackground" title="Upload image file">
+										<input type="file" class="sr-only" id="inputImageBackground" name="file" accept="image/*">
 										<span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
 											<span class="fa fa-upload"></span>
 										</span>
@@ -413,8 +413,6 @@
 	</div>
 </div>
 
-{% include 'pages/modals/groups_modals.html' %}
-
 {% endblock %}
 
 {% block pagescript %}