diff --git a/app/static/background/space-station.jpg b/app/static/background/space-station.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..56751e2255ac32da0de2129916cdbafec8d0a6b4
Binary files /dev/null and b/app/static/background/space-station.jpg differ
diff --git a/app/static/css/index.css b/app/static/css/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..22a11767b6c8e07424e3b40b663ae9f4010a116e
--- /dev/null
+++ b/app/static/css/index.css
@@ -0,0 +1,115 @@
+body {
+    background-image: url('../background/space-station.jpg');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    color: white;
+}
+
+img {
+    width: 30%;
+    margin-top: 75px;
+    margin-left: 2.5%;
+}
+
+input {
+    margin-top: 2px;
+    width: 72.5%;
+    float: left;
+    height: 40px;
+    border-style: solid;
+    border-color: white;
+}
+
+button {
+    width: 25%;
+    float: right;
+    height: 50px;
+    border-style: solid;
+    border-color: white;
+}
+
+.chat-container {
+    margin-top: 75px;
+    margin-right: 22.5%;
+    width: 40%;
+    float:right;
+    text-align: center;
+    height: 750px;
+    /* border-style: solid;
+    border-color: white; */
+}
+
+#chat {
+    height: 680px;
+    position: relative;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: flex-start;
+    overflow-y:scroll;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+}
+
+#chat::-webkit-scrollbar {
+    display: none; /* Webkit-based browsers */
+}
+
+.input {
+    background-color: white;
+    height: 50px;
+    border-style: solid;
+    border-color:cornflowerblue;
+}
+
+.message-user {
+    background-color: white;
+    color: black;
+    /* width: 200px; */
+    align-self: flex-end;
+    float: right;
+    clear: both;
+    margin-top: 10px;
+    min-width: 10%;
+    max-width: 80%;
+    border-radius: 25px;
+    padding-right: 10px;
+    padding-left: 10px;
+}
+
+.message-bot {
+    background-color: gray;
+    color: black;
+    /* width: 200px; */
+    align-self: flex-start;
+    float: left;
+    clear: both;
+    margin-top: 10px;
+    min-width: 10%;
+    max-width: 80%;
+    border-radius: 10px;
+    padding-right: 10px;
+    padding-left: 10px;
+}
+
+.feedback {
+    top: 0;
+    right: 0;
+    position: fixed;
+    padding-right: 150px;
+    width: 500px;
+    padding-top: 50px;
+}
+
+.tipps {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    margin-bottom: 150px;
+    margin-left: 150px;
+    text-align: center;
+    width: 20%;
+    font-size: large;
+    /* background-color: white;
+    color: black; */
+}
diff --git a/app/static/javascript/frontend.js b/app/static/javascript/frontend.js
index 3a11f097f29e0bc15ecb1444fc17eff0765704d9..7f95fb756243f5ca0265dd2346f567ff907a8d50 100644
--- a/app/static/javascript/frontend.js
+++ b/app/static/javascript/frontend.js
@@ -1,15 +1,44 @@
 function sendMessage() {
     message = document.getElementById("inputField").value;
-    message = "message=" + message;
-    fetch("http://localhost:5000/sendmessage", {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/x-www-form-urlencoded"
-        },
-        body: message
-    })
-    .then((response) => response.json())
-    .then((json) => {
-        console.log(json[0].content);
-    });
-};
\ No newline at end of file
+    if(message !== "") {
+
+        let newDiv = document.createElement("div");
+        newDiv.className = "message-user";
+
+        let newP = document.createElement("p");
+        newP.textContent = message;
+        newDiv.appendChild(newP);
+        let chat = document.getElementById("chat");
+        chat.insertBefore(newDiv, chat.firstChild);
+        // document.getElementById("chat").appendChild(newDiv);
+
+        message = "message=" + message;
+        document.getElementById('inputField').value = "";
+        fetch("http://localhost:5000/sendmessage", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded"
+            },
+            body: message
+        })
+        .then((response) => response.json())
+        .then((json) => {
+            let botMessage = json[0].content;
+            let newDiv = document.createElement("div");
+            newDiv.className = "message-bot";
+
+            let newP = document.createElement("p");
+            newP.textContent = botMessage;
+            newDiv.appendChild(newP);
+            let chat = document.getElementById("chat");
+            chat.insertBefore(newDiv, chat.firstChild);
+
+            // document.getElementById("chat").appendChild(newDiv);
+        });
+    }
+};
+
+function checkKeyInput(event) {
+    if(event.key === 'Enter')
+        sendMessage();
+}
\ No newline at end of file
diff --git "a/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.54 - A cartoony space-robot standing on the surface of a colorful alien planet. The robot has a playful design with exaggerated features, bright colors, an.webp" "b/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.54 - A cartoony space-robot standing on the surface of a colorful alien planet. The robot has a playful design with exaggerated features, bright colors, an.webp"
deleted file mode 100644
index 55cace721990a0c35d359c116d859824abb2eda6..0000000000000000000000000000000000000000
--- "a/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.54 - A cartoony space-robot standing on the surface of a colorful alien planet. The robot has a playful design with exaggerated features, bright colors, an.webp"	
+++ /dev/null
@@ -1,3 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><Error><Code>AuthenticationFailed</Code><Message>Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature.
-RequestId:39e44793-801e-005d-7d06-c06cb1000000
-Time:2024-06-16T15:58:54.2644863Z</Message><AuthenticationErrorDetail>Signed expiry time [Sun, 16 Jun 2024 15:48:46 GMT] must be after signed start time [Sun, 16 Jun 2024 15:58:54 GMT]</AuthenticationErrorDetail></Error>
\ No newline at end of file
diff --git "a/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.55 - A cartoony space-robot standing on the surface of an alien planet with a more subdued color palette. The robot has a playful design with exaggerated f.webp" "b/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.55 - A cartoony space-robot standing on the surface of an alien planet with a more subdued color palette. The robot has a playful design with exaggerated f.webp"
deleted file mode 100644
index 14324126085a3a32ea64d4d9ffcdbffe758d2568..0000000000000000000000000000000000000000
--- "a/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.55 - A cartoony space-robot standing on the surface of an alien planet with a more subdued color palette. The robot has a playful design with exaggerated f.webp"	
+++ /dev/null
@@ -1,3 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><Error><Code>AuthenticationFailed</Code><Message>Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature.
-RequestId:b15016f6-f01e-003a-0606-c0ff9d000000
-Time:2024-06-16T15:58:55.6576196Z</Message><AuthenticationErrorDetail>Signed expiry time [Sun, 16 Jun 2024 15:49:07 GMT] must be after signed start time [Sun, 16 Jun 2024 15:58:55 GMT]</AuthenticationErrorDetail></Error>
\ No newline at end of file
diff --git "a/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.56 - A cartoony space-robot standing on the surface of an alien planet with a more subdued color palette. The robot has a playful design with exaggerated f.webp" "b/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.56 - A cartoony space-robot standing on the surface of an alien planet with a more subdued color palette. The robot has a playful design with exaggerated f.webp"
deleted file mode 100644
index da818603e9e2ad9f9648f0bc2ac8136020af0f22..0000000000000000000000000000000000000000
--- "a/app/static/robo_images/DALL\302\267E 2024-06-16 17.58.56 - A cartoony space-robot standing on the surface of an alien planet with a more subdued color palette. The robot has a playful design with exaggerated f.webp"	
+++ /dev/null
@@ -1,3 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><Error><Code>AuthenticationFailed</Code><Message>Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature.
-RequestId:3eb0871f-e01e-004b-7506-c0269f000000
-Time:2024-06-16T15:58:56.7098453Z</Message><AuthenticationErrorDetail>Signed expiry time [Sun, 16 Jun 2024 15:49:48 GMT] must be after signed start time [Sun, 16 Jun 2024 15:58:56 GMT]</AuthenticationErrorDetail></Error>
\ No newline at end of file
diff --git a/app/static/robo_images/dall-e-image-confused-cropped.png b/app/static/robo_images/dall-e-image-confused-cropped.png
new file mode 100644
index 0000000000000000000000000000000000000000..970932ad3ef8c3328af2a622a2c04a5970fc0cd6
Binary files /dev/null and b/app/static/robo_images/dall-e-image-confused-cropped.png differ
diff --git a/app/static/robo_images/dall-e-image-confused-cropped2.png b/app/static/robo_images/dall-e-image-confused-cropped2.png
new file mode 100644
index 0000000000000000000000000000000000000000..e9d999302043c203588733f8740902c7e746fa63
Binary files /dev/null and b/app/static/robo_images/dall-e-image-confused-cropped2.png differ
diff --git a/app/static/robo_images/dall-e-image-confused.png b/app/static/robo_images/dall-e-image-confused.png
new file mode 100644
index 0000000000000000000000000000000000000000..8747c81e1615c8d2e9de62cc1ea77b275a2b447e
Binary files /dev/null and b/app/static/robo_images/dall-e-image-confused.png differ
diff --git a/app/static/robo_images/dall-e-image-happy-cropped.png b/app/static/robo_images/dall-e-image-happy-cropped.png
new file mode 100644
index 0000000000000000000000000000000000000000..5183d60a62bc57c9b52f2f86f231cba529dbf103
Binary files /dev/null and b/app/static/robo_images/dall-e-image-happy-cropped.png differ
diff --git a/app/static/robo_images/dall-e-image-happy-cropped2.png b/app/static/robo_images/dall-e-image-happy-cropped2.png
new file mode 100644
index 0000000000000000000000000000000000000000..2848a812520799deb34d46bc495c0eb7f0e8955b
Binary files /dev/null and b/app/static/robo_images/dall-e-image-happy-cropped2.png differ
diff --git a/app/static/robo_images/dall-e-image-happy.png b/app/static/robo_images/dall-e-image-happy.png
new file mode 100644
index 0000000000000000000000000000000000000000..f877ed9936b3f963584933d1ea0d5cd1434a588e
Binary files /dev/null and b/app/static/robo_images/dall-e-image-happy.png differ
diff --git a/app/static/robo_images/dall-e-image-sad-cropped.png b/app/static/robo_images/dall-e-image-sad-cropped.png
new file mode 100644
index 0000000000000000000000000000000000000000..e1f57c182f5eb5d6d4dace89abb3fd23c32a675f
Binary files /dev/null and b/app/static/robo_images/dall-e-image-sad-cropped.png differ
diff --git a/app/static/robo_images/dall-e-image-sad-cropped2.png b/app/static/robo_images/dall-e-image-sad-cropped2.png
new file mode 100644
index 0000000000000000000000000000000000000000..e36ed6194814a44b1c2d49b36fb0dabb672592cf
Binary files /dev/null and b/app/static/robo_images/dall-e-image-sad-cropped2.png differ
diff --git a/app/static/robo_images/dall-e-image-sad.png b/app/static/robo_images/dall-e-image-sad.png
new file mode 100644
index 0000000000000000000000000000000000000000..d75e88aee5b200c990f55563672a7c98b53142b4
Binary files /dev/null and b/app/static/robo_images/dall-e-image-sad.png differ
diff --git a/app/templates/index.html b/app/templates/index.html
index 19301a4a250b1bb74af553f5bb4ab50dbeaf0101..8b44fe1c27dd32cb993169cab59439f2093d63d6 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -4,14 +4,33 @@
         <title>Space Station Chatbot</title>
         <meta charset="UTF-8">
         <link rel="icon" type="image/x-icon" href="static/icons/favicon.ico">
