diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html
index 1319cc28..07fb7c14 100644
--- a/tests_hugo/chat_node/chat_client/chat.html
+++ b/tests_hugo/chat_node/chat_client/chat.html
@@ -41,7 +41,27 @@
 					id="msg_thread"
 			--------------------------------- -->
 
-			<div    class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
+			<div class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
+				<div id="chat_room_list" class="__first_child_vanish">
+					<div class="chat_room_name" id="chat_home_no_room_yet">
+						<p>/ you have no chat room yet /</p>
+					</div>
+					<!-- placeholders
+					-->
+					<button class="chat_room_name">
+						<p>a room</p>
+					</button>
+					<button class="chat_room_name">
+						<p>another room</p>
+					</button>
+					<div class="chat_room_name">
+						<p>placeholder</p>
+					</div>
+					<!-- END placeholders -->
+				</div>
+			</div>
+
+			<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
 				<div id="chat_msg_thread">
 					<!-- placeholder -->
 					<div class="chat_msg bob">
@@ -56,61 +76,42 @@
 				</div>
 			</div>
 
-			<div    class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
-				<div id="chat_room_list" class="_first_child_vanish">
-					<div class="chat_room_name">
-						<p>you don't have any chat yet</p>
-					</div>
-					<!-- placeholders -->
-					<div class="chat_room_name">
-						<p>placeholder</p>
-					</div>
-					<div class="chat_room_name">
-						<p>placeholder</p>
-					</div>
-					<div class="chat_room_name">
-						<p>placeholder</p>
-					</div>
-					<!-- END placeholders -->
-				</div>
-			</div>
-
-			<div    class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
+			<div class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
 				<!-- content -->
 				panel new
 			</div>
 
-			<div    class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
+			<div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
 				<!-- content -->
 				panel settings
 			</div>
 
-			<div    class="chat_item chat_panel chat_panel_room_set" id="chat_panel_room_set">
+			<div class="chat_item chat_panel chat_panel_room_set" id="chat_panel_room_set">
 				<!-- content -->
 				panel room settings
 			</div>
 
-			<div    class="chat_item chat_panel chat_panel_protected" id="chat_panel_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">
+			<div class="chat_item chat_panel chat_panel_create" id="chat_panel_create">
 				<!-- content -->
 				panel create
 			</div>
 
-			<div    class="chat_item chat_panel chat_panel_user" id="chat_panel_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">
+			<div class="chat_item chat_panel chat_panel_mute" id="chat_panel_mute">
 				<!-- content -->
 				panel mute
 			</div>
 
-			<div    class="chat_item chat_panel chat_panel_write" id="chat_panel_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/style/chat.css b/tests_hugo/chat_node/chat_client/style/chat.css
index 58a9236d..ff64c615 100644
--- a/tests_hugo/chat_node/chat_client/style/chat.css
+++ b/tests_hugo/chat_node/chat_client/style/chat.css
@@ -17,6 +17,7 @@
 @import 'chat_close.css';
 @import 'chat_write.css';
 @import 'chat_msg.css';
+@import 'chat_room_list.css';
 
 /*
 @import '_chat_controls.css';
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 83e37f54..fa7570bb 100644
--- a/tests_hugo/chat_node/chat_client/style/chat__global.css
+++ b/tests_hugo/chat_node/chat_client/style/chat__global.css
@@ -1,3 +1,17 @@
+
+/* p in chat_box
+*/
 #chat_box p {
 	padding: 10px;
+	font-size: 15px;
+}
+
+/* show first child only if it's alone
+*/
+#chat_box .__first_child_vanish > *#chat_home_no_room_yet {
+	display: none;
+}
+#chat_box .__first_child_vanish > *#chat_home_no_room_yet:only-child {
+	display: flex;
+	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
new file mode 100644
index 00000000..b3b8e091
--- /dev/null
+++ b/tests_hugo/chat_node/chat_client/style/chat_room_list.css
@@ -0,0 +1,21 @@
+
+/* 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;
+}
+
+/* add or remove '.chat_item' to toggle the hover effect */
+#chat_box button.chat_room_name {
+	background-color: transparent;
+}
+
+#chat_box #chat_panel_home .chat_room_name p {
+	margin: 0px;
+	text-align: start;
+}
+
diff --git a/tests_hugo/chat_node/chat_client/style/layout_home.css b/tests_hugo/chat_node/chat_client/style/layout_home.css
index 83d64e7d..85e0cc1f 100644
--- a/tests_hugo/chat_node/chat_client/style/layout_home.css
+++ b/tests_hugo/chat_node/chat_client/style/layout_home.css
@@ -52,3 +52,4 @@
 	*/
 }
 
+