diff --git a/library/Businessprocess/Renderer/Renderer.php b/library/Businessprocess/Renderer/Renderer.php
index e5b98db..91f9f4d 100644
--- a/library/Businessprocess/Renderer/Renderer.php
+++ b/library/Businessprocess/Renderer/Renderer.php
@@ -126,9 +126,7 @@ abstract class Renderer extends Html
      */
     public function renderStateBadges($summary)
     {
-        $container = Container::create(
-            array('class' => 'badges')
-        )/* ->renderIfEmpty(false) */;
+        $elements = [];
 
         foreach ($summary as $state => $cnt) {
             if ($cnt === 0
@@ -138,22 +136,31 @@ abstract class Renderer extends Html
                 continue;
             }
 
-            $container->addContent(
-                Element::create(
-                    'span',
-                    array(
-                        'class' => array(
-                            'badge',
-                            'badge-' . strtolower($state)
-                        ),
-                        // TODO: We should translate this in this module
-                        'title' => mt('monitoring', $state)
-                    )
-                )->setContent($cnt)
-            );
+            $elements[] = Element::create(
+                'span',
+                array(
+                    'class' => array(
+                        'badge',
+                        'badge-' . strtolower($state)
+                    ),
+                    // TODO: We should translate this in this module
+                    'title' => mt('monitoring', $state)
+                )
+            )->setContent($cnt);
         }
 
-        return $container;
+        if (!empty($elements)) {
+            $container = Container::create(
+                array('class' => 'badges')
+            )/* ->renderIfEmpty(false) */;
+
+            foreach ($elements as $element) {
+                $container->addContent($element);
+            }
+
+            return $container;
+        }
+        return null;
     }
 
     public function getNodeClasses(Node $node)
