diff --git a/frontend/src/app/general/general.component.html b/frontend/src/app/general/general.component.html
index 21f47dc..9453b2c 100644
--- a/frontend/src/app/general/general.component.html
+++ b/frontend/src/app/general/general.component.html
@@ -1,25 +1,55 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Socket.IO chat</title>
-  <style>
-    body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
+<div class="container-fluid" >
+  <div class="row">
 
-    #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
-    #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
-    #input:focus { outline: none; }
-    #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
+    <div class="col-md-4">
 
-    #messages { list-style-type: none; margin: 0; padding: 0; }
-    #messages > li { padding: 0.5rem 1rem; }
-    #messages > li:nth-child(odd) { background: #efefef; }
-  </style>
-</head>
-<body>
-<ul #ulMessages id="messages">
-</ul>
-<form id="form" action="">
-  <input id="input" autocomplete="off" name="message" [(ngModel)]="msg"/><button (click)="sendButtonClick()">Send</button>
-</form>
-</body>
-</html>
+      <div class="user-list-card">
+        <div class="user-card"
+             [ngClass]="{'active' : user?.login === selectedUser?.login}"
+             *ngFor="let user of dataSource.data"
+             (click)="selectUserHandler(user.login)"
+        >
+          <!---->
+
+          <img src="../../assets/image/user.png" height="25" width="25"/>
+          <p class="username">{{user?.login}}</p>
+
+        </div>
+      </div>
+
+    </div>
+    <div class="col-md-8">
+
+      <div class="chat-container">
+        <ng-container >
+          <div class="chat-header">
+            <p class="username">{{username}}</p>
+          </div>
+
+          <div class="chat-body">
+            <div *ngFor="let item of messageArray">
+              <span><strong>{{item.user}} : </strong> {{item.message}}</span>
+            </div>
+            <ul #ulMessages id="messages">
+            </ul>
+          </div>
+
+          <div class="chat-footer">
+            <div class="row">
+              <div class="col-md-10">
+                <div class="form-group mb-0">
+                  <input type="text" placeholder="Entrez votre message" class="form-control"
+                         [(ngModel)]="msg"/>
+                </div>
+              </div>
+              <div class="col-md-2 text-center align-self-center">
+                <button class="btn btn-primary btn-bm px-3 " (click)="sendButtonClick()">Envoyer</button>
+              </div>
+            </div>
+
+          </div>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/frontend/src/app/login/login.component.html b/frontend/src/app/login/login.component.html
index 28e356d..814a887 100644
--- a/frontend/src/app/login/login.component.html
+++ b/frontend/src/app/login/login.component.html
@@ -24,5 +24,6 @@
     <button class="btn btn-sm btn-primary" (click) = "showCredentials()">Connexion Privée</button>
     <button class="btn btn-sm btn-primary" (click) = "showCredentials()">Connexion Générale</button>
   </div>
-
+  <br>
+    <p class="alert alert-danger" role="alert" *ngIf="errorMessage !== ''">{{errorMessage}}</p>
 </div>
diff --git a/frontend/src/app/services/auth/auth.service.ts b/frontend/src/app/services/auth/auth.service.ts
index 2b070eb..7d16dad 100644
--- a/frontend/src/app/services/auth/auth.service.ts
+++ b/frontend/src/app/services/auth/auth.service.ts
@@ -11,6 +11,8 @@ export class AuthService {
 
   // @ts-ignore
   islog: boolean;
+  // @ts-ignore
+  public currentUser;
 
   constructor(private messageService: MessageService) { }
 
diff --git a/frontend/src/app/services/message/message.service.ts b/frontend/src/app/services/message/message.service.ts
index 13b1560..ed7273a 100644
--- a/frontend/src/app/services/message/message.service.ts
+++ b/frontend/src/app/services/message/message.service.ts
@@ -25,3 +25,4 @@ export class MessageService {
   }
 }
 
+
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 5e6c778..7ab98a2 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -5,6 +5,7 @@ body {
 .container-fluid {
   padding: 50px 200px;
   overflow: hidden;
+  background-color: #87CEEB;
 }
 
 .user-list-card {
@@ -54,9 +55,10 @@ body {
     align-items: center;
 
     .username {
-      font-size: 14px;
+      font-size: 20px;
       font-weight: 500;
       margin-bottom: 0;
+      margin-left: 20px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -64,7 +66,7 @@ body {
   }
 
   .chat-body {
-    background-image: url(./assets/image/user.png);
+    background-image: url(./assets/image/fond.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center center;
@@ -107,3 +109,7 @@ body {
     }
   }
 }
+
+.modal-footer {
+  display: block;
+}
