diff --git a/css/signin_login_form.css b/css/signin_login_form.css
new file mode 100644
index 0000000..1286c1b
--- /dev/null
+++ b/css/signin_login_form.css
@@ -0,0 +1,84 @@
+.forms_sections {
+    display:flex;
+    flex-direction: column;
+}
+@media (min-width: 768px) {
+    .forms_sections {
+        display:flex;
+        flex-direction: column;
+    }
+}
+
+@media (min-width: 1200px) {
+    .forms_sections {
+        display:flex;
+        flex-direction: row;
+    }
+}
+.form_container {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 500px;;
+    align-items: center;
+    padding: 3em;
+    justify-content: center;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
+          rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+}
+
+.form_container h1 {
+      color: #e5989b;
+      text-align: center;
+      font-size: 2.6em;
+      text-shadow: 1px 1px black;
+      letter-spacing: 0.4em;
+      margin: 0.6em;
+}
+.form_container input {
+    width: 100%;
+    padding: 0.4em;
+    margin-top: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 16px;
+  }
+.form_container button {
+    margin: 1em 0;
+    background-color: #e5989b;
+    padding: 1em 3em;
+    border: 1px solid transparent;
+    border-radius: 4em;
+    color: #f5efff;
+    font-weight: 600;
+    cursor: pointer;
+    transition: 0.5s ease;
+}
+
+.form_container button:hover {
+    background-color: #f5efff;
+    color: #e5989b;
+    border: 1px solid #3b3030;
+}
+
+.signin_section, .login_section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width:auto;
+    padding: 3em;
+    
+}
+.signin_section {
+    background-color: #e5989b;
+}
+.login_section {
+    background-color: #8ff8a8;
+}
+
+ .form_container[id="sign_in_form"] h1, button:hover {
+    color: #8ff8a8;
+}
+.form_container[id="sign_in_form"] button {
+    background-color: #8ff8a8;
+}
diff --git a/login.html b/login.html
index 3d048da..ef9541a 100644
--- a/login.html
+++ b/login.html
@@ -1,116 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Home</title>
-    <!-- Font awesome -->
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
-    />
-    <!-- google font -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline:opsz,wght@10..72,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-      rel="stylesheet"
-    />
-    <!--Css -->
-    <link rel="stylesheet" href="./css/style.css" />
-    <link rel="stylesheet" href="./css/navbar.css" />
-    <link rel="stylesheet" href="./css/footer.css" />
-    <link rel="stylesheet" href="./css/tablet.css" />
-    <link rel="stylesheet" href="./css/desktop.css" />
-  </head>
-  <body>
-    <!-- NAVBAR -->
-    <header>
-      <nav id="navbar">
-        <a href="index.html" class="nav-branding" target="_blank"
-          ><img src="./media/logo.webp" alt=""
-        /></a>
 
-        <ul class="nav-menu">
-          <li class="nav-item">
-            <a href="index.html" class="nav-link">Home</a>
-          </li>
-          <li class="nav-item">
-            <a href="booking.html" class="nav-link">Book</a>
-          </li>
-          <li class="nav-item">
-            <a href="about.html" class="nav-link">About</a>
-          </li>
-          <li class="nav-item">
-            <a href="service.html" class="nav-link">Service</a>
-          </li>
-          <li class="nav-item">
-            <a href="gallery.html" class="nav-link">Gallery</a>
-          </li>
-        </ul>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Home</title>
+  <!-- Font awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
+  <!-- google font -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline:opsz,wght@10..72,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+    rel="stylesheet" />
+  <!--Css -->
+  <link rel="stylesheet" href="./css/style.css" />
+  <link rel="stylesheet" href="./css/signin_login_form.css" />
+  <link rel="stylesheet" href="./css/navbar.css" />
+  <link rel="stylesheet" href="./css/footer.css" />
+  <link rel="stylesheet" href="./css/tablet.css" />
+  <link rel="stylesheet" href="./css/desktop.css" />
+</head>
 
