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 625d6b1d..1e1fce74 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
@@ -2,8 +2,6 @@
 
 	import { layout } from './Store_chat';
 
-	export let color;
-
 </script>
 
 <!--
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_layouts.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_layouts.svelte
index bb8cbcd2..0725efe4 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_layouts.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat_layouts.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 
-	import { layout }      from './Store_chat';
+	import { layout, history }      from './Store_chat';
 	import ChatBox         from './Chat_box_css.svelte';
 
 	import CloseLayout     from './Layout_close.svelte';
@@ -24,7 +24,6 @@
 	let layouts = ["home", "home"];
 
 	/* hold previous version of layout, to go back
-	*/
 	function set_layouts($layout)
 	{
 		if ($layout.length === 0)
@@ -39,6 +38,11 @@
 			layouts = [$layout, layouts[0]];
 	}
 	$: set_layouts($layout);
+	*/
+	$:	{
+				$layout = $history[0];
+				console.log($history);
+			}
 
 </script>
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Element_button.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Element_button.svelte
index 2e4d3173..8d86f7d1 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Element_button.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Element_button.svelte
@@ -1,29 +1,40 @@
-<!--
-	<Button
-		bind:layout
-		new_layout=""
-		my_class=""
-		my_title=""
-	>
-		value
-	</Button>
--->
-
 <script lang="ts">
 
-	import { layout } from './Store_chat';
+	import { history, add_history, back_history } from './Store_chat';
+	import { writable } from 'svelte/store';
 
 	export let my_class = "";
 	export let my_title = "";
 	export let new_layout = "";
+	let layout = writable("");
 
 	function update_layout() {
-		layout.set(new_layout);
+		console.log("my_class:", my_class);
+		if (my_class.includes("back"))
+		{
+			console.log("back history");
+			back_history();
+		}
+		else if (new_layout !== "")
+		{
+			console.log("add history:", new_layout);
+			add_history(new_layout);
+		}
+		else
+		{
+			console.log("add history home default");
+			add_history("home");
+		}
 	}
 
+	$:	{
+				$layout;
+				update_layout();
+			}
+
 </script>
 
-<button on:click={update_layout} on:click title={my_title} class={my_class}>
+<button on:click title={my_title} class={my_class}>
 	<p><slot></slot></p>
 </button>
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_close.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_close.svelte
index 3e6f37e5..bbc6eff9 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_close.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_close.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
 
-	import { layout } from './Store_chat';
 	import Button from './Element_button.svelte';
 
-	export let back = "";
-
 </script>
 
 <div class="grid_box">
-	<Button new_layout={back} my_class="chat">
+	<Button new_layout="home" my_class="chat">
 		chat
 	</Button>
 </div>
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_create.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_create.svelte
index 51482f05..616a2713 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_create.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_create.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
 
-	import { msgs, layout, allowed_chars } from './Store_chat';
+	import { history, add_history, msgs, allowed_chars } from './Store_chat';
 	import { change_room, create_room } from './Request_rooms';
 	import { onMount } from 'svelte';
 	import type { FetchResponse } from './Types_chat';
 	import Button from './Element_button.svelte';
 	import Warning from './Element_warning.svelte';
 
