diff --git a/application/forms/RotationConfigForm.php b/application/forms/RotationConfigForm.php
index 3a5b97bc..ab3c2fcd 100644
--- a/application/forms/RotationConfigForm.php
+++ b/application/forms/RotationConfigForm.php
@@ -602,6 +602,56 @@ protected function assembleModeSelection(): string
                 $value = $mode;
             }
 
+            switch ($mode) {
+                case 'partial':
+                    $labelDescription = [
+                        new HtmlElement(
+                            'span',
+                            null,
+                            Text::create($this->translate('Daily shifts with a daily handoff at a defined time.'))
+                        ),
+                        new HtmlElement(
+                            'span',
+                            new Attributes(['class' => 'example']),
+                            Text::create($this->translate('e.g. Working hours (Mon - Fri, 9AM - 5PM)'))
+                        )
+                    ];
+
+                    break;
+                case 'multi':
+                    $labelDescription = [
+                        new HtmlElement(
+                            'span',
+                            null,
+                            Text::create($this->translate('Shifts start at a certain time on one day of the week and'
+                                . ' end on another.'
+                            ))
+                        ),
+                        new HtmlElement(
+                            'span',
+                            new Attributes(['class' => 'example']),
+                            Text::create($this->translate('e.g. Weekend shifts (Fri 5PM - Mon 9AM)'))
+                        )
+                    ];
+
+                    break;
+                case '24-7':
+                    $labelDescription = [
+                        new HtmlElement(
+                            'span',
+                            null,
+                            Text::create($this->translate('24 h shifts starting at a certain time at the day'
+                                . ' on every day of the week.'
+                            ))
+                        ),
+                        new HtmlElement(
+                            'span',
+                            new Attributes(['class' => 'example']),
+                            Text::create($this->translate('e.g. Daily, 9AM - 5PM'))
+                        )
+                    ];
+            }
+
             $modeList->addHtml(new HtmlElement(
                 'li',
                 null,
@@ -609,15 +659,9 @@ protected function assembleModeSelection(): string
                     'label',
                     null,
                     $radio,
-                    new HtmlElement('img', Attributes::create([
-                        'src' => Url::fromPath(sprintf('img/notifications/pictogram/%s-gray.jpg', $mode)),
-                        'class' => 'unchecked'
-                    ])),
-                    new HtmlElement('img', Attributes::create([
-                        'src' => Url::fromPath(sprintf('img/notifications/pictogram/%s-colored.jpg', $mode)),
-                        'class' => 'checked'
-                    ])),
-                    Text::create($label)
+                    new HtmlElement('div', Attributes::create(['class' => ['mode-img', 'img-' . $mode]])),
+                    Text::create($label),
+                    ...$labelDescription
                 )
             ));
         }
