diff --git a/images/containers.png b/images/containers.png
new file mode 100644
index 0000000..e344c1d
Binary files /dev/null and b/images/containers.png differ
diff --git a/index.html b/index.html
index a979b83..4d17962 100644
--- a/index.html
+++ b/index.html
@@ -16,9 +16,9 @@
     <link href="jumbotron.css" rel="stylesheet">
   </head>
 
-  <body>
+  <body class="">
 
-    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" style="">
       <a class="navbar-brand" href="#">Portal</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -30,24 +30,25 @@
             <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
           </li>
 
-          <!--
-          <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li>-->
-
-          <!--
-          <li class="nav-item">
-            <a class="nav-link disabled" href="#">Disabled</a>
-          </li>-->
-
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="http://wiki.wolfsberg.local/meta/passworter" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Server</a>
+          <li class="nav-item dropdown ml-2">
+            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Server</a>
             <div class="dropdown-menu" aria-labelledby="dropdown01">
               <a class="dropdown-item" href="http://esx1.wolfsberg.local">ESX</a>
               <a class="dropdown-item" href="http://xenserver.wolfsberg.local">XenServer</a>
               <a class="dropdown-item" href="http://hera.wolfsberg.local">Hyper-V</a>
             </div>
           </li>
+          <li class="nav-item dropdown ml-2">
+            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dienste</a>
+            <div class="dropdown-menu" aria-labelledby="dropdown01">
+              <a class="dropdown-item" href="http://codi.wolfsberg.local">CodiMD</a>
+              <a class="dropdown-item" href="http://wiki.wolfsberg.local">WikiJS</a>
+              <a class="dropdown-item" href="http://git.wolfsberg.local">Git</a>
+            </div>
+          </li>
+          <li class="nav-item ml-2">
+            <a class="nav-link" href="http://codi.wolfsberg.local:3000/euG-i3V9T12SKXVREOEDlA">Notizblatt</a>
+          </li>
 
         </ul>
       </div>
@@ -56,43 +57,57 @@
     <main role="main">
 
       <!-- Main jumbotron for a primary marketing message or call to action -->
-      <div class="jumbotron">
-        <div class="container">
-          <h1 class="display-3">Willkommen!</h1>
-          <p>Dies ist das Portal des IT-L@B Wolfsbergs. Hier findest du alle möglichen Links zu internen Ressourcen!</p>
-          <p>Weiter unten sind einige Quick-Links zu wichtigen Diensten. Oben in der Navigation Bar sind alle Ressourcen in den Menüs zu finden. Für eine weitere Infos zur Infrastruktur, hier klicken:</p>
-         <p><a class="btn btn-primary" href="http://wiki.wolfsberg.local/meta/infrastruktur" role="button">Weitere Infos &raquo;</a></p>
 
+      <div class="jumbotron bg-light px-auto py-5 shadow">
+        <div class="container">
+          <div class="media">
+            <div class="media-body">
+              <h1 class="display-6">Willkommen!</h1>
+              <p>Dies ist das Portal des IT-L@B Wolfsbergs. Hier findest du alle möglichen Links zu internen Ressourcen!</p>
+              <p>Weiter unten sind einige Quick-Links zu wichtigen Diensten. Oben in der Navigation Bar sind alle Ressourcen in den Menüs zu finden.</p>
+              <p><a class="btn btn-primary" href="http://wiki.wolfsberg.local/meta/infrastruktur" role="button">Weitere Infos &raquo;</a></p>
+            </div>
+              <img class="ml-4" src="images/containers.png" alt="Generic placeholder image" style="height:200px">
+          </div>
         </div>
       </div>
+    </div>
 
       <div class="container">
         <!-- Example row of columns -->
         <div class="row">
-          <div class="col-md-4">
-            <h2>Wiki</h2>
-            <p>Auf unserer Wiki finden sich viele, von den Lehrlingen und Trainern zusammengetragene, nützliche Informationen zu Projekten, Problemen, und vielem mehr.</p>
-            <p><a class="btn btn-secondary" href="http://wiki.wolfsberg.local/" role="button">Zur Wiki &raquo;</a></p>
+
+          <div class="card border-dark bg-light mx-auto shadow" style="width: 15rem;">
+            <div class="card-body">
+              <h5 class="card-title">Wiki</h5>
+              <p class="card-text">Viele Informationen zu verschiedenen Themen findest du in unserer Wiki.</p>
+              <p><a class="btn btn-dark mt-1" href="http://wiki.wolfsberg.local/meta/infrastruktur" role="button">Weitere Infos &raquo;</a></p>
+            </div>
           </div>
-          <div class="col-md-4">
-            <h2>Codi</h2>
-            <p>Über CodiMD ist. das gemeinsame Arbeiten und erstellen von Dokumentationen einfach und kinderleicht. Einfach eine neue Notiz erstellen, Link teilen, und losarbeiten.</p>
-            <p><a class="btn btn-secondary" href="http://codi.wolfsberg.local/" role="button">Zum Codi &raquo;</a></p>
+
+          <div class="card border-dark bg-light mx-auto shadow" style="width: 15rem;">
+            <div class="card-body">
+              <h5 class="card-title">Wiki</h5>
+              <p class="card-text">Viele Informationen zu verschiedenen Themen findest du in unserer Wiki.</p>
+              <p><a class="btn btn-dark mt-1" href="http://wiki.wolfsberg.local/meta/infrastruktur" role="button">Weitere Infos &raquo;</a></p>
+            </div>
           </div>
-          <div class="col-md-4">
-            <h2>Git</h2>
-            <p>Codeprojekte von Lehrlingen und Trainern für verschiedenste Projekte finden sich am Git-Server.</p>
-            <p><a class="btn btn-secondary" href="http://git.wolfsberg.local/" role="button">Zum Git &raquo;</a></p>
+
+          <div class="card border-dark bg-light mx-auto shadow" style="width: 15rem;">
+            <div class="card-body">
+              <h5 class="card-title">Wiki</h5>
+              <p class="card-text">Viele Informationen zu verschiedenen Themen findest du in unserer Wiki.</p>
+              <p><a class="btn btn-dark mt-1" href="http://wiki.wolfsberg.local/meta/infrastruktur" role="button">Weitere Infos &raquo;</a></p>
+            </div>
           </div>
-          <div class="card" style="width: 18rem;">
-          <div class="card-body">
-            <h5 class="card-title">Card title</h5>
-            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            <a href="#" class="card-link">Card link</a>
-            <a href="#" class="card-link">Another link</a>
+
+          <div class="card border-dark bg-light mx-auto shadow" style="width: 15rem;">
+            <div class="card-body">
+              <h5 class="card-title">Wiki</h5>
+              <p class="card-text">Viele Informationen zu verschiedenen Themen findest du in unserer Wiki.</p>
+              <p><a class="btn btn-dark mt-1" href="http://wiki.wolfsberg.local/meta/infrastruktur" role="button">Weitere Infos &raquo;</a></p>
+            </div>
           </div>
-</div>
 
         </div>
 