diff --git a/public/css/module.less b/public/css/module.less
index 4ac3140..72a4036 100644
--- a/public/css/module.less
+++ b/public/css/module.less
@@ -383,13 +383,14 @@ div.knightrider table.bp {
 
 /** BEGIN Badges **/
 .badges {
+    background-color: fade(@body-bg-color, 50%);
+    border-radius: 0.45em;
     display: block;
-    padding: 0.5em;
+    padding: 0.3em 0.4em;
 
     .badge {
         border: 1px solid white;
         margin: 0;
-        margin-right: 1px;
     }
 }
 
@@ -398,13 +399,19 @@ div.bp .badges {
     padding-top: 0;
 }
 
+
+
+td > a > .badges {
+    background-color: transparent;
+}
+
 .badge-critical, .badge-down { background: @colorCritical; }
 .badge-unknown, .badge-unreachable { background: @colorUnknown; }
 .badge-warning { background: @colorWarning; }
 .badge-pending { background: @colorPending; }
 .badge-missing { background: #ccc; }
 /** END Badges **/
-
+.badges
 /** BEGIN Tiles **/
 .tiles:after {
     content:'';
@@ -422,8 +429,13 @@ div.bp .badges {
     margin-bottom: 0.2em;
     height: 6em;
     cursor: pointer;
+    position: relative;
 
     .badges {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        margin: 0.5em;
         text-align: center;
         font-size: 0.5em;
         display: block;
@@ -431,6 +443,18 @@ div.bp .badges {
 
     > a {
         display: block;
+        position: relative;
+        text-decoration: none;
+        font-size: 0.7em;
+        text-align: center;
+        padding: 1em;
+        font-weight: bold;
+        word-wrap: break-word;
+        color: @text-color-inverted;
+        top: 50%;
+        -ms-transform: translateY(-50%);
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
     }
 
     &:hover {
@@ -438,9 +462,13 @@ div.bp .badges {
     }
 
     .actions {
+        opacity: 0.8;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        margin: 0.5em 0 0 0.5em;
         font-size: 0.75em;
-        margin-left: 0.5em;
-        padding-top: 0.2em;
         height: 1.8em;
 
         i {
@@ -480,35 +508,22 @@ div.bp .badges {
     height: 2em;
 }
 
-.tiles > div > a {
-    text-decoration: none;
-    font-size: 0.5em;
-    color: inherit;
-    vertical-align: middle;
-    text-align: center;
-    padding: 1em;
-    font-weight: bold;
-    word-wrap: break-word;
-    width: 100%;
-    box-sizing: border-box;
-}
-
 .tiles {
-    > .critical            { background-color: @colorCritical; background-color: @colorCritical; color: white; }
-    > .critical.handled    { background-color: @colorCriticalHandled; }
-    > .down                { background-color: @colorCritical; }
-    > .down.handled        { background-color: @colorCriticalHandled; }
-    > .unknown             { background-color: @colorUnknown; }
-    > .unknown.handled     { background-color: @colorUnknownHandled; }
-    > .unreachable         { background-color: @colorUnknown; }
-    > .unreachable.handled { background-color: @colorUnknownHandled; }
-    > .warning             { background-color: @colorWarning; }
-    > .warning.handled     { background-color: @colorWarningHandled; }
-    > .ok                  { background-color: @colorOk; }
-    > .up                  { background-color: @colorOk; }
-    > .pending             { background-color: @colorPending; }
-    > .missing             { background-color: #ccc; }
-    > .addnew              { background-color: @icinga-blue; }
+    > .critical            { background-color: @colorCritical;          > a { text-shadow: 0 0 1px mix(#000, @colorCritical, 40%); }}
+    > .critical.handled    { background-color: @colorCriticalHandled;   > a { text-shadow: 0 0 1px mix(#000, @colorCriticalHandled, 40%); }}
+    > .down                { background-color: @colorCritical;          > a { text-shadow: 0 0 1px mix(#000, @colorCritical, 40%); }}
+    > .down.handled        { background-color: @colorCriticalHandled;   > a { text-shadow: 0 0 1px mix(#000, @colorCriticalHandled, 40%); }}
+    > .unknown             { background-color: @colorUnknown;           > a { text-shadow: 0 0 1px mix(#000, @colorUnknown, 40%); }}
+    > .unknown.handled     { background-color: @colorUnknownHandled;    > a { text-shadow: 0 0 1px mix(#000, @colorUnknownHandled, 40%); }}
+    > .unreachable         { background-color: @colorUnknown;           > a { text-shadow: 0 0 1px mix(#000, @colorUnknown, 40%); }}
+    > .unreachable.handled { background-color: @colorUnknownHandled;    > a { text-shadow: 0 0 1px mix(#000, @colorUnknownHandled, 40%); }}
+    > .warning             { background-color: @colorWarning;           > a { text-shadow: 0 0 1px mix(#000, @colorWarning, 40%); }}
+    > .warning.handled     { background-color: @colorWarningHandled;    > a { text-shadow: 0 0 1px mix(#000, @colorWarningHandled, 40%); }}
+    > .ok                  { background-color: @colorOk;                > a { text-shadow: 0 0 1px mix(#000, @colorOk, 40%); }}
+    > .up                  { background-color: @colorOk;                > a { text-shadow: 0 0 1px mix(#000, @colorOk, 40%); }}
+    > .pending             { background-color: @colorPending;           > a { text-shadow: 0 0 1px mix(#000, @colorPending, 40%); }}
+    > .missing             { background-color: @gray-light;             > a { text-shadow: 0 0 1px @gray }}
+    > .addnew              { background-color: @icinga-blue;            > a { text-shadow: 0 0 1px mix(#000, @icinga-blue, 40%); }}
 }
 
 /*
@@ -559,13 +574,14 @@ div.bp .badges {
     padding: 0;
 
     .badges {
+        background-color: transparent;
+        border-radius: 0;
         display: inline-block;
         padding: 0 0 0 0.5em;
         .badge {
             line-height: 1.25em;
             font-size: 0.8em;
             border: 1px solid white;
-            margin: -0.25em 1px 0 0;
         }
     }
 }