diff --git a/client/dist/styles/debug.css b/client/dist/styles/debug.css
index 9515a1539..fffe37c0e 100644
--- a/client/dist/styles/debug.css
+++ b/client/dist/styles/debug.css
@@ -8,18 +8,12 @@ body{
 
 .info{
   padding:18px;
-  background-color:#003050;
   position:relative;
-  line-height:24px;
-  background-image:-webkit-gradient(linear,left top,left bottom,from(#002137),color-stop(10%,#003050),color-stop(90%,#003050),color-stop(90%,#002137));
-  background-image:-webkit-linear-gradient(#002137,#003050 10%,#003050 90%,#002137);
-  background-image:linear-gradient(#002137,#003050 10%,#003050 90%,#002137);
   z-index:9999;
 }
 
 .info,.info h1{
   margin:0 0 6px;
-  color:#fff;
 }
 
 .info h1{
@@ -31,35 +25,51 @@ body{
 }
 
 .info h3{
-  color:#7da4be;
+  color:#003050;
   font-size:16px;
   line-height:18px;
-  font-weight:400;
 }
 
 .info p{
   margin:0;
   font-size:14px;
-  color:#fff;
 }
 
 .info a{
-  color:#fff;
   font-weight:700;
   text-decoration:none;
+  color:#7da4be;
 }
 
 .info a:active,.info a:hover{
-  color:#fff;
   text-decoration:underline;
+  color:#7da4be;
+}
+
+.info li{
+  font-size:14px;
+  margin:6px 0;
 }
 
 .header{
-  margin:0;
-  border-bottom:6px solid #ccdef3;
-  height:23px;
-  background-color:#666673;
-  padding:4px 0 2px 6px;
+  background-color:#003050;
+  background-image:-webkit-gradient(linear,left top,left bottom,from(#002137),color-stop(10%,#003050),color-stop(90%,#003050),color-stop(90%,#002137));
+  background-image:-webkit-linear-gradient(#002137,#003050 10%,#003050 90%,#002137);
+  background-image:linear-gradient(#002137,#003050 10%,#003050 90%,#002137);
+  color:#fff;
+}
+
+.header h1{
+  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmdJREFUeNpiYCASxJ17p8BAAmAh0sD5QAyiFYk1mJGAoQFQQwWgQoKLjIQ+kG0w0EABqIEByOKLjYWZ/////48Yg5lwuPI+uqF/f/88TqyhKGEMdWU/ECegK/r358/Va8tnx5AceVBD9wOxAbqCX18+zbm+am7HpaktD9AcEQCNUBDYAAz7CxhhDFTYAKTqkSX+//37+N3tq4Xboh33ALmfYcEAVJsA9ZkAmhtABifCLIAZ/B5Z4Z9vX1ddXjK15srMzkdAA38iudQB6jNcAJRiFEEpBxbGAsiRtNxWLh3I/ITkSpC3QUGRTyBoYfGUiJFBmJiY/wIN/IAl2S1AdgAoQr88fdjHysMjwyks3ohkBCioEsFBEXv2zUdGRiY+JEmQIQ+hLoQZdgBo2BMmFpaYnx/e9a1yVu0AhT0QM0cefjSPhYs7DEm/IAs0TFewcvOmodmKnuSevLp0uouVi3sDMEJ3AX31GZ60uLjV0DLSJ7DB9/dsalHxDrcGukYbV+B9enJ/xu5Un2tA5i1YhCKVIwbIqQkUN+Ccd7Ip7+nlRZP9QakB3UCQwrc3LoVsDrY4BdTwF8nQAiB1HogdkNX//v5tOUpZwQgMZCDFZ906S51fQVUGmjk+7Un3vwRKRkgGYi1HYMkUmKJSQMGEUQgBLWBGyur/gIp+I6VjA2g6Rs8cDNAIbYalKIzkBvIuKDnjCGqMHAdKdi8vnCgE+uwESoQykAYc0MuRlfaKVdCg+o232MRT6AugRyjQ0BKgga/RDSUJgCI39vTrRxGHHszWzahQBfLZGagFgIaJAzE/NAXhBQABBgBJL0aZBy/F5wAAAABJRU5ErkJggg==) no-repeat right 3px;
+}
+
+.header h3{
+  color:#7da4be;
+  font-weight:400;
+}
+
+.header a,.header a:active,.header a:hover,.header p{
+  color:#fff;
 }
 
 .build,.options,.trace{
@@ -69,11 +79,6 @@ body{
   z-index:9999;
 }
 
-.build li,.options li,.trace li{
-  font-size:14px;
-  margin:6px 0;
-}
-
 a{
   color:#666;
 }
@@ -149,4 +154,4 @@ fieldset{
   background:#ffe9e9;
   border:1px solid #c80700;
   border-radius:4px;
-}
\ No newline at end of file
+}
diff --git a/client/src/styles/debug.scss b/client/src/styles/debug.scss
index 7db8fe526..e609f6a87 100644
--- a/client/src/styles/debug.scss
+++ b/client/src/styles/debug.scss
@@ -6,15 +6,13 @@ body {
   font-family: Helvetica, Arial, sans-serif;
 }
 
+/**
+ * Use class="info" for a regular backgroun
+ */
 .info {
   margin: 0 0 6px 0;
   padding: 18px;
-  background-color: #003050;
   position: relative;
-  line-height: 24px;
-  color: #fff;
-
-  background-image: linear-gradient(darken(#003050, 5%), #003050 10%, #003050 90%, darken(#003050, 5%));
 
   // try to get the info above the template with z-index
   z-index: 9999;
@@ -22,7 +20,6 @@ body {
   h1 {
     margin: 0 0 6px 0;
     padding: 0 32px 0 0;
-    color: #fff;
     font-size: 24px;
     text-shadow: 0 1px darken(#003050, 5%);
     line-height: 30px;
@@ -31,41 +28,66 @@ body {
   }
 
   h3 {
-    color: #7da4be;
+    color: #003050;
     font-size: 16px;
     line-height: 18px;
-    font-weight: normal;
   }
 
   p {
     margin: 0;
     font-size: 14px;
+  }
+
+  a {
+    font-weight: bold;
+    text-decoration: none;
+    color: #7da4be;
+
+    &:hover,
+    &:active {
+      text-decoration: underline;
+      color: #7da4be;
+    }
+  }
+
+  li {
+    font-size: 14px;
+    margin: 6px 0;
+  }
+}
+
+/**
+ * Use class="info header" to get the dark background
+ */
+.header {
+  background-color: #003050;
+  background-image: linear-gradient(darken(#003050, 5%), #003050 10%, #003050 90%, darken(#003050, 5%));
+
+  color: #fff;
+
+  h1 {
+    background: url("../images/logo_small.png") no-repeat right 3px;
+  }
+
+  h3 {
+    color: #7da4be;
+    font-weight: normal;
+  }
+
+  p {
     color: #fff;
   }
 
   a {
     color: #fff;
-    font-weight: bold;
-    text-decoration: none;
 
     &:hover,
     &:active {
       color: #fff;
-      text-decoration: underline;
     }
   }
 }
 
-
-
-.header {
-  margin: 0;
-  border-bottom: 6px solid #ccdef3;
-  height: 23px;
-  background-color: #666673;
-  padding: 4px 0 2px 6px;
-}
-
 .trace,
 .build,
 .options {
@@ -76,10 +98,6 @@ body {
   position: relative;
   z-index: 9999;
 
-  li {
-    font-size: 14px;
-    margin: 6px 0;
-  }
 }
 
 a {
diff --git a/src/Dev/DebugView.php b/src/Dev/DebugView.php
index 2d6790f35..a77e042a8 100644
--- a/src/Dev/DebugView.php
+++ b/src/Dev/DebugView.php
@@ -237,7 +237,7 @@ class DebugView extends Object
      */
     public function renderInfo($title, $subtitle, $description = false)
     {
-        $output = '<div class="info">';
+        $output = '<div class="info header">';
         $output .= "<h1>" . Convert::raw2xml($title) . "</h1>";
         if ($subtitle) {
             $output .= "<h3>" . Convert::raw2xml($subtitle) . "</h3>";
@@ -280,7 +280,7 @@ class DebugView extends Object
         } else {
             $errstr = Convert::raw2xml($errstr);
         }
-        $output = '<div class="info ' . $errorType['class'] . '">';
+        $output = '<div class="header info ' . $errorType['class'] . '">';
         $output .= "<h1>[" . $errorType['title'] . '] ' . $errstr . "</h1>";
         $output .= "<h3>$httpRequestEnt</h3>";
         $output .= "<p>Line <strong>$errline</strong> in <strong>$errfile</strong></p>";
@@ -298,7 +298,7 @@ class DebugView extends Object
      */
     public function renderSourceFragment($lines, $errline)
     {
-        $output = '<div class="trace"><h3>Source</h3>';
+        $output = '<div class="info"><h3>Source</h3>';
         $output .= '<pre>';
         foreach ($lines as $offset => $line) {
             $line = htmlentities($line, ENT_COMPAT, 'UTF-8');
@@ -308,7 +308,7 @@ class DebugView extends Object
                 $output .= "<span>$offset</span> $line";
             }
         }
-        $output .= '</pre>';
+        $output .= '</pre></div>';
 
         return $output;
     }
@@ -321,7 +321,8 @@ class DebugView extends Object
      */
     public function renderTrace($trace)
     {
-        $output = '<h3>Trace</h3>';
+        $output = '<div class="info">';
+        $output .= '<h3>Trace</h3>';
         $output .= Backtrace::get_rendered_backtrace($trace);
         $output .= '</div>';
 
@@ -336,7 +337,7 @@ class DebugView extends Object
      */
     public function renderParagraph($text)
     {
-        return '<p class="info">' . $text . '</p>';
+        return '<div class="info"><p>' . $text . '</p></div>';
     }
 
     /**
diff --git a/src/Dev/Install/client/dist/styles/install.css b/src/Dev/Install/client/dist/styles/install.css
index a34b557a5..631e9f1e5 100644
--- a/src/Dev/Install/client/dist/styles/install.css
+++ b/src/Dev/Install/client/dist/styles/install.css
@@ -588,4 +588,4 @@ body #Footer p{
   font-size:18px;
   padding:0 2px 2px 0;
   font-weight:700;
-}
\ No newline at end of file
+}