+        <link rel="stylesheet" href="static/css/index.css">
     </head>
 
     <body>
-        <h1>Welcome to the Space Station Chatbot!</h1>
-        <div>
-            <input type="text" id="inputField" placeholder="Gib etwas ein">
-            <button onclick="sendMessage()">CLICK ME</button>
+        <!-- <h1 style="text-align: center;">Welcome to the Space Station Chatbot!</h1> -->
+        <img src="static/robo_images/dall-e-image-happy-cropped2.png" alt="Robo Image">
+        <div class="tipps">
+            <h2>Some smaller tipps to start:</h2>
+            <ul>
+                <li>say hi to the bot</li>
+                <li>ask the bot what it is</li>
+                <li>ask the bot for help or recommendations</li>
+            </ul>
         </div>
+        <div class="chat-container">
+            <div id="chat">
+            </div>
+            <div class="input">
+                <input type="text" id="inputField" placeholder="Talk to the chatbot..."  onkeypress="checkKeyInput(event)">
+                <button onclick="sendMessage()">Send</button>
+            </div>
+        </div>
+
+        <div class="feedback">
+            <button>Feedback</button>
+        </div>
+        
         <script src="static/javascript/frontend.js" type="application/javascript"></script>
     </body>
 </html>
\ No newline at end of file