diff --git a/.idea/php.xml b/.idea/php.xml
new file mode 100644
index 0000000..10b171f
--- /dev/null
+++ b/.idea/php.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PhpProjectSharedConfiguration" php_language_level="7.1" />
+</project>
\ No newline at end of file
diff --git a/website/chat.php b/website/chat.php
new file mode 100644
index 0000000..b94e08c
--- /dev/null
+++ b/website/chat.php
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+    <?php
+        include("views/head.php");
+    ?>
+    <body>
+        <?php
+            /*
+             * This view adds the main layout over the screen.
+             * Header, menu, footer.
+             */
+             include("views/main.php");
+
+            /* Add your view files here. */
+            include("views/chat.php");
+        ?>
+    </body>
+</html>
diff --git a/website/img/Logo.png b/website/img/Logo.png
index efaf708..6cae38d 100644
Binary files a/website/img/Logo.png and b/website/img/Logo.png differ
diff --git a/website/styles/chat.css b/website/styles/chat.css
new file mode 100644
index 0000000..9b836cc
--- /dev/null
+++ b/website/styles/chat.css
@@ -0,0 +1,53 @@
+.chat {
+    text-align: center;
+}
+
+.chat-history {
+    /*border: solid #845663;*/
+    width: 80%;
+    height: 500px;
+    margin: 20px auto;
+    background-color: white;
+    vertical-align: bottom;
+}
+
+.chat-field input {
+    border-radius: 8px;
+}
+
+.chat-field input[type="text"] {
+    width: calc(75% - 60px);
+
+}
+
+.chat-field input[type="submit"] {
+    width: 60px;
+
+}
+.chat-message {
+    width: 100%;
+    height: 40px;
+    padding-top: 10px;
+}
+
+.chat-message-self, .chat-message-other {
+    border-radius: 20px;
+    padding: 10px 12px;
+    min-width: 10%;
+    max-width: 45%;
+}
+
+.chat-message-self {
+    text-align: right;
+    float: right;
+    margin-right: 10px;
+    background-color: darkgreen;
+    color: white;
+}
+
+.chat-message-other {
+    text-align: left;
+    float: left;
+    margin-left: 10px;
+    background-color: aquamarine;
+}
\ No newline at end of file
diff --git a/website/styles/main.css b/website/styles/main.css
index 823fd77..ed8f200 100644
--- a/website/styles/main.css
+++ b/website/styles/main.css
@@ -16,7 +16,7 @@ body {
 }
 
 .content {
-    margin-top: 80px;
+    margin-top: 95px;
 }
 
 ::selection {
@@ -36,6 +36,16 @@ body {
     border: 0;
 }
 
+input[type="submit"], button {
+    background-color: #845663;
+    color: white;
+    padding: 5px;
+}
+
+input[type="text"] {
+    padding: 5px;
+}
+
 /* Move element down (clear), below floating elements */
 .clear {
     clear: both;
diff --git a/website/views/chat.php b/website/views/chat.php
new file mode 100644
index 0000000..29e643c
--- /dev/null
+++ b/website/views/chat.php
@@ -0,0 +1,29 @@
+<div class="content">
+    <div class="chat">
+        <div class="chat-history">
+            <div class="chat-message">
+                <div class="chat-message-self">Hi!</div>
+            </div>
+            <div class="chat-message">
+                <div class="chat-message-other">Hi!</div>
+            </div>
+            <div class="chat-message">
+                <div class="chat-message-self">How it's going?</div>
+            </div>
+            <div class="chat-message">
+                <div class="chat-message-self">Hi!</div>
+            </div>
+
+        </div>
+        <form class="chat-field" method="post">
+            <input type="text"
+                   name="message"
+                   placeholder="Typ een chatbericht om te verzenden"
+                   required
+            >
+            <input type="submit"
+                   value="Verstuur"
+            >
+        </form>
+    </div>
+</div>
\ No newline at end of file
diff --git a/website/views/head.php b/website/views/head.php
index 09d5b45..4dcba9b 100644
--- a/website/views/head.php
+++ b/website/views/head.php
@@ -6,6 +6,7 @@
     <style>
         /* Add your css files here. */
         @import url("styles/main.css");
+        @import url("styles/chat.css");
         @import url("styles/font-awesome.css");
         @import url("styles/header.css");
     </style>
diff --git a/website/views/header.php b/website/views/header.php
index bb15a0c..c7ca350 100644
--- a/website/views/header.php
+++ b/website/views/header.php
@@ -1,6 +1,6 @@
 <div class="header">
     <div id="header-logo">
-        <img src="img/Logo.png" />
+        <img src="img/logo.png" />
     </div>
     <div id="header-search">
         <form action="php/search.php" method="get">
