diff --git a/.gitignore b/.gitignore
index 0213404..c446294 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,6 @@ bin/
 
 # Dependency directories (remove the comment below to include it)
 # vendor/
+
+# Compiled client files
+main.min.css*
diff --git a/client/index.html b/client/index.html
index 534a09d..abec41d 100644
--- a/client/index.html
+++ b/client/index.html
@@ -2,7 +2,8 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <title>Chat</title>
+    <title>Chat App</title>
+    <link rel="stylesheet" href="styles/main.min.css">
     <script src="main.js" defer></script>
   </head>
   <body>
@@ -15,10 +16,11 @@
     <span id="usersOnline"></span>
     <br> <br>
 
-    <div id="messages"></div>
+      <div id="messages"></div>
 
-    <form id="messageForm">
-      <input type="text" id="messageInput">
-    </form>
+      <form id="messageForm">
+        <input type="text" id="messageInput" placeholder="Type a message...">
+      </form>
+    </div>
   </body>
 </html>
diff --git a/client/styles/main.scss b/client/styles/main.scss
new file mode 100644
index 0000000..9d941e2
--- /dev/null
+++ b/client/styles/main.scss
@@ -0,0 +1,21 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Roboto Condensed";
+}
+
+body {
+  background-color: #5386E4;
+}
+
+.messagesContainer {
+  height: 100vh;
+
+  #messages {
+    height: 250px;
+    overflow: auto;
+  }
+}
