diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html
index 363619ef..0c623816 100644
--- a/tests_hugo/chat_node/chat_client/chat.html
+++ b/tests_hugo/chat_node/chat_client/chat.html
@@ -172,16 +172,35 @@
 			<div class="chat_item chat_panel chat_panel_protected" id="chat_panel_protected">
 				<p class="__center" id="chat_protected_title">this room is protected</p>
 				<form>
-					<label><p>password :</p></label>
-					<input type="password" id="pswd">
+					<label for="chat_pswd"><p>password :</p></label>
+					<input  id="chat_pswd" type="password">
 					<input type="submit" value="&#x2BA1">
 				</form>
 			</div>
 
 			<!-- CREATE -->
 			<div class="chat_item chat_panel chat_panel_create" id="chat_panel_create">
-				<!-- content -->
-				panel create
+				<form>
+					<label for="chat_name"><p>name :</p></label>
+					<input  id="chat_name">
+
+					<input  id="chat_public" type="radio" name="chat_create_type" checked>
+					<label for="chat_public" class="_radio"><p>public</p></label>
+
+					<input  id="chat_private" type="radio" name="chat_create_type">
+					<label for="chat_private" class="_radio"><p>private</p></label>
+
+					<input  id="chat_protected" class="_check_show_next" type="radio" name="chat_create_type">
+					<label for="chat_protected" class="_radio"><p>protected</p></label>
+
+					<div class="__content _is_hidden">
+						<label for="chat_pswd"><p>choose a password :</p></label>
+						<input  id="chat_pswd" type="password">
+						<p>confirm password :</p>
+						<input type="password">
+					</div>
+					<input type="submit" value="&#x2BA1">
+				</form>
 			</div>
 
 			<!-- USER -->
diff --git a/tests_hugo/chat_node/chat_client/style/chat.css b/tests_hugo/chat_node/chat_client/style/chat.css
index bfc6eddc..5cf37623 100644
--- a/tests_hugo/chat_node/chat_client/style/chat.css
+++ b/tests_hugo/chat_node/chat_client/style/chat.css
@@ -22,6 +22,7 @@ cxv
 @import 'chat_write.css';
 @import 'chat_msg.css';
 @import 'chat_blocked.css';
+@import 'chat_form.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 4eafe842..90a13e89 100644
--- a/tests_hugo/chat_node/chat_client/style/chat__global.css
+++ b/tests_hugo/chat_node/chat_client/style/chat__global.css
@@ -1,4 +1,5 @@
 
+
 /* p in chat_box
 */
 #chat_box p {
@@ -7,6 +8,7 @@
 	font-family: Cantarell;
 }
 
+
 /* show child only if it's alone
 */
 #chat_box .__show_if_only_child {
@@ -45,3 +47,10 @@
 }
 
 
+/* display content
+*/
+#chat_box .__content{
+	display: content;
+}
+
+
diff --git a/tests_hugo/chat_node/chat_client/style/chat_form.css b/tests_hugo/chat_node/chat_client/style/chat_form.css
new file mode 100644
index 00000000..22475524
--- /dev/null
+++ b/tests_hugo/chat_node/chat_client/style/chat_form.css
@@ -0,0 +1,65 @@
+
+/* default element take all space on each line
+*/
+#chat_box .chat_item form {
+	margin: 0px auto;
+}
+#chat_box .chat_item form * {
+	margin: 0px;
+}
+
+
+/* radio elements style check
+*/
+#chat_box .chat_item form input[type=radio] {
+	display: none;
+}
+#chat_box .chat_item form label._radio {
+	margin: 0px 0px 0px auto;
+	padding-right: 10px;
+	cursor: pointer;
+}
+#chat_box .chat_item form label._radio::after {
+	content: "";
+	position: absolute;
+	top: calc(50% - 6px);
+	right: 0px;
+	width: 12px;
+	height: 12px;
+	border-radius: 6px;
+	border: 2px solid rgb(150, 150, 150);
+	box-sizing: border-box;
+	cursor: pointer;
+}
+#chat_box .chat_item form input[type=radio]:checked
++ label._radio::after {
+	background-color: rgb(200, 200, 200);
+}
+
+
+/* hide and show next element on focus
+*/
+#chat_box form ._is_hidden {
+	display: none;
+}
+#chat_box form ._check_show_next:checked ~ ._is_hidden {
+	display: flex;
+}
+
+
+/* submit button
+		https://www.fileformat.info/info/unicode/category/So/list.htm
+		U+21AA 	RIGHTWARDS ARROW WITH HOOK 	↪
+		U+21B3 	DOWNWARDS ARROW WITH TIP RIGHTWARDS 	↳
+		U+2BA1 	DOWNWARDS TRIANGLE-HEADED ARROW WITH LONG TIP RIGHTWARDS 	⮡
+		U+2BB1 	RIBBON ARROW DOWN RIGHT 	⮱
+		U+2BA9 	BLACK CURVED DOWNWARDS AND RIGHTWARDS ARROW 	⮩
+*/
+#chat_box .chat_item form input[type=submit] {
+	padding: 0px 10px;
+	border: none;
+	margin: 10px 0px 0px auto;
+	cursor: pointer;
+}
+
+
diff --git a/tests_hugo/chat_node/chat_client/style/layout_protected.css b/tests_hugo/chat_node/chat_client/style/layout_protected.css
index ae8c6ef3..875a4c37 100644
--- a/tests_hugo/chat_node/chat_client/style/layout_protected.css
+++ b/tests_hugo/chat_node/chat_client/style/layout_protected.css
@@ -34,26 +34,3 @@
 }
 
 
-/* form
-*/
-#chat_box.protected form {
-	margin: 0px auto;
-}
-
-
-/* submit button
-		https://www.fileformat.info/info/unicode/category/So/list.htm
-		U+21AA 	RIGHTWARDS ARROW WITH HOOK 	↪
-		U+21B3 	DOWNWARDS ARROW WITH TIP RIGHTWARDS 	↳
-		U+2BA1 	DOWNWARDS TRIANGLE-HEADED ARROW WITH LONG TIP RIGHTWARDS 	⮡
-		U+2BB1 	RIBBON ARROW DOWN RIGHT 	⮱
-		U+2BA9 	BLACK CURVED DOWNWARDS AND RIGHTWARDS ARROW 	⮩
-*/
-#chat_box.protected input[type=submit] {
-	padding: 0px 10px;
-	border: none;
-	margin: 10px 0px 0px auto;
-	cursor: pointer;
-}
-
-