-	export let back = "";
-
 	let allowed_chars = 'loading...';
 	//let regex;
 	onMount(async() => {
@@ -55,7 +53,7 @@
 <div class="grid_box">
 
 	<!-- back -->
-	<Button new_layout={back} my_class="back icon" my_title="go back {back}">
+	<Button my_class="back icon" my_title="go back {$history[1]}">
 		back
 	</Button>
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte
index 2eeabaef..dc95521b 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 
-	import { layout, msgs, user, current_room } from './Store_chat';
+	import { history, add_history, msgs, user, current_room } from './Store_chat';
 	import { change_room, get_room_messages, get_my_rooms } from './Request_rooms';
 	import { to_print } from './Utils_chat';
 	import { onMount } from 'svelte';
@@ -22,7 +22,7 @@
 		if (room.protection && !room.allowed)
 		{
 			await current_room.set(room);
-			layout.set("password");
+			add_history("password");
 		}
 		else
 		{
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_invite.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_invite.svelte
index 21e8e0f0..9c60d51b 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_invite.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_invite.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
 
-	import { layout, user, current_room } from './Store_chat';
+	import { history, add_history, user, current_room } from './Store_chat';
 	import { get_all_users, invite_user } from './Request_rooms';
 	import { to_print } from './Utils_chat';
 	import Button from './Element_button.svelte';
 
-	export let back = "";
-
 	let users = get_all_users();
 
 	// invite user in this room
@@ -15,7 +13,7 @@
 		to_print("inside invite_this_user");
 
 		invite_user(username);
-		layout.set("room");
+		add_history("room");
 	}
 
 </script>
@@ -23,7 +21,7 @@
 <div class="grid_box">
 
 	<!-- back -->
-	<Button new_layout={back} my_class="back icon" my_title="go back {back}">
+	<Button my_class="back icon" my_title="go back {$history[1]}">
 		back
 	</Button>
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_mute.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_mute.svelte
index 8c60e62c..d506fe09 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_mute.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_mute.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
 
-	import { layout, settings_user } from './Store_chat';
+	import { history, add_history, settings_user } from './Store_chat';
 	import { set_mute, get_unmute } from './Request_rooms';
 	import Button from './Element_button.svelte';
 	import Warning from './Element_warning.svelte';
 
-	export let back = "";
-
 	let response: FetchResponse;
 	let show_error = false;
 
@@ -52,13 +50,13 @@
 		if (response.status >= 300 || response.error)
 			show_error = response.error;
 		else
-			layout.set("room");
+			add_history("room");
 
 	}
 	async function unmute()
 	{
 		get_unmute($settings_user.name);
-		layout.set("room");
+		add_history("room");
 	}
 
 </script>
@@ -66,7 +64,7 @@
 <div class="grid_box">
 
 	<!-- back -->
-	<Button new_layout={back} my_class="back icon" my_title="go back {back}">
+	<Button my_class="back icon" my_title="go back {$history[1]}">
 		back
 	</Button>
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_new.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_new.svelte
index e44a4867..ab429c4c 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_new.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_new.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
 
-	import { layout, msgs, user, socket, current_room } from './Store_chat';
+	import { history, add_history, msgs, user, socket, current_room } from './Store_chat';
 	import { join_room, change_room, get_room_messages, get_all_rooms } from './Request_rooms';
 	import { to_print } from './Utils_chat';
 	import Button from './Element_button.svelte';
 
-	export let back = "";
-
 	let rooms = get_all_rooms();
 
 	// join the room
@@ -18,7 +16,7 @@
 		if (updated_room.protection)
 		{
 			current_room.set(updated_room);
-			layout.set("password");
+			add_history("password");
 		}
 		else
 			await change_room(updated_room);
@@ -29,7 +27,7 @@
 <div class="grid_box">
 
 	<!-- back -->
-	<Button new_layout={back} my_class="back icon" my_title="go back {back}">
+	<Button my_class="back icon" my_title="go back {$history[1]}">
 		back
 	</Button>
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_password.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_password.svelte
index 9848e7b2..2a2389d0 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_password.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_password.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
 
-	import { layout, current_room } from './Store_chat';
+	import { history, add_history, current_room } from './Store_chat';
 	import { change_room, validate_password, change_password, add_password, remove_password } from './Request_rooms';
 	import type { FetchResponse } from './Types_chat';
 	import { to_print } from './Utils_chat';
 	import Button from './Element_button.svelte';
 	import Warning from './Element_warning.svelte';
 
-	export let back = "";
 	export let mode = "validate";
 
 	let password_state = "";
@@ -61,7 +60,7 @@
 <div class="grid_box">
 
 	<!-- back -->
-	<Button new_layout={back} my_class="back icon" my_title="go back {back}">
+	<Button my_class="back icon" my_title="go back {$history[1]}">
 		back
 	</Button>
 
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 caf1ef54..7bf8a7e9 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
@@ -1,11 +1,9 @@
 <script>
 
-	import { layout, socket, msgs, add_msg, current_room } from './Store_chat';
+	import { history, add_history, socket, msgs, add_msg, current_room } from './Store_chat';
 	import Button from './Element_button.svelte';
 	import Msg from './Element_msg.svelte';
 
-	export let back = "";
-
 	let msg = "";
 	let text_area;
 
@@ -35,7 +33,7 @@
 <div class="grid_box">
 
 	<!-- back -->
-	<Button new_layout={back} my_class="back icon" my_title="go back {back}">
+	<Button my_class="back icon" my_title="go back {$history[1]}">
 		back
 	</Button>
 
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 48c2e818..ce5ab01a 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
@@ -1,13 +1,11 @@
 <script lang="ts">
 
-	import { layout, current_room, settings_user } from './Store_chat';
+	import { history, add_history, current_room, settings_user } from './Store_chat';
 	import { get_room_users, leave_room, get_is_admin, set_current_room, set_settings_user } from './Request_rooms';
 	import { User } from './Types_chat';
 	import { to_print } from './Utils_chat';
 	import Button from './Element_button.svelte';
 
-	export let back = "";
-
 	let users: User[] = get_room_users();
 
 	let is_admin = false;
@@ -23,14 +21,14 @@
 		to_print("in user_profile");
 		settings_user.set(room_user);
 		set_settings_user(room_user.name);
-		layout.set("user");
+		add_history("user");
 	}
 
 	function user_leave_room()
 	{
 		to_print("in leave_room");
 		leave_room();
-		layout.set("home");
+		add_history("home");
 	}
 
 </script>
