diff --git a/index.html b/index.html
index 95b3d1e..b505803 100644
--- a/index.html
+++ b/index.html
@@ -4,14 +4,15 @@
  <title>Questionnaire Wizard</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Condensed:wght@100;200;300;400&display=swap" rel="stylesheet">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
  <script src="https://unpkg.com/feather-icons"></script>
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  <link rel="stylesheet" href="https://nigelotoole.github.io/progress-tracker/styles/progress-tracker.css">
+ <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
 </head>
 <body>
+    <div class="questionaire">
         <p style="display: none;">Wir sind ein Verein, der sich um Wildtiere kümmert, 
             die gefunden werden - sogenannte Fundtiere. 
             Wir haben für die Versorgung von verletzten oder 
@@ -73,8 +74,70 @@
             <!-- <div class="infoArea">Test 123</div> -->
             <div id="questionContainer"></div>
         </main>
+    </div>
 
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-4">
+                <div class="card m-b-30">
+                    <div class="card-body">
+                        <div class="media">
+                            <img class="d-flex mr-3 rounded-circle img-thumbnail thumb-lg" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Unknown_Member.jpg?20170805162126" alt="Generic placeholder image" />
+                            <div class="media-body">
+                                <h5 class="mt-0 font-18 mb-1">Dr. Gerd Britsch</h5>
+                                <p class="text-muted font-14">Vogel- und Reptilienpraxis</p>
+                            </div>
+                        </div>
+                        <div class="contact">
+                            <ul class="social-links mb-0">
+                                <li>
+                                    <i class="fa fa-phone"></i>
+                                    <a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="1234567890">
+                                        <span>+49 (0)721 6184280</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <i class="fa fa-envelope"></i>
+                                    <a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Facebook">
+                                        <span>info@vogel-und-reptilien-tierarzt.de</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <i class="fa fa-home"></i>
+                                    <a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Twitter">
+                                        <span>vogel-und-reptilien-tierarzt.de</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <i class="fa fa-map"></i>
+                                    <a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="@skypename">
+                                        <span>Am Storrenacker 1b, 76139 Karlsruhe</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+
+ </body>
  <style>
+    * {
+        box-sizing: border-box;
+    }
+    html, body {
+        background-color: #f7fafa;
+    }
+    .questionaire {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        padding: 1rem;
+    }
     .progress-tracker-desktop .progress-step:last-child {
         display: inline-table !important;
         flex-grow: unset !important;
@@ -87,8 +150,8 @@
         max-width: 800px;
     }
     .progress-tracker {
-        margin: 30px auto;
         padding: 0 0.25rem;
+        margin: 1rem auto !important;
     }
     .progress-tracker-mobile {
         display: none;
@@ -134,11 +197,11 @@
     }
     .progress-marker::before {
         font-size: 0.8rem;
-        font-weight: 1000;
+        font-weight: 500;
         padding: 0.1rem;
     }
     .progress-title {
-        font-weight: 400;
+        font-size: 1rem;
     }
     .progress-text {
         background-color: #f7fafa !important;
@@ -151,21 +214,9 @@
     .progress-step.is-complete .progress-marker::before, .progress-step.is-progress .progress-marker::before {
         background-color: #008296 !important;
     }
-    html {
-        background: #f7fafa;
-        font-family: "Roboto Condensed";
-    }
-
-    body {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-    }
 
     h2 {
-        margin-bottom: 0rem;
-        font-weight: 800;
-        font-size: 1.2rem;
+        margin: 1rem 0;
     }
 
     a.backLink {
@@ -175,7 +226,7 @@
     main {
         display: flex;
         align-items: top;
-        max-width: 500px;
+        max-width: 600px;
         width: 100%;
         padding: 40px;
         background-color: #fff;
@@ -184,8 +235,7 @@
         box-shadow: 0 0 10px rgba(0,0,0,.1);
         font-size: 0.95rem;
         gap: 2rem;
-        margin: 0 auto;
-        box-sizing: border-box;
+        margin: 1rem !important
     }
     @media (max-width: 600px) {
         main {
@@ -198,10 +248,8 @@
         box-shadow: 0px 2px 5px rgba(213, 217, 217, 0.5);
         background-color: white;
         color: black;
-        margin: 5px 0;
         cursor: pointer;
-        padding: 9px 20px 9px 32px;
-        font-size: 0.8rem;
+        padding: 9px 15px 9px 27px;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -210,14 +258,15 @@
     }
 
     button svg {
-        height: 0.8rem;
-        stroke-width: 3;
+        height: 1rem;
+        stroke-width: 2;
+        min-width: 2rem;
     }
 
     #buttonContainer {
         display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 7px 13px;
+        grid-template-columns: calc(50% - 6.5px) calc(50% - 6.5px);
+        gap: 13px 13px;
     }
 
     @media (max-width: 600px) {
@@ -233,6 +282,7 @@
     #questionContainer {
         opacity: 0;
         transition: opacity 0.25s ease-in-out;
+        width: 100%;
     }
 
     #questionContainer.show {
@@ -240,10 +290,51 @@
     }
 
     #questionContainer > svg {
-        margin-bottom: -6px;
+        margin-bottom: 3px;
     }
 
  </style>
+ <style>
+        .thumb-lg {
+            height: 70px;
+            width: 70px;
+        }
+        .card {
+            border: none;
+            box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.05);
+        }
+        .card-body {
+            padding: 1.5rem 1.5rem 1rem 1.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+        .m-b-30 {
+            margin-bottom: 30px;
+        }
+        .social-links {
+            list-style: none;
+            padding-left: 0;
+        }
+        .social-links li {
+            color: rgba(33, 37, 41, 0.75);
+        }
+        .social-links li a {
+            color: rgba(33, 37, 41, 0.75);
+            text-decoration: none;
+            display: inline-block;
+            height: 30px;
+            padding-left: 0.5rem;
+        }
+        .media {
+            display: flex;
+            gap: 1.25rem;
+            align-items: center;
+        }
+        .media-body p {
+            margin: 0;
+        }
+ </style>
  <script>
    var questions = {
         "1": {
@@ -264,7 +355,7 @@
            "question": "Vogel",
            "explanation": "Um welche Vogelart handelt es sich?",
            "options": {
-               "1": "Greifvogel (verletzt/unverletzt)",
+               "1": "Greifvogel (verletzt / unverletzt)",
                "2": "Taube",
                "3": "Rabenvögel",
                "4": "Gänsevögel / Wasservogel",
