diff --git a/.gitignore b/.gitignore
index 4cb512e..2621920 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,3 @@
-/.env
\ No newline at end of file
+/.env
+/go.mod
+/go.sum
\ No newline at end of file
diff --git a/src/public/index.html b/src/public/index.html
index daa6a5d..a6e3285 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -8,7 +8,7 @@
 <body>
     <nav>
         <div class="logo">
-            <svg width="51" height="53" viewBox="0 0 51 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg class='logo-svg' width="51" height="53" viewBox="0 0 51 53" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M14.429 0H5.09613C3.74457 0 2.44836 0.536926 1.49261 1.49261C0.536926 2.44836 0 3.74457 0 5.09613V14.429L14.429 0ZM0.525757 26.4725C3.69952 45.0619 20.2863 51.5477 23.8907 52.74C24.9224 53.0864 26.039 53.0864 27.0707 52.74C31.061 51.415 50.9614 43.6128 50.9614 20.0788V5.09613C50.9614 3.74457 50.4245 2.44836 49.4688 1.49261C48.5131 0.536926 47.2169 0 45.8653 0H26.5C26.5 1.2796 26.0118 2.5592 25.0355 3.53552L3.53552 25.0355C2.69312 25.8779 1.62494 26.3569 0.525757 26.4725Z" fill="url(#paint0_linear_2_18)"/>
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M11 17.571V22.7443C11 36.5095 22.3245 41.076 24.5952 41.848C25.1823 42.0507 25.8177 42.0507 26.4048 41.848C28.6755 41.073 40 36.5095 40 22.7443V13.9808C40 13.1902 39.6945 12.4321 39.1506 11.873C38.6068 11.314 37.8691 11 37.1 11H17.571L11 17.571Z" fill="url(#paint1_linear_2_18)"/>
                 <defs>
@@ -32,14 +32,18 @@ <h1>auth</h1>
     <main>
         <div class="hero">
         <button class='github'><svg class='github-logo' viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h24v24h-24z" fill="#fff" opacity="0"/><path d="m16.24 22a1 1 0 0 1 -1-1v-2.6a2.15 2.15 0 0 0 -.54-1.66 1 1 0 0 1 .61-1.67c2.44-.29 4.69-1.07 4.69-5.3a4 4 0 0 0 -.67-2.22 2.75 2.75 0 0 1 -.41-2.06 3.71 3.71 0 0 0 0-1.41 7.65 7.65 0 0 0 -2.09 1.09 1 1 0 0 1 -.84.15 10.15 10.15 0 0 0 -5.52 0 1 1 0 0 1 -.84-.15 7.4 7.4 0 0 0 -2.11-1.09 3.52 3.52 0 0 0 0 1.41 2.84 2.84 0 0 1 -.43 2.08 4.07 4.07 0 0 0 -.67 2.23c0 3.89 1.88 4.93 4.7 5.29a1 1 0 0 1 .82.66 1 1 0 0 1 -.21 1 2.06 2.06 0 0 0 -.55 1.56v2.69a1 1 0 0 1 -2 0v-.57a6 6 0 0 1 -5.27-2.09 3.9 3.9 0 0 0 -1.16-.88 1 1 0 1 1 .5-1.94 4.93 4.93 0 0 1 2 1.36c1 1 2 1.88 3.9 1.52a3.89 3.89 0 0 1 .23-1.58c-2.06-.52-5-2-5-7a6 6 0 0 1 1-3.33.85.85 0 0 0 .13-.62 5.69 5.69 0 0 1 .33-3.21 1 1 0 0 1 .63-.57c.34-.1 1.56-.3 3.87 1.2a12.16 12.16 0 0 1 5.69 0c2.31-1.5 3.53-1.31 3.86-1.2a1 1 0 0 1 .63.57 5.71 5.71 0 0 1 .33 3.22.75.75 0 0 0 .11.57 6 6 0 0 1 1 3.34c0 5.07-2.92 6.54-5 7a4.28 4.28 0 0 1 .22 1.67v2.54a1 1 0 0 1 -.94 1z" fill="#231f20"/></svg>
-            Vist our GitHub 
+            Vist the github repo
             <svg class='arrow' width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M7.26946 7.6625L12.6817 1.95767C12.7826 1.85129 12.8626 1.72499 12.9173 1.586C12.9719 1.447 13 1.29803 13 1.14758C13 0.843741 12.8855 0.552344 12.6817 0.337496C12.5807 0.231114 12.4609 0.146727 12.3291 0.0891533C12.1972 0.0315797 12.0559 0.00194772 11.9131 0.00194772C11.6249 0.00194772 11.3484 0.122648 11.1446 0.337496L6.50092 5.24365L1.85725 0.337496C1.75662 0.230555 1.63691 0.145674 1.505 0.0877485C1.37309 0.0298231 1.23161 0 1.08872 0C0.945823 0 0.804342 0.0298231 0.672437 0.0877485C0.540531 0.145674 0.420813 0.230555 0.320186 0.337496C0.21873 0.443564 0.138201 0.569756 0.0832472 0.708793C0.0282927 0.847831 9.53674e-07 0.996961 9.53674e-07 1.14758C9.53674e-07 1.2982 0.0282927 1.44733 0.0832472 1.58637C0.138201 1.72541 0.21873 1.8516 0.320186 1.95767L5.73239 7.6625C5.83302 7.76944 5.95274 7.85433 6.08464 7.91225C6.21655 7.97018 6.35803 8 6.50092 8C6.64382 8 6.7853 7.97018 6.91721 7.91225C7.04911 7.85433 7.16883 7.76944 7.26946 7.6625Z" fill="#7077A1"/>
             </svg>
             </button>
         <h2>Custom user-authentication app</h2>
         <p>Created using vanilia JS and GO. For anyone looking to get the fundementals down</p>
-        <button class='li-su-big'>Sign up</button>
+        <button class='li-su-big'>Get Started
+            <svg class='arrow' width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M7.26946 7.6625L12.6817 1.95767C12.7826 1.85129 12.8626 1.72499 12.9173 1.586C12.9719 1.447 13 1.29803 13 1.14758C13 0.843741 12.8855 0.552344 12.6817 0.337496C12.5807 0.231114 12.4609 0.146727 12.3291 0.0891533C12.1972 0.0315797 12.0559 0.00194772 11.9131 0.00194772C11.6249 0.00194772 11.3484 0.122648 11.1446 0.337496L6.50092 5.24365L1.85725 0.337496C1.75662 0.230555 1.63691 0.145674 1.505 0.0877485C1.37309 0.0298231 1.23161 0 1.08872 0C0.945823 0 0.804342 0.0298231 0.672437 0.0877485C0.540531 0.145674 0.420813 0.230555 0.320186 0.337496C0.21873 0.443564 0.138201 0.569756 0.0832472 0.708793C0.0282927 0.847831 9.53674e-07 0.996961 9.53674e-07 1.14758C9.53674e-07 1.2982 0.0282927 1.44733 0.0832472 1.58637C0.138201 1.72541 0.21873 1.8516 0.320186 1.95767L5.73239 7.6625C5.83302 7.76944 5.95274 7.85433 6.08464 7.91225C6.21655 7.97018 6.35803 8 6.50092 8C6.64382 8 6.7853 7.97018 6.91721 7.91225C7.04911 7.85433 7.16883 7.76944 7.26946 7.6625Z" fill="#7077A1"/>
+                </svg>
+        </button>
         </div>
         <div class="grad"></div>
     </main>
diff --git a/src/public/pages/auth.css b/src/public/pages/auth.css
new file mode 100644
index 0000000..86b9908
--- /dev/null
+++ b/src/public/pages/auth.css
@@ -0,0 +1,322 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+    background-color: transparent;
+    /* overflow-y: hidden; */
+    /* overflow-x: hidden; */
+    cursor: default;
+}
+
+body {
+    overflow-y: hidden;
+    overflow-x: hidden;
+}
+
+
+h1 {
+    size: 36px;
+    font-weight: bold;
+    color: #000000;
+    cursor: pointer;
+    background-color: transparent;
+    min-width: fit-content;
+}
+
+
+svg {
+    width: 25px;
+    margin: 0 5px 0 0;
+    cursor: pointer;
+}
+
+.logo-svg {
+    cursor: pointer;
+}
+
+
+.logo-svg path {
+    cursor: pointer;
+}
+
+nav {
+    width: 100vw;
+    height: 65px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: solid #F6F6F6;
+    position: fixed;
+}
+
+
+.hero {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 0 30%;
+    text-align: center;
+    background-color: transparent;
+}
+
+h2 {
+    font-size: 60px;
+    background-color: transparent;
+    margin-bottom: 25px;
+    margin-top: 25px;
+}
+
+p {
+    color: #a6a6a6;
+    margin-bottom: 25px;
+}
+
+
+
+.logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 0 0 25px;
+    width: auto;
+    cursor: pointer;
+}
+
+.register {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    list-style-type: none;
+    margin: 0 25px;
+    height: 100%;
+    width: 250px;
+}
+
+button {
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+}
+
+.logo-svg-card {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: fit-content;
+
+}
+
+main {
+    width: 100vw;
+    height: 100vh;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: transparent;
+    transform: scale(0.85, 0.85);
+}
+
+.li-si {
+    background-color: #ffffff;
+    color: #000000;
+    border: none;
+    border-radius: 8px;
+    width: 75px;
+    height: 35px;
+    font-weight: 500;
+    box-shadow: 0 1px 1px 0 #0000003a;
+    margin-right: 7px;
+    transition: .3s;
+}
+
+.li-si:hover {
+    background-color: #efefef;
+}
+
+.li-su {
+    background-color: #6D61E1;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    width: 75px;
+    height: 35px;
+    transition: .3s;
+    font-weight: 500;
+}
+
+.li-su:hover {
+    background-color: #897FF1;
+    box-shadow: 0 0 0 0 #D2CDFF;
+    color: #fff;
+  }
+
+  .grad {
+    position: absolute;
+    transform: translate(0, 50vh);
+    width: 100vw;
+    height: 20vh;
+    background: linear-gradient(rgba(0, 0, 0, 0) 0%, #6f62e4);
+}
+
+.form_container {
+    width: fit-content;
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+    padding: 50px 40px 20px 40px;
+    background-color: #ffffff;
+    box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01),
+      0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09),
+      0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 11px;
+    font-family: "Inter", sans-serif;
+  }
+  
+  .logo_container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    width: 80px;
+    height: 80px;
+   background-color: transparent;
+    border-radius: 11px;
+  }
+  
+  .title_container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+  }
+  
+  .title {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #212121;
+  }
+  
+  .subtitle {
+    font-size: 0.725rem;
+    max-width: 80%;
+    text-align: center;
+    line-height: 1.1rem;
+    color: #8B8E98
+  }
+  
+  .input_container {
+    width: 100%;
+    height: fit-content;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+  
+  .icon {
+    width: 20px;
+    position: absolute;
+    z-index: 99;
+    left: 12px;
+    bottom: 9px;
+  }
+  
+  .input_label {
+    font-size: 0.75rem;
+    color: #8B8E98;
+    font-weight: 600;
+  }
+  
+  .input_field {
+    width: auto;
+    height: 40px;
+    padding: 0 0 0 40px;
+    border-radius: 7px;
+    outline: none;
+    border: 1px solid #e5e5e5;
+    filter: drop-shadow(0px 1px 0px #efefef)
+      drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
+    transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
+  }
+  
+  .input_field:focus {
+    border: 1px solid transparent;
+    box-shadow: 0px 0px 0px 2px #242424;
+    background-color: transparent;
+  }
+  
+  .sign-in_btn {
+    width: 100%;
+    height: 40px;
+    border: 0;
+    background: #115DFC;
+    border-radius: 7px;
+    outline: none;
+    color: #ffffff;
+    cursor: pointer;
+  }
+  
+  .sign-in_ggl {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background: #ffffff;
+    border-radius: 7px;
+    outline: none;
+    color: #242424;
+    border: 1px solid #e5e5e5;
+    filter: drop-shadow(0px 1px 0px #efefef)
+      drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
+    cursor: pointer;
+  }
+  
+  .sign-in_apl {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background: #212121;
+    border-radius: 7px;
+    outline: none;
+    color: #ffffff;
+    border: 1px solid #e5e5e5;
+    filter: drop-shadow(0px 1px 0px #efefef)
+      drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
+    cursor: pointer;
+  }
+  
+  .separator {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 30px;
+    color: #8B8E98;
+  }
+  
+  .separator .line {
+    display: block;
+    width: 100%;
+    height: 1px;
+    border: 0;
+    background-color: #e8e8e8;
+  }
+  
+  .note {
+    font-size: 0.75rem;
+    color: #8B8E98;
+    text-decoration: underline;
+  }
\ No newline at end of file
diff --git a/src/public/pages/signup.html b/src/public/pages/signup.html
index e69de29..94533fd 100644
--- a/src/public/pages/signup.html
+++ b/src/public/pages/signup.html
@@ -0,0 +1,113 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign Up</title>
+    <link rel="stylesheet" href="auth.css">
+</head>
+<body>
+    <nav>
+        <div class="logo">
+            <svg class='logo-svg' width="51" height="53" viewBox="0 0 51 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.429 0H5.09613C3.74457 0 2.44836 0.536926 1.49261 1.49261C0.536926 2.44836 0 3.74457 0 5.09613V14.429L14.429 0ZM0.525757 26.4725C3.69952 45.0619 20.2863 51.5477 23.8907 52.74C24.9224 53.0864 26.039 53.0864 27.0707 52.74C31.061 51.415 50.9614 43.6128 50.9614 20.0788V5.09613C50.9614 3.74457 50.4245 2.44836 49.4688 1.49261C48.5131 0.536926 47.2169 0 45.8653 0H26.5C26.5 1.2796 26.0118 2.5592 25.0355 3.53552L3.53552 25.0355C2.69312 25.8779 1.62494 26.3569 0.525757 26.4725Z" fill="url(#paint0_linear_2_18)"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M11 17.571V22.7443C11 36.5095 22.3245 41.076 24.5952 41.848C25.1823 42.0507 25.8177 42.0507 26.4048 41.848C28.6755 41.073 40 36.5095 40 22.7443V13.9808C40 13.1902 39.6945 12.4321 39.1506 11.873C38.6068 11.314 37.8691 11 37.1 11H17.571L11 17.571Z" fill="url(#paint1_linear_2_18)"/>
+                <defs>
+                <linearGradient id="paint0_linear_2_18" x1="25.4807" y1="0" x2="25.4807" y2="52.9998" gradientUnits="userSpaceOnUse">
+                <stop offset="0.652972" stop-color="#6C5DE6"/>
+                <stop offset="1" stop-color="#281A9C"/>
+                </linearGradient>
+                <linearGradient id="paint1_linear_2_18" x1="25.5" y1="11" x2="25.5" y2="42" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#EB866A"/>
+                <stop offset="0.417269" stop-color="#EBA16A"/>
+                </linearGradient>
+                </defs>
+            </svg>            
+            <h1>auth</h1>
+        </div>
+        <div class='register'>
+            <button class='li-si'>Sign in</button>
+            <button class='li-su'>Sign up</button>
+        </div>
+        </nav>
+        <main>
+            <form class="form_container">
+                <div class="logo_container">
+                    <svg class='logo-svg-card' width="51" height="53" viewBox="0 0 51 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.429 0H5.09613C3.74457 0 2.44836 0.536926 1.49261 1.49261C0.536926 2.44836 0 3.74457 0 5.09613V14.429L14.429 0ZM0.525757 26.4725C3.69952 45.0619 20.2863 51.5477 23.8907 52.74C24.9224 53.0864 26.039 53.0864 27.0707 52.74C31.061 51.415 50.9614 43.6128 50.9614 20.0788V5.09613C50.9614 3.74457 50.4245 2.44836 49.4688 1.49261C48.5131 0.536926 47.2169 0 45.8653 0H26.5C26.5 1.2796 26.0118 2.5592 25.0355 3.53552L3.53552 25.0355C2.69312 25.8779 1.62494 26.3569 0.525757 26.4725Z" fill="url(#paint0_linear_2_18)"/>
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M11 17.571V22.7443C11 36.5095 22.3245 41.076 24.5952 41.848C25.1823 42.0507 25.8177 42.0507 26.4048 41.848C28.6755 41.073 40 36.5095 40 22.7443V13.9808C40 13.1902 39.6945 12.4321 39.1506 11.873C38.6068 11.314 37.8691 11 37.1 11H17.571L11 17.571Z" fill="url(#paint1_linear_2_18)"/>
+                        <defs>
+                        <linearGradient id="paint0_linear_2_18" x1="25.4807" y1="0" x2="25.4807" y2="52.9998" gradientUnits="userSpaceOnUse">
+                        <stop offset="0.652972" stop-color="#6C5DE6"/>
+                        <stop offset="1" stop-color="#281A9C"/>
+                        </linearGradient>
+                        <linearGradient id="paint1_linear_2_18" x1="25.5" y1="11" x2="25.5" y2="42" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#EB866A"/>
+                        <stop offset="0.417269" stop-color="#EBA16A"/>
+                        </linearGradient>
+                        </defs>
+                    </svg>            
+
+                </div>
+                <div class="title_container">
+                  <p class="title">Login to your Account</p>
+                  <span class="subtitle">Get started with our app, just create an account and enjoy the experience.</span>
+                </div>
+                <br>
+                <div class="input_container">
+                  <label class="input_label" for="email_field">Email</label>
+                  <svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="icon">
+                    <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#141B34" d="M7 8.5L9.94202 10.2394C11.6572 11.2535 12.3428 11.2535 14.058 10.2394L17 8.5"></path>
+                    <path stroke-linejoin="round" stroke-width="1.5" stroke="#141B34" d="M2.01577 13.4756C2.08114 16.5412 2.11383 18.0739 3.24496 19.2094C4.37608 20.3448 5.95033 20.3843 9.09883 20.4634C11.0393 20.5122 12.9607 20.5122 14.9012 20.4634C18.0497 20.3843 19.6239 20.3448 20.7551 19.2094C21.8862 18.0739 21.9189 16.5412 21.9842 13.4756C22.0053 12.4899 22.0053 11.5101 21.9842 10.5244C21.9189 7.45886 21.8862 5.92609 20.7551 4.79066C19.6239 3.65523 18.0497 3.61568 14.9012 3.53657C12.9607 3.48781 11.0393 3.48781 9.09882 3.53656C5.95033 3.61566 4.37608 3.65521 3.24495 4.79065C2.11382 5.92608 2.08114 7.45885 2.01576 10.5244C1.99474 11.5101 1.99475 12.4899 2.01577 13.4756Z"></path>
+                  </svg>
+                  <input placeholder="name@mail.com" title="Inpit title" name="input-name" type="text" class="input_field" id="email_field">
+                </div>
+                <div class="input_container">
+                  <label class="input_label" for="password_field">Password</label>
+                  <svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="icon">
+                    <path stroke-linecap="round" stroke-width="1.5" stroke="#141B34" d="M18 11.0041C17.4166 9.91704 16.273 9.15775 14.9519 9.0993C13.477 9.03404 11.9788 9 10.329 9C8.67911 9 7.18091 9.03404 5.70604 9.0993C3.95328 9.17685 2.51295 10.4881 2.27882 12.1618C2.12602 13.2541 2 14.3734 2 15.5134C2 16.6534 2.12602 17.7727 2.27882 18.865C2.51295 20.5387 3.95328 21.8499 5.70604 21.9275C6.42013 21.9591 7.26041 21.9834 8 22"></path>
+                    <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#141B34" d="M6 9V6.5C6 4.01472 8.01472 2 10.5 2C12.9853 2 15 4.01472 15 6.5V9"></path>
+                    <path fill="#141B34" d="M21.2046 15.1045L20.6242 15.6956V15.6956L21.2046 15.1045ZM21.4196 16.4767C21.7461 16.7972 22.2706 16.7924 22.5911 16.466C22.9116 16.1395 22.9068 15.615 22.5804 15.2945L21.4196 16.4767ZM18.0228 15.1045L17.4424 14.5134V14.5134L18.0228 15.1045ZM18.2379 18.0387C18.5643 18.3593 19.0888 18.3545 19.4094 18.028C19.7299 17.7016 19.7251 17.1771 19.3987 16.8565L18.2379 18.0387ZM14.2603 20.7619C13.7039 21.3082 12.7957 21.3082 12.2394 20.7619L11.0786 21.9441C12.2794 23.1232 14.2202 23.1232 15.4211 21.9441L14.2603 20.7619ZM12.2394 20.7619C11.6914 20.2239 11.6914 19.358 12.2394 18.82L11.0786 17.6378C9.86927 18.8252 9.86927 20.7567 11.0786 21.9441L12.2394 20.7619ZM12.2394 18.82C12.7957 18.2737 13.7039 18.2737 14.2603 18.82L15.4211 17.6378C14.2202 16.4587 12.2794 16.4587 11.0786 17.6378L12.2394 18.82ZM14.2603 18.82C14.8082 19.358 14.8082 20.2239 14.2603 20.7619L15.4211 21.9441C16.6304 20.7567 16.6304 18.8252 15.4211 17.6378L14.2603 18.82ZM20.6242 15.6956L21.4196 16.4767L22.5804 15.2945L21.785 14.5134L20.6242 15.6956ZM15.4211 18.82L17.8078 16.4767L16.647 15.2944L14.2603 17.6377L15.4211 18.82ZM17.8078 16.4767L18.6032 15.6956L17.4424 14.5134L16.647 15.2945L17.8078 16.4767ZM16.647 16.4767L18.2379 18.0387L19.3987 16.8565L17.8078 15.2945L16.647 16.4767ZM21.785 14.5134C21.4266 14.1616 21.0998 13.8383 20.7993 13.6131C20.4791 13.3732 20.096 13.1716 19.6137 13.1716V14.8284C19.6145 14.8284 19.619 14.8273 19.6395 14.8357C19.6663 14.8466 19.7183 14.8735 19.806 14.9391C19.9969 15.0822 20.2326 15.3112 20.6242 15.6956L21.785 14.5134ZM18.6032 15.6956C18.9948 15.3112 19.2305 15.0822 19.4215 14.9391C19.5091 14.8735 19.5611 14.8466 19.5879 14.8357C19.6084 14.8273 19.6129 14.8284 19.6137 14.8284V13.1716C19.1314 13.1716 18.7483 13.3732 18.4281 13.6131C18.1276 13.8383 17.8008 14.1616 17.4424 14.5134L18.6032 15.6956Z"></path>
+                  </svg>
+                  <input placeholder="Password" title="Inpit title" name="input-name" type="password" class="input_field" id="password_field">
+                </div>
+                <button title="Sign In" type="submit" class="sign-in_btn">
+                  <span>Sign In</span>
+                </button>
+              
+                <div class="separator">
+                  <hr class="line">
+                  <span>Or</span>
+                  <hr class="line">
+                </div>
+                <button title="Sign In" type="submit" class="sign-in_ggl">
+                  <svg height="18" width="18" viewBox="0 0 32 32" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+                    <defs>
+                      <path d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z" id="A"></path>
+                    </defs>
+                    <clipPath id="B">
+                      
+                    </clipPath>
+                    <g transform="matrix(.727273 0 0 .727273 -.954545 -1.45455)">
+                      <path fill="#fbbc05" clip-path="url(#B)" d="M0 37V11l17 13z"></path>
+                      <path fill="#ea4335" clip-path="url(#B)" d="M0 11l17 13 7-6.1L48 14V0H0z"></path>
+                      <path fill="#34a853" clip-path="url(#B)" d="M0 37l30-23 7.9 1L48 0v48H0z"></path>
+                      <path fill="#4285f4" clip-path="url(#B)" d="M48 48L17 24l-4-3 35-10z"></path>
+                    </g>
+                  </svg>
+                  <span>Sign In with Google</span>
+                </button>
+                <button title="Sign In" type="submit" class="sign-in_apl">
+                  <svg preserveAspectRatio="xMidYMid" version="1.1" viewBox="0 0 256 315" height="20px" width="16px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+                    <g>
+                      <path fill="#ffffff" d="M213.803394,167.030943 C214.2452,214.609646 255.542482,230.442639 256,230.644727 C255.650812,231.761357 249.401383,253.208293 234.24263,275.361446 C221.138555,294.513969 207.538253,313.596333 186.113759,313.991545 C165.062051,314.379442 158.292752,301.507828 134.22469,301.507828 C110.163898,301.507828 102.642899,313.596301 82.7151126,314.379442 C62.0350407,315.16201 46.2873831,293.668525 33.0744079,274.586162 C6.07529317,235.552544 -14.5576169,164.286328 13.147166,116.18047 C26.9103111,92.2909053 51.5060917,77.1630356 78.2026125,76.7751096 C98.5099145,76.3877456 117.677594,90.4371851 130.091705,90.4371851 C142.497945,90.4371851 165.790755,73.5415029 190.277627,76.0228474 C200.528668,76.4495055 229.303509,80.1636878 247.780625,107.209389 C246.291825,108.132333 213.44635,127.253405 213.803394,167.030988 M174.239142,50.1987033 C185.218331,36.9088319 192.607958,18.4081019 190.591988,0 C174.766312,0.636050225 155.629514,10.5457909 144.278109,23.8283506 C134.10507,35.5906758 125.195775,54.4170275 127.599657,72.4607932 C145.239231,73.8255433 163.259413,63.4970262 174.239142,50.1987249"></path>
+                    </g>
+                  </svg>
+                  <span>Sign In with Apple</span>
+                </button>
+                <p class="note">Terms of use &amp; Conditions</p>
+              </form>
+        </main>
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/public/styles.css b/src/public/styles.css
index 3310722..a68097d 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -13,12 +13,25 @@ h1 {
     size: 36px;
     font-weight: bold;
     color: #000000;
+    cursor: pointer;
+    background-color: transparent;
+    min-width: fit-content;
 }
 
 
 svg {
     width: 25px;
     margin: 0 5px 0 0;
+    cursor: pointer;
+}
+
+.logo-svg {
+    cursor: pointer;
+}
+
+
+.logo-svg path {
+    cursor: pointer;
 }
 
 nav {
@@ -33,6 +46,7 @@ nav {
 
 main {
     display: flex;
+    background-color: transparent;
     justify-content: center;
     align-items: center;
     width: 100vw;
@@ -46,6 +60,7 @@ main {
     flex-wrap: wrap;
     padding: 0 30%;
     text-align: center;
+    background-color: transparent;
 }
 
 h2 {
@@ -60,11 +75,14 @@ p {
     margin-bottom: 25px;
 }
 
+
+
 .logo {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0 0 0 25px;
+    width: auto;
     cursor: pointer;
 }
 
@@ -130,14 +148,14 @@ button {
     color: #fff;
     border: none;
     border-radius: 50px;
-    width: 75px;
     height: 35px;
     transition: .3s;
     box-shadow: 0 1px 1px 0 #0000003a;
     font-weight: 500;
-    width: 150px;
+    width: 200px;
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
+    padding: 0 10px;
     align-items: center;
     cursor: pointer;
   }
@@ -183,15 +201,19 @@ button {
 }
 
 .li-su-big {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     background-color: #6D61E1;
     color: #fff;
-    font-size: 15px;
+    font-size: 18px;
     border: none;
     border-radius: 8px;
-    width: 100px;
-    height: 35px;
+    width: 135px;
+    height: 45px;
     transition: .3s;
     font-weight: 500;
+    padding-left: 10px;
 }
 
 .li-su-big:hover {