@@ -38,7 +36,7 @@
 <div class="grid_box">
 
 	<!-- back -->
-	<Button new_layout={back} my_class="back icon" my_title="go back {back}">
+	<Button my_class="back icon" my_title="go back {$history[1]}">
 		back
 	</Button>
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_settings.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_settings.svelte
index 687e57cb..efaf553c 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_settings.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_settings.svelte
@@ -1,20 +1,18 @@
 <script lang="ts">
 
-	import { layout, settings_user } from './Store_chat';
+	import { history, add_history, settings_user } from './Store_chat';
 	import { list_block_user } from './Request_rooms';
 	import { User } from './Types_chat';
 	import { to_print } from './Utils_chat';
 	import Button from './Element_button.svelte';
 
-	export let back = "";
-
 	let users: User[] = list_block_user();
 
 	async function user_profile(room_user: string)
 	{
 		to_print("in user_profile");
 		await settings_user.set(room_user);
-		layout.set("user");
+		add_history("user");
 	}
 
 </script>
@@ -22,7 +20,7 @@
 <div class="grid_box">
 
 	<!-- back -->
-	<Button new_layout={back} my_class="back icon" my_title="go back {back}">
+	<Button my_class="back icon" my_title="go back {$history[1]}">
 		back
 	</Button>
 
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 6a9fe9b1..a1cf4e59 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
@@ -1,6 +1,6 @@
 <script lang="ts">
 
-	import { layout, current_room, settings_user } from './Store_chat';
+	import { history, add_history, current_room, settings_user } from './Store_chat';
 	import { get_is_admin, make_admin, set_block_user, remove_block_user } from './Request_rooms';
 	import type { FetchResponse } from './Types_chat';
 	import { to_print } from './Utils_chat';
@@ -9,8 +9,6 @@
 	import { invited_username } from '../store_invitation';
 	import Warning from './Element_warning.svelte';
 
-	export let back = "";
-
 	let is_admin = false;
 	get_is_admin().then(response => is_admin = response);
 
@@ -35,13 +33,13 @@
 	{
 		to_print("in block_user");
 		await set_block_user($settings_user.name);
-		layout.set("room");
+		add_history("room");
 	}
 	async function unblock_user()
 	{
 		to_print("in unblock_user");
 		await remove_block_user($settings_user.name);
-		layout.set("room");
+		add_history("room");
 	}
 	async function get_list_block_user()
 	{
@@ -56,7 +54,7 @@
 		if (response.status >= 300 || response.error)
 			show_error = response.error;
 		else
-			layout.set("room");
+			add_history("room");
 	}
 
 </script>
@@ -64,7 +62,7 @@
 <div class="grid_box">
 
 	<!-- back -->
-	<Button new_layout={back} my_class="back icon" my_title="go back {back}">
+	<Button my_class="back icon" my_title="go back {$history[1]}">
 		back
 	</Button>
 
@@ -79,7 +77,7 @@
 	</Button>
 
 	<!-- room_name -->
-	{#if back === "room_set"}
+	{#if $history[1] === "room_set"}
 		<Button my_class="room_name deactivate __border_top">
 			{$current_room.client_name}
 		</Button>
@@ -107,7 +105,7 @@
 			</Button>
 		{/if}
 
-		{#if is_admin && back === "room_set" && $current_room.type !== "direct"}
+		{#if is_admin && $history[1] === "room_set" && $current_room.type !== "direct"}
 			{#if !$settings_user.isadmin}
 				<Button on:click={make_user_admin}>
 					make admin
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Request_rooms.ts b/srcs/requirements/svelte/api_front/src/pieces/chat/Request_rooms.ts
index 5ad3152e..f79bf8e0 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Request_rooms.ts
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Request_rooms.ts
@@ -61,7 +61,7 @@ export async function change_room(room: Room): Promise<FetchResponse>
 	set_client_name_on_room(room);
 
 	current_room.set(room);
-	layout.set("room");
+	add_history("room");
 
 	return response;
 }
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Store_chat.ts b/srcs/requirements/svelte/api_front/src/pieces/chat/Store_chat.ts
index 4a88dd93..e96f547a 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Store_chat.ts
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Store_chat.ts
@@ -7,6 +7,7 @@ export let all_rooms = writable<Room[]>([]);
 export let current_room = writable<Room>();
 export let settings_user = writable<User>();
 export let layout = writable("close");
+export let history = writable<string[]>(["close", "home"]);
 
 export let user;
 export let socket;
@@ -19,3 +20,18 @@ export function add_msg(name: string, message: string)
 	msgs.update(msgs => [...msgs, { name: "me", message: message }]);
 }
 
+export function add_history(str: string)
+{
+	history.update(history => [str, ...history]);
+}
+export function back_history()
+{
+	history.update(history =>
+	{
+		if (history.length > 2)
+			return history.slice(1);
+		else
+			return ["home", "home"];
+	});
+}
+