diff --git a/public/css/form.less b/public/css/form.less
index c9626b66..a9c075a3 100644
--- a/public/css/form.less
+++ b/public/css/form.less
@@ -40,9 +40,9 @@
       padding: 0;
 
       label {
-        display: block;
+        display: flex;
+        flex-direction: column;
         width: 12em;
-        text-align: center;
 
         input {
           display: none;
@@ -80,6 +80,20 @@
 
 /* Style */
 
+.rotation-mode {
+  --img-24-7: url('../img/notifications/pictogram/24-7-dark.jpg');
+  --img-partial: url("../img/notifications/pictogram/partial-dark.jpg");
+  --img-multi: url("../img/notifications/pictogram/multi-dark.jpg");
+}
+
+@light-mode: {
+  .rotation-mode {
+    --img-24-7: url("../img/notifications/pictogram/24-7-light.jpg");
+    --img-partial: url("../img/notifications/pictogram/partial-light.jpg");
+    --img-multi: url("../img/notifications/pictogram/multi-light.jpg");
+  }
+};
+
 .rotation-config {
   label:not(:hover) {
     &.contact input:not(:focus) ~ .icon::before {
@@ -99,8 +113,46 @@
       background-color: @gray-lighter;
     }
 
-    img {
-      .box-shadow();
+    label {
+      font-weight: bold;
+
+      * {
+        font-weight: normal;
+      }
+
+      .example {
+         font-style: italic;
+         color: @gray;
+       }
+    }
+
+    .mode-img {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      aspect-ratio: 2;
+      width: 8em;
+      outline: 3px solid @icinga-blue;
+      margin-bottom: .5em;
+
+      .rounded-corners();
+
+      &.img-24-7 {
+        background-image: var(--img-24-7);
+      }
+
+      &.img-partial {
+        background-image: var(--img-partial);
+      }
+
+      &.img-multi {
+        background-image: var(--img-multi);
+      }
+    }
+
+    input:not(:checked) + .mode-img {
+      filter: grayscale(100%);
+      outline: 1px solid @gray-light;
     }
   }
 }
diff --git a/public/img/pictogram/24-7-colored.jpg b/public/img/pictogram/24-7-colored.jpg
deleted file mode 100644
index 0b48c81a..00000000
Binary files a/public/img/pictogram/24-7-colored.jpg and /dev/null differ
diff --git a/public/img/pictogram/24-7-dark.jpg b/public/img/pictogram/24-7-dark.jpg
new file mode 100644
index 00000000..b2fbc6fe
Binary files /dev/null and b/public/img/pictogram/24-7-dark.jpg differ
diff --git a/public/img/pictogram/24-7-gray.jpg b/public/img/pictogram/24-7-gray.jpg
deleted file mode 100644
index ecc7e285..00000000
Binary files a/public/img/pictogram/24-7-gray.jpg and /dev/null differ
diff --git a/public/img/pictogram/24-7-light.jpg b/public/img/pictogram/24-7-light.jpg
new file mode 100644
index 00000000..750df533
Binary files /dev/null and b/public/img/pictogram/24-7-light.jpg differ
diff --git a/public/img/pictogram/multi-colored.jpg b/public/img/pictogram/multi-colored.jpg
deleted file mode 100644
index 34b8df1c..00000000
Binary files a/public/img/pictogram/multi-colored.jpg and /dev/null differ
diff --git a/public/img/pictogram/multi-dark.jpg b/public/img/pictogram/multi-dark.jpg
new file mode 100644
index 00000000..6eb960a3
Binary files /dev/null and b/public/img/pictogram/multi-dark.jpg differ
diff --git a/public/img/pictogram/multi-gray.jpg b/public/img/pictogram/multi-gray.jpg
deleted file mode 100644
index f1f74610..00000000
Binary files a/public/img/pictogram/multi-gray.jpg and /dev/null differ
diff --git a/public/img/pictogram/multi-light.jpg b/public/img/pictogram/multi-light.jpg
new file mode 100644
index 00000000..75765be6
Binary files /dev/null and b/public/img/pictogram/multi-light.jpg differ
diff --git a/public/img/pictogram/partial-colored.jpg b/public/img/pictogram/partial-colored.jpg
deleted file mode 100644
index 51c73391..00000000
Binary files a/public/img/pictogram/partial-colored.jpg and /dev/null differ
diff --git a/public/img/pictogram/partial-dark.jpg b/public/img/pictogram/partial-dark.jpg
new file mode 100644
index 00000000..bedfeafd
Binary files /dev/null and b/public/img/pictogram/partial-dark.jpg differ
diff --git a/public/img/pictogram/partial-gray.jpg b/public/img/pictogram/partial-gray.jpg
deleted file mode 100644
index cfb3b623..00000000
Binary files a/public/img/pictogram/partial-gray.jpg and /dev/null differ
diff --git a/public/img/pictogram/partial-light.jpg b/public/img/pictogram/partial-light.jpg
new file mode 100644
index 00000000..f23b01e5
Binary files /dev/null and b/public/img/pictogram/partial-light.jpg differ