-        <div class="account">
-          <a href="#" class="nav-link user"
-            ><i class="fa-regular fa-user"></i
-          ></a>
-        </div>
+<body>
+  <!-- MAIN SECTION -->
+  <div class="forms_sections">
+      <form action="" class="form_container" name="login_form">
+        <h1>Login</h1>
+        <!-- E-mail -->
+        <input type="email" name="email" id="email_sign" placeholder="E-mail">
+        <br>
 
-        <ul class="logsing-menu">
-          <li class="logsing-item"><a href="login.html">Log In</a></li>
-          <li class="logsing-item"><a href="signin.html">Sign In</a></li>
-        </ul>
+        <!-- Password -->
+        <input type="password" name="pass" id="pass_sign" placeholder="Password">
+        <br>
 
-        <div class="hamburger">
-          <span class="bar"></span>
-          <span class="bar"></span>
-          <span class="bar"></span>
-        </div>
-      </nav>
-    </header>
-    <!-- MAIN SECTION -->
-    <!-- FOOTER -->
-    <footer>
-      <div id="container">
-        <address class="contact">
-          <h3>Contact Me:</h3>
-          <p>+353 01 234 56 78</p>
-          <p>firs.last@domain.com</p>
-        </address>
-        <aside class="pages">
-          <ul class="footer-menu">
-            <li class="footer-item">
-              <a href="" class="footer-link">About Me</a>
-            </li>
-            <li class="footer-item">
-              <a href="" class="footer-link">Service</a>
-            </li>
-            <li class="footer-item">
-              <a href="" class="footer-link">Gallery</a>
-            </li>
-            <li class="footer-item">
-              <a href="" class="footer-link">Log in </a>
-            </li>
-          </ul>
-        </aside>
-        <section class="social-media">
-          <h3>Follow me:</h3>
-          <a
-            href="https://www.instagram.com/ivanatumbeva_photo/"
-            target="_blank"
-            ><i class="fa-brands fa-instagram"></i
-          ></a>
-          <a href="https://www.facebook.com/ivana.tumbeva" target="_blank"
-            ><i class="fa-brands fa-facebook"></i
-          ></a>
-
-          <div>
-            <a class="button" href="booking.html">Book</a>
-          </div>
+        <!-- Log in button -->
+        <section class="button_area">
+          <button type="submit">Login</button>
         </section>
-      </div>
-      <section class="madeby">® Two Turk One Rus, 2025</section>
-    </footer>
-    <!-- Script -->
-    <script src="./javascript/script.js"></script>
-  </body>
-</html>
+        <p>Forgot your password?<a href="#">Reset your password</a></p>
+      </form>
+
+    <section class="signin_section">
+      <p>Need an account?</p>
+      <a href="signin.html"><button type="button">Sign in</button></a>
+    </section>
+  </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/signin.html b/signin.html
index 2af4988..c9a9f2e 100644
--- a/signin.html
+++ b/signin.html
@@ -1,175 +1,140 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>SignIn</title>
-    <!-- Font awesome -->
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
-      integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
-    <!-- google font -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline:opsz,wght@10..72,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-      rel="stylesheet"
-    />
-    <!--Css -->
-    <link rel="stylesheet" href="./css/style.css" />
-    <link rel="stylesheet" href="./css/navbar.css" />
-    <link rel="stylesheet" href="./css/footer.css" />
-    <link rel="stylesheet" href="./css/tablet.css" />
-    <link rel="stylesheet" href="./css/desktop.css" />
-  </head>
 
