diff --git a/library/Businessprocess/Web/Component/RenderedProcessActionBar.php b/library/Businessprocess/Web/Component/RenderedProcessActionBar.php
index ae07807..939ce98 100644
--- a/library/Businessprocess/Web/Component/RenderedProcessActionBar.php
+++ b/library/Businessprocess/Web/Component/RenderedProcessActionBar.php
@@ -15,27 +15,27 @@ class RenderedProcessActionBar extends ActionBar
     {
         $meta = $config->getMetadata();
 
-        if ($renderer instanceof TreeRenderer) {
-            $this->add(Html::tag(
-                'a',
-                [
-                    'href'  => $url->with('mode', 'tile'),
-                    'title' => mt('businessprocess', 'Switch to Tile view'),
-                    'class' => 'icon-dashboard'
-                ],
-                mt('businessprocess', 'Tiles')
-            ));
-        } else {
-            $this->add(Html::tag(
-                'a',
-                [
-                    'href'  => $url->with('mode', 'tree'),
-                    'title' => mt('businessprocess', 'Switch to Tree view'),
-                    'class' => 'icon-sitemap'
-                ],
-                mt('businessprocess', 'Tree')
-            ));
-        }
+        $toggle = Html::tag('div', ['class' => 'view-toggle']);
+        $toggle->add(Html::tag('span', null, mt('businessprocess', 'View')));
+        $toggle->add(Html::tag(
+            'a',
+            [
+                'href'  => $url->with('mode', 'tile'),
+                'title' => mt('businessprocess', 'Switch to Tile view'),
+                'class' => $renderer instanceof TreeRenderer ? '' : 'active'
+            ],
+            Html::tag('i', ['class' => 'icon icon-dashboard'])
+        ));
+        $toggle->add(Html::tag(
+            'a',
+            [
+                'href'  => $url->with('mode', 'tree'),
+                'title' => mt('businessprocess', 'Switch to Tree view'),
+                'class' => $renderer instanceof TreeRenderer ? 'active' : ''
+            ],
+            Html::tag('i', ['class' => 'icon icon-sitemap'])
+        ));
+        $this->add($toggle);
 
         $this->add(Html::tag(
             'a',
diff --git a/public/css/module.less b/public/css/module.less
index 9014059..41b97c6 100644
--- a/public/css/module.less
+++ b/public/css/module.less
@@ -9,11 +9,10 @@ a:focus {
 .action-bar {
     display: flex;
     align-items: center;
+    font-size: 1.3em;
+    color: @icinga-blue;
 
-    a {
-        font-size: 1.3em;
-        color: @icinga-blue;
-
+    > a {
         &:hover::before {
             text-decoration: none;
         }
@@ -35,6 +34,40 @@ a:focus {
             }
         }
     }
+
+    > div.view-toggle {
+        margin-right: 1em;
+
+        span {
+            color: @gray;
+            margin-right: .5em;
+        }
+
+        a {
+            padding: .25em .5em;
+            border: 1px solid @icinga-blue;
+
+            i::before {
+                margin-right: 0;
+            }
+
+            &.active {
+                color: white;
+                background-color: @icinga-blue;
+            }
+
+            &:first-of-type {
+                border-right-width: 0;
+                border-top-left-radius: .25em;
+                border-bottom-left-radius: .25em;
+            }
+            &:last-of-type {
+                border-left-width: 0;
+                border-top-right-radius: .25em;
+                border-bottom-right-radius: .25em;
+            }
+        }
+    }
 }
 
 form a {