diff --git a/components/signup/tem1.html b/components/signup/tem1.html
new file mode 100644
index 0000000..c01f77f
--- /dev/null
+++ b/components/signup/tem1.html
@@ -0,0 +1,30 @@
+<section class="relative py-20">
+    <div class="absolute left-0 top-0 h-96 w-full bg-indigo-500 lg:bottom-0 lg:h-auto lg:w-8/12"></div>
+    <div class="container relative mx-auto px-4">
+      <div class="-mx-4 flex flex-wrap items-center">
+        <div class="mb-12 w-full px-4 lg:mb-0 lg:w-1/2">
+          <div class="max-w-lg">
+            <h2 class="font-heading mb-6 text-3xl font-bold leading-tight text-white md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
+            <p class="text-base leading-relaxed text-indigo-50 lg:text-xl lg:leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+          </div>
+        </div>
+        <div class="w-full px-4 lg:w-1/2">
+          <div class="rounded-lg bg-gray-50 p-6 text-center lg:max-w-md">
+            <form action="#">
+              <span class="text-sm font-semibold uppercase text-gray-500">Sign Up</span>
+              <h3 class="font-heading mb-8 text-2xl font-bold">Create new account</h3>
+              <input class="mb-4 w-full rounded-lg bg-white py-3 pl-3" type="email" placeholder="E-mail address" />
+              <input class="mb-4 w-full rounded-lg bg-white py-3 pl-3" type="password" placeholder="Password" />
+              <input class="mb-4 w-full rounded-lg bg-white py-3 pl-3" type="password" placeholder="Repeat password" />
+              <label class="mb-4 inline-block">
+                <input class="mr-1" type="checkbox" name="terms" value="1" />
+                <span class="text-sm text-gray-500">By signing up, you agree to our <a class="font-bold hover:underline" href="#">Terms, Data Policy</a> and <a class="font-bold hover:underline" href="#">Cookies Policy</a>.</span>
+              </label>
+              <button class="block w-full rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600">Get Started</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/signup/tem2.html b/components/signup/tem2.html
new file mode 100644
index 0000000..c01f77f
--- /dev/null
+++ b/components/signup/tem2.html
@@ -0,0 +1,30 @@
+<section class="relative py-20">
+    <div class="absolute left-0 top-0 h-96 w-full bg-indigo-500 lg:bottom-0 lg:h-auto lg:w-8/12"></div>
+    <div class="container relative mx-auto px-4">
+      <div class="-mx-4 flex flex-wrap items-center">
+        <div class="mb-12 w-full px-4 lg:mb-0 lg:w-1/2">
+          <div class="max-w-lg">
+            <h2 class="font-heading mb-6 text-3xl font-bold leading-tight text-white md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
+            <p class="text-base leading-relaxed text-indigo-50 lg:text-xl lg:leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
+          </div>
+        </div>
+        <div class="w-full px-4 lg:w-1/2">
+          <div class="rounded-lg bg-gray-50 p-6 text-center lg:max-w-md">
+            <form action="#">
+              <span class="text-sm font-semibold uppercase text-gray-500">Sign Up</span>
+              <h3 class="font-heading mb-8 text-2xl font-bold">Create new account</h3>
+              <input class="mb-4 w-full rounded-lg bg-white py-3 pl-3" type="email" placeholder="E-mail address" />
+              <input class="mb-4 w-full rounded-lg bg-white py-3 pl-3" type="password" placeholder="Password" />
+              <input class="mb-4 w-full rounded-lg bg-white py-3 pl-3" type="password" placeholder="Repeat password" />
+              <label class="mb-4 inline-block">
+                <input class="mr-1" type="checkbox" name="terms" value="1" />
+                <span class="text-sm text-gray-500">By signing up, you agree to our <a class="font-bold hover:underline" href="#">Terms, Data Policy</a> and <a class="font-bold hover:underline" href="#">Cookies Policy</a>.</span>
+              </label>
+              <button class="block w-full rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600">Get Started</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/signup/tem3.html b/components/signup/tem3.html
new file mode 100644
index 0000000..d07d77e
--- /dev/null
+++ b/components/signup/tem3.html
@@ -0,0 +1,29 @@
+<section class="relative py-20">
+    <div class="container mx-auto px-4">
+      <div class="mb-12 w-full lg:w-1/2">
+        <div class="lg:max-w-md">
+          <div class="mx-auto max-w-md py-10 text-center">
+            <span class="text-sm font-semibold uppercase text-gray-500">Sign Up</span>
+            <h3 class="font-heading mb-8 text-2xl font-bold">Create new account</h3>
+            <div class="flex">
+              <input class="mb-4 mr-2 w-1/2 rounded border bg-white py-3 pl-3" type="text" placeholder="First Name" />
+              <input class="mb-4 w-1/2 rounded border bg-white py-3 pl-3" type="text" placeholder="Last Name" />
+            </div>
+            <input class="mb-4 w-full rounded border bg-white py-3 pl-3" type="email" placeholder="E-mail address" />
+            <input class="mb-4 w-full rounded border bg-white py-3 pl-3" type="password" placeholder="Password" />
+            <label class="mb-4 inline-block">
+              <input class="mr-1" type="checkbox" name="terms" value="1" />
+              <span class="text-sm text-gray-500">By signing up, you agree to our <a class="font-bold hover:underline" href="#">Terms, Data Policy</a> and <a class="font-bold hover:underline" href="#">Cookies Policy</a>.</span>
+            </label>
+            <button class="mb-4 block w-full rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600">Sign Up</button>
+            <p class="text-sm text-gray-500">
+              <span>Already have an account?</span>
+              <a class="font-bold hover:underline" href="#">Sign In</a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom-0 right-0 top-0 h-96 bg-cover bg-no-repeat lg:absolute lg:h-auto lg:w-1/2" style="background-image: url('plain-assets/images/indigo-600-square.png');"></div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/signup/tem4.html b/components/signup/tem4.html
new file mode 100644
index 0000000..16824c2
--- /dev/null
+++ b/components/signup/tem4.html
@@ -0,0 +1,28 @@
+<section class="relative py-20">
+    <div class="container mx-auto px-4">
+      <div class="mb-12 w-full lg:w-1/2">
+        <div class="lg:max-w-md">
+          <div class="mx-auto max-w-md py-10 text-center">
+            <form action="#">
+              <span class="text-sm font-semibold uppercase text-gray-500">Sign In</span>
+              <h3 class="font-heading mb-8 text-2xl font-bold">Join our community</h3>
+              <input class="mb-4 w-full rounded border bg-white py-3 pl-3" type="email" placeholder="E-mail address" />
+              <input class="mb-4 w-full rounded border bg-white py-3 pl-3" type="password" placeholder="Password" />
+              <button class="mb-4 block w-full rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600">Get Started</button>
+              <a class="text-sm text-gray-500 hover:underline" href="#">Forgot password?</a>
+              <a class="mb-4 mt-4 block flex w-full items-center justify-center rounded border border-white bg-white px-5 py-3 text-sm font-semibold transition duration-200 hover:border-indigo-50 hover:bg-indigo-50" href="#">
+                <img class="mr-2 h-5 w-5" src="https://shuffle.dev/plain-assets/socials/facebook.svg" alt="" />
+                <span class="text-sm font-semibold">Sign in with Facebook</span>
+              </a>
+              <a class="flex items-center justify-center rounded border border-white bg-white px-5 py-3 text-sm font-semibold transition duration-200 hover:border-indigo-50 hover:bg-indigo-50" href="#">
+                <img class="mr-2 h-5 w-5" src="https://shuffle.dev/plain-assets/socials/twitter.svg" alt="" />
+                <span class="text-sm font-semibold">Sign in with Twitter</span>
+              </a>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom-0 right-0 top-0 h-96 bg-cover bg-no-repeat lg:absolute lg:h-auto lg:w-1/2" style="background-image: url('plain-assets/images/indigo-600-square.png');"></div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/signup/tem5.html b/components/signup/tem5.html
new file mode 100644
index 0000000..72c90cd
--- /dev/null
+++ b/components/signup/tem5.html
@@ -0,0 +1,25 @@
+<section class="py-20">
+    <div class="container px-4 mx-auto">
+      <div class="max-w-md mx-auto py-12 px-8 bg-gray-50 rounded-lg text-center">
+        <span class="text-sm text-gray-500 font-semibold uppercase">Sign Up</span>
+        <h3 class="mb-8 text-3xl font-bold font-heading">Create new account</h3>
+        <form action="#">
+          <div class="flex flex-wrap md:flex-nowrap">
+            <input class="w-full md:w-1/2 md:mr-2 py-3 pl-3 mb-4 bg-white rounded-lg" type="text" placeholder="First Name">
+            <input class="w-full md:w-1/2 py-3 pl-3 mb-4 bg-white rounded-lg" type="text" placeholder="Last Name">
+          </div>
+          <input class="w-full py-3 pl-3 mb-4 bg-white rounded-lg" type="email" placeholder="E-mail address">
+          <input class="w-full py-3 pl-3 mb-4 bg-white rounded-lg" type="password" placeholder="Password">
+          <label class="inline-block mb-4">
+            <input class="mr-1" type="checkbox" name="terms" value="1">
+            <span class="text-sm text-gray-500">By signing up, you agree to our <a class="font-bold hover:underline" href="#">Terms, Data Policy</a> and <a class="font-bold hover:underline" href="#">Cookies Policy</a>.</span>
+          </label>
+          <button class="block w-full mb-4 px-5 py-3 text-sm bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200">Sign Up</button>
+        </form>
+        <p class="text-sm text-gray-500">
+          <span>Already have an account?</span>
+          <a class="font-bold hover:underline" href="#">Sign In</a>
+        </p>
+      </div>
+    </div>
+  </section>
\ No newline at end of file
diff --git a/components/signup/tem6.html b/components/signup/tem6.html
new file mode 100644
index 0000000..dbb87b2
--- /dev/null
+++ b/components/signup/tem6.html
@@ -0,0 +1,23 @@
+<section class="py-20">
+    <div class="container mx-auto px-4">
+      <div class="mx-auto max-w-md rounded-lg bg-gray-50 px-8 py-12 text-center">
+        <span class="text-sm font-semibold uppercase text-gray-500">Sign In</span>
+        <h3 class="font-heading mb-8 text-3xl font-bold">Join our community</h3>
+        <form action="#">
+          <input class="mb-4 w-full rounded-lg bg-white py-3 pl-3" type="email" placeholder="E-mail address" />
+          <input class="mb-4 w-full rounded-lg bg-white py-3 pl-3" type="password" placeholder="Password" />
+          <button class="mb-4 block w-full rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600">Get Started</button>
+          <a class="text-sm text-gray-500 hover:underline" href="#">Forgot password?</a>
+          <a class="mb-4 mt-4 block flex w-full items-center justify-center rounded border border-white bg-white px-5 py-3 text-sm font-semibold transition duration-200 hover:border-indigo-50 hover:bg-indigo-50" href="#">
+            <img class="mr-2 h-5 w-5" src="https://shuffle.dev/plain-assets/socials/facebook.svg" alt="" />
+            <span class="text-sm font-semibold">Sign in with Facebook</span>
+          </a>
+          <a class="flex items-center justify-center rounded border border-white bg-white px-5 py-3 text-sm font-semibold transition duration-200 hover:border-indigo-50 hover:bg-indigo-50" href="#">
+            <img class="mr-2 h-5 w-5" src="https://shuffle.dev/plain-assets/socials/twitter.svg" alt="" />
+            <span class="text-sm font-semibold">Sign in with Twitter</span>
+          </a>
+        </form>
+      </div>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/signup/tem7.html b/components/signup/tem7.html
new file mode 100644
index 0000000..b6ef026
--- /dev/null
+++ b/components/signup/tem7.html
@@ -0,0 +1,26 @@
+<section class="py-20">
+    <div class="container mx-auto px-4">
+      <div class="mx-auto max-w-md rounded-lg px-8 py-12 text-center">
+        <span class="text-sm font-semibold uppercase text-gray-500">Sign Up</span>
+        <h3 class="font-heading mb-8 text-3xl font-bold">Create new account</h3>
+        <form action="#">
+          <div class="flex flex-wrap md:flex-nowrap">
+            <input class="mb-4 w-full rounded border bg-white py-3 pl-3 md:mr-2 md:w-1/2" type="text" placeholder="First Name" />
+            <input class="mb-4 w-full rounded border bg-white py-3 pl-3 md:w-1/2" type="text" placeholder="Last Name" />
+          </div>
+          <input class="mb-4 w-full rounded border bg-white py-3 pl-3" type="email" placeholder="E-mail address" />
+          <input class="mb-4 w-full rounded border bg-white py-3 pl-3" type="password" placeholder="Password" />
+          <label class="mb-4 inline-block">
+            <input class="mr-1" type="checkbox" name="terms" value="1" />
+            <span class="text-sm text-gray-500">By signing up, you agree to our <a class="font-bold hover:underline" href="#">Terms, Data Policy</a> and <a class="font-bold hover:underline" href="#">Cookies Policy</a>.</span>
+          </label>
+          <button class="mb-4 block w-full rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600">Sign Up</button>
+        </form>
+        <p class="text-sm text-gray-500">
+          <span>Already have an account?</span>
+          <a class="font-bold hover:underline" href="#">Sign In</a>
+        </p>
+      </div>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/signup/tem8.html b/components/signup/tem8.html
new file mode 100644
index 0000000..83d7bc8
--- /dev/null
+++ b/components/signup/tem8.html
@@ -0,0 +1,23 @@
+<section class="py-20">
+    <div class="container mx-auto px-4">
+      <div class="mx-auto max-w-md rounded-lg px-8 py-12 text-center">
+        <span class="text-sm font-semibold uppercase text-gray-500">Sign In</span>
+        <h3 class="font-heading mb-8 text-3xl font-bold">Join our community</h3>
+        <form action="#">
+          <input class="mb-4 w-full rounded border bg-white py-3 pl-3" type="email" placeholder="E-mail address" />
+          <input class="mb-4 w-full rounded border bg-white py-3 pl-3" type="password" placeholder="Password" />
+          <button class="mb-4 block w-full rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600">Get Started</button>
+          <a class="text-sm text-gray-500 hover:underline" href="#">Forgot password?</a>
+          <a class="mb-4 mt-4 block flex w-full items-center justify-center rounded border border-white bg-white px-5 py-3 text-sm font-semibold transition duration-200 hover:border-indigo-50 hover:bg-indigo-50" href="#">
+            <img class="mr-2 h-5 w-5" src="https://shuffle.dev/plain-assets/socials/facebook.svg" alt="" />
+            <span class="text-sm font-semibold">Sign in with Facebook</span>
+          </a>
+          <a class="flex items-center justify-center rounded border border-white bg-white px-5 py-3 text-sm font-semibold transition duration-200 hover:border-indigo-50 hover:bg-indigo-50" href="#">
+            <img class="mr-2 h-5 w-5" src="https://shuffle.dev/plain-assets/socials/twitter.svg" alt="" />
+            <span class="text-sm font-semibold">Sign in with Twitter</span>
+          </a>
+        </form>
+      </div>
+    </div>
+  </section>
+  
\ No newline at end of file