diff --git a/doc/Icinga-Design/documentation.html b/doc/Icinga-Design/documentation.html
index 3970273ea..90d7ee4b6 100644
--- a/doc/Icinga-Design/documentation.html
+++ b/doc/Icinga-Design/documentation.html
@@ -506,33 +506,33 @@ code...
               <tbody>
 
                 <tr>
-                  <td class="enabled">Passive Checks</td>
+                  <td>Passive Checks</td>
                   <td><div class="icon-table-hint icon-edit pull-left"></div></td>
                   <td><input type="checkbox" id="#" name="#" class="pull-right" checked /></td>
                 </tr>
 
                 <tr>
-                  <td class="disabled">Active Checks</td>
+                  <td>Active Checks</td>
                   <td></td>
                   <td><input type="checkbox" id="#" name="#" class="pull-right" /></td>
                 </tr>
                 <tr>
-                  <td class="enabled">Obsessing</td>
+                  <td>Obsessing</td>
                   <td><div class="icon-table-hint icon-edit pull-left"></div></td>
                   <td><input type="checkbox" id="#" name="#" class="pull-right" checked /></td>
                 </tr>
                 <tr>
-                  <td class="enabled">Notifications</td>
+                  <td>Notifications</td>
                   <td></td>
                   <td><input type="checkbox" id="#" name="#" class="pull-right" checked /></td>
                 </tr>
                 <tr>
-                  <td class="disabled">Event Handler</td>
+                  <td>Event Handler</td>
                   <td><div class="icon-table-hint icon-edit pull-left"></div></td>
                   <td><input type="checkbox" id="#" name="#" class="pull-right" /></td>
                 </tr>
                 <tr>
-                  <td class="disabled">Flap Detection</td>
+                  <td>Flap Detection</td>
                   <td></td>
                   <td><input type="checkbox" id="#" name="#" class="pull-right" /></td>
                 </tr>
@@ -543,15 +543,6 @@ code...
 
 
 
-
-
-
-
-
-
-
-
-
         </div><!-- .docu-module -->
       </div><!-- .docu-example -->
 
@@ -610,26 +601,57 @@ code...
     </div><!-- .docu-section --> 
 
 
-    <h1 class="docu-main-headline">Buttons</h1>
+    <h1 class="docu-main-headline">Main Navigation</h1>
 
-    <h1 class="docu-sub-headline">Link Button</h1>
+<!--     <h1 class="docu-sub-headline">Sub Header</h1>
     <div class="docu-description">
-      Link buttons are used for the main menu links on the bottom of every page.
-    </div>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
+    </div> -->
 
     <div class="docu-section">
       <div class="docu-example">
         <div class="docu-module">
-          <a class="clickable-bg frame island--medium link-arrow" href="#">Lorem Ipsum</a>
+
+          <ul id="icinganavigation" role="navigation" class="nav nav-stacked">
+            <li class="icon-main-nav nav-icon-hosts">
+            <a href="/icinga2-web/monitoring/list/hosts">Hosts</a>
+            </li>
+            <li class="icon-main-nav nav-icon-services">
+            <a href="/icinga2-web/monitoring/list/services" class="nav-notification">Services</a>
+              <span class="badge-container-nav">
+                <a href="/icingawebinsfx/monitoring/list/services?host=host_000&amp;service_problems=1" class="badge-nav">
+                    12
+                </a>
+              </span>  
+            </li>
+            <li class="icon-main-nav nav-icon-downtimes">
+            <a href="/icinga2-web/monitoring/list/downtimes">Downtimes</a>
+            </li>
+            <li class="icon-main-nav nav-icon-notifications">
+            <a href="/icinga2-web/monitoring/list/notifications">Notifications</a>
+            </li>
+            <li class="icon-main-nav nav-icon-comments">
+            <a href="/icinga2-web/monitoring/list/comments">Comments</a>
+            </li>
+            <li class="icon-main-nav nav-icon-dashboard active">
+            <a href="/icinga2-web/dashboard/index">Dashboard</a>
+            </li>
+            <li class="icon-main-nav nav-icon-configuration">
+            <a href="/icinga2-web/config/index">Configuration</a>
+            </li>
+           </ul>
+
+
         </div><!-- .docu-module -->
       </div><!-- .docu-example -->
 
+
+
       <div class="docu-codeblock">
-        <textarea class="docu-code"><a class="clickable-bg frame island--medium link-arrow" href="#">Lorem Ipsum</a>
+        <textarea class="docu-code">Code... Code...
         </textarea> 
       </div><!-- .docu-codeblock -->
-
-    </div><!-- .docu-section -->   
+    </div><!-- .docu-section --> 
 
 
 
