diff --git a/components/signup/sinin1.html b/components/signup/sinin1.html
new file mode 100644
index 0000000..0ae580b
--- /dev/null
+++ b/components/signup/sinin1.html
@@ -0,0 +1,41 @@
+<section class="py-24 lg:py-28 bg-black overflow-hidden">
+    <div class="container px-4 mx-auto">
+      <div class="max-w-3xl mx-auto">
+        <h2 class="font-heading mb-4 text-6xl text-white tracking-tighter">Welcome Back!</h2>
+        <p class="mb-16 text-xl text-white tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are ready.</p>
+        <form class="flex flex-wrap -m-3" action="#">
+          <div class="w-full md:w-1/2 p-3">
+            <label class="block">
+              <input class="p-4 w-full text-gray-700 tracking-tight bg-white placeholder-gray-700 outline-none border border-gray-600 rounded-lg focus:border-indigo-500 transition duration-200" id="signInInput1-1" type="email" placeholder="Email Address">
+            </label>
+          </div>
+          <div class="w-full md:w-1/2 p-3">
+            <label class="block">
+              <input class="p-4 w-full text-gray-700 tracking-tight bg-white placeholder-gray-700 outline-none border border-gray-600 rounded-lg focus:border-indigo-500 transition duration-200" id="signInInput1-2" type="password" placeholder="Password">
+            </label>
+          </div>
+          <div class="w-full p-3">
+            <div class="flex flex-wrap justify-between -m-2">
+              <div class="w-auto p-2">
+                <div class="flex items-center">
+                  <input class="custom-checkbox1 opacity-0 absolute h-5 w-5" type="checkbox" name="confirm" value="yes">
+                  <div class="mr-2 border border-gray-500 rounded border-blue-400 w-5 h-5 flex flex-shrink-0 justify-center items-center focus-within:border-blue-500">
+                    <svg class="fill-current hidden w-2.5 h-2.5 text-blue-600 pointer-events-none" version="1.1" viewbox="0 0 17 12" xmlns="http://www.w3.org/2000/svg">
+                      <g fill="none" fill-rule="evenodd">
+                        <g transform="translate(-9 -11)" fill="#1F73F1" fill-rule="nonzero">
+                          <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z"></path>
+                        </g>
+                      </g>
+                    </svg>
+                  </div>
+                  <label class="select-none text-white tracking-tight">Remember Me</label>
+                </div>
+              </div>
+              <div class="w-auto p-2"><a class="text-white hover:text-gray-200 tracking-tight" href="#">Forgot Password?</a></div>
+            </div>
+          </div>
+          <div class="w-full p-3"><a class="inline-block mb-7 px-5 py-4 w-full text-white text-center font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Sign In</a></div>
+        </form>
+      </div>
+    </div>
+  </section>
\ No newline at end of file
diff --git a/components/signup/sinin2.html b/components/signup/sinin2.html
new file mode 100644
index 0000000..3013505
--- /dev/null
+++ b/components/signup/sinin2.html
@@ -0,0 +1,47 @@
+<section class="py-24 lg:pb-32 bg-gray-100 overflow-hidden">
+    <div class="container px-4 mx-auto">
+      <div class="max-w-lg mx-auto">
+        <div class="text-center mb-12">
+          <h2 class="font-heading mb-4 text-6xl tracking-tighter">Create an account</h2>
+          <p class="text-xl tracking-tight">Free 1 month trial No credit card required</p>
+        </div>
+        <div class="mb-6 p-9 bg-white border border-gray-200 rounded-2xl">
+          <form class="flex flex-wrap -m-2" action="#">
+            <div class="w-full p-2">
+              <label class="block">
+                <input class="p-4 w-full text-gray-700 tracking-tight bg-white placeholder-gray-700 outline-none border border-gray-300 focus:border-gray-700 rounded-lg transition duration-200" id="signIn3-1" type="email" placeholder="Email Address">
+              </label>
+            </div>
+            <div class="w-full p-2">
+              <label class="relative block border border-gray-300 focus-within:border-gray-700 overflow-hidden rounded-lg transition duration-200">
+                <input class="p-4 md:pr-40 w-full text-gray-700 tracking-tight bg-white placeholder-gray-700 outline-none" id="signIn3-2" type="password" placeholder="Password">
+                <a class="md:absolute md:right-4 md:top-1/2 md:transform md:-translate-y-1/2 inline-block px-4 pb-4 md:p-0 text-indigo-500 hover:text-indigo-600 font-medium tracking-tight transition duration-200" href="#">Forgot Password?</a>
+              </label>
+            </div>
+            <div class="w-full p-2">
+              <a class="inline-block mb-3 px-5 py-4 w-full text-white text-center font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Sign In</a>
+              <div class="flex items-center -m-2.5 mb-4">
+                <div class="flex-1 p-2.5">
+                  <div class="h-px bg-gray-300"></div>
+                </div>
+                <div class="auto p-2.5">
+                  <span class="text-xl text-gray-600 tracking-tight">or</span>
+                </div>
+                <div class="flex-1 p-2.5">
+                  <div class="h-px bg-gray-300"></div>
+                </div>
+              </div>
+              <a class="flex justify-center px-5 py-4 w-full font-semibold tracking-tight bg-gray-100 hover:bg-gray-200 rounded-md focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">
+                <img class="mr-3" src="https://shuffle.dev/basko-assets/images/sign-up/sign-up.svg" alt="">
+                <span>Sign up with Google</span>
+              </a>
+            </div>
+          </form>
+        </div>
+        <p class="text-center text-gray-600 font-medium tracking-tight">
+          <span>Don’t have an account?</span>
+          <a class="text-indigo-500 hover:text-indigo-600 transition duration-200" href="#">Create Free Account</a>
+        </p>
+      </div>
+    </div>
+  </section>
\ No newline at end of file
diff --git a/components/signup/sinin3.html b/components/signup/sinin3.html
new file mode 100644
index 0000000..2fca630
--- /dev/null
+++ b/components/signup/sinin3.html
@@ -0,0 +1,108 @@
+<section class="bg-white overflow-hidden">
+    <div class="flex flex-wrap">
+      <div class="w-full md:w-5/12">
+        <div class="px-8 py-24 lg:pt-32 lg:pb-36 max-w-lg mx-auto h-full">
+          <div class="md:max-w-xs mb-14">
+            <h2 class="font-heading mb-4 text-6xl tracking-tighter">Get Started</h2>
+            <p class="text-xl tracking-tight">It’s fast, easy and free for 30 days, no credit card required.</p>
+          </div>
+          <form class="flex flex-wrap -m-2 mb-0" action="#">
+            <div class="w-full p-2">
+              <label class="block">
+                <span class="inline-block mb-2 font-medium tracking-tight">Full Name</span>
+                <input class="p-4 w-full text-gray-500 tracking-tight bg-white placeholder-gray-500 outline-none border border-gray-300 focus:border-gray-700 rounded-lg transition duration-200" id="signIn4-1" type="text" placeholder="First Name & Last Name">
+              </label>
+            </div>
+            <div class="w-full p-2">
+              <label class="block">
+                <span class="inline-block mb-2 font-medium tracking-tight">Email Address</span>
+                <input class="p-4 w-full text-gray-500 tracking-tight bg-white placeholder-gray-500 outline-none border border-gray-300 focus:border-gray-700 rounded-lg transition duration-200" id="signIn4-2" type="email" placeholder="Enter email address">
+              </label>
+            </div>
+            <div class="w-full p-2">
+              <label class="block">
+                <span class="inline-block mb-2 font-medium tracking-tight">Password</span>
+                <input class="p-4 w-full text-gray-500 tracking-tight bg-white placeholder-gray-500 outline-none border border-gray-300 focus:border-gray-700 rounded-lg transition duration-200" id="signIn4-3" type="password" placeholder="Password">
+              </label>
+            </div>
+            <div class="w-full p-3">
+              <div class="flex">
+                <input class="custom-checkbox3 opacity-0 absolute h-6 w-6" type="checkbox" name="confirm" value="yes">
+                <div class="mt-0.5 mr-3 border border-gray-300 rounded border-blue-400 w-6 h-6 flex flex-shrink-0 justify-center items-center focus-within:border-blue-500">
+                  <svg class="fill-current hidden w-2.5 h-2.5 text-blue-600 pointer-events-none" version="1.1" viewbox="0 0 17 12" xmlns="http://www.w3.org/2000/svg">
+                    <g fill="none" fill-rule="evenodd">
+                      <g transform="translate(-9 -11)" fill="#1F73F1" fill-rule="nonzero">
+                        <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z"></path>
+                      </g>
+                    </g>
+                  </svg>
+                </div>
+                <label class="select-none font-medium tracking-tight">I have read and agree to the <a class="text-indigo-500 hover:text-indigo-600 transition duration-200" href="#">Terms & Conditions & Privacy Policy</a></label>
+              </div>
+            </div>
+            <div class="w-full p-2"><a class="inline-block mb-3 px-5 py-4 w-full text-white text-center font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Get Started for Free</a></div>
+          </form>
+          <p class="text-gray-600 font-medium tracking-tight">
+            <span>Already have an account?</span>
+            <a class="text-indigo-500 hover:text-indigo-600 transition duration-200" href="#">Sign in</a>
+          </p>
+        </div>
+      </div>
+      <div class="w-full md:w-7/12">
+        <div class="flex flex-col justify-between h-full py-24 px-8 md:px-16 2xl:px-32" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: 100% 100%;">
+          <div class="mb-16 max-w-xl">
+            <p class="mb-8 text-xl text-white font-semibold tracking-tight" style="letter-spacing: -0.5px;">Why should you choose Basko?</p>
+            <ul class="flex flex-wrap -m-2">
+              <li class="flex items-center p-2">
+                <div class="mr-2 inline-block">
+                  <svg class="text-white" width="22" height="16" viewbox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M2.25 9.25L7.25 14.25L19.75 1.75" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                </div>
+                <p class="text-xl text-white tracking-tight">Unlimited Projects</p>
+              </li>
+              <li class="flex items-center p-2">
+                <div class="mr-2 inline-block">
+                  <svg class="text-white" width="22" height="16" viewbox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M2.25 9.25L7.25 14.25L19.75 1.75" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                </div>
+                <p class="text-xl text-white tracking-tight">150+ Integrations</p>
+              </li>
+              <li class="flex items-center p-2">
+                <div class="mr-2 inline-block">
+                  <svg class="text-white" width="22" height="16" viewbox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M2.25 9.25L7.25 14.25L19.75 1.75" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                </div>
+                <p class="text-xl text-white tracking-tight">Post Schedule</p>
+              </li>
+              <li class="flex items-center p-2">
+                <div class="mr-2 inline-block">
+                  <svg class="text-white" width="22" height="16" viewbox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M2.25 9.25L7.25 14.25L19.75 1.75" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                </div>
+                <p class="text-xl text-white tracking-tight">Priority Support</p>
+              </li>
+            </ul>
+          </div>
+          <div class="max-w-xl">
+            <svg class="mb-8" width="38" height="31" viewbox="0 0 38 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M8.47545 11.9918C8.0609 11.9918 7.66308 12.0601 7.26712 12.1224C7.39539 11.6564 7.52738 11.1823 7.7393 10.7565C7.95122 10.1378 8.28212 9.60151 8.61116 9.06117C8.88628 8.47665 9.37147 8.08093 9.7284 7.58077C10.102 7.09467 10.6114 6.77127 11.0148 6.36753C11.4108 5.9457 11.9294 5.73479 12.3421 5.43751C12.7734 5.17035 13.1489 4.87508 13.5504 4.73447L14.5524 4.28854L15.4336 3.89283L14.532 0L13.4222 0.28925C13.0671 0.385666 12.634 0.498153 12.1413 0.632735C11.6376 0.733169 11.1003 1.00836 10.5017 1.25944C9.91057 1.54468 9.22647 1.73751 8.59071 2.19549C7.95122 2.63338 7.21321 2.99896 6.56258 3.5855C5.93239 4.19011 5.17207 4.71438 4.61066 5.48371C3.9972 6.20282 3.39118 6.95808 2.92086 7.8178C2.37618 8.63734 2.00625 9.53723 1.61586 10.4271C1.26266 11.3169 0.978239 12.2269 0.745868 13.1107C0.305293 14.8823 0.108243 16.5656 0.0320249 18.0058C-0.03118 19.4481 0.00599936 20.6473 0.084076 21.515C0.11196 21.9248 0.164012 22.3225 0.201191 22.5977L0.247665 22.9352L0.295998 22.9231C0.626636 24.592 1.38778 26.1256 2.49137 27.3466C3.59496 28.5676 4.99591 29.426 6.53216 29.8226C8.06841 30.2192 9.67717 30.1377 11.1724 29.5876C12.6675 29.0375 13.988 28.0412 14.9811 26.7141C15.9742 25.3869 16.5992 23.7831 16.784 22.0881C16.9687 20.3931 16.7055 18.6763 16.025 17.1361C15.3444 15.596 14.2742 14.2955 12.9382 13.3852C11.6022 12.4748 10.0549 11.9917 8.47545 11.9918ZM28.9241 11.9918C28.5095 11.9918 28.1117 12.0601 27.7158 12.1224C27.844 11.6564 27.976 11.1823 28.1879 10.7565C28.3999 10.1378 28.7308 9.60151 29.0598 9.06117C29.3349 8.47665 29.8201 8.08093 30.177 7.58077C30.5507 7.09467 31.06 6.77127 31.4634 6.36753C31.8594 5.9457 32.378 5.73479 32.7907 5.43751C33.222 5.17035 33.5975 4.87508 33.9991 4.73447L35.001 4.28854L35.8822 3.89283L34.9806 0L33.8708 0.28925C33.5157 0.385666 33.0826 0.498153 32.59 0.632735C32.0862 0.733169 31.5489 1.00836 30.9504 1.25944C30.3611 1.54669 29.6751 1.73751 29.0393 2.1975C28.3999 2.63539 27.6618 3.00097 27.0112 3.58751C26.381 4.19212 25.6207 4.71639 25.0593 5.48371C24.4458 6.20282 23.8398 6.95808 23.3695 7.8178C22.8248 8.63734 22.4549 9.53723 22.0645 10.4271C21.7113 11.3169 21.4269 12.2269 21.1945 13.1107C20.7539 14.8823 20.5569 16.5656 20.4807 18.0058C20.4175 19.4481 20.4546 20.6473 20.5327 21.515C20.5606 21.9248 20.6126 22.3225 20.6498 22.5977L20.6963 22.9352L20.7446 22.9231C21.0753 24.592 21.8364 26.1256 22.94 27.3466C24.0436 28.5676 25.4445 29.426 26.9808 29.8226C28.517 30.2192 30.1258 30.1377 31.621 29.5876C33.1162 29.0375 34.4367 28.0412 35.4297 26.7141C36.4228 25.3869 37.0479 23.7831 37.2326 22.0881C37.4173 20.3931 37.1542 18.6763 36.4736 17.1361C35.793 15.596 34.7228 14.2955 33.3868 13.3852C32.0508 12.4748 30.5036 11.9917 28.9241 11.9918Z" fill="white"></path>
+            </svg>
+            <h3 class="mb-8 text-3xl text-white font-semibold" style="letter-spacing: -0.5px;">“I love the time tracking feature in Basko. It has helped me identify areas where I was wasting time and allowed me to optimize my workflow for maximum productivity.”</h3>
+            <div class="flex flex-wrap items-center -m-1.5">
+              <div class="w-auto p-1.5">
+                <img src="https://shuffle.dev/basko-assets/images/sign-up/avatar3.png" alt="">
+              </div>
+              <div class="flex-1 p-1.5">
+                <p class="mb-1 text-xl text-white font-semibold tracking-tight">Terrence Macaulay</p>
+                <span class="text-white tracking-tight">Co-Founder, Grabrin</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
\ No newline at end of file