diff --git a/includes/model/Shifts_model.php b/includes/model/Shifts_model.php
index 3d3fa356..2db0a3d3 100644
--- a/includes/model/Shifts_model.php
+++ b/includes/model/Shifts_model.php
@@ -133,6 +133,24 @@ function Shift_signup_allowed($user, $shift, $angeltype, $user_angeltype = null,
     
     return new ShiftSignupState(ShiftSignupState::FREE, $free_entries);
   }
+  
+  if ($user_shifts == null) {
+    $user_shifts = Shifts_by_user($user);
+  }
+  
+  $signed_up = false;
+  foreach ($user_shifts as $user_shift) {
+    if ($user_shift['SID'] == $shift['SID']) {
+      $signed_up = true;
+      break;
+    }
+  }
+  
+  if ($signed_up) {
+    // you cannot join if you already singed up for this shift
+    return new ShiftSignupState(ShiftSignupState::SIGNED_UP, $free_entries);
+  }
+  
   if (time() > $shift['start']) {
     // you can only join if the shift is in future
     return new ShiftSignupState(ShiftSignupState::SHIFT_ENDED, $free_entries);
@@ -152,28 +170,11 @@ function Shift_signup_allowed($user, $shift, $angeltype, $user_angeltype = null,
     return new ShiftSignupState(ShiftSignupState::ANGELTYPE, $free_entries);
   }
   
-  if ($user_shifts == null) {
-    $user_shifts = Shifts_by_user($user);
-  }
-  
   if (Shift_collides($shift, $user_shifts)) {
     // you cannot join if user alread joined a parallel or this shift
     return new ShiftSignupState(ShiftSignupState::COLLIDES, $free_entries);
   }
   
-  $signed_up = false;
-  foreach ($user_shifts as $user_shift) {
-    if ($user_shift['SID'] == $shift['SID']) {
-      $signed_up = true;
-      break;
-    }
-  }
-  
-  if ($signed_up) {
-    // you cannot join if you already singed up for this shift
-    return new ShiftSignupState(ShiftSignupState::SIGNED_UP, $free_entries);
-  }
-  
   // Hooray, shift is free for you!
   return new ShiftSignupState(ShiftSignupState::FREE, $free_entries);
 }
diff --git a/includes/sys_template.php b/includes/sys_template.php
index 5d450493..bd53ecaa 100644
--- a/includes/sys_template.php
+++ b/includes/sys_template.php
@@ -19,6 +19,18 @@ function mute($text) {
   return '<span class="text-muted">' . $text . '</span>';
 }
 
+/**
+ * Renders a bootstrap label with given content and class.
+ *
+ * @param string $content
+ *          The text
+ * @param string $class
+ *          default, primary, info, success, warning, danger
+ */
+function label($content, $class = 'default') {
+  return '<span class="label label-' . $class . '">' . $content . '</span>';
+}
+
 function progress_bar($valuemin, $valuemax, $valuenow, $class = '', $content = '') {
   return '<div class="progress"><div class="progress-bar ' . $class . '" role="progressbar" aria-valuenow="' . $valuenow . '" aria-valuemin="' . $valuemin . '" aria-valuemax="' . $valuemax . '" style="width: ' . (($valuenow - $valuemin) * 100 / ($valuemax - $valuemin)) . '%">' . $content . '</div></div>';
 }
diff --git a/includes/view/ShiftCalendarRenderer.php b/includes/view/ShiftCalendarRenderer.php
index 989bd890..89c1be4c 100644
--- a/includes/view/ShiftCalendarRenderer.php
+++ b/includes/view/ShiftCalendarRenderer.php
@@ -25,7 +25,7 @@ class ShiftCalendarRenderer {
   private $shiftsFilter;
 
   private $firstBlockStartTime = null;
-  
+
   private $lastBlockEndTime = null;
 
   private $blocksPerSlot = null;
@@ -85,7 +85,7 @@ class ShiftCalendarRenderer {
   public function getFirstBlockStartTime() {
     return $this->firstBlockStartTime;
   }
-  
+
   public function getLastBlockEndTime() {
     return $this->lastBlockEndTime;
   }
@@ -106,7 +106,7 @@ class ShiftCalendarRenderer {
     return div('shift-calendar', [
         $this->renderTimeLane(),
         $this->renderShiftLanes() 
-    ]);
+    ]) . $this->renderLegend();
   }
 
   /**
@@ -222,6 +222,19 @@ class ShiftCalendarRenderer {
   private function calcBlocksPerSlot() {
     return ceil(($this->getLastBlockEndTime() - $this->getFirstBlockStartTime()) / ShiftCalendarRenderer::SECONDS_PER_ROW);
   }
+
+  /**
+   * Renders a legend explaining the shift coloring
+   */
+  private function renderLegend() {
+    return div('legend', [
+        label(_('Your shift'), 'primary'),
+        label(_('Help needed'), 'danger'),
+        label(_('Other angeltype needed / collides with my shifts'), 'warning'),
+        label(_('Shift is full'), 'success'),
+        label(_('Shift running/ended'), 'default') 
+    ]);
+  }
 }
 
 ?>