diff --git a/doc/Icinga-Design/icinga-design.css b/doc/Icinga-Design/icinga-design.css
index 919c265ef..d648f9bec 100644
--- a/doc/Icinga-Design/icinga-design.css
+++ b/doc/Icinga-Design/icinga-design.css
@@ -167,7 +167,7 @@ td {
 .badge a:hover,
 .badge:hover {
   color: #ff3300 !important;
-  display: block !important;
+  display: inline-block !important;
 
 }
 
@@ -191,11 +191,11 @@ td {
 
 
 
-.disabled {
+.panel-disabled {
   border-left: 8px solid #FF3300;
 }
 
-.enabled {
+.panel-enabled {
   border-left: 8px solid #00CC33;
 }
 
@@ -625,4 +625,123 @@ input[type="checkbox"]:checked + label span {
 .btn-half-right {
   float: right;
   width: 48%;
-}
\ No newline at end of file
+}
+
+
+/* ==========================================================================
+   Main Navigation
+   ========================================================================== */
+
+
+.nav-stacked {
+  background-color: #f8f8f8;
+}
+
+.nav-stacked > li {
+  padding-top: 5px;
+  padding-bottom: 7px;
+  border-bottom: 1px dotted #049baf;
+  border-right: 1px dotted #049baf;
+}
+.nav-stacked > li:first-child {
+  border-top: 1px dotted #049baf;
+}
+
+.nav-stacked > li > a {
+  padding-left: 40px;
+  padding-right: 3px;
+  border-left: 6px solid #049baf;
+  display: inline-block;
+}
+
+.nav-stacked > li > a.nav-notification {
+  border-left: 6px solid red !important;
+}
+
+.nav-stacked > li > a:hover, 
+.nav-stacked > li > a:focus {
+/*  font-weight: bold;*/
+  background-color: transparent; !important;
+  display: inline-block;
+}
+
+.nav-stacked > li:hover, 
+.nav-stacked > li:focus {
+background-color: #fff;
+
+}
+
+.nav-stacked > li.active {
+  background-color: #fff;
+  border-right: 0;
+}
+
+
+
+
+.nav-icon-hosts {
+  background-image: url('images/host_petrol.png');
+  background-repeat: no-repeat;
+  background-position: 18px 17px;
+} 
+
+.nav-icon-services {
+  background-image: url('images/service_petrol.png');
+  background-repeat: no-repeat;
+  background-position: 19px 18px;
+} 
+.nav-icon-downtimes {
+  background-image: url('images/in_downtime_petrol.png');
+  background-repeat: no-repeat;
+  background-position: 19px 17px;
+} 
+.nav-icon-notifications {
+  background-image: url('images/notification_petrol.png');
+  background-repeat: no-repeat;
+  background-position: 19px 18px;
+} 
+.nav-icon-comments {
+  background-image: url('images/comment_petrol.png');
+  background-repeat: no-repeat;
+  background-position: 19px 19px;
+} 
+.nav-icon-dashboard {
+  background-image: url('images/dashboard_petrol.png');
+  background-repeat: no-repeat;
+  background-position: 19px 19px;
+} 
+.nav-icon-configuration {
+  background-image: url('images/configuration_petrol.png');
+  background-repeat: no-repeat;
+  background-position: 19px 19px;
+} 
+
+
+
+.badge-container-nav {
+  display: inline-block;
+  overflow: hidden;
+  padding-top: 0;
+  margin-bottom: 5px;
+}
+.badge-nav {
+  background-color: #fff;
+  border-radius: 2px;
+  color: #ff3300;
+  display: inline-block;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 1;
+  min-width: 10px;
+  padding-bottom: 3px;
+  padding-left: 7px;
+  padding-right: 7px;
+  padding-top: 3px;
+  text-align: center;
+  vertical-align: baseline;
+  white-space: nowrap;
+  border: 1px solid #ff3300;
+}
+
+
+
diff --git a/doc/Icinga-Design/images/comment_petrol.png b/doc/Icinga-Design/images/comment_petrol.png
new file mode 100644
index 000000000..53c1223e9
Binary files /dev/null and b/doc/Icinga-Design/images/comment_petrol.png differ
diff --git a/doc/Icinga-Design/images/configuration_petrol.png b/doc/Icinga-Design/images/configuration_petrol.png
new file mode 100644
index 000000000..8168133ec
Binary files /dev/null and b/doc/Icinga-Design/images/configuration_petrol.png differ
diff --git a/doc/Icinga-Design/images/dashboard_petrol.png b/doc/Icinga-Design/images/dashboard_petrol.png
new file mode 100644
index 000000000..04936ba85
Binary files /dev/null and b/doc/Icinga-Design/images/dashboard_petrol.png differ
diff --git a/doc/Icinga-Design/images/host_petrol.png b/doc/Icinga-Design/images/host_petrol.png
new file mode 100644
index 000000000..6568fe6f7
Binary files /dev/null and b/doc/Icinga-Design/images/host_petrol.png differ
diff --git a/doc/Icinga-Design/images/in_downtime_petrol.png b/doc/Icinga-Design/images/in_downtime_petrol.png
new file mode 100644
index 000000000..f6ee49a6b
Binary files /dev/null and b/doc/Icinga-Design/images/in_downtime_petrol.png differ
diff --git a/doc/Icinga-Design/images/notification_petrol.png b/doc/Icinga-Design/images/notification_petrol.png
new file mode 100644
index 000000000..cf4e9505a
Binary files /dev/null and b/doc/Icinga-Design/images/notification_petrol.png differ
diff --git a/doc/Icinga-Design/images/service_petrol.png b/doc/Icinga-Design/images/service_petrol.png
new file mode 100644
index 000000000..ea165a293
Binary files /dev/null and b/doc/Icinga-Design/images/service_petrol.png differ