diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c7ada71
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,13 @@
+
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
\ No newline at end of file
diff --git a/index.html b/index.html
index 7fd6b55..d1ab398 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,6 @@
 </head>
 
 <body>
-
     <div id="header">
         <h1>Technikholger.de - Dein IT Dienstleister deines Vertrauens</h1>
         <div id="navbar">
@@ -25,7 +24,7 @@
                     <p>Startseite</p>
                 </div>
             </a>            
-            <a id="element">
+            <a id="element" href="#">
                 <div >
                     <p>Mein Konto</p>
                 </div>
@@ -38,8 +37,8 @@
         </div>
     </div>
 
-    <div>
-        <div>
+    <div id="products">
+        <div id="cloud">
             <h2>
                 Wir bieten Ihnen professionelle Clouddienste als Software as a Service (SaaS) an.
             </h2>
@@ -55,15 +54,19 @@
                 noch erfolgreicher zu machen.
             </p>
     
+            <h2>SaaS Produkte</h2>
+
             <ul>
                 <li>Drive (Cloudspeicher auf Nextcloud basis.)</li>
                 <li>Passwortmanager (Bitwarden)</li>
             </ul>
-    
+        </div>
+
+
+        <div id="webspace">
             <h2>
                 Wir bieten Ihnen Webspace inkl. Top-Level - Domains an.
             </h2>
-    
             <p>
                 Willkommen in der Welt des Webhostings! Bei uns erhalten Sie alles, was Sie brauchen, um Ihre Website online
                 zu bringen und erfolgreich zu machen.
@@ -75,10 +78,6 @@
                 erstklassige Infrastruktur
                 und unseren kompetenten Support und starten Sie heute noch Ihre Online-Präsenz.
             </p>
-        </div>
-
-
-        <div>
             <h2>Webspace-Pakete</h2>
 
             <h3>Basic-Paket:</h3>
@@ -118,8 +117,7 @@
             <p>Das Pro-Paket bietet Ihnen alles, was Sie brauchen, um eine professionelle Website mit unbegrenztem Webspace, unbegrenztem Traffic und mehreren Email-Adressen zu betreiben.</p>
         </div>
 
-
-        <div>
+        <div id="server">
             <h2>
                 Wir bieten ihnen Serverhosting (KVM-Server auf Linux und Gameserver)
             </h2>
@@ -154,10 +152,12 @@
     
             <p>Die Gameserverpakete bietet Ihnen flexible und Leistungsstrake Gaming-Performance mit verschiedenen Slot-, RAM- und Speicher-Konfigurationen</p>
         </div>
-
     </div>
 
     <div id="help-div">
+        <div class="l-quote quote">
+            <p>Sie haben ein Problem?<br> Fragen Sie Holger!</p>
+        </div>
         <button id="help">
             <span class="material-symbols-outlined">
                 chat
diff --git a/main.css b/main.css
index c16676c..a181ef7 100644
--- a/main.css
+++ b/main.css
@@ -2,20 +2,32 @@
 
 html, body {
     height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+a, a:visited, a:hover, a:active {
+    color: inherit;
+    text-decoration: none;
 }
 
 h1 {
     font-family: 'Roboto', sans-serif;
     margin: 0;
+    color: #000;
+    
 }
 
 #header {
+    background-color: #03a9f4;
+    padding: 20px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 20px;
     flex-wrap: wrap;
+    border-top: 20px solid #1769aa;
 }
 
 #navbar {
@@ -23,16 +35,64 @@ h1 {
     flex-direction: row;
     justify-content: flex-end;
     flex-wrap: wrap;
+
 }
 
 #navbar #element {
     font-family: 'Roboto', sans-serif;
     margin-right: 10px;
-    background-color: lightgray;
+    background-color: #1de9b6;
     border-radius: 5px;
     padding: 5px 10px 5px 10px;
 }
 
+#navbar p {
+    color: #000;   
+}
+
+#products {
+    display: flex;
+}
+
+@media (max-width: 686px) {
+    #products {
+        flex-wrap: wrap;
+    }
+}
+
+#cloud, #server, #webspace {
+    margin: 20px;
+    padding: 20px;
+    background-color: #03a9f4;
+    border-radius: 20px;
+    font-family: 'Roboto', sans-serif;
+    color: #000;
+}
+
+.l-quote {
+    position: relative;
+    width: auto;
+    padding: 15px 25px 20px;
+    margin: 20px auto;
+    color: #000;
+    font-family: 'Roboto', sans-serif;
+    background: #1de9b6;
+    opacity: .9;
+    border-radius: 20px;
+  }
+  
+.quote:after {
+@include transform(skewX(-15deg));
+content: "";
+position: absolute;
+top: 100%;
+right: 25px;
+border-width: 30px 30px 0 0;
+border-style: solid;
+border-color: #1de9b6 transparent;
+opacity: 1;
+}
+
 #help-div {
     z-index: 10;
     position: fixed;
@@ -42,13 +102,13 @@ h1 {
 
 #help {
     margin-bottom: 10px;
-    background-color: aqua;
+    background-color: #1de9b6;
     border-radius: 100%;
     width: 60px;
     height: 60px;
-    text-align: center;
+    float: right;
 }
 
 #help .material-symbols-outlined {
     font-size: 40px;
-}
+}
\ No newline at end of file
diff --git a/script.js b/script.js
index 3e83be6..909504b 100644
--- a/script.js
+++ b/script.js
@@ -3,7 +3,11 @@ $('#chatbot').dialog({
     autoOpen: false,
     height: 500,
     width: 450,
-    positon: {my: 'center top'}
+    position: {my: 'right bottom', at: 'right-5 bottom-5', of: 'body'},
+    close:  () => { $('#help-div').show();}
 });
 
-$('#help').click(() => $('#chatbot').dialog('open'));
\ No newline at end of file
+$('#help').click(() => {
+    $('#chatbot').dialog('open')
+    $('#help-div').hide();
+} );
\ No newline at end of file
