diff --git a/README.md b/README.md
index df043e84..300c2d9d 100644
--- a/README.md
+++ b/README.md
@@ -81,7 +81,7 @@
 - [/] leave room
 - [/] leave direct impossible
 - [/] protect room with password
-- [ ] add and change password in room
+- [/] add, change, and remove password in room
 - [ ] make admin
 - [ ] ban
 - [ ] mute
diff --git a/srcs/requirements/nestjs/api_back/src/chat/chat.controller.ts b/srcs/requirements/nestjs/api_back/src/chat/chat.controller.ts
index 5911f152..a2570d8d 100644
--- a/srcs/requirements/nestjs/api_back/src/chat/chat.controller.ts
+++ b/srcs/requirements/nestjs/api_back/src/chat/chat.controller.ts
@@ -123,19 +123,30 @@ export class ChatController {
 			throw new HttpException({ error: true, code: 'FORBIDDEN_CHARACTERS', message: `Your room name can not contains these characters : ${forbidden_chars}` }, HttpStatus.UNPROCESSABLE_ENTITY);
 		}
 
+		// check for password protection
 		if (typeof room.protection === 'undefined')
 			room.protection = false;
 		else if (room.protection === true)
 		{
 			if (!room.password || room.password.length === 0)
 			{
-				printCaller(`throw error: error: true, code: 'PASSWORD_TOO_SHORT', message: 'your password is too short'`);
-				throw new HttpException({ error: true, code: 'PASSWORD_TOO_SHORT', message: `your password is too short` }, HttpStatus.UNPROCESSABLE_ENTITY);
+				printCaller(`throw error: error: true, code: 'PASSWORD_INVALID', message: 'your password is invalid'`);
+				throw new HttpException({ error: true, code: 'PASSWORD_INVALID', message: `your password is invalid` }, HttpStatus.UNPROCESSABLE_ENTITY);
 			}
 		}
+
 		room.users = [req.user.username];
 		await this.chatService.addUserToNewRoom(req.user.username, room);
 
+		if (room.protection)
+		{
+			let message = `${req.user.username} changed the password`;
+			room.allowed_users = [req.user.username];
+			await this.chatService.setPassword(req.user.username, message, room);
+			let socket: socketDto = this.chatGateway.sockets.get(req.user.username);
+			await socket.to(socket.room).emit('message', "SERVER", message);
+		}
+
 		const ret_room = this.format_room(room);
 		res.status(HttpStatus.OK).json({ room: ret_room });
 		printCaller("- out ");
