diff --git a/includes/sys_template.php b/includes/sys_template.php
index f3010dc4..96df3936 100644
--- a/includes/sys_template.php
+++ b/includes/sys_template.php
@@ -82,9 +82,9 @@ function mute($text)
  * @param string $class   default, primary, info, success, warning, danger
  * @return string
  */
-function label($content, $class = 'default')
+function badge($content, $class = 'default')
 {
-    return '<span class="label label-' . $class . '">' . $content . '</span>';
+    return '<span class="badge rounded-pill bg-' . $class . '">' . $content . '</span>';
 }
 
 /**
diff --git a/includes/view/ShiftCalendarRenderer.php b/includes/view/ShiftCalendarRenderer.php
index 452bffa0..a8f8b4c3 100644
--- a/includes/view/ShiftCalendarRenderer.php
+++ b/includes/view/ShiftCalendarRenderer.php
@@ -312,11 +312,11 @@ class ShiftCalendarRenderer
     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 or user not arrived/allowed'), 'default')
+            badge(__('Your shift'), 'primary'),
+            badge(__('Help needed'), 'danger'),
+            badge(__('Other angeltype needed / collides with my shifts'), 'warning'),
+            badge(__('Shift is full'), 'success'),
+            badge(__('Shift running/ended or user not arrived/allowed'), 'default')
         ]);
     }
 }