diff --git a/login.php b/login.php
index 720f0d6..f93f6a8 100644
--- a/login.php
+++ b/login.php
@@ -15,7 +15,7 @@
             <form id='user-infos-01' action='".$action."' method='post'>
 
                 <div class='form-group'>
-                    <label for='logmsg'>Ben ! Trouve un truc</label>
+                    <label for='logmsg'>Se Connecter</label>
                         </div>
                 <div class='form-group '>
                     <input type='text' class='form-control' name='username' id='username' value='' placeholder="Pseudo">
diff --git a/main.css b/main.css
index dd39d12..d43c957 100644
--- a/main.css
+++ b/main.css
@@ -99,17 +99,26 @@ body {
     width: 128px;
     display: flex;
     flex-direction: column;
+    overflow: scroll;
 }
 
-.selected {
-    flex: 1;
+.tag-cont {
+    /*display:none;*/
 }
 
-.unselected {
+.ingr-cont {
+    /*display:none;*/
+}
+
+.tag-selected-div {
     flex: 4;
 }
 
-#sidebar-search {
+.tag-unselected-div {
+    flex: 4;
+}
+
+.sidebar-search {
     flex: 1;
 }
 
@@ -143,19 +152,32 @@ nav {
     background-color: #ffa04d;
 }
 
-.tag-unselected {
+.tag-selected:hover {
     background-color: white;
 }
 
+.tag-unselected {
+    background-color: white;
+    
+}
+.tag-unselected:hover {
+    background-color: #ffa04d;
+}
+
+#hr {
+    border: 1px solid #0bbd90;
+    width: 93%;
+    box-shadow: 1px 3px 5px #0bbd90;
+}
 
 .main-body {
     display: flex;
     flex-direction: row;
-    overflow: auto;
     flex: 1;
     background-clip: border-box;
     padding-right: 2%;
     padding-left: 2%;
+    overflow: hidden;
 }
 
 /* content : le cadre de base du centre de notre site
@@ -167,7 +189,7 @@ nav {
     height: 100%;
     border: 1px solid rgba(0,0,0,.125);
     border-radius: 6px;
-    overflow: auto;
+    overflow: scroll;
 }
 
 /*Recettes :
diff --git a/sidebar.php b/sidebar.php
index 1393faf..aa28eb6 100644
--- a/sidebar.php
+++ b/sidebar.php
@@ -1,18 +1,74 @@
-<h4>Filtres</h4>
-<div class="selected">
-    <ul>
-        <li class="tag tag-selected">Tag 1</li>
-        <li class="tag tag-selected">Tag 2</li>
-    </ul>
+<script>
+    function test(){
+        let rep = window.confirm("continuer ?");
+        window.alert("rep " + rep);
+    }
+</script>
+<div class="tag-cont">
+    <h4>Tag</h4>
+    <div class="tag-selected-div">
+        <ul>
+            <li class="tag tag-selected">Tag 1</li>
+            <li class="tag tag-selected">Tag 2</li>
+        </ul>
+    </div>
+    <form class="sidebar-search" action="none">
+        <input type="text" class="search-form search-form-tag" name="search-tag" placeholder="Rechercher..." >
+    </form>
+    <div class="tag-unselected-div">
+        <ul>
+            <li class="tag tag-unselected" onclick="test()">Tag 1</li>
+            <li class="tag tag-unselected">Tag 2</li>
+            <li class="tag tag-unselected">Tag 3</li>
+            <li class="tag tag-unselected">Tag 4</li>
+            <li class="tag tag-unselected">Tag 2</li>
+            <li class="tag tag-unselected">Tag 3</li>
+            <li class="tag tag-unselected">Tag 4</li>
+            <li class="tag tag-unselected">Tag 2</li>
+            <li class="tag tag-unselected">Tag 3</li>
+            <li class="tag tag-unselected">Tag 4</li>
+            <li class="tag tag-unselected">Tag 2</li>
+            <li class="tag tag-unselected">Tag 3</li>
+            <li class="tag tag-unselected">Tag 4</li>
+            <li class="tag tag-unselected">Tag 2</li>
+            <li class="tag tag-unselected">Tag 3</li>
+            <li class="tag tag-unselected">Tag 4</li>
+            <li class="tag tag-unselected">Tag 2</li>
+            <li class="tag tag-unselected">Tag 3</li>
+            <li class="tag tag-unselected">Tag 4</li>
+            <li class="tag tag-unselected">Tag 2</li>
+            <li class="tag tag-unselected">Tag 3</li>
+            <li class="tag tag-unselected">Tag 4</li>
+            <li class="tag tag-unselected">Tag 2</li>
+            <li class="tag tag-unselected">Tag 3</li>
+            <li class="tag tag-unselected">Tag 4</li>
+            <li class="tag tag-unselected">Tag 2</li>
+            <li class="tag tag-unselected">Tag 3</li>
+            <li class="tag tag-unselected">Tag 4</li>
+            <li class="tag tag-unselected">Tag 2</li>
+            <li class="tag tag-unselected">Tag 3</li>
+            <li class="tag tag-unselected">Tag 4</li>
+        </ul>
+    </div>
 </div>
-<form id="sidebar-search" action="none">
-    <input type="text" class="search-form search-form-tag" name="search-tag" placeholder="Rechercher..." >
-</form>
-<div class="unselected">
-    <ul>
-        <li class="tag tag-unselected">Tag 1</li>
-        <li class="tag tag-unselected">Tag 2</li>
-        <li class="tag tag-unselected">Tag 3</li>
-        <li class="tag tag-unselected">Tag 4</li>
-    </ul>
+<hr id="hr">
+<div class="ingr-cont">
+    <h4>Ingrédient</h4>
+    <div class="tag-selected-div">
+        <ul>
+            <li class="tag tag-selected">ingr 1</li>
+            <li class="tag tag-selected">ingr 2</li>
+        </ul>
+    </div>
+    <form class="sidebar-search" action="none">
+        <input type="text" class="search-form search-form-tag" name="search-ingr" placeholder="Rechercher..." >
+    </form>
+    <div class="tag-unselected-div">
+        <ul>
+            <li class="tag tag-unselected" onclick="test()">ingr 1</li>
+            <li class="tag tag-unselected">ingr 2</li>
+            <li class="tag tag-unselected">ingr 3</li>
+            <li class="tag tag-unselected">ingr 4</li>
+        </ul>
+    </div>
 </div>
\ No newline at end of file