diff --git a/areas/__pycache__/views.cpython-38.pyc b/areas/__pycache__/views.cpython-38.pyc
index f12ca16..fc512e9 100644
Binary files a/areas/__pycache__/views.cpython-38.pyc and b/areas/__pycache__/views.cpython-38.pyc differ
diff --git a/areas/templates/areas/areas_add.html b/areas/templates/areas/areas_add.html
index a3c2375..8402eb9 100644
--- a/areas/templates/areas/areas_add.html
+++ b/areas/templates/areas/areas_add.html
@@ -6,11 +6,38 @@
   <hr>  
   <form method="POST">
 	  	{% csrf_token %}
-	  	{{ form|crispy }}		
+	  	{{ form|crispy }}	
+	  	<div class="form-group mb-2 mb-3">		    
+	    <span>Farbe</span><input type="color" id="color-picker" name="areacolor " />
+	  </div>  	
 	  	<p>Nachdem Erstellen eines Bereichs können Mitarbeiter zugewiesen werden.</p>
 	  <hr>	  	
 	  	<button type="submit" class="btn btn-success"  href="{% url 'areas-addarea' %} ">Bereich anlegen</button>&nbsp;
 	  	<a class="btn" href="{% url 'areas-management' %} ">Abbrechen</a>
   </form>
 </div>
-{% endblock content %}
\ No newline at end of file
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"/> <!-- 'classic' theme -->
+
+<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
+<script type="text/javascript">
+
+$(document).ready(function(){
+	$("#div_id_color").hide();
+})
+
+const pickr1 = new Pickr({
+  el: '#color-picker',
+  default: "#000000",  
+  components: {
+    preview: false,
+    hue: true
+  }
+});
+
+pickr1.on('changestop', function(){
+	var col = pickr1.getColor().toHEXA().toString();
+	pickr1.setColor(col);
+	$("#id_color").val(col);
+});
+</script>
+{% endblock content %}
diff --git a/areas/templates/areas/areas_management.html b/areas/templates/areas/areas_management.html
index c82ec16..b187327 100644
--- a/areas/templates/areas/areas_management.html
+++ b/areas/templates/areas/areas_management.html
@@ -63,15 +63,11 @@ $(document).ready(function(){
     $("#tableresults tr").filter(function() {
       $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
     });
-
-    
-
-
   });
-
-
 });
 
+
+
 /*
   Update the sort-list by drag'n'drop
 */
diff --git a/areas/templates/areas/areas_update.html b/areas/templates/areas/areas_update.html
index 28e20f9..2922aeb 100644
--- a/areas/templates/areas/areas_update.html
+++ b/areas/templates/areas/areas_update.html
@@ -7,15 +7,18 @@
   <hr>  
   <form method="POST">
 	  	{% csrf_token %}	  	
-	  	{{ form|crispy }}	  			  		  
+	  	{{ form|crispy }}	
+	   <div class="form-group mb-2 mb-3">		    
+	    <span>Farbe</span><input type="color" id="color-picker" name="areacolor " />
+	  </div>  			  		  
 	  <h6>Mitarbeiter hinzufügen</h6>
 	  <div class="input-group mb-3">
-		  <input class="form-control" list="usersfree" name="searchusers" id="searchusers" type="text" onkeyup="javascript:checkValue()" onchange="javascript:checkValue()">
+		  <input class="form-control" list="usersfree" name="searchusers" id="searchusers" type="text" onkeyup="javascript:checkValue()" onchange="javascript:checkValue()" >
 		  <div class="input-group-append">
 		  	<button type="button" id="addusertoareabtn" onclick="javascript:addUserToArea()" class="btn btn-success" disabled>Mitarbeiter hinzufügen</button>
 		  	<button type="button" onclick="javascript:clearSearchfield()" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
 		  </div>
-			  <datalist id="usersfree" >
+			  <datalist id="usersfree">
 			  	{% for us in possible_users %}
 			    	<option id="{{us.pk}}" value="{{us.first_name}} {{us.last_name}}"></option>			    
 			    {% endfor %}
@@ -41,7 +44,44 @@
   	<a class="btn" href="{% url 'areas-management' %} ">Abbrechen</a>
   </form>
 </div>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"/> <!-- 'classic' theme -->
+
+<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
 <script type="text/javascript">
+
+$(document).ready(function(){
+	$("#div_id_color").hide();
+})
+
+const pickr1 = new Pickr({
+  el: '#color-picker',
+  default: "{{object.color}}",  
+  components: {
+    preview: false,
+    hue: true
+  }
+});
+
+
+pickr1.on('changestop', function(){
+	var col = pickr1.getColor().toHEXA().toString();
+	pickr1.setColor(col);
+	$("#id_color").val(col);
+});
+
+var ua = window.navigator.userAgent;
+var isIE = /MSIE|Trident/.test(ua);
+if ( isIE ) {
+  //IE specific code goes here
+  	setInterval(function()
+	{
+	    checkValue();
+	},250);
+}
+
+
+
+
 	var tempid = null;
 	var tempcounter = 0;
 	function addUserToArea(){
@@ -118,7 +158,6 @@
 	//Check for valid input on inputfield
 	function checkValue(){			
 		var g = $('#searchusers').val();
-		console.log(g);
     	var id = $('#usersfree').find('option[value="' + g + '"]').attr('id');
     	if(id != undefined && id.length > 0){    		
     		tempid = id;
diff --git a/areas/views.py b/areas/views.py
index 96880b1..03dfc5a 100644
--- a/areas/views.py
+++ b/areas/views.py
@@ -75,6 +75,7 @@ class AreaUpdateView(LoginRequiredMixin, UpdateView):
 	def form_valid(self, form):	
 		# Send message to the site		
 		messages.success(self.request, f'Bereich aktualisiert!')
+		print(form)
 		return super().form_valid(form)
 
 	# Form wird geladen; Checkboxen werden vorbereitet und hier rausgerendert.
diff --git a/tasks/templates/tasks/tasks_update.html b/tasks/templates/tasks/tasks_update.html
index 6482e8a..849dadd 100644
--- a/tasks/templates/tasks/tasks_update.html
+++ b/tasks/templates/tasks/tasks_update.html
@@ -43,7 +43,15 @@
 </div>
 <script type="text/javascript">
 
-
+var ua = window.navigator.userAgent;
+var isIE = /MSIE|Trident/.test(ua);
+if ( isIE ) {
+  //IE specific code goes here
+  	setInterval(function()
+	{
+	    checkSearchUser();
+	},250);
+}
 
 	var tempid = null;
 	var tempcounter = 0;