diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html
index 93c4eab4..02940497 100644
--- a/tests_hugo/chat_node/chat_client/chat.html
+++ b/tests_hugo/chat_node/chat_client/chat.html
@@ -154,8 +154,12 @@
 
 			<!-- PROTECTED -->
 			<div class="chat_item chat_panel chat_panel_protected" id="chat_panel_protected">
-				<!-- content -->
-				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">
+					<input type="submit" value="&#x2BA1">
+				</form>
 			</div>
 
 			<!--  -->
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 dd9d32ac..cef8e9f8 100644
--- a/tests_hugo/chat_node/chat_client/style/layout_protected.css
+++ b/tests_hugo/chat_node/chat_client/style/layout_protected.css
@@ -13,11 +13,37 @@
 }
 
 /* button "<room_name>" appearance
+   add or remove '.chat_item' to toggle the hover effect
 */
-/* add or remove '.chat_item' to toggle the hover effect */
 #chat_box.protected button.chat_item.chat_room_name {
 	width: auto;
 	background-color: transparent;
 	pointer-events: none;
 }
 
+#chat_box #chat_protected_title {
+	margin-top: 30px;
+}
+
+/* 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;
+}
+
+