diff --git a/src/index.html b/src/index.html
index 33ecb7d8..fbcbe8ba 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,31 +12,142 @@
   <!--
     Previous project placeholder begins
   -->
-  <div class="header">
-    <h1>Morgan McCircuit</h1>
-    <h2>I write code</h2>
-  </div>
+  <nav class="navbar navbar-default">
+    <div class="container">
+      <!-- Brand and toggle get grouped for better mobile display -->
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#portfolio-collapse-menu">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <a class="navbar-brand" href="#">thunderbear.it</a>
+      </div>
+
+      <!-- Collect the nav links, forms, and other content for toggling -->
+      <div class="collapse navbar-collapse" id="portfolio-collapse-menu">
+        <ul class="nav navbar-nav">
+          <li><a href="#">Home</a></li>
+          <li><a href="#">About</a></li>
+        </ul>
+      </div>
+      <!-- /.navbar-collapse -->
+    </div>
+    <!-- /.container-fluid -->
+  </nav>
 
-  <div class="tagline">
-    <h3>Who I am</h3>
-    <p>Hi, my name is Morgan and I love to write code that is efficient.</p>
+  <div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
+  <!-- Indicators -->
+  <ol class="carousel-indicators">
+    <li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
+    <li data-target="#portfolio-carousel" data-slide-to="1"></li>
+    <li data-target="#portfolio-carousel" data-slide-to="2"></li>
+  </ol>
+  <div class="carousel-inner" role="listbox">
+    <div class="item active">
+      <div class="container">
+        <div class="carousel-caption">
+          <h1>Herzlich Willkommen</h1>
+          <p>Thunderbear.it ist der Web-Auftritt von Thorbjörn Tasche. Sie können ihn hier als IT-Consultant oder Web-Developer buchen</p>
+        </div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="container">
+        <div class="carousel-caption">
+          <h1>IT-Consultant</h1>
+          <p>Prozessdigitalisierung bedeutet manuelle Geschäftsabläufe digital darzustellen mit dem Ziel diese dann zu beschleunigen oder ganz zu automatisieren.</p>
+        </div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="container">
+        <div class="carousel-caption">
+          <h1>Web-Developer</h1>
+          <p>Ich bin ein Full-Stack-Entwickler. Hauptsächlich bin ich im MEAN-Stack unterwegs. Für mehr Details über mein Skillset...click here.</p>
+        </div>
+      </div>
+    </div>
   </div>
+  <a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
+    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+    <span class="sr-only">Previous</span>
+  </a>
+  <a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
+    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+    <span class="sr-only">Next</span>
+  </a>
+</div>
+<div class="marketing">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-6 well jobs" >
+        <span class="glyphicon glyphicon-user"></span>
+        <h2>IT-Consultant</h2>
+        <p class="tagline">
+          Tagessatz: 500€
+        </p>
+        <button class="btn btn-primary">Hier buchen!</button>
+        <h3>Skills</h3>
+        <div class="skills">
+          <div class="skill col-md-10 col-md-offset-1">
+            <span class="label label-default">Prozessoptimierung</span>
+            <span class="label label-default">Prozessdigitalisierung</span>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6 well jobs">
+        <span class="glyphicon glyphicon-user"></span>
+        <h2>Web-Developer</h2>
+        <p class="tagline">
+          Stundensatz: 62,50€
+        </p>
+        <button class="btn btn-primary">Hier buchen!</button>
+        <h3>Skills</h3>
+        <div class="skills">
+          <div class="skill col-md-10 col-md-offset-1">
+            <span class="label label-default">Html</span>
+            <span class="label label-default">CSS</span>
+            <span class="label label-default">JAVASCRIPT</span>
+            <span class="label label-default">PHP</span>
+            <span class="label label-default">Python</span>
+            <span class="label label-default">Jquery</span>
+            <span class="label label-default">Angular</span>
+            <span class="label label-default">React</span>
 
+          </div>
 
-  <div class="skills">
-    <h3>What I do</h3>
-    <p>Here are some of the languages I use on a day-to-day.</p>
-    <ul>
-      <li>HTML</li>
-      <li>CSS</li>
-      <li>JavaScript</li>
-    </ul>
-  </div>
+        </div>
+      </div>
 
-  <div class="contact">
-    <h3>Get in touch</h3>
-    <p>I live in the cloud and can't be seen. Send messages to the good people at <a target="_blank" href="https://twitter.com/codeschool">Code School</a> and they'll notify me.</p>
+    </div>
   </div>
+</div>
+<footer>
+  <div class="container">
+    <h3>contact me</h3>
+    <p>
+      add me at xing
+    </p>
+  </div>
+</footer>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
   <!--
     Previous project placeholder ends
     (unused pieces will be deleted at the last task)
diff --git a/src/main.css b/src/main.css
index 4be3b81a..c163a19b 100644
--- a/src/main.css
+++ b/src/main.css
@@ -10,7 +10,7 @@
 
 /* Carousel base class */
 .carousel {
-  height: 240px;
+  height: 300px;
   margin-bottom: 30px;
 }
 /* Since positioning the image, we need to help out the caption */
@@ -20,7 +20,7 @@
 
 /* Declare heights because of positioning of img element */
 .carousel .item {
-  height: 240px;
+  height: 300px;
   background-color: #777;
 }
 .carousel-inner > .item > img {
@@ -46,22 +46,24 @@
 -------------------------------------------------- */
 
 .marketing {
-  margin: 60px auto;
+  margin: 120px auto;
 }
 
-.marketing .col-md-4 {
+.marketing .col-md-6 {
   text-align: center;
   font-size: 16px;
 }
 
-.marketing .col-md-4 .glyphicon {
-  font-size: 60px;
+.marketing .col-md-6 .glyphicon {
+  font-size: 48px;
   background-color: #EAEAEA;
   border-radius: 50%;
   padding: 40px;
   color: #444;
 }
-
+.jobs{
+  height: 500px;
+}
 
 /* STICKY FOOTER
 -------------------------------------------------- */