@@ -196,6 +207,7 @@ export class ChatController {
 
 		let fields = ["protection", "allowed_users"];
 		const room_db = await this.chatService.getRoomByName(room.name, fields);
+
 		if (room_db.protection === true)
 		{
 			if (!room_db.allowed_users.includes(req.user.username))
@@ -216,8 +228,8 @@ export class ChatController {
 
 	@UseGuards(AuthenticateGuard)
 	@UseGuards(TwoFactorGuard)
-	@Post('password')
-	async setPassword(@Body() room: roomDto, @Req() req, @Res() res): Promise<void>
+	@Post('passwordauth')
+	async passwordAuthentication(@Body() room: roomDto, @Req() req, @Res() res): Promise<void>
 	{
 		printCaller("- in ");
 
@@ -239,6 +251,69 @@ export class ChatController {
 		printCaller("- out ");
 	}
 
+	@UseGuards(AuthenticateGuard)
+	@UseGuards(TwoFactorGuard)
+	@Post('changepassword')
+	async changePassword(@Body('room') room: roomDto, @Body('old_password') old_password: string, @Req() req, @Res() res): Promise<void>
+	{
+		printCaller("- in ");
+
+		let message = `${req.user.username} changed the password`;
+		room.allowed_users = [req.user.username];
+		room.protection = true;
+		await this.chatService.setPassword(req.user.username, message, room, old_password);
+
+		// inform other connected users
+		let socket: socketDto = this.chatGateway.sockets.get(req.user.username);
+		await socket.to(socket.room).emit('message', "SERVER", message);
+
+		const ret_room = this.format_room(room);
+		res.status(HttpStatus.OK).json({ room: ret_room });
+		printCaller("- out ");
+	}
+
+	@UseGuards(AuthenticateGuard)
+	@UseGuards(TwoFactorGuard)
+	@Post('addpassword')
+	async addPassword(@Body() room: roomDto, @Req() req, @Res() res): Promise<void>
+	{
+		printCaller("- in ");
+
+		let message = `${req.user.username} added a password`;
+		room.allowed_users = [req.user.username];
+		room.protection = true;
+		await this.chatService.setPassword(req.user.username, message, room);
+
+		// inform other connected users
+		let socket: socketDto = this.chatGateway.sockets.get(req.user.username);
+		await socket.to(socket.room).emit('message', "SERVER", message);
+
+		const ret_room = this.format_room(room);
+		res.status(HttpStatus.OK).json({ room: ret_room });
+		printCaller("- out ");
+	}
+
+	@UseGuards(AuthenticateGuard)
+	@UseGuards(TwoFactorGuard)
+	@Delete('removepassword')
+	async removePassword(@Body() room: roomDto, @Req() req, @Res() res): Promise<void>
+	{
+		printCaller("- in ");
+
+		let message = `${req.user.username} removed a new password`;
+		room.allowed_users = [];
+		room.protection = false;
+		await this.chatService.setPassword(req.user.username, message, room);
+
+		// inform other connected users
+		let socket: socketDto = this.chatGateway.sockets.get(req.user.username);
+		await socket.to(socket.room).emit('message', "SERVER", message);
+
+		const ret_room = this.format_room(room);
+		res.status(HttpStatus.OK).json({ room: ret_room });
+		printCaller("- out ");
+	}
+
 	@UseGuards(AuthenticateGuard)
 	@UseGuards(TwoFactorGuard)
 	@Post('invite')
@@ -302,6 +377,13 @@ export class ChatController {
 		const room_name = await this.chatService.getCurrentRoomName(req.user.username);
 		const room = await this.chatService.getRoomByName(room_name);
 		const users = room.users;
+
+		let index = users.indexOf(req.user.username);
+		if (index > -1)
+		{
+			users.splice(index, 1);
+		}
+
 		res.status(HttpStatus.OK).json({ users: users });
 		printCaller("- out ");
 	}
diff --git a/srcs/requirements/nestjs/api_back/src/chat/chat.service.ts b/srcs/requirements/nestjs/api_back/src/chat/chat.service.ts
index 29897b88..e094920f 100644
--- a/srcs/requirements/nestjs/api_back/src/chat/chat.service.ts
+++ b/srcs/requirements/nestjs/api_back/src/chat/chat.service.ts
@@ -206,6 +206,60 @@ export class ChatService {
 		await this.chatroomRepository.save(room_db);
 	}
 
+	async setPassword(username: string, message: string, room: roomDto, old_password?: string): Promise<void>
+	{
+		printCaller("-- in ");
+
+		if (room.type === 'direct')
+		{
+			console.log("throw error: error: true, code: 'DIRECT_PASSWORD_FORBIDDEN', message: 'you cannot set a password in a direct message room'");
+			throw new HttpException({ error: true, code: 'DIRECT_PASSWORD_FORBIDDEN', message: `you cannot set a password in a direct message room` }, HttpStatus.FORBIDDEN);
+		}
+
+		const current_room = await this.getRoomByName(room.name);
+
+		if (!room.password)
+		{
+			console.log("throw error: error: true, code: 'NO_PASSWORD', message: 'this room has no password protection'");
+			throw new HttpException({ error: true, code: 'NO_PASSWORD', message: `this room has no password protection` }, HttpStatus.FORBIDDEN);
+		}
+		if (current_room.protection)
+		{
+			if (room.protection && !old_password)
+			{
+				console.log("throw error: error: true, code: 'MISSING_OLD_PASSWORD', message: 'you need to provide the old password to set a new one'");
+				throw new HttpException({ error: true, code: 'MISSING_OLD_PASSWORD', message: `you need to provide the old password to set a new one` }, HttpStatus.FORBIDDEN);
+			}
+			if (old_password)
+			{
+				const is_match = await bcrypt.compare(old_password, current_room.hash);
+				if (!is_match)
+				{
+					printCaller(`throw error: error: true, code: 'BAD_PASSWORD', message: 'you provided a bad password'`);
+					throw new HttpException({ error: true, code: 'BAD_PASSWORD', message: `you provided a bad password` }, HttpStatus.BAD_REQUEST);
+				}
+			}
+		}
+
+		const saltOrRounds = 10;
+		const password = room.password;
+		let hash: string;
+		if (room.protection)
+			hash = await bcrypt.hash(password, saltOrRounds);
+
+		// add password to chatroom
+		current_room.allowed_users = room.allowed_users;
+		current_room.protection = room.protection;
+		if (room.protection)
+			current_room.hash = hash;
+		else
+			delete current_room.hash;
+		current_room.messages.push({ name: "SERVER", message: message });
+		await this.chatroomRepository.save(current_room);
+
+		printCaller("-- out ");
+	}
+
 
 	/* ADDERS *************************************************
 	*/
@@ -221,19 +275,6 @@ export class ChatService {
 			throw new HttpException({ error: true, code: 'ROOM_CONFLICT', message: `This room name already exist` }, HttpStatus.CONFLICT);
 		}
 
-		let hash;
-		if (room.protection)
-		{
-			if (room.type === 'direct')
-			{
-				console.log("throw error: error: true, code: 'DIRECT_PASSWORD_FORBIDDEN', message: 'you cannot set a password in a direct message room'");
-				throw new HttpException({ error: true, code: 'DIRECT_PASSWORD_FORBIDDEN', message: `you cannot set a password in a direct message room`}, HttpStatus.FORBIDDEN);
-			}
-			const saltOrRounds = 10;
-			const password = room.password;
-			hash = await bcrypt.hash(password, saltOrRounds);
-		}
-
 		// create chatroom
 		let newChatroom = new Chatroom();
 		newChatroom.name = room.name;
@@ -241,12 +282,7 @@ export class ChatService {
 		newChatroom.owner = username;
 		newChatroom.users = room.users;
 		newChatroom.allowed_users = [];
-		newChatroom.protection = room.protection;
-		if (room.protection)
-		{
-			newChatroom.hash = hash;
-			newChatroom.allowed_users.push(username);
-		}
+		newChatroom.protection = false;
 		newChatroom.messages =
 		[
 			{ name: "SERVER", message: `creation of room ${room.name}` },
diff --git a/srcs/requirements/svelte/api_front/public/global.css b/srcs/requirements/svelte/api_front/public/global.css
index 3383d87c..b07ffb9c 100644
--- a/srcs/requirements/svelte/api_front/public/global.css
+++ b/srcs/requirements/svelte/api_front/public/global.css
@@ -1,4 +1,5 @@
 
+
 html, body {
 	position: relative;
 	width: 100%;
@@ -12,11 +13,23 @@ body {
 	box-sizing: border-box;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	/* tmp? */
-	background: bisque;
+	background-color: #333;
 	display: flex;
 	flex-direction: column;
 }
 
+@font-face {
+	font-family: "Bit5x3";
+	src:
+		url("./fonts/Bit5x3.woff2") format("woff2"),
+		local("Bit5x3"),
+		url("./fonts/Bit5x3.woff") format("woff");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
+
+
 a {
 	color: rgb(0,100,200);
 	text-decoration: none;
@@ -30,6 +43,13 @@ a:visited {
 	color: rgb(0,80,160);
 }
 
+.background-pages {
+	background-color: #333;
+	font-family: "Bit5x3";
+	font-size: 2vw;
+	color: white;
+}
+
 label {
 	display: block;
 }
diff --git a/srcs/requirements/svelte/api_front/src/pages/NotFound.svelte b/srcs/requirements/svelte/api_front/src/pages/NotFound.svelte
index f34342e6..da6072d3 100644
--- a/srcs/requirements/svelte/api_front/src/pages/NotFound.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/NotFound.svelte
@@ -1,10 +1,26 @@
 <script>
   import { link } from "svelte-spa-router";
+  import Header from '../pieces/Header.svelte';
 </script>
 
-<h1>We are sorry!</h1>
-<p>This isn't a url that we use.</p>
-<p>Go home you're drunk.</p>
-<a href="/" use:link>
-    <h2>Take me home →</h2>
-</a>
\ No newline at end of file
+
+<div class="background-pages">
+  <div class="content">
+  <h1>We are sorry!</h1>
+  <p>This isn't a url that we use.</p>
+  <p>Go home you're drunk.</p>
+</div>
+</div>
+
+<style>
+
+
+.content {
+  left: 50%;
+  position: absolute;
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+
+</style>
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte b/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
index 996728b8..f3dccddf 100644
--- a/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
@@ -78,8 +78,8 @@
 
 .button-in {
   background-color: #8c0000;
-  border-color: black;
-  border-width: 4px;
+  border-color: #071013;
+  border-width: 2px;
   color: white;
   font-family: "Bit5x3";
   font-size: x-large;
@@ -88,8 +88,8 @@
 
 .button-out {
   background-color: #008c8c;
-  border-color: black;
-  border-width: 4px;
+  border-color: #071013;
+  border-width: 2px;
   color: white;
   font-family: "Bit5x3";
   font-size: x-large;
diff --git a/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte b/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
index 5585b051..af39892f 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
@@ -28,7 +28,7 @@
 </script>
 <Header />
 <br />
-
+<div class="background-pages">
 <div class="principal-div">
 	<table class="stats-table">
 		<thead>
@@ -59,6 +59,7 @@
 		</tbody>
 	</table>
 </div>
+</div>
 
 <style>
 
@@ -71,7 +72,6 @@
 		margin-left: auto;
 		margin-right: auto;
 		font-size: 0.9em;
-		font-family: sans-serif;
 		min-width: 400px;
 	}
 
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
index 59791b1b..d1b7c125 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
@@ -19,6 +19,7 @@
 
 <Chat color="bisque"/>
 
+<div class="background-pages">
 <div class="outer">
   {#if user !== undefined}
     <GenerateUserDisplay user={user}/>
@@ -28,13 +29,13 @@
     <div>Failed to load current</div>
   {/if}
 </div>
-
+</div>
 <style>
 
   div.outer{
-    max-width: 960px;
-    margin: 40px auto;
+    max-width: 100%;
     text-align: center;
+    padding-bottom: 10px;
   }
 
 </style>
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
index 71c780c6..8dc48d37 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
@@ -24,22 +24,10 @@
 
   onMount( async() => {
 
-    // DO I ACTUALLY NEED TO ON MOUNT ALL THIS STUFF?
-      // ALSO I COULD JUST USE THE FUNCITONS I MADE...
-
-
-    // yea no idea what
-    // i mean do i fetch user? i will for now
     user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
       .then( (x) => x.json() );
 
     fetchAll();
-    // ok this shit works!
-    // const interval = setInterval(() => {
-		// 	fetchAll();
-		// }, 1000);
-
-    // return () => clearInterval(interval);
   });
 
   const fetchAll = async() => {
@@ -234,6 +222,7 @@
 </script>
 
 
+<div class="background-pages">
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="top-grid">
 
@@ -353,7 +342,7 @@
 
   </div>
 </div>
-
+</div>
 <style>
 
 /* ok so i want a 12 column grid with a sidebar */
@@ -368,7 +357,14 @@
 
   div.sidebar-list{
     grid-column: 1 / span 2;
-    background: white;
+    background: #FB8B24;
+    padding: 1vw;
+    max-width: 100%;
+    max-height: 100%;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    border-right: 4px solid #071013;
   }
 
   div.sidebar-item{
@@ -393,7 +389,7 @@
   }
 
   div.placeholder{
-    color: darkgray;
+    color: white;
     text-align: center;
   }
 
@@ -402,7 +398,7 @@
   }
 
   div.tip{
-    color: darkgray;
+    color: white;
     font-size: 0.8em;
     font-weight: bold;
   }
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
index e2bd0626..738dd392 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
@@ -106,6 +106,7 @@
 
 
 <main>
+  <div class="background-pages">
   <h2>Look! You can change stuff</h2>
   <div class="cards">
     <Card>
@@ -114,7 +115,7 @@
           <div class="label">New Username</div>
           <!-- it really hates {user.username} and ${user.username} -->
           <!-- <input type="text" placeholder="current username: ${user.username}" bind:value={set.username}> -->
-          <input type="text" placeholder="current username: {nameTmp}" bind:value={set.username}>
+          <input type="text" placeholder="{nameTmp}" bind:value={set.username}>
 		      <div class="success">{success.username}</div>
           <div class="error">{errors.username}</div>
         </div>
@@ -144,7 +145,7 @@
       </form>
     </Card>
   </div>
-
+</div>
 </main>
 
 
@@ -158,6 +159,8 @@
     grid-gap: 20px; */
   }
 
+
+
   div.cards{
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -190,6 +193,7 @@
 
   .inline-check{
     display: inline;
+    color: #333;
   }
 
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
index 51fa34ef..9dfb38f1 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
@@ -21,101 +21,84 @@
 
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<header>
-  <img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
-  <h1>Potato Pong</h1>
-  <nav>
-	<button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button>
-	<button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
-	<button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
-  <button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
-  <!-- <button class:selected="{current === '/profile/settings'}" on:click={() => (push('/profile/settings'))}>Settings</button> -->
-  <button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button>
-  <button on:click={handleClickLogout}>Log Out</button>
-  </nav>
-</header>
-
-
-
-
-
+<div class="header">
+  <img src="/img/logo_potato.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
+  <div class="center">
+	  <button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button>
+	  <button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
+	  <button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
+    <button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
+    <button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button> 
+  </div>
+  <button class="logout" on:click={handleClickLogout}>Log Out</button>
+</div>
 
 <style>
-  /* See "possible_fonts.css" for more font options... */
   @font-face {
-    font-family: 'Bondi';
-    src:url('/fonts/Bondi.ttf.woff') format('woff'),
-        url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
-        url('/fonts/Bondi.ttf.eot'),
-        url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');
+    font-family: "Bit5x3";
+    src:
+      url("/fonts/Bit5x3.woff2") format("woff2"),
+      local("Bit5x3"),
+      url("/fonts/Bit5x3.woff") format("woff");
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
   }
 
-
-  .selected {
-    background-color: chocolate;
+  .header div.center button.selected {
     text-decoration: underline;
-    /* TMP so it's obvious but we need to pick good colors */
+    background-color: #2B3A67;
+  }
+
+  .header div.center button {
+    background-color: #8c0000;
+    border-color: #071013;
+    color: white;
+    font-family: "Bit5x3";
+    border-width: 2px;
+    font-size: 2vw;
   }
 
 
-/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */
-
-
-  header{
-    /* background: #f7f7f7; */
-    background: #618174;
-    /* padding: 20px; */
-    margin: 0;
-    /* does nothing so far... */
-    /* display: flex; */
+  .header button.logout {
+    background-color: #008c8c;
+    border-color: #071013;
+    color: white;
+    font-family: "Bit5x3";
+    border-width: 2px;
+    font-size: 2vw;
   }
 
-  header{
-    /* for some reason this doesn't do shit! */
-    position: sticky;
-    /* position: absolute; */
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+  .header {
+    resize: vertical;
+    overflow: hidden;
+    background: #FB8B24;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    border-bottom: 4px solid #071013;
+    position: relative;
+    display: block;
+    padding: 10px;
   }
 
-/* Headers */
-  h1{
-    font-family: 'Bondi';
-  }
-
-  h1{
-    margin: 0;
-    text-align: left;
-    /* max-width: 40px; */
-    /* this helped with the weird extra space under the image... */
-    display: flex;
+  .header div.center {
+    width: fit-content;
     justify-self: center;
-    align-self: center;
+    position: absolute;
+    left: 50%;
+    display: inline-block;
+    -ms-transform: translateX(-50%); 
+    transform: translateX(-50%);
   }
 
-/* Images */
+  .header button.logout {
+    float: right;
+  }
 
-  img{
+  .header img{
     cursor: pointer;
-    max-width: 40px;
-    padding: 7px 20px;
-    justify-self: left;
+    max-width: 10%;
+    float: left;
   }
-
-  nav{
-    display: flex;
-    justify-content: right;
-  }
-
-  nav button{
-    margin: 7px 20px;
-    /* padding: 5px; */
-    border-radius: 4px;
-  }
-
-  /* .none{
-
-  } */
 </style>
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 06b2ef15..ad691fc8 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 
 	import Layouts from './Chat_layouts.svelte';
-	import { init_socket } from './Socket_init';
+	import { init_socket } from './Socket_chat';
 
 	export let color = "transparent";
 
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 de6a64e5..55ae3216 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,7 +1,5 @@
 <script lang="ts">
 
-	import Debug from './tmp_debug.svelte';
-
 	import { layout }      from './Store_chat';
 	import ChatBox         from './Chat_box_css.svelte';
 
@@ -11,7 +9,7 @@
 	import NewLayout       from './Layout_new.svelte';
 	import SettingsLayout  from './Layout_settings.svelte';
 	import RoomsetLayout   from './Layout_room_set.svelte';
-	import ProtectedLayout from './Layout_protected.svelte';
+	import PasswordLayout  from './Layout_password.svelte';
 	import CreateLayout    from './Layout_create.svelte';
 	import MuteLayout      from './Layout_mute.svelte';
 	import UserLayout      from './Layout_user.svelte';
@@ -68,8 +66,17 @@
 	{:else if $layout === "room_set"}
 		<RoomsetLayout back={layouts[1]} />
 
-	{:else if $layout === "protected"}
-		<ProtectedLayout back={layouts[1]} />
+	{:else if $layout === "password"}
+		<PasswordLayout back={layouts[1]} />
+
+	{:else if $layout === "add_password"}
+		<PasswordLayout back={layouts[1]} mode="add" />
+
+	{:else if $layout === "change_password"}
+		<PasswordLayout back={layouts[1]} mode="change" />
+
+	{:else if $layout === "remove_password"}
+		<PasswordLayout back={layouts[1]} mode="remove" />
 
 	{:else if $layout === "create"}
 		<CreateLayout back={layouts[1]} />
@@ -87,8 +94,5 @@
 
 </ChatBox>
 
-<!-- TMP DEBUG -->
-<Debug bind:layouts />
-
 <style></style>
 
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 4f82c334..bd5148b4 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
@@ -2,7 +2,6 @@
 	<Button
 		bind:layout
 		new_layout=""
-		on_click={}
 		my_class=""
 		my_title=""
 	>
@@ -17,7 +16,6 @@
 	export let my_class = "";
 	export let my_title = "";
 	export let new_layout = "";
-	export let on_click = "";
 
 	function update_layout() {
 		layout.set(new_layout);
@@ -25,7 +23,7 @@
 
 </script>
 
-<button on:click={update_layout} on:click={on_click} title={my_title} class={my_class}>
+<button on:click={update_layout} 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_home.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte
index 096d2733..d2d2d6d4 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
@@ -16,7 +16,7 @@
 		if (room.protection && !room.allowed)
 		{
 			await current_room.set(room);
-			layout.set("protected");
+			layout.set("password");
 		}
 		else
 		{
@@ -55,7 +55,7 @@
 				<p>rooms are loading...</p>
 			{:then rooms}
 				{#each rooms as room}
-					<Button my_class="list" on_click={function() {go_to_room(room)}}>
+					<Button my_class="list" on:click={function() {go_to_room(room)}}>
 						{room.client_name}
 					</Button>
 				{/each}
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 36aa78a5..10b86d4b 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
@@ -52,7 +52,7 @@
 				<p>users are loading...</p>
 			{:then users}
 				{#each users as user}
-					<Button my_class="list" on_click={function() {invite_this_user(user.username)}}>
+					<Button my_class="list" on:click={function() {invite_this_user(user.username)}}>
 						{user.username}
 					</Button>
 				{/each}
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 77c5af26..8a845b5d 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
@@ -17,7 +17,7 @@
 		if (updated_room.protection)
 		{
 			current_room.set(updated_room);
-			layout.set("protected");
+			layout.set("password");
 		}
 		else
 			await change_room(updated_room);
@@ -56,7 +56,7 @@
 				<p>rooms are loading...</p>
 			{:then rooms}
 				{#each rooms as room}
-					<Button my_class="list" on_click={function() {join_rooms(room)}}>
+					<Button my_class="list" on:click={function() {join_rooms(room)}}>
 						{room.name}
 					</Button>
 				{/each}
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_protected.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_password.svelte
similarity index 50%
rename from srcs/requirements/svelte/api_front/src/pieces/chat/Layout_protected.svelte
rename to srcs/requirements/svelte/api_front/src/pieces/chat/Layout_password.svelte
index 201582d2..d2d87f92 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_protected.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Layout_password.svelte
@@ -1,14 +1,22 @@
 <script lang="ts">
 
 	import { layout, current_room } from './Store_chat';
-	import { change_room, send_password } from './Request_rooms';
+	import { change_room, validate_password, change_password, add_password, remove_password } from './Request_rooms';
 	import { FetchResponse } from './Types_chat';
 	import Button from './Element_button.svelte';
 	import Warning from './Element_warning.svelte';
 
 	export let back = "";
+	export let mode = "validate";
+
+	let password_state = "";
+	if (mode === 'change')
+		password_state = "new";
+	if (mode === 'remove')
+		password_state = "current";
 
 	let room_password: string;
+	let room_old_password: string;
 	let response: FetchResponse;
 	let show_error = false;
 
@@ -24,12 +32,21 @@
 		let room = {
 			name: $current_room.name,
 			type: $current_room.type,
-			protection: true,
 			password: room_password,
 		};
+		room.protection = true;
+		if (mode === 'remove')
+			room.protection = false;
 
 		// send password
-		response = await send_password(room);
+		if (mode === 'validate')
+			response = await validate_password(room);
+		if (mode === 'add')
+			response = await add_password(room);
+		if (mode === 'change')
+			response = await change_password(room, room_old_password);
+		if (mode === 'remove')
+			response = await remove_password(room);
 
 		// go to room
 		if (response.status >= 300 || response.error)
@@ -49,7 +66,7 @@
 
 	<!-- room_name -->
 	<Button my_class="room_name deactivate">
-		&lt;room_name&gt;
+		{$current_room.name}
 	</Button>
 
 	<!-- close -->
@@ -57,14 +74,18 @@
 		close
 	</Button>
 
-	<!-- panel_protected -->
-	<div class="panel panel_protected __border_top">
+	<!-- panel_password -->
+	<div class="panel panel_password __border_top">
 		<p class="title __center">this room is protected</p>
 		<form on:submit|preventDefault={handleSubmit}>
 			{#if show_error}
 				<Warning content={response.message}/>
 			{/if}
-			<label for="chat_pswd"><p>enter password :</p></label>
+			{#if mode === 'change'}
+				<label for="chat_old_pswd"><p>enter old password :</p></label>
+				<input  id="chat_old_pswd" bind:value={room_old_password} type="password" placeholder="minimum 8 characters" minlength="8" name="old_password" required>
+			{/if}
+			<label for="chat_pswd"><p>enter {password_state} password :</p></label>
 			<input  id="chat_pswd" bind:value={room_password} type="password" placeholder="minimum 8 characters" minlength="8" name="password" required>
 			<input type="submit" value="&#x2BA1">
 		</form>
@@ -74,17 +95,17 @@
 
 <style>
 
-	/* grid layout "protected"
+	/* grid layout "password"
 	*/
-	.grid_box :global(.back           ) {grid-area: back;}
-	.grid_box :global(.room_name      ) {grid-area: room_name;}
-	.grid_box :global(.close          ) {grid-area: close;}
-	.grid_box :global(.panel_protected) {grid-area: panel_protected;}
+	.grid_box :global(.back          ) {grid-area: back;}
+	.grid_box :global(.room_name     ) {grid-area: room_name;}
+	.grid_box :global(.close         ) {grid-area: close;}
+	.grid_box :global(.panel_password) {grid-area: panel_password;}
 	.grid_box {
 		grid:
-			' back             room_name        close            ' auto
-			' panel_protected  panel_protected  panel_protected  ' 1fr
-			/ auto             1fr              auto             ;
+			' back            room_name       close           ' auto
+			' panel_password  panel_password  panel_password  ' 1fr
+			/ auto            1fr             auto            ;
 	}
 
 
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 03a0e918..49de63a7 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
@@ -71,7 +71,7 @@
 	</div>
 
 	<!-- send -->
-	<Button my_class="send" on_click={send_msg}>
+	<Button my_class="send" on:click={send_msg}>
 		send
 	</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 cdd986af..07f1c1ae 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
@@ -8,9 +8,11 @@
 
 	let users = get_room_users();
 
+	console.log("current_room:", $current_room);
+
 	function user_profile()
 	{
-		console/log("in user_profile");
+		console.log("in user_profile");
 	}
 
 	function user_leave_room()
@@ -42,13 +44,26 @@
 	<!-- panel_room_set -->
 	<div class="panel panel_room_set __border_top">
 		{#if $current_room.type !== "direct"}
-			<Button on_click={user_leave_room}>
+			<Button on:click={user_leave_room}>
 				leave
 			</Button>
 			<Button new_layout="invite">
 				invite someone
 			</Button>
 		{/if}
+		{#if $current_room.protection }
+			<p class="__center">this room is password protected</p>
+			<Button new_layout="change_password">
+				change password
+			</Button>
+			<Button new_layout="remove_password">
+				remove password
+			</Button>
+		{:else}
+			<Button new_layout="add_password">
+				add password
+			</Button>
+		{/if}
 		<p>room users :</p>
 		<div class="room_users">
 			<div class="__show_if_only_child">
@@ -58,7 +73,7 @@
 				<p>list of users is loading...</p>
 			{:then users}
 				{#each users as user}
-					<Button new_layout="user" my_class="list" on_click={user_profile}>
+					<Button new_layout="user" my_class="list" on:click={user_profile}>
 						{user}
 					</Button>
 				{/each}
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 24cc3d8f..36b98d4c 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
@@ -60,14 +60,52 @@ console.log("room returned from change:", response.room);
 	layout.set("room");
 }
 
+export async function validate_password(room: Room)
+{
+	console.log("in validate_password");
 
-export async function send_password(room: Room)
+console.log("room sent to validate password:", room);
+	let response: FetchResponse = await fetch_chat_request('passwordauth', FetchMethod.POST, room);
+console.log("room returned from validate password:", response.room);
+
+	return response;
+}
+
+export async function add_password(room: Room)
+{
+	console.log("in add_password");
+
+console.log("room sent to add password:", room);
+	let response: FetchResponse = await fetch_chat_request('addpassword', FetchMethod.POST, room);
+console.log("room returned from add password:", response.room);
+
+	return response;
+}
+
+export async function change_password(room: Room, old_password: string)
 {
 	console.log("in send_password");
 
-console.log("room sent to set password:", room);
-	let response: FetchResponse = await fetch_chat_request('password', FetchMethod.POST, room);
-console.log("room returned from set password:", response.room);
+	let request_body =
+	{
+		room: room,
+		old_password: old_password,
+	}
+
+console.log("room sent to change password:", room);
+	let response: FetchResponse = await fetch_chat_request('changepassword', FetchMethod.POST, request_body);
+console.log("room returned from change password:", response.room);
+
+	return response;
+}
+
+export async function remove_password(room: Room)
+{
+	console.log("in send_password");
+
+console.log("room sent to remove password:", room);
+	let response: FetchResponse = await fetch_chat_request('removepassword', FetchMethod.DELETE, room);
+console.log("room returned from remove password:", response.room);
 
 	return response;
 }
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Socket_init.ts b/srcs/requirements/svelte/api_front/src/pieces/chat/Socket_chat.ts
similarity index 81%
rename from srcs/requirements/svelte/api_front/src/pieces/chat/Socket_init.ts
rename to srcs/requirements/svelte/api_front/src/pieces/chat/Socket_chat.ts
index 2bd071dc..18d0a322 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Socket_init.ts
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Socket_chat.ts
@@ -1,6 +1,6 @@
 import io from 'socket.io-client';
 import { set_socket, set_user } from './Store_chat';
-import { socket_events } from './Socket_events';
+import { user, msgs } from './Store_chat';
 
 const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`;
 
@@ -21,6 +21,23 @@ export async function init_socket()
 	});
 	set_socket(socket);
 
+	socket_states(socket);
+	socket_events(socket);
+}
+
+function socket_events(socket)
+{
+	socket.on('message', function(from, message)
+	{
+		console.log("received msg:", message, from);
+		if (from === user.username)
+			from = "me";
+		msgs.update(msgs => [...msgs, { name: from, message: message }]);
+	});
+}
+
+function socket_states(socket)
+{
 	socket.on('connect',           function(){ console.log("socket.io connected"); });
 	socket.on('disconnect',        function(){ console.log("socket.io disconnected"); });
 	socket.on('connect_error',     function(){ console.log("socket.io connect_error"); });
@@ -33,7 +50,5 @@ export async function init_socket()
 	socket.on('reconnect_failed',  function(){ console.log("socket.io reconnect_failed"); });
 	socket.on('ping',              function(){ console.log("socket.io ping"); });
 	socket.on('pong',              function(){ console.log("socket.io pong"); });
-
-	socket_events(socket);
 }
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Socket_events.ts b/srcs/requirements/svelte/api_front/src/pieces/chat/Socket_events.ts
deleted file mode 100644
index b5014bc1..00000000
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Socket_events.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { user, msgs } from './Store_chat';
-
-export function socket_events(socket)
-{
-	socket.on('message', function(from, message)
-	{
-		console.log("received msg:", message, from);
-		if (from === user.username)
-			from = "me";
-		msgs.update(msgs => [...msgs, { name: from, message: message }]);
-	});
-}
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/Types_chat.ts b/srcs/requirements/svelte/api_front/src/pieces/chat/Types_chat.ts
index a484a42c..82f5c419 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/Types_chat.ts
+++ b/srcs/requirements/svelte/api_front/src/pieces/chat/Types_chat.ts
@@ -28,6 +28,6 @@ export enum FetchMethod
 {
 	POST = 'POST',
 	GET = 'GET',
-	LEAVE = 'LEAVE',
+	DELETE = 'DELETE',
 }
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/chat/tmp_debug.svelte b/srcs/requirements/svelte/api_front/src/pieces/chat/tmp_debug.svelte
deleted file mode 100644
index ea801707..00000000
--- a/srcs/requirements/svelte/api_front/src/pieces/chat/tmp_debug.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-
-	export let layout = "";
-	export let layouts = [];
-
-</script>
-
-<div style="display: flex; flex-direction: column; font-size: 12px; position: fixed; top: 20px; left: 20px; background-color: white;">
-	<p>temp, for testing :</p>
-	<button on:click={function(){layout = "close"    }}>close</button>
-	<button on:click={function(){layout = "home"     }}>home</button>
-	<button on:click={function(){layout = "room"     }}>room</button>
-	<button on:click={function(){layout = "new"      }}>new</button>
-	<button on:click={function(){layout = "settings" }}>settings</button>
-	<button on:click={function(){layout = "room_set" }}>room_set</button>
-	<button on:click={function(){layout = "protected"}}>protected</button>
-	<button on:click={function(){layout = "create"   }}>create</button>
-	<button on:click={function(){layout = "mute"     }}>mute</button>
-	<button on:click={function(){
-		layouts = ["settings", "settings"];
-		layout = "user";
-	}}>user from settings</button>
-	<button on:click={function(){
-		layouts = ["room_set", "room_set"];
-		layout = "user";
-	}}>user from room_set</button>
-</div>