diff --git a/css/style.css b/css/style.css
index bd4a846..6ebd1de 100644
--- a/css/style.css
+++ b/css/style.css
@@ -19,7 +19,7 @@ body {
     background-repeat: no-repeat;
     background-size: cover;
     height: 500px;
-	overflow: hidden;
+	overflow: hidden;   
 	padding-left: 0px;
 	padding-right: 0px;
 }
diff --git a/images/bsc.png b/images/bsc.png
new file mode 100644
index 0000000..347cd00
Binary files /dev/null and b/images/bsc.png differ
diff --git a/images/leaflet.png b/images/leaflet.png
new file mode 100644
index 0000000..6c59499
Binary files /dev/null and b/images/leaflet.png differ
diff --git a/index.html b/index.html
index bfad519..79af547 100644
--- a/index.html
+++ b/index.html
@@ -14,62 +14,116 @@
   <!-- OWN CSS -->
   <link rel="stylesheet" type="text/css" href="css/style.css">
 
-  <title>Nothing to see here.</title>
+  <title>Projekte</title>
 </head>
 
 <body>
-
   <div class="container-fluid position-relative header">
-    <div class="blurred"></div>
-    <h4 class="position-absolute font-italic" style="bottom:5px;right:25px;">TEST</h4>
+    <div class="blurred p-3">
+      <h3 class="text-light">Projekte</h3>
+      <p class="text-light">Auf dieser sind meine privat-, hobby- sowie Hochschulprojekte aufgeführt.</p>
+      <h4 class="text-light">Legende</h4>
+      <table>
+        <tr>
+          <th style="min-width:100px;"><i class="fa fa-2x fa-play text-success"></i></th>
+          <td class="text-light">aktiv in Entwicklung</td>
+        </tr>
+        <tr>
+          <th style="min-width:100px;"><i class="fa fa-2x fa-pause text-warning"></i></th>
+          <td class="text-light">vorerst pausiert</td>
+        </tr>
+        <tr>
+          <th style="min-width:100px;"><i class="fa fa-2x fa-stop text-danger"></i></th>
+          <td class="text-light">abgebrochen</td>
+        </tr>
+        <tr>
+          <th style="min-width:100px;"><i class="fa fa-2x fa-check text-success"></i></th>
+          <td class="text-light">abgeschlossen</td>
+        </tr>
+      </table>
+    </div>
+    <h4 class="position-absolute font-italic text-secondary" style="bottom:5px;right:25px;">ebenfalls ein Hobby von mir ist Fotografie.</h4>
   </div>
 
   <div class="container-fluid p-2">
     <div class="row row-cols-1 mx-auto">
       <div class="col fixs">
         <div class="card">
-          <img class="card-img-top" src="https://via.placeholder.com/150x80" alt="Card image cap">
+          <img class="card-img-top" height="200" src="https://via.placeholder.com/400x200" alt="Card image cap">
           <div class="card-body">
             <h5 class="card-title text-light">Web-Ocean</h5>
-            <p class="card-text text-light">Ein Typescript-Port des Ocean C++ Projekts. Herausfordernd ist die Begrenzung von OpenGL auf webgl wodurch keine compute Shader zur Verfügung stehen.</p>
-            <i class="fa fa-2x fa-git-square"></i>
+            <p class="card-text text-light">Ein Typescript-Port des C-Ocean Projekts. Herausfordernd ist die Einschränkung von OpenGL auf webgl wodurch keine compute Shader zur Verfügung stehen.</p>
+            <p class="card-text text-light">#Typescript, #webGL, #Simulation</p>
             <i class="fa fa-2x fa-play text-success"></i>
             <i class="fa fa-2x fa-pause text-warning"></i>
             <i class="fa fa-2x fa-stop text-danger"></i>
+            <i class="fa fa-2x fa-git-square float-right"></i>
           </div>
         </div>
       </div>
       <div class="col fixs">
         <div class="card">
-          <div class="card-header">
-            Featured
+          <img class="card-img-top" height="200" src="images/bsc.png" alt="Card image cap">
+          <div class="card-body">
+            <h5 class="card-title text-light">C-Ocean</h5>
+            <p class="card-text text-light">Erste Implementation des Ozeans in C während meiner Bachelorarbeit. Für die Wellenbewebung wurde Perlin Noise eingesetzt. In der Frustum Culling-Ansicht.</p>
+            <i class="fa fa-2x fa-check text-success"></i>
+            <a href="data/bsc.pdf"><i class="fa fa-2x fa-file-pdf-o float-right"></i></a>
+            <i class="fa fa-2x fa-git-square float-right" ></i>
           </div>
         </div>
       </div>
       <div class="col fixs">
         <div class="card">
-          <div class="card-header">
-            Featured
+          <img class="card-img-top" src="https://via.placeholder.com/150x80" alt="Card image cap">
+          <div class="card-body">
+            <h5 class="card-title text-light">Verbesserung der Textur eines 3D-Modells erzeugt durch einen 3D-Scanner</h5>
+            <p class="card-text text-light">Ein Projekt welches ich während meiner Masterarbeit bei der Firma Vitronic bearbeitet habe. C++, maschinelles Sehen, Photogrametrie </p>
+            <i class="fa fa-2x fa-check text-success"></i>
+            <i class="fa fa-2x fa-file-pdf-o float-right"></i>
           </div>
         </div>
       </div>
       <div class="col fixs">
         <div class="card">
-          <div class="card-header">
-            Featured
+          <img class="card-img-top" src="https://via.placeholder.com/150x80" alt="Card image cap">
+          <div class="card-body">
+            <h5 class="card-title text-light">DarkRP2D</h5>
+            <p class="card-text text-light">Ein Hobby-Projekt von mir an dem ich arbeite wenn sonst keine Projekte anstehen.</p>
+            <p class="card-text text-light">#C++, #OpenGL, #Godot</p>
+            <i class="fa fa-2x fa-pause text-warning"></i>
+            <i class="fa fa-2x fa-git-square float-right"></i>
           </div>
         </div>
       </div>
       <div class="col fixs">
         <div class="card">
-          <div class="card-header">
-            Featured
+          <img class="card-img-top" height="200" src="images/leaflet.png" alt="Card image cap">
+          <div class="card-body">
+            <h5 class="card-title text-light">Leaflet-3D Plugin</h5>
+            <p class="card-text text-light"></p>
+            <i class="fa fa-2x fa-check text-success"></i>
+            <a href="https://mocainfo.thm.de/building-3d/">Livedemo</a>
+            <i class="fa fa-2x fa-git-square float-right"></i>
+          </div>
+        </div>
+      </div>
+      <div class="col fixs">
+        <div class="card">
+          <img class="card-img-top" src="https://via.placeholder.com/150x80" alt="Card image cap">
+          <div class="card-body">
+            <h5 class="card-title text-light">C++-Ocean</h5>
+            <p class="card-text text-light"></p>
+            <i class="fa fa-2x fa-check text-success"></i>
+            <i class="fa fa-2x fa-git-square float-right"></i>
           </div>
         </div>
       </div>
     </div>
   </div>
 
+  <footer class="page-footer font-small" style="background-color: #006494;">
+  </footer>
 
   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
