diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
index 3987e4ab..91df88d4 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
@@ -8,7 +8,7 @@
 	{
 		lines_width:       "1px",
 		lines_color:       "rgb(30, 30, 30)",
-		lines_light_color: "rgb(100, 100, 100)",
+		lines_light_color: "rgb(90, 90, 90)",
 		bg_color:          "bisque",
 		bg_light_color:    "bisque",
 
@@ -22,19 +22,18 @@
 		btn_light_color_active: "rgb(210, 210, 210)",
 		btn_color_border:       "rgb(200, 200, 200)",
 
-		chat_me_color:       "rgb(210, 110, 10)",
-		chat_me_bg_color:    "rgb(210, 210, 210)",
-		chat_other_color:    "rgb(210, 210, 210)",
-		chat_other_bg_color: "rgb(210, 210, 210)",
-		chat_name_color:     "rgb(210, 210, 210)",
-		chat_input_color:    "rgb(210, 210, 210)",
-		chat_input_bg_color: "rgb(210, 210, 210)",
+		chat_me_color:       "rgb(250, 230, 220)",
+		chat_me_bg_color:    "rgb(210, 105,  30)",
+		chat_name_color:     "rgb(230, 230, 230)",
+		chat_other_color:    "rgb(250, 250, 250)",
+		chat_other_bg_color: "rgb(190, 130,  70)",
+		chat_serveur_color:  "rgb(110, 110, 110)",
 	}
 	let style_dark =
 	{
 		lines_width:       "2px",
 		lines_color:       "rgb(200, 200, 200)",
-		lines_light_color: "rgb(80, 80, 80)",
+		lines_light_color: "rgb(100, 100, 100)",
 		bg_color:          "rgb(35, 35, 35)",
 		bg_light_color:    "rgb(35, 35, 35)",
 
@@ -48,8 +47,12 @@
 		btn_light_color_active: "rgb(210, 210, 210)",
 		btn_color_border:       "rgb(200, 200, 200)",
 
-		chat_me_color:    "rgb(210, 110, 10)",
-		chat_other_color: "rgb(210, 210, 210)",
+		chat_me_color:       "rgb(230, 230, 230)",
+		chat_me_bg_color:    "rgb(110, 110, 110)",
+		chat_name_color:     "rgb(110, 110, 110)",
+		chat_other_color:    "rgb( 90,  90,  90)",
+		chat_other_bg_color: "rgb(210, 210, 210)",
+		chat_serveur_color:  "rgb(190, 190, 190)",
 	}
 
 	let style = style_light;
@@ -76,9 +79,6 @@
 </script>
 
 {#if $location !== '/'}
-	<!--
-	<Layouts color={color} />
-	-->
 	<Layouts
 		--lines_width={style.lines_width}
 		--lines_color={style.lines_color}
@@ -98,11 +98,10 @@
 
 		--chat_me_color={style.chat_me_color}
 		--chat_me_bg_color={style.chat_me_bg_color}
+		--chat_name_color={style.chat_name_color}
 		--chat_other_color={style.chat_other_color}
 		--chat_other_bg_color={style.chat_other_bg_color}
-		--chat_name_color={style.chat_name_color}
-		--chat_input_color={style.chat_input_color}
-		--chat_input_bg_color={style.chat_input_bg_color}
+		--chat_serveur_color={style.chat_serveur_color}
 	/>
 {/if}
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Element_msg.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Element_msg.svelte
index a6ecff3f..88ccb05d 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Element_msg.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Element_msg.svelte
@@ -49,7 +49,7 @@
 	.chat_msg p.msg :global(*) {
 		display: inline;
 	}
-	/* msg perso
+	/* me msg
 	*/
 	.chat_msg.me {
 		margin-right: 0px;
@@ -74,7 +74,7 @@
 	.chat_msg.SERVER p.msg {
 		margin: 0px auto;
 		font-size: 12px;
-		color: var(--lines_light_color);
+		color: var(--chat_serveur_color);
 	}
 </style>
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte
index f0cd943f..ee95672d 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte
@@ -41,7 +41,7 @@
 
 	<!-- room_name -->
 	<Button new_layout="room_set" my_class="room_name transparent">
-		{$current_room.name}
+		{$current_room.client_name}
 	</Button>
 
 	<!-- close -->
@@ -114,6 +114,9 @@
 		background-color: var(--bg_color);
 		border: var(--lines_width) solid var(--lines_color);
 	}
+	.grid_box .text_area {
+		color: var(--lines_color);
+	}
 	.grid_box .text_area:focus {
 		height: auto;
 		min-height: 100%;
@@ -128,7 +131,7 @@
 	*/
 	.grid_box .panel_msg {
 		flex-direction: column-reverse;
-		border: 1px solid black;
+		border: var(--lines_width) solid var(--lines_color);
 	}
 	.grid_box .msg_thread {
 		width: 100%;
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room_set.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room_set.svelte
index 84580ece..c0e6aac0 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room_set.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room_set.svelte
@@ -39,7 +39,7 @@
 
 	<!-- room_name -->
 	<Button my_class="room_name deactivate">
-		{$current_room.name}
+		{$current_room.client_name}
 	</Button>
 
 	<!-- close -->
@@ -82,7 +82,7 @@
 				<p>list of users is loading...</p>
 			{:then users}
 				{#each users as user}
-					<Button my_class="list admin" on:click={function(){user_profile(user)}}>
+					<Button my_class="list admin" on:click={function(){user_profile(user.name)}}>
 						{user.name}
 						{#if user.isadmin }
 							<span>admin</span>
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_user.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_user.svelte
index 37691fb8..838d2293 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_user.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_user.svelte
@@ -67,7 +67,7 @@
 	<!-- room_name -->
 	{#if back === "room_set"}
 		<Button my_class="room_name deactivate __border_top">
-			{$current_room.name}
+			{$current_room.client_name}
 		</Button>
 	{/if}