-  <body>
-    <!-- NAVBAR -->
-    <header>
-      <nav id="navbar">
-        <a href="index.html" class="nav-branding" target="_blank"
-          ><img src="./media/logo.webp" alt=""
-        /></a>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>SignIn</title>
+  <!-- Font awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+    integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <!-- google font -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline:opsz,wght@10..72,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+    rel="stylesheet" />
+  <!--Css -->
+  <link rel="stylesheet" href="./css/style.css" />
+  <link rel="stylesheet" href="./css/signin_login_form.css" />
+  <link rel="stylesheet" href="./css/navbar.css" />
+  <link rel="stylesheet" href="./css/footer.css" />
+  <link rel="stylesheet" href="./css/tablet.css" />
+  <link rel="stylesheet" href="./css/desktop.css" />
+</head>
 
-        <ul class="nav-menu">
-          <li class="nav-item">
-            <a href="index.html" class="nav-link">Home</a>
-          </li>
-          <li class="nav-item">
-            <a href="booking.html" class="nav-link">Book</a>
-          </li>
-          <li class="nav-item">
-            <a href="about.html" class="nav-link">About</a>
-          </li>
-          <li class="nav-item">
-            <a href="service.html" class="nav-link">Service</a>
-          </li>
-          <li class="nav-item">
-            <a href="gallery.html" class="nav-link">Gallery</a>
-          </li>
-        </ul>
+<body>
+  <!-- NAVBAR -->
+  <header>
+    <nav id="navbar">
+      <a href="index.html" class="nav-branding" target="_blank"><img src="./media/logo.webp" alt="" /></a>
 
-        <div class="account">
-          <a href="#" class="nav-link user"
-            ><i class="fa-regular fa-user"></i
-          ></a>
-        </div>
-        <ul class="logsing-menu">
-          <li class="logsing-item"><a href="login.html">Log In</a></li>
-          <li class="logsing-item"><a href="signin.html">Sign In</a></li>
-        </ul>
-        <div class="hamburger">
-          <span class="bar"></span>
-          <span class="bar"></span>
-          <span class="bar"></span>
-        </div>
-      </nav>
-    </header>
+      <ul class="nav-menu">
+        <li class="nav-item">
+          <a href="index.html" class="nav-link">Home</a>
+        </li>
+        <li class="nav-item">
+          <a href="booking.html" class="nav-link">Book</a>
+        </li>
+        <li class="nav-item">
+          <a href="about.html" class="nav-link">About</a>
+        </li>
+        <li class="nav-item">
+          <a href="service.html" class="nav-link">Service</a>
+        </li>
+        <li class="nav-item">
+          <a href="gallery.html" class="nav-link">Gallery</a>
+        </li>
+      </ul>
+
+      <div class="account">
+        <a href="#" class="nav-link user"><i class="fa-regular fa-user"></i></a>
+      </div>
+      <ul class="logsing-menu">
+        <li class="logsing-item"><a href="login.html">Log In</a></li>
+        <li class="logsing-item"><a href="signin.html">Sign In</a></li>
+      </ul>
+      <div class="hamburger">
+        <span class="bar"></span>
+        <span class="bar"></span>
+        <span class="bar"></span>
+      </div>
+    </nav>
+  </header>
+
+  <section class="forms_sections">
 
-    <!-- Sign In form -->
-    <form action="#" class="form" name="sign_in_form">
+    <section class="login_section">
+      <p>Have an account?</p>
+      <section class="button_area">
+        <a href="login.html"><button type="button">Login</button></a>
+      </section>
+    </section>
+          <!-- Sign In form -->
+    <form action="#" class="form_container" id="sign_in_form">
       <h1>Sign in</h1>
       <!-- First name -->
-      <label for="first_name_sign">First name</label>
-      <input
-        type="text"
-        name="first_name"
-        id="first_name_sign"
-        required
-        placeholder=""
-      />
-      <br />
+      <input type="text" name="first_name" id="first_name_sign" required placeholder="First name" />
 
       <!-- Last name -->
-      <label for="last_name_sign">Last name</label>
-      <input
-        type="text"
-        name="last_name"
-        id="last_name_sign"
-        required
-        placeholder=""
-      />
-      <br />
+      <input type="text" name="last_name" id="last_name_sign" required placeholder="Last name" />
 
       <!-- Phone -->
