diff --git a/css/style.css b/css/style.css
index 64e51c022e2a178b373cf1aa6993c4a5f6669ce6..eddb38552e62cc0ae549b20b52fd44f2052baf29 100644
--- a/css/style.css
+++ b/css/style.css
@@ -589,3 +589,66 @@ html body .content #list-toggle:checked + label::after {
 .bg-white {
   background-color: white;
 }
+
+#hidden1 {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.8s ease;
+}
+
+#hidden2 {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.8s ease;
+}
+
+#button_prod,
+#button_gerant,
+#button_login {
+  border-radius: 20px;
+  border: 1px solid #ff4b2b;
+  background-color: #ff4b2b;
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 12px 45px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  transition: transform 80ms ease-in;
+  width: 300px;
+}
+
+.button_login {
+  border-radius: 20px;
+  border: 1px solid green;
+  background-color: green;
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 12px 45px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  transition: transform 80ms ease-in;
+}
+
+.login {
+  text-align: center;
+  margin-top: 10px;
+}
+
+.formlogin {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+  justify-content: space-evenly;
+  font-size: 20px;
+}
+
+form input {
+  margin: 10px;
+  border-radius: 10px;
+  width: 200px;
+  height: 30px;
+  text-align: center;
+}
diff --git a/js/main.js b/js/main.js
index c63ac12b31c99423ffe4ef948c4d16c7621d7c13..8d87961b77ec64031fcf4c64dc4755ae3e2e57f6 100644
--- a/js/main.js
+++ b/js/main.js
@@ -4,4 +4,37 @@ function plus(input){
 
 function minus(input){
     input.value = Math.max(parseInt(input.value) - 1, 0)
-}
\ No newline at end of file
+}
+
+but1 = document.getElementById("button_prod");
+but2 = document.getElementById("button_gerant");
+but1.clicked = false;
+but2.clicked = false;
+
+but1.onclick = function() {
+   this.clicked = !this.clicked;
+   let target = document.getElementById('hidden1');
+    if (this.clicked) {
+        if (but2.clicked) {
+            but2.click();
+        }
+        target.style.height = target.scrollHeight+"px";
+    }
+    else {
+        target.style.height = 0;
+    }
+}
+
+but2.onclick = function() {
+    this.clicked = !this.clicked;
+    let target = document.getElementById('hidden2');
+     if (this.clicked) {
+        if (but1.clicked) {
+            but1.click();
+        }
+         target.style.height = target.scrollHeight+"px";
+     }
+     else {
+         target.style.height = 0;
+     }
+ }
\ No newline at end of file
diff --git a/signIn.html b/signIn.html
new file mode 100644
index 0000000000000000000000000000000000000000..75794abcda660181634c5a92d2f4172e98653a03
--- /dev/null
+++ b/signIn.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="fr" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="./css/style.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
+  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
+    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
+  <script src="./js/main.js" defer></script>
+  <title>Login</title>
+</head>
+
+<body>
+  <header>
+    <nav>
+      <label class="logo">LeHangar</label>
+    </nav>
+  </header>
+  <h1 class="titreListe">Connexion</h1>
+  <div class="login">
+    <h3> Vous êtes...</h3>
+    <button id='button_prod'> Producteur </button>
+    <button id='button_gerant'> Gérant de coopérative </button>
+  </div>
+
+  <form id='hidden1'  action="authentication.php" method="post">
+
+    <div class="formlogin">
+      <label for="uname"><b>Username</b></label>
+      <input type="text" placeholder="Enter Username" name="uname" required>
+
+      <label for="psw"><b>Password</b></label>
+      <input type="password" placeholder="Enter Password" name="psw" required>
+
+      <button class="button_login" type="submit">Login</button>
+    </div>
+  </form>
+
+  <form id='hidden2'  action="authentication.php" method="post">
+
+    <div class="formlogin">
+      <label for="uname"><b>Username</b></label>
+      <input type="text" placeholder="Enter Username" name="uname" required>
+
+      <label for="psw"><b>Password</b></label>
+      <input type="password" placeholder="Enter Password" name="psw" required>
+
+      <button class="button_login" type="submit">Login</button>
+    </div>
+  </form>
+</body>
+
+</html>
\ No newline at end of file