\ No newline at end of file
diff --git a/public/css/theme0.css b/public/css/theme0.css
index daba1eba..02bdeb7f 100644
--- a/public/css/theme0.css
+++ b/public/css/theme0.css
@@ -6730,6 +6730,24 @@ body {
 .footer a {
   color: #777777;
 }
+.panel-primary .panel-heading a {
+  color: #ffffff;
+}
+.panel-default .panel-heading a {
+  color: #333333;
+}
+.panel-info .panel-heading a {
+  color: #31708f;
+}
+.panel-success .panel-heading a {
+  color: #3c763d;
+}
+.panel-warning .panel-heading a {
+  color: #8a6d3b;
+}
+.panel-danger .panel-heading a {
+  color: #a94442;
+}
 .shift-calendar {
   display: flex;
   flex-direction: row;
@@ -6744,7 +6762,7 @@ body {
   flex-grow: 1;
 }
 .shift-calendar .lane .header {
-  background: #fff;
+  background: #ffffff;
   height: 30px;
   padding: 5px;
 }
diff --git a/public/css/theme1.css b/public/css/theme1.css
index e9b6b4cd..d9cf7b73 100644
--- a/public/css/theme1.css
+++ b/public/css/theme1.css
@@ -6753,6 +6753,24 @@ body {
 .footer a {
   color: #888888;
 }
+.panel-primary .panel-heading a {
+  color: #ffffff;
+}
+.panel-default .panel-heading a {
+  color: #888888;
+}
+.panel-info .panel-heading a {
+  color: #ffffff;
+}
+.panel-success .panel-heading a {
+  color: #ffffff;
+}
+.panel-warning .panel-heading a {
+  color: #ffffff;
+}
+.panel-danger .panel-heading a {
+  color: #ffffff;
+}
 .shift-calendar {
   display: flex;
   flex-direction: row;
@@ -6767,7 +6785,7 @@ body {
   flex-grow: 1;
 }
 .shift-calendar .lane .header {
-  background: #fff;
+  background: #222222;
   height: 30px;
   padding: 5px;
 }
diff --git a/public/css/theme2.css b/public/css/theme2.css
index 7646f08b..4b6b1d67 100644
--- a/public/css/theme2.css
+++ b/public/css/theme2.css
@@ -6730,6 +6730,24 @@ body {
 .footer a {
   color: #777777;
 }
+.panel-primary .panel-heading a {
+  color: #ffffff;
+}
+.panel-default .panel-heading a {
+  color: #333333;
+}
+.panel-info .panel-heading a {
+  color: #826045;
+}
+.panel-success .panel-heading a {
+  color: #638232;
+}
+.panel-warning .panel-heading a {
+  color: #bc8640;
+}
+.panel-danger .panel-heading a {
+  color: #694374;
+}
 .shift-calendar {
   display: flex;
   flex-direction: row;
@@ -6744,7 +6762,7 @@ body {
   flex-grow: 1;
 }
 .shift-calendar .lane .header {
-  background: #fff;
+  background: #ffffff;
   height: 30px;
   padding: 5px;
 }
diff --git a/public/css/theme3.css b/public/css/theme3.css
index 014fee12..dd65c030 100644
--- a/public/css/theme3.css
+++ b/public/css/theme3.css
@@ -6739,6 +6739,24 @@ body {
 .footer a {
   color: #777777;
 }
+.panel-primary .panel-heading a {
+  color: #ffffff;
+}
+.panel-default .panel-heading a {
+  color: #333333;
+}
+.panel-info .panel-heading a {
+  color: #6618f9;
+}
+.panel-success .panel-heading a {
+  color: #39ab50;
+}
+.panel-warning .panel-heading a {
+  color: #dad216;
+}
+.panel-danger .panel-heading a {
+  color: #da1639;
+}
 .shift-calendar {
   display: flex;
   flex-direction: row;
@@ -6753,7 +6771,7 @@ body {
   flex-grow: 1;
 }
 .shift-calendar .lane .header {
-  background: #fff;
+  background: #ffffff;
   height: 30px;
   padding: 5px;
 }
diff --git a/themes/base.less b/themes/base.less
index 98c12514..3cef3d11 100644
--- a/themes/base.less
+++ b/themes/base.less
@@ -10,6 +10,30 @@ body {
   color: @text-muted;
 }
 
+.panel-primary .panel-heading a {
+  color: @panel-primary-text;
+}
+
+.panel-default .panel-heading a {
+  color: @panel-default-text;
+}
+
+.panel-info .panel-heading a {
+  color: @panel-info-text;
+}
+
+.panel-success .panel-heading a {
+  color: @panel-success-text;
+}
+
+.panel-warning .panel-heading a {
+  color: @panel-warning-text;
+}
+
+.panel-danger .panel-heading a {
+  color: @panel-danger-text;
+}
+
 .shift-calendar {
   display: flex;
   flex-direction: row;
@@ -29,7 +53,7 @@ body {
 	  flex-grow: 1;
 	  
 		.header {
-		  background: #fff;
+		  background: @panel-bg;
 		  height: 30px;
 		  padding: 5px;
 		}