-      <label for="phone_sign">Phone number</label>
-      <input type="tel" name="phone" id="phone_sign" required placeholder="" />
-      <br />
+      <input type="tel" name="phone" id="phone_sign" required placeholder="Mobile phone" />
 
       <!-- E-mail -->
-      <label for="email_sign">E-mail</label>
-      <input
-        type="email"
-        name="email"
-        id="email_sign"
-        required
-        placeholder=""
-        pattern=""
-      />
-      <br />
+      <input type="email" name="email" id="email_sign" required placeholder="E-mail" pattern="" />
 
       <!-- Password -->
-      <label for="pass_sign">Password</label>
-      <input
-        type="password"
-        name="pass"
-        id="pass_sign"
-        required
-        placeholder=""
-      />
-      <br />
+      <input type="password" name="pass" id="pass_sign" required placeholder="Password" />
 
       <!-- Sign in button -->
-      <input type="submit" value="Sign in" />
-      <br />
+      <section class="button_area">
+        <button type="submit">Sign in</button>
+      </section>
     </form>
+  </section>
 
-    <!-- FOOTER -->
-    <footer>
-      <div id="container">
-        <section class="contact">
-          <h3>Contact Me:</h3>
-          <p>+353 01 234 56 78</p>
-          <p>firs.last@domain.com</p>
-        </section>
-        <aside class="pages">
-          <ul class="footer-menu">
-            <li class="footer-item">
-              <a href="" class="footer-link">About Me</a>
-            </li>
-            <li class="footer-item">
-              <a href="" class="footer-link">Service</a>
-            </li>
-            <li class="footer-item">
-              <a href="" class="footer-link">Gallery</a>
-            </li>
-            <li class="footer-item">
-              <a href="" class="footer-link">Log in </a>
-            </li>
-          </ul>
-        </aside>
-        <section class="social-media">
-          <h3>Follow me:</h3>
-          <a
-            href="https://www.instagram.com/ivanatumbeva_photo/"
-            target="_blank"
-            ><i class="fa-brands fa-instagram"></i
-          ></a>
-          <a href="https://www.facebook.com/ivana.tumbeva" target="_blank"
-            ><i class="fa-brands fa-facebook"></i
-          ></a>
 
-          <div>
-            <a class="button" href="booking.html">Book</a>
-          </div>
-        </section>
-      </div>
-      <section class="madeby">® Two Turk One Rus, 2025</section>
-    </footer>
-    <script src="./javascript/script.js"></script>
-  </body>
-</html>
+  <!-- FOOTER -->
+  <footer>
+    <div id="container">
+      <section class="contact">
+        <h3>Contact Me:</h3>
+        <p>+353 01 234 56 78</p>
+        <p>firs.last@domain.com</p>
+      </section>
+      <aside class="pages">
+        <ul class="footer-menu">
+          <li class="footer-item">
+            <a href="" class="footer-link">About Me</a>
+          </li>
+          <li class="footer-item">
+            <a href="" class="footer-link">Service</a>
+          </li>
+          <li class="footer-item">
+            <a href="" class="footer-link">Gallery</a>
+          </li>
+          <li class="footer-item">
+            <a href="" class="footer-link">Log in </a>
+          </li>
+        </ul>
+      </aside>
+      <section class="social-media">
+        <h3>Follow me:</h3>
+        <a href="https://www.instagram.com/ivanatumbeva_photo/" target="_blank"><i
+            class="fa-brands fa-instagram"></i></a>
+        <a href="https://www.facebook.com/ivana.tumbeva" target="_blank"><i class="fa-brands fa-facebook"></i></a>
+
+        <div>
+          <a class="button" href="booking.html">Book</a>
+        </div>
+      </section>
+    </div>
+    <section class="madeby">® Two Turk One Rus, 2025</section>
+  </footer>
+  <script src="./javascript/script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
