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 49c7697b..ef094ec2 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
@@ -5,31 +5,56 @@
   import { location } from 'svelte-spa-router';
 
 
-	let color = "transparent";
+	let style =
+	{
+		lines_width: "1px",
+		lines_color: "black",
+		bg_color: "bisque",
+	}
+
 
 	console.log("location:",$location);
 	if ($location !== '/')
 		init_socket();
 
-	function change_color(loc)
+	function change_style(loc)
 	{
 		console.log("change color, location:", loc);
 		if (loc.startsWith("/game"))
-			console.log("in change");
+		{
+			style.lines_width = "2px";
+			style.lines_color = "white";
+			style.bg_color = "#222425";
+		}
 		if (loc.startsWith("/spectator"))
-			console.log("in change");
+		{
+			style.lines_width = "1px";
+			style.lines_color = "black";
+			style.bg_color = "bisque";
+		}
 		if (loc.startsWith("/ranking"))
-			console.log("in change");
+		{
+			style.lines_width = "1px";
+			style.lines_color = "black";
+			style.bg_color = "bisque";
+		}
 		if (loc.startsWith("/profile"))
-			console.log("in change");
+		{
+			style.lines_width = "1px";
+			style.lines_color = "black";
+			style.bg_color = "bisque";
+		}
 	}
 
-	$: change_color($location);
+	$: change_style($location);
 
 </script>
 
 {#if $location !== '/'}
+	<!--
 	<Layouts color={color} />
+	-->
+	<Layouts --lines_width={style.lines_width} --lines_color={style.lines_color} --bg_color={style.bg_color} />
 {/if}
 
 <style></style>
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_box_css.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_box_css.svelte
index 95d575fc..b337aaf3 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_box_css.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_box_css.svelte
@@ -6,7 +6,10 @@
 
 </script>
 
+<!--
 <div class="{$layout} chat_box" style="background-color: {color};">
+-->
+<div class="{$layout} chat_box">
 	<slot></slot>
 </div>
 
@@ -22,7 +25,8 @@
 		padding: 0px;
 		width: auto;
 		height: auto;
-		border: 1px solid black;
+		border: var(--lines_width) solid var(--lines_color);
+		background-color: var(--bg_color);
 		z-index: 1;
 	}
 
@@ -34,6 +38,14 @@
 	*/
 
 
+	/* gobal variables styles
+
+			--lines_width
+			--lines_color
+			--bg_color
+	*/
+
+
 	/* Hide scrollbar
 	*/
 	.chat_box :global(*) {
@@ -67,6 +79,7 @@
 	.chat_box :global(.grid_box p) {
 		padding: 10px;
 		font-size: 15px;
+		color: var(--lines_color);
 	}
 
 
@@ -110,7 +123,7 @@
 	/* __border_top
 	*/
 	.chat_box :global(.__border_top) {
-		border-top: 1px solid black;
+		border-top: var(--lines_width) solid var(--lines_color);
 	}
 
 
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 8f1eac70..4cfb0816 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
@@ -2,6 +2,7 @@
 
 	import { layout, current_room, settings_user } from './Store_chat';
 	import { get_is_admin } from './Request_rooms';
+	import { to_print } from './Utils_chat';
 	import Button from './Element_button.svelte';
 	import { push } from "svelte-spa-router";
 	import { invited_username } from '../store_invitation';
@@ -16,10 +17,23 @@
 
 	function game_invitation()
 	{
+		to_print("in game_invitation");
 		const username = $settings_user;
 		invited_username.set(username);
 		push("/game");
 	}
+	function view_profile()
+	{
+		to_print("in view_profile");
+	}
+	function make_admin()
+	{
+		to_print("in make_admin");
+	}
+	function mute_user()
+	{
+		to_print("in mute_user");
+	}
 
 </script>
 
@@ -50,7 +64,7 @@
 	<!-- panel_user -->
 	<div class="panel panel_user __border_top">
 		<p class="__center">user options :</p>
-		<Button>
+		<Button on:click={view_profile}>
 			view profile
 		</Button>
 		<Button on:click={game_invitation}>
@@ -58,10 +72,10 @@
 		</Button>
 
 		{#if back === "room_set"}
-			<Button>
+			<Button on:click={make_admin}>
 				make admin
 			</Button>
-			<Button>
+			<Button on:click={mute_user}>
 				{mute}
 			</Button>
 		{/if}