diff --git a/srcs/requirements/svelte/api_front/public/build/bundle.css b/srcs/requirements/svelte/api_front/public/build/bundle.css
index 894ca185..8915ac39 100644
--- a/srcs/requirements/svelte/api_front/public/build/bundle.css
+++ b/srcs/requirements/svelte/api_front/public/build/bundle.css
@@ -1,4 +1,4 @@
-.grid-container.svelte-16gr88w.svelte-16gr88w{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;margin-bottom:0px;overflow:hidden;padding:20px 40px;display:grid;grid-template-columns:repeat(12, 1fr);grid-template-rows:1fr 1fr 1fr 1fr 1fr;align-items:center}header.svelte-16gr88w h1.svelte-16gr88w,header.svelte-16gr88w nav a.svelte-16gr88w{color:bisque}header.svelte-16gr88w h1.svelte-16gr88w{grid-column:1 / 7;grid-row:1;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav.svelte-16gr88w{grid-column:7 / 13;grid-row:1;justify-self:end;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav a.svelte-16gr88w{margin-left:10px;text-decoration:none}header.svelte-16gr88w nav a.svelte-16gr88w:hover{font-weight:bold;background-color:blue}header.svelte-16gr88w h2.svelte-16gr88w:hover{background:blue}header.svelte-16gr88w h2.svelte-16gr88w{grid-row:3;grid-column:5 / span 4;justify-self:center;border:1px solid black;z-index:3}header.svelte-16gr88w h2 div.svelte-16gr88w{font-size:2em}nav.svelte-16gr88w div.svelte-16gr88w{display:inline;color:bisque;font-weight:bold}@font-face{font-family:'Bondi';src:url('/fonts/Bondi.ttf.woff') format('woff'),
+.grid-container.svelte-16gr88w.svelte-16gr88w{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;margin-bottom:0px;overflow:hidden;padding:20px 40px;display:grid;grid-template-columns:repeat(12, 1fr);grid-template-rows:1fr 1fr 1fr 1fr 1fr;align-items:center}header.svelte-16gr88w h1.svelte-16gr88w,header.svelte-16gr88w nav a.svelte-16gr88w{color:bisque}header.svelte-16gr88w h1.svelte-16gr88w{grid-column:1 / 7;grid-row:1;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav.svelte-16gr88w{grid-column:7 / 13;grid-row:1;justify-self:end;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav a.svelte-16gr88w{margin-left:10px;text-decoration:none}header.svelte-16gr88w nav a.svelte-16gr88w:hover{font-weight:bold;background-color:blue}header.svelte-16gr88w h2.svelte-16gr88w:hover{background:blue}header.svelte-16gr88w h2.svelte-16gr88w{grid-row:3;grid-column:5 / span 4;justify-self:center;border:1px solid black;z-index:3}header.svelte-16gr88w h2 div.svelte-16gr88w{font-size:2em}nav.svelte-16gr88w div.svelte-16gr88w{display:inline;color:bisque;font-weight:bold}canvas.svelte-1bstsd0{width:100%;height:100%;background-color:#666}footer.svelte-3gs9wc{padding:40px;padding-bottom:10px;text-align:center}.copyright.svelte-3gs9wc{color:#aaa;font-size:14px;display:inline-block;padding:20px;border-top:1px solid #ddd}@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-weight:normal;font-style:normal}header.svelte-1rtggu1.svelte-1rtggu1{background:#618174;margin:0}header.svelte-1rtggu1.svelte-1rtggu1{position:sticky;display:grid;grid-template-columns:1fr 1fr 1fr}h1.svelte-1rtggu1.svelte-1rtggu1{font-family:'Bondi'}h1.svelte-1rtggu1.svelte-1rtggu1{margin:0;text-align:left;display:flex;justify-self:center;align-self:center}img.svelte-1rtggu1.svelte-1rtggu1{cursor:pointer;max-width:40px;padding:7px 20px;justify-self:left}nav.svelte-1rtggu1.svelte-1rtggu1{display:flex;justify-content:right}nav.svelte-1rtggu1 button.svelte-1rtggu1{margin:7px 20px;border-radius:4px}footer.svelte-3gs9wc{padding:40px;padding-bottom:10px;text-align:center}.copyright.svelte-3gs9wc{color:#aaa;font-size:14px;display:inline-block;padding:20px;border-top:1px solid #ddd}canvas.svelte-1bstsd0{width:100%;height:100%;background-color:#666}main.svelte-clru56.svelte-clru56{max-width:960px;margin:40px auto;text-align:center}.icon.svelte-clru56.svelte-clru56{max-width:150px}section.main-stats.svelte-clru56.svelte-clru56{max-width:600px;margin:40px auto;text-align:center;display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(3, 1fr)}section.main-stats.svelte-clru56 h4.svelte-clru56{grid-column:1 / span 3}
\ No newline at end of file
+        url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');font-weight:normal;font-style:normal}header.svelte-1rtggu1.svelte-1rtggu1{background:#618174;margin:0}header.svelte-1rtggu1.svelte-1rtggu1{position:sticky;display:grid;grid-template-columns:1fr 1fr 1fr}h1.svelte-1rtggu1.svelte-1rtggu1{font-family:'Bondi'}h1.svelte-1rtggu1.svelte-1rtggu1{margin:0;text-align:left;display:flex;justify-self:center;align-self:center}img.svelte-1rtggu1.svelte-1rtggu1{cursor:pointer;max-width:40px;padding:7px 20px;justify-self:left}nav.svelte-1rtggu1.svelte-1rtggu1{display:flex;justify-content:right}nav.svelte-1rtggu1 button.svelte-1rtggu1{margin:7px 20px;border-radius:4px}main.svelte-clru56.svelte-clru56{max-width:960px;margin:40px auto;text-align:center}.icon.svelte-clru56.svelte-clru56{max-width:150px}section.main-stats.svelte-clru56.svelte-clru56{max-width:600px;margin:40px auto;text-align:center;display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(3, 1fr)}section.main-stats.svelte-clru56 h4.svelte-clru56{grid-column:1 / span 3}
\ No newline at end of file
diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html
index e11db5ae..752c652f 100644
--- a/tests_hugo/chat_node/chat_client/chat.html
+++ b/tests_hugo/chat_node/chat_client/chat.html
@@ -8,35 +8,44 @@
 
 	<body>
 
+		<input type="button" class="input_outside" id="input_outside">
 		<input type="checkbox" id="chat_input" style="display: none;"/>
 
 		<div class="chat_box">
 
 			<div class="chat_item controls_area">
-				<div class="control list drop_down_menu" tabindex=0>
-					<!--
-					<p class="drop_down_title">list</p>
-					<p class="drop_down_items">directs</p>
-					<p class="drop_down_items">rooms</p>
-					-->
-					<div class="drop_down_title" tabindex=0><p>list</p></div>
-					<div class="drop_down_items" tabindex=0>
-						<p>directs chats</p>
-						<p>rooms</p>
+
+				<div class="control list drop_down">
+					<p class="_title" tabindex=0>list</p>
+					<div class="_items" tabindex=0>
+
+						<div class="drop_down _push">
+							<p class="_title" tabindex=0>directs chats</p>
+							<div class="_items" tabindex=0>
+								<label for="input_outside"><p>test1</p></label>
+								<label for="input_outside"><p>test2</p></label>
+							</div>
+						</div>
+
+						<div class="drop_down _push">
+							<p class="_title" tabindex=0>rooms</p>
+							<div class="_items" tabindex=0>
+								<label for="input_outside"><p>test1</p></label>
+								<label for="input_outside"><p>test2</p></label>
+							</div>
+						</div>
+
 					</div>
 				</div>
-				<div class="control create drop_down_menu" tabindex=0>
-					<!--
-					<p class="drop_down_title">create</p>
-					<p class="drop_down_items">direct</p>
-					<p class="drop_down_items">room</p>
-					-->
-					<div class="drop_down_title" tabindex=0><p>create</p></div>
-					<div class="drop_down_items" tabindex=0>
-						<p>direct chat</p>
-						<p>room</p>
+
+				<div class="control create drop_down">
+					<p class="_title" tabindex=0>create</p>
+					<div class="_items" tabindex=0>
+						<label for="input_outside"><p>direct chat</p></label>
+						<label for="input_outside"><p>room</p></label>
 					</div>
 				</div>
+
 				<div class="control join">
 					<p>join</p>
 				</div>
diff --git a/tests_hugo/chat_node/chat_client/style/chat.css b/tests_hugo/chat_node/chat_client/style/chat.css
index 703e67b1..c5ea6b7a 100644
--- a/tests_hugo/chat_node/chat_client/style/chat.css
+++ b/tests_hugo/chat_node/chat_client/style/chat.css
@@ -48,7 +48,7 @@
 
   border: 1px solid green;
 }
-.chat_box .chat_item * {
+.chat_box .chat_item > * {
 	display: flex;
 }
 /* buttons settings */
diff --git a/tests_hugo/chat_node/chat_client/style/drop_down_menu.css b/tests_hugo/chat_node/chat_client/style/drop_down_menu.css
index fc022324..9b6be922 100644
--- a/tests_hugo/chat_node/chat_client/style/drop_down_menu.css
+++ b/tests_hugo/chat_node/chat_client/style/drop_down_menu.css
@@ -1,18 +1,24 @@
-.drop_down_menu,
-.drop_down_menu * {
+
+
+/* * * * * * * * * * * * * * * * * * * *
+	MENU APPEARENCE
+*/
+
+.drop_down,
+.drop_down * {
 	display: flex;
 	flex-direction: column;
 	margin: auto;
 	position: relative;
+	cursor: pointer;
 }
-.drop_down_menu {
+.drop_down {
 	z-index: 1;
 }
-.drop_down_menu .drop_down_title {
+.drop_down ._title {
 	padding: 5px;
-	pointer-events: none;
 }
-.drop_down_menu .drop_down_items {
+.drop_down ._items {
 	position: absolute;
 	top: 100%;
 	left: 0%;
@@ -20,23 +26,62 @@
 	min-width: 100%;
 	background-color: white;
 	white-space: nowrap;
-	opacity: 0;
-	visibility: hidden;
-	transition: visibility 0.3s;
+	border: 1px solid blue;
 }
-.drop_down_menu .drop_down_items > * {
+.drop_down ._items > * {
+	margin: 0px;
+}
+.drop_down ._title {
+	text-align: center;
+}
+.drop_down label {
+	margin: 0px;
+	padding: 0px;
+}
+.drop_down p {
 	padding: 5px;
+	margin: 0px;
+	margin-left: 0px;
+	cursor: pointer;
 }
 
-.drop_down_menu:focus {
+
+/* * * * * * * * * * * * * * * * * * * *
+	SUB MENU APPEARENCE
+*/
+
+.drop_down._push ._title {
+  text-align: left;
 }
-.drop_down_menu:focus .drop_down_title {
-	pointer-events: auto;
-}
-.drop_down_menu:focus .drop_down_items {
-	opacity: 1;
-	visibility: visible;
-}
-.drop_down_menu:focus .drop_down_items > * {
+.drop_down._push > ._items {
+  position: relative;
+  width: auto;
+  margin: 0px;
+  margin-left: 10px;
+}
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * *
+	DROP MECHANISM
+*/
+
+input.input_outside {
+	opacity: 0;
+	position: absolute;
+	pointer-events: none;
+}
+.drop_down > ._title {
+  pointer-events: auto;
+}
+.drop_down > ._items {
+  display: none;
+}
+.drop_down:focus-within > ._title {
+  pointer-events: none;
+}
+.drop_down:focus-within > ._items {
+  display: flex;
 }
 
diff --git a/tests_hugo/chat_node/chat_client/style/globals.css b/tests_hugo/chat_node/chat_client/style/globals.css
deleted file mode 100644
index 8f92e134..00000000
--- a/tests_hugo/chat_node/chat_client/style/globals.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.cursor_pointer {
-	cursor: pointer;
-}
diff --git a/tests_hugo/chat_node/chat_client/style/msg_controls.css b/tests_hugo/chat_node/chat_client/style/msg_controls.css
index 1ba9aa40..2e1c7a65 100644
--- a/tests_hugo/chat_node/chat_client/style/msg_controls.css
+++ b/tests_hugo/chat_node/chat_client/style/msg_controls.css
@@ -4,8 +4,9 @@
 	margin: auto;
 	cursor: pointer;
 }
-.chat_item.controls_area .control p {
+.chat_item.controls_area .control > p {
 	margin: 0px;
+	padding: 5px;
 }
 .chat_item.controls_area .control.list {
 }
@@ -14,3 +15,9 @@
 .chat_item.controls_area .control.join {
 }
 
+.chat_item.controls_area .control p:hover {
+	background-color: rgb(210, 210, 210);
+}
+.chat_item.controls_area .control p:active {
+	background-color: rgb(180, 180, 180);
+}