diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html
index dbcb6632..6aa964a0 100644
--- a/tests_hugo/chat_node/chat_client/chat.html
+++ b/tests_hugo/chat_node/chat_client/chat.html
@@ -37,33 +37,35 @@
 
 			<!-- --------------------------------
 				PANELS
-					id="chat_msg_thread"
-					id="msg_thread"
 			--------------------------------- -->
 
+			<!-- HOME -->
 			<div class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
 				<p class="__center">list of your rooms :</p>
-				<div id="chat_room_list">
+				<div id="chat_api_room_list" class="chat_api">
 					<div class="chat_room_name __show_if_only_child">
 						<p class="__center">/ you have no chat room yet /</p>
 					</div>
-					<button class="chat_room_name" onclick="layout('room')">
-						<p>a room</p>
-					</button>
-					<button class="chat_room_name" onclick="layout('room')">
-						<p>another room</p>
-					</button>
-					<button class="chat_room_name" onclick="layout('room')">
-						<p>placeholder</p>
-					</button>
 					<!-- placeholders -------
-					---- END placeholders -->
+					-->
+					<button class="chat_room_name" onclick="layout('room')">
+						<p class="__left">a room</p>
+					</button>
+					<button class="chat_room_name" onclick="layout('room')">
+						<p class="__left">another room</p>
+					</button>
+					<button class="chat_room_name" onclick="layout('room')">
+						<p class="__left">placeholder</p>
+					</button>
+					<!-- END placeholders -->
 				</div>
 			</div>
 
+			<!-- MSG -->
 			<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
-				<div id="chat_msg_thread">
-					<!-- placeholder -->
+				<div id="chat_api_msg_thread" class="chat_api">
+					<!-- placeholders -------
+					-->
 					<div class="chat_msg bob">
 						<p class="name">bob</p>
 						<p class="msg">hello</p>
@@ -72,44 +74,73 @@
 						<p class="name">me</p>
 						<p class="msg">hello</p>
 					</div>
-					<!-- -->
+					<!-- END placeholders -->
 				</div>
 			</div>
 
+			<!-- NEW -->
 			<div class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
-				<button id="create_new_room_btn"><p>create</p></button>
+				<button class="chat_create_btn"><p>create</p></button>
+				<p>join room :</p>
+				<div id="chat_api_publics_rooms" class="chat_api">
+					<div class="chat_public_rooms __show_if_only_child">
+						<p class="__center">/ there are no public rooms yet /</p>
+					</div>
+					<!-- placeholders -------
+					-->
+					<button class="chat_room_name" onclick="layout('room')">
+						<p class="__left">join room</p>
+					</button>
+					<button class="chat_room_name" onclick="layout('room')">
+						<p class="__left">one room</p>
+					</button>
+					<button class="chat_room_name" onclick="layout('room')">
+						<p class="__left">another room</p>
+					</button>
+					<button class="chat_room_name" onclick="layout('room')">
+						<p class="__left">one more room</p>
+					</button>
+					<!-- END placeholders -->
+				</div>
 			</div>
 
+			<!-- SETTINGS -->
 			<div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
 				<!-- content -->
 				panel settings
 			</div>
 
+			<!-- ROOM SET -->
 			<div class="chat_item chat_panel chat_panel_room_set" id="chat_panel_room_set">
 				<!-- content -->
 				panel room settings
 			</div>
 
+			<!-- PROTECTED -->
 			<div class="chat_item chat_panel chat_panel_protected" id="chat_panel_protected">
 				<!-- content -->
 				panel protected
 			</div>
 
+			<!--  -->
 			<div class="chat_item chat_panel chat_panel_create" id="chat_panel_create">
 				<!-- content -->
 				panel create
 			</div>
 
+			<!-- USER -->
 			<div class="chat_item chat_panel chat_panel_user" id="chat_panel_user">
 				<!-- content -->
 				panel user
 			</div>
 
+			<!--  -->
 			<div class="chat_item chat_panel chat_panel_mute" id="chat_panel_mute">
 				<!-- content -->
 				panel mute
 			</div>
 
+			<!-- WRITE -->
 			<div class="chat_item chat_panel chat_panel_write" id="chat_panel_write">
 				<div class="text_area" contenteditable></div>
 			</div>
diff --git a/tests_hugo/chat_node/chat_client/chat_add_msg.js b/tests_hugo/chat_node/chat_client/chat_add_msg.js
index 72cf7d37..f8ae324a 100644
--- a/tests_hugo/chat_node/chat_client/chat_add_msg.js
+++ b/tests_hugo/chat_node/chat_client/chat_add_msg.js
@@ -1,6 +1,6 @@
 
 const add_message = (from, message ) => {
-	const div_thread = document.getElementById('chat_msg_thread');
+	const div_thread = document.getElementById('chat_api_msg_thread');
 
 	//console.log("received message:");
 	//console.log(`[${message}]`);
diff --git a/tests_hugo/chat_node/chat_client/style/chat__global.css b/tests_hugo/chat_node/chat_client/style/chat__global.css
index c3831d33..09de1f9b 100644
--- a/tests_hugo/chat_node/chat_client/style/chat__global.css
+++ b/tests_hugo/chat_node/chat_client/style/chat__global.css
@@ -24,12 +24,21 @@
 }
 
 
-/* text center
+/* text align
 */
 #chat_box p.__center {
 	text-align: center;
 }
+#chat_box p.__left {
+	text-align: left;
+}
+#chat_box p.__right {
+	text-align: right;
+}
 
+
+/* default align items
+*/
 #chat_box .chat_item > * {
 	margin: 0px;
 }
diff --git a/tests_hugo/chat_node/chat_client/style/chat_buttons.css b/tests_hugo/chat_node/chat_client/style/chat_buttons.css
index af7194f2..3f1147f1 100644
--- a/tests_hugo/chat_node/chat_client/style/chat_buttons.css
+++ b/tests_hugo/chat_node/chat_client/style/chat_buttons.css
@@ -7,6 +7,10 @@
 	border: none;
   background-color: rgb(220, 220, 220);
 }
+#chat_box button p {
+  width: 100%;
+	text-align: center;
+}
 #chat_box button.chat_item:hover,
 #chat_box .chat_item button:hover {
   background-color: rgb(200, 200, 200);
diff --git a/tests_hugo/chat_node/chat_client/style/chat_msg.css b/tests_hugo/chat_node/chat_client/style/chat_msg.css
index ca878135..71df9f6b 100644
--- a/tests_hugo/chat_node/chat_client/style/chat_msg.css
+++ b/tests_hugo/chat_node/chat_client/style/chat_msg.css
@@ -3,13 +3,13 @@
 	overflow: scroll;
 	border: 1px solid black;
 }
-.chat_item#chat_panel_msg #chat_msg_thread {
+.chat_item#chat_panel_msg #chat_api_msg_thread {
 	flex-direction: column;
 	width: 100%;
 	padding: 0px 5px;
 	margin-bottom: 0px;
 }
-.chat_item#chat_panel_msg #chat_msg_thread .chat_msg {
+.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg {
 	white-space: pre-wrap;
 	margin: 5px auto;
 	padding: 5px;
@@ -22,20 +22,20 @@
 	ALL MSG
 */
 
-.chat_item#chat_panel_msg #chat_msg_thread .chat_msg {
+.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg {
 	margin-left: 0px;
 	background-color: rgb(210, 210, 210);
 	max-width: 80%;
 }
-.chat_item#chat_panel_msg #chat_msg_thread .chat_msg p {
+.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg p {
 	padding: 0px;
 }
-.chat_item#chat_panel_msg #chat_msg_thread .chat_msg p.name {
+.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg p.name {
 	margin: 0px;
 	font-size: 12px;
 	color: rgb(100, 100, 100);
 }
-.chat_item#chat_panel_msg #chat_msg_thread .chat_msg p.msg {
+.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg p.msg {
 	margin: 5px 0px;
 }
 
@@ -44,12 +44,12 @@
 	MSG PERSO
 */
 
-.chat_item#chat_panel_msg #chat_msg_thread .chat_msg.me {
+.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.me {
 	margin-right: 0px;
 	margin-left: auto;
 	background-color: rgb(210, 110, 10);
 }
-.chat_item#chat_panel_msg #chat_msg_thread .chat_msg.me p.name {
+.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.me p.name {
 	display: none;
 }
 
@@ -58,14 +58,14 @@
 	MSG SERVER
 */
 
-.chat_item#chat_panel_msg #chat_msg_thread .chat_msg.SERVER {
+.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER {
 	margin-left: auto;
 	background-color: transparent;
 }
-.chat_item#chat_panel_msg #chat_msg_thread .chat_msg.SERVER p.name {
+.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.name {
 	display: none;
 }
-.chat_item#chat_panel_msg #chat_msg_thread .chat_msg.SERVER p.msg {
+.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.msg {
 	margin: 0px auto;
 	font-size: 12px;
 	color: rgb(100, 100, 100);
diff --git a/tests_hugo/chat_node/chat_client/style/chat_room_list.css b/tests_hugo/chat_node/chat_client/style/chat_room_list.css
index 76be66d7..ae2491a7 100644
--- a/tests_hugo/chat_node/chat_client/style/chat_room_list.css
+++ b/tests_hugo/chat_node/chat_client/style/chat_room_list.css
@@ -1,10 +1,4 @@
 
-/* chat home rooms list
-#chat_box .chat_item#chat_panel_home #chat_room_list {
-	margin-top: 0px;
-}
-*/
-
 #chat_box #chat_panel_home .chat_room_name {
 	margin: 0px;
 }
diff --git a/tests_hugo/chat_node/chat_client/style/layout_new.css b/tests_hugo/chat_node/chat_client/style/layout_new.css
index 3b75c295..96652f49 100644
--- a/tests_hugo/chat_node/chat_client/style/layout_new.css
+++ b/tests_hugo/chat_node/chat_client/style/layout_new.css
@@ -21,7 +21,12 @@
 	pointer-events: none;
 }
 
-#chat_box.new .chat_item button#create_new_room_btn {
+#chat_box.new .chat_item button {
+	margin: 0px;
+	background-color: transparent;
+}
+
+#chat_box.new .chat_item button.chat_create_btn {
 	margin: 10px 0px;
 }