diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8ea9a2a433151c465c2fc9c8134eb30af3e878f8..42ac44798ea67d7de18b588fd2a2c5dfa3ec3be3 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,7 +16,9 @@
         "@angular/platform-browser": "^16.0.0",
         "@angular/platform-browser-dynamic": "^16.0.0",
         "@angular/router": "^16.0.0",
+        "@videsk/tailwind-random-color": "^0.2.0-beta",
         "jwt-decode": "^3.1.2",
+        "Math": "^0.0.1-security",
         "ngx-socket-io": "^4.5.1",
         "rxjs": "~7.8.0",
         "socket.io-client": "^4.6.2",
@@ -3400,6 +3402,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@videsk/tailwind-random-color": {
+      "version": "0.2.0-beta",
+      "resolved": "https://registry.npmjs.org/@videsk/tailwind-random-color/-/tailwind-random-color-0.2.0-beta.tgz",
+      "integrity": "sha512-RSwT59cb4qihrTRXiLTxCYNXfv+q1BXphaZKPTetXtCIR9nCKaPreENxUASgzgr+LFgS0efT4aw2iStUT12EWQ=="
+    },
     "node_modules/@vitejs/plugin-basic-ssl": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.0.1.tgz",
@@ -7918,6 +7925,11 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/Math": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/Math/-/Math-0.0.1-security.tgz",
+      "integrity": "sha512-JFs/4QolpT0mrK13IY6A5JECh4UKBTa7jwOLM977XkFfFg7tyiOlkEmXvjQZSEBX01I1nkA1owLyJ25vWPkq2w=="
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 2609f4da7964951d1b0bac2b5995224ad5c4b3f1..6feb11a815a21dd638a2011614e80a2aebf78315 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,7 +18,9 @@
     "@angular/platform-browser": "^16.0.0",
     "@angular/platform-browser-dynamic": "^16.0.0",
     "@angular/router": "^16.0.0",
+    "@videsk/tailwind-random-color": "^0.2.0-beta",
     "jwt-decode": "^3.1.2",
+    "Math": "^0.0.1-security",
     "ngx-socket-io": "^4.5.1",
     "rxjs": "~7.8.0",
     "socket.io-client": "^4.6.2",
diff --git a/frontend/src/app/chatroom/chatroom.component.html b/frontend/src/app/chatroom/chatroom.component.html
index ba311e0d7efed0f343180aed24bbf45fd87542ad..30ca58ed4d86650ad1b9baf8e215c5e2d4a5b49a 100644
--- a/frontend/src/app/chatroom/chatroom.component.html
+++ b/frontend/src/app/chatroom/chatroom.component.html
@@ -1,10 +1,10 @@
 <div class="bg-white border-black border-2 rounded-lg p-2 w-[75vw] h-96">
     <h1>Chat :</h1>
     <li *ngFor="let msg of chatlog" class="list-none">
-        <span>{{msg.sender}}</span>: <span>{{msg.msg}}</span>
+        <span class="text-blue-600">{{msg.sender}}</span>: <span>{{msg.msg}}</span>
     </li>
-    <form [formGroup]="chatForm" (ngSubmit)="onSubmit()" class="bottom-0">
-        <input class="border-b-4 mt-2" type="text" placeholder="Your message" formControlName="message">
+    <form [formGroup]="chatForm" (ngSubmit)="onSubmit()" class="absolute bottom-0 mb-4">
+        <input type="text" placeholder="Your message" formControlName="message">
         <button class="border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2" type="submit">Send</button>
     </form>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/chatroom/chatroom.component.ts b/frontend/src/app/chatroom/chatroom.component.ts
index f060dbd6f02b951ce3c5b521d5f8478dc8975989..9e0ceceeae17115209a5c8fa051bfbbddef81b1a 100644
--- a/frontend/src/app/chatroom/chatroom.component.ts
+++ b/frontend/src/app/chatroom/chatroom.component.ts
@@ -14,11 +14,15 @@ export class ChatroomComponent implements OnInit {
     message: new FormControl('', Validators.required)
   });
 
-  constructor(private socket: SocketService) {}
+  constructor(private socket: SocketService ) {}
 
   ngOnInit(): void {
       this.socket.message.subscribe(chat => {
-        this.chatlog.push(chat as Message);
+        if (chat !== null){
+          this.chatlog.push(chat as Message);
+        }
+        if (this.chatlog.length >= 12)
+          this.chatlog.splice(0, 1);
       })
   }
 
diff --git a/frontend/src/app/services/socket.service.ts b/frontend/src/app/services/socket.service.ts
index 5b6f0e9046b0a274e39e137288eb2b934bc1febe..90ccfa25e1092d835d200d50294ebd26d091da03 100644
--- a/frontend/src/app/services/socket.service.ts
+++ b/frontend/src/app/services/socket.service.ts
@@ -14,7 +14,7 @@ export class SocketService {
   private _currentQuestion = new BehaviorSubject<string>("");
   private _currentAnswers = new BehaviorSubject<Answer[]>([]);
   private _points = new BehaviorSubject<number>(0);
-  private _message = new BehaviorSubject<Message>({msg:"", sender:""});
+  private _message = new BehaviorSubject<Message>(null);
   private _scoreboard = new BehaviorSubject<{ [username: string] : number; }>({});
 
   constructor(