diff --git a/components/headers/header1.html b/components/headers/header1.html
new file mode 100644
index 0000000..36830a1
--- /dev/null
+++ b/components/headers/header1.html
@@ -0,0 +1,69 @@
+<section>
+    <div class="container mx-auto px-4">
+      <nav class="flex items-center justify-between py-8">
+        <a class="text-2xl leading-none text-gray-600" href="#">
+          <img class="h-8" src="https://shuffle.dev/plain-assets/logos/plain-indigo.svg" alt="" width="auto" />
+        </a>
+        <div class="lg:hidden">
+          <button class="navbar-burger block text-indigo-500 hover:text-indigo-500 focus:outline-none">
+            <svg class="h-4 w-4" fill="currentColor " viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <title>Mobile menu</title>
+              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
+            </svg>
+          </button>
+        </div>
+        <ul class="ml-auto mr-10 hidden w-auto items-center space-x-12 lg:flex">
+          <li><a class="text-sm font-medium hover:text-indigo-700" href="#">About</a></li>
+          <li><a class="text-sm font-medium hover:text-indigo-700" href="#">Company</a></li>
+          <li><a class="text-sm font-medium hover:text-indigo-700" href="#">Services</a></li>
+          <li><a class="text-sm font-medium hover:text-indigo-700" href="#">Testimonials</a></li>
+        </ul>
+        <a class="hidden rounded border border-indigo-500 px-5 py-3 text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-600 hover:bg-indigo-500 hover:text-white lg:block" href="#">Contact Us</a>
+      </nav>
+      <div class="-mx-4 mt-10 flex flex-wrap items-center pb-10 lg:my-10 lg:pb-16">
+        <div class="mb-12 w-full px-4 md:mb-0 md:w-1/2">
+          <h2 class="font-heading mb-8 max-w-sm text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Take care of your performance every day.</h2>
+          <p class="mb-8 max-w-lg text-base leading-relaxed text-gray-500 lg:text-xl lg:leading-relaxed">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
+          <div><a class="mb-3 block rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-center text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600 lg:mb-0 lg:mr-3 lg:inline-block" href="#">Track your performance</a><a class="block rounded border border-indigo-500 px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-600 hover:bg-indigo-500 hover:text-white lg:inline-block" href="#">Learn more</a></div>
+        </div>
+        <div class="w-full px-4 md:w-1/2">
+          <img class="w-full rounded-xl object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-square.png" alt="" />
+        </div>
+        <button class="mx-auto mt-10 block h-16 w-16 rounded-full bg-indigo-50 p-5 hover:bg-indigo-100 lg:mt-20">
+          <svg class="mx-auto text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div class="navbar-menu fixed bottom-0 left-0 top-0 z-50 hidden w-5/6 max-w-sm">
+      <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
+      <nav class="relative flex h-full w-full flex-col overflow-y-auto border-r bg-white px-6 py-6">
+        <div class="mb-12 flex items-center">
+          <a class="mr-auto text-2xl font-semibold leading-none" href="#">
+            <img class="h-8" src="https://shuffle.dev/plain-assets/logos/plain-indigo.svg" alt="" width="auto" />
+          </a>
+          <button class="navbar-close">
+            <svg class="h-6 w-6 cursor-pointer hover:text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+        <div>
+          <ul>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">About</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Company</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Services</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Testimonials</a></li>
+          </ul>
+        </div>
+        <div class="mt-auto">
+          <div class="pt-6"><a class="block rounded border border-indigo-500 px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-600 hover:bg-indigo-500 hover:text-white" href="#">Contact Us</a></div>
+          <p class="mb-4 mt-6 text-center text-sm text-gray-500">
+            <span>© 2022 All rights reserved.</span>
+          </p>
+        </div>
+      </nav>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/headers/header2.html b/components/headers/header2.html
new file mode 100644
index 0000000..ec9e7d4
--- /dev/null
+++ b/components/headers/header2.html
@@ -0,0 +1,87 @@
+<section class="relative overflow-y-hidden pb-8">
+    <img class="absolute bottom-0 left-0 top-0 hidden w-2/5 object-cover lg:block" src="https://shuffle.dev/plain-assets/images/indigo-600-vertical.png" alt="" />
+    <div class="container relative mx-auto px-4">
+      <nav class="flex items-center justify-between py-8">
+        <a class="hidden text-2xl leading-none text-gray-600 lg:inline-block" href="#">
+          <img class="h-8" src="https://shuffle.dev/plain-assets/logos/plain-light.svg" alt="" width="auto" />
+        </a>
+        <a class="text-2xl leading-none text-gray-600 lg:hidden" href="#">
+          <img class="h-8" src="https://shuffle.dev/plain-assets/logos/plain-indigo.svg" alt="" width="auto" />
+        </a>
+        <div class="ml-auto lg:hidden">
+          <button class="navbar-burger block text-indigo-500 hover:text-indigo-500 focus:outline-none">
+            <svg class="h-4 w-4" fill="currentColor " viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <title>Mobile menu</title>
+              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
+            </svg>
+          </button>
+        </div>
+        <div class="ml-auto hidden w-auto lg:flex lg:w-3/5 lg:pl-16">
+          <ul class="flex items-center space-x-12">
+            <li><a class="text-sm font-medium hover:text-indigo-700" href="#">About</a></li>
+            <li><a class="text-sm font-medium hover:text-indigo-700" href="#">Company</a></li>
+            <li><a class="text-sm font-medium hover:text-indigo-700" href="#">Services</a></li>
+            <li><a class="text-sm font-medium hover:text-indigo-700" href="#">Testimonials</a></li>
+          </ul>
+          <button class="ml-auto inline-block text-indigo-500 hover:text-indigo-700">
+            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
+            </svg>
+          </button>
+        </div>
+      </nav>
+      <div class="ml-auto w-full lg:w-3/5 lg:pl-16">
+        <div class="mb-20 mt-10 lg:mt-20">
+          <h2 class="font-heading mb-8 max-w-sm text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Take care of your performance every day.</h2>
+          <p class="mb-8 max-w-lg text-base leading-relaxed text-gray-500 lg:text-xl lg:leading-relaxed">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
+          <div><a class="mb-3 block rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-center text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600 md:mb-0 md:mr-3 md:inline-block" href="#">Track your performance</a><a class="block rounded border border-indigo-500 px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-600 hover:bg-indigo-500 hover:text-white md:inline-block" href="#">Learn more</a></div>
+        </div>
+        <div class="-mx-2 flex flex-wrap items-center justify-center">
+          <div class="mb-12 w-1/2 px-2 text-center md:w-1/3 lg:w-1/5 lg:text-left">
+            <img class="inline-block h-6" src="https://shuffle.dev/plain-assets/logos/jiggle-color.svg" alt="" />
+          </div>
+          <div class="mb-12 w-1/2 px-2 text-center md:w-1/3 lg:w-1/5 lg:text-left">
+            <img class="inline-block h-6" src="https://shuffle.dev/plain-assets/logos/symtric-color.svg" alt="" />
+          </div>
+          <div class="mb-12 w-1/2 px-2 text-center md:w-1/3 lg:w-1/5 lg:text-left">
+            <img class="inline-block h-6" src="https://shuffle.dev/plain-assets/logos/wishelp-color.svg" alt="" />
+          </div>
+          <div class="mb-12 w-1/2 px-2 text-center md:w-1/3 lg:w-1/5 lg:text-left">
+            <img class="inline-block h-6" src="https://shuffle.dev/plain-assets/logos/resecurb-color.svg" alt="" />
+          </div>
+          <div class="mb-12 w-1/2 px-2 text-center md:w-1/3 lg:w-1/5 lg:text-left">
+            <img class="inline-block h-6" src="https://shuffle.dev/plain-assets/logos/welytics-color.svg" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="navbar-menu fixed bottom-0 left-0 top-0 z-50 hidden w-5/6 max-w-sm">
+      <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
+      <nav class="relative flex h-full w-full flex-col overflow-y-auto border-r bg-white px-6 py-6">
+        <div class="mb-12 flex items-center">
+          <a class="mr-auto text-2xl font-semibold leading-none" href="#">
+            <img class="h-8" src="https://shuffle.dev/plain-assets/logos/plain-indigo.svg" alt="" width="auto" />
+          </a>
+          <button class="navbar-close">
+            <svg class="h-6 w-6 cursor-pointer hover:text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+        <div>
+          <ul>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">About</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Company</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Services</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Testimonials</a></li>
+          </ul>
+        </div>
+        <div class="mt-auto">
+          <p class="mb-4 mt-6 text-center text-sm text-gray-500">
+            <span>© 2022 All rights reserved.</span>
+          </p>
+        </div>
+      </nav>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/headers/header3.html b/components/headers/header3.html
new file mode 100644
index 0000000..e26a2f6
--- /dev/null
+++ b/components/headers/header3.html
@@ -0,0 +1,67 @@
+<section class="bg-indigo-500">
+    <div class="container mx-auto px-4">
+      <nav class="flex items-center justify-between py-8">
+        <a class="text-2xl leading-none text-gray-600" href="#">
+          <img class="h-8" src="https://shuffle.dev/plain-assets/logos/plain-light.svg" alt="" width="auto" />
+        </a>
+        <div class="lg:hidden">
+          <button class="navbar-burger block text-indigo-50 hover:text-indigo-200 focus:outline-none">
+            <svg class="h-4 w-4" fill="currentColor " viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <title>Mobile menu</title>
+              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
+            </svg>
+          </button>
+        </div>
+        <ul class="ml-auto mr-10 hidden w-auto items-center space-x-12 lg:flex">
+          <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">About</a></li>
+          <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">Company</a></li>
+          <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">Services</a></li>
+          <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">Testimonials</a></li>
+        </ul>
+        <button class="hidden text-indigo-50 hover:text-indigo-200 lg:block">
+          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+          </svg>
+        </button>
+      </nav>
+      <div class="relative mb-48 pb-32 pt-12 md:pt-16 lg:mb-64 lg:pb-48">
+        <div class="mx-auto mb-16 max-w-2xl text-center">
+          <h2 class="font-heading mb-4 text-3xl font-bold leading-tight text-white md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Finish what you started today before you forget to do it.</h2>
+          <p class="mb-8 text-base leading-relaxed text-gray-50 lg:text-xl lg:leading-relaxed">Correct annotation helps your customers find their way around new features. Getting familiar with the project is the first step towards development.</p>
+          <div><a class="mb-3 block rounded border border-white bg-white px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-50 hover:bg-indigo-50 md:mb-0 md:mr-3 md:inline-block" href="#">Try for Free</a><a class="block rounded border border-white px-5 py-3 text-center text-sm font-semibold text-white transition duration-200 hover:bg-white hover:text-indigo-500 md:inline-block" href="#">Learn More</a></div>
+        </div>
+        <div class="relative mx-auto max-w-3xl">
+          <img class="absolute left-0 top-0 mx-auto h-64 w-full rounded-xl object-cover lg:h-96" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="navbar-menu fixed bottom-0 left-0 top-0 z-50 hidden w-5/6 max-w-sm">
+      <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
+      <nav class="relative flex h-full w-full flex-col overflow-y-auto border-r bg-white px-6 py-6">
+        <div class="mb-12 flex items-center">
+          <a class="mr-auto text-2xl font-semibold leading-none" href="#">
+            <img class="h-8" src="https://shuffle.dev/plain-assets/logos/plain-indigo.svg" alt="" width="auto" />
+          </a>
+          <button class="navbar-close">
+            <svg class="h-6 w-6 cursor-pointer hover:text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+        <div>
+          <ul>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">About</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Company</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Services</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Testimonials</a></li>
+          </ul>
+        </div>
+        <div class="mt-auto">
+          <p class="mb-4 mt-6 text-center text-sm text-gray-500">
+            <span>© 2022 All rights reserved.</span>
+          </p>
+        </div>
+      </nav>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/headers/header4.html b/components/headers/header4.html
new file mode 100644
index 0000000..b7cd7fd
--- /dev/null
+++ b/components/headers/header4.html
@@ -0,0 +1,100 @@
+<section class="bg-indigo-500 pb-8">
+    <div class="container mx-auto px-4">
+      <nav class="relative flex items-center justify-between py-8">
+        <a class="text-2xl leading-none text-gray-600" href="#">
+          <img class="h-8" src="https://shuffle.dev/plain-assets/logos/plain-light.svg" alt="" width="auto" />
+        </a>
+        <div class="lg:hidden">
+          <button class="navbar-burger block text-indigo-50 hover:text-indigo-200 focus:outline-none">
+            <svg class="h-4 w-4" fill="currentColor " viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <title>Mobile menu</title>
+              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
+            </svg>
+          </button>
+        </div>
+        <ul class="absolute left-1/2 top-1/2 ml-auto mr-auto hidden w-auto -translate-x-1/2 -translate-y-1/2 transform items-center space-x-12 lg:flex">
+          <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">About</a></li>
+          <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">Company</a></li>
+          <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">Services</a></li>
+          <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">Testimonials</a></li>
+        </ul>
+        <ul class="hidden w-auto items-center space-x-8 lg:flex">
+          <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">Sign in</a></li>
+          <li><a class="inline-block rounded border border-white bg-white px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-50 hover:bg-indigo-50" href="#">Sign up</a></li>
+        </ul>
+      </nav>
+      <div class="mx-auto mb-24 mt-16 max-w-xl text-center lg:max-w-4xl">
+        <span class="text-xs font-semibold uppercase text-indigo-50">Develop your skill</span>
+        <h2 class="font-heading mb-8 mt-2 text-3xl font-bold leading-tight text-white md:text-4xl md:leading-tight lg:text-7xl lg:leading-tight">Take care of your performance every day.</h2>
+        <a class="block rounded border border-white bg-white px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-50 hover:bg-indigo-50 md:inline-block" href="#">Try for Free</a>
+      </div>
+      <div class="-mx-4 flex flex-wrap">
+        <div class="mb-8 flex w-full px-4 sm:w-1/2 lg:w-1/3">
+          <div class="mr-6">
+            <svg class="h-12 w-12 text-white" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#F1F5FB"></path>
+              <circle cx="24" cy="24" r="23.5" stroke="#E1E4E8"></circle>
+            </svg>
+          </div>
+          <div class="mb-4 w-2/3">
+            <h3 class="font-heading mb-2 text-xl font-bold text-white lg:text-2xl">Quick review</h3>
+            <p class="text-lg text-indigo-50">We make sure you get feedback the same day.</p>
+          </div>
+        </div>
+        <div class="mb-8 flex w-full px-4 sm:w-1/2 lg:w-1/3">
+          <div class="mr-6">
+            <svg class="h-12 w-12 text-white" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#F1F5FB"></path>
+              <circle cx="24" cy="24" r="23.5" stroke="#E1E4E8"></circle>
+            </svg>
+          </div>
+          <div class="mb-4 w-2/3">
+            <h3 class="font-heading mb-2 text-xl font-bold text-white lg:text-2xl">Easy changes</h3>
+            <p class="text-lg text-indigo-50">Options settings for customers convenience</p>
+          </div>
+        </div>
+        <div class="mb-8 flex w-full px-4 lg:w-1/3">
+          <div class="mr-6">
+            <svg class="h-12 w-12 text-white" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#F1F5FB"></path>
+              <circle cx="24" cy="24" r="23.5" stroke="#E1E4E8"></circle>
+            </svg>
+          </div>
+          <div class="mb-4 w-2/3">
+            <h3 class="font-heading mb-2 text-xl font-bold text-white lg:text-2xl">Place storage</h3>
+            <p class="text-lg text-indigo-50">Store projects in easily accessible catalogs</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="navbar-menu fixed bottom-0 left-0 top-0 z-50 hidden w-5/6 max-w-sm">
+      <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
+      <nav class="relative flex h-full w-full flex-col overflow-y-auto border-r bg-white px-6 py-6">
+        <div class="mb-12 flex items-center">
+          <a class="mr-auto text-2xl font-semibold leading-none" href="#">
+            <img class="h-8" src="https://shuffle.dev/plain-assets/logos/plain-indigo.svg" alt="" width="auto" />
+          </a>
+          <button class="navbar-close">
+            <svg class="h-6 w-6 cursor-pointer hover:text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+        <div>
+          <ul>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">About</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Company</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Services</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Testimonials</a></li>
+          </ul>
+        </div>
+        <div class="mt-auto">
+          <div class="pt-6"><a class="mb-3 block rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-center text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600" href="#">Sign in</a><a class="block rounded border border-indigo-500 px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-600 hover:bg-indigo-500 hover:text-white" href="#">Sign up</a></div>
+          <p class="mb-4 mt-6 text-center text-sm text-gray-500">
+            <span>© 2022 All rights reserved.</span>
+          </p>
+        </div>
+      </nav>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/headers/header5.html b/components/headers/header5.html
new file mode 100644
index 0000000..cc228e7
--- /dev/null
+++ b/components/headers/header5.html
@@ -0,0 +1,58 @@
+<section class="relative overflow-x-hidden bg-indigo-500">
+    <div class="container mx-auto px-4">
+      <nav class="flex items-center justify-between py-8">
+        <a class="text-2xl leading-none text-white" href="#">
+          <img class="h-8" src="https://shuffle.dev/plain-assets/logos/plain-light.svg" alt="" width="auto" />
+        </a>
+        <button class="navbar-burger block rounded text-indigo-100 hover:text-indigo-200 focus:outline-none">
+          <svg class="h-4 w-4" fill="currentColor " viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <title>Mobile menu</title>
+            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
+          </svg>
+        </button>
+      </nav>
+      <div class="mt-16 max-w-md lg:mb-24">
+        <div class="mb-6 max-w-2xl lg:max-w-md">
+          <h2 class="font-heading mb-8 text-3xl font-bold leading-tight text-white md:text-4xl md:leading-tight lg:max-w-sm lg:text-5xl lg:leading-tight">Take care of your performance every day.</h2>
+          <p class="mb-8 max-w-lg text-base leading-relaxed text-gray-500 text-indigo-50 lg:text-xl lg:leading-relaxed">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
+        </div>
+        <div class="flex flex-wrap">
+          <input class="mb-2 mb-3 w-full rounded py-3 pl-4 text-sm md:mb-0 md:mb-0 md:mr-3 md:w-2/3" type="text" placeholder="Type your e-mail" />
+          <button class="w-full rounded border border-white bg-white px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-50 hover:bg-indigo-50 md:w-auto">Start for free</button>
+        </div>
+      </div>
+    </div>
+    <div class="mt-16 w-full px-4 pb-16 lg:absolute lg:right-0 lg:top-1/2 lg:-mr-8 lg:mt-4 lg:w-1/2 lg:-translate-y-1/2 lg:transform lg:pb-0">
+      <img class="mx-auto h-80 w-full rounded-lg object-cover lg:mx-0 lg:ml-auto lg:h-96" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+    </div>
+    <div class="navbar-menu fixed bottom-0 left-0 top-0 z-50 hidden w-5/6 max-w-sm">
+      <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
+      <nav class="relative flex h-full w-full flex-col overflow-y-auto border-r bg-white px-6 py-6">
+        <div class="mb-12 flex items-center">
+          <a class="mr-auto text-2xl font-semibold leading-none" href="#">
+            <img class="h-8" src="https://shuffle.dev/plain-assets/logos/plain-indigo.svg" alt="" width="auto" />
+          </a>
+          <button class="navbar-close">
+            <svg class="h-6 w-6 cursor-pointer hover:text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+        <div>
+          <ul>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">About</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Company</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Services</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Testimonials</a></li>
+          </ul>
+        </div>
+        <div class="mt-auto">
+          <div class="pt-6"><a class="mb-3 block rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-center text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600" href="#">Sign in</a><a class="block rounded border border-indigo-500 px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-600 hover:bg-indigo-500 hover:text-white" href="#">Sign up</a></div>
+          <p class="mb-4 mt-6 text-center text-sm text-gray-500">
+            <span>© 2022 All rights reserved.</span>
+          </p>
+        </div>
+      </nav>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/headers/header6.html b/components/headers/header6.html
new file mode 100644
index 0000000..b999aa9
--- /dev/null
+++ b/components/headers/header6.html
@@ -0,0 +1,74 @@
+<section class="bg-indigo-500 pb-24">
+    <div class="container mx-auto px-4">
+      <nav class="relative flex items-center justify-between py-8">
+        <a class="text-2xl leading-none text-gray-600" href="#">
+          <img class="h-8" src="https://shuffle.dev/plain-assets/logos/plain-light.svg" alt="" width="auto" />
+        </a>
+        <div class="lg:hidden">
+          <button class="navbar-burger block text-indigo-50 hover:text-indigo-200 focus:outline-none">
+            <svg class="h-4 w-4" fill="currentColor " viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <title>Mobile menu</title>
+              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
+            </svg>
+          </button>
+        </div>
+        <ul class="absolute left-1/2 top-1/2 ml-auto mr-auto hidden w-auto -translate-x-1/2 -translate-y-1/2 transform items-center space-x-12 lg:flex">
+          <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">About</a></li>
+          <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">Company</a></li>
+          <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">Services</a></li>
+          <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">Testimonials</a></li>
+        </ul>
+        <ul class="hidden w-auto items-center space-x-8 lg:flex">
+          <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">Sign in</a></li>
+          <li><a class="inline-block rounded border border-white bg-white px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-50 hover:bg-indigo-50" href="#">Sign up</a></li>
+        </ul>
+      </nav>
+      <div class="mt-16">
+        <div class="container mx-auto px-4">
+          <div class="mx-auto mb-16 max-w-xl text-center lg:max-w-4xl">
+            <span class="text-xs font-semibold uppercase text-indigo-50">Develop your skill</span>
+            <h2 class="font-heading mb-8 mt-2 text-3xl font-bold leading-tight text-white md:text-4xl md:leading-tight lg:text-7xl lg:leading-tight">Take care of your performance every day.</h2>
+            <div><a class="mb-3 block rounded border border-white bg-white px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-50 hover:bg-indigo-50 md:mb-0 md:mr-3 md:inline-block" href="#">Try for Free</a><a class="block rounded border border-white px-5 py-3 text-center text-sm font-semibold text-white transition duration-200 hover:bg-white hover:text-indigo-500 md:inline-block" href="#">Learn More</a></div>
+          </div>
+          <div>
+            <button class="mx-auto block text-indigo-50 hover:text-indigo-100">
+              <svg class="md:w-18 md:h-18 mx-auto mb-2 h-16 w-16" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
+              </svg>
+              <span class="font-semibold">Watch Demo</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="navbar-menu fixed bottom-0 left-0 top-0 z-50 hidden w-5/6 max-w-sm">
+      <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
+      <nav class="relative flex h-full w-full flex-col overflow-y-auto border-r bg-white px-6 py-6">
+        <div class="mb-12 flex items-center">
+          <a class="mr-auto text-2xl font-semibold leading-none" href="#">
+            <img class="h-8" src="https://shuffle.dev/plain-assets/logos/plain-indigo.svg" alt="" width="auto" />
+          </a>
+          <button class="navbar-close">
+            <svg class="h-6 w-6 cursor-pointer hover:text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+        <div>
+          <ul>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">About</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Company</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Services</a></li>
+            <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Testimonials</a></li>
+          </ul>
+        </div>
+        <div class="mt-auto">
+          <div class="pt-6"><a class="mb-3 block rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-center text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600" href="#">Sign in</a><a class="block rounded border border-indigo-500 px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-600 hover:bg-indigo-500 hover:text-white" href="#">Sign up</a></div>
+          <p class="mb-4 mt-6 text-center text-sm text-gray-500">
+            <span>© 2022 All rights reserved.</span>
+          </p>
+        </div>
+      </nav>
+    </div>
+  </section>
+  
\ No newline at end of file