diff --git a/components/howitwork/hiw1.html b/components/howitwork/hiw1.html
new file mode 100644
index 0000000..fe337fd
--- /dev/null
+++ b/components/howitwork/hiw1.html
@@ -0,0 +1,33 @@
+<section class="py-20">
+    <div class="container 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-2/5">
+          <img class="h-full max-h-96 w-full rounded-lg object-cover lg:max-h-full" src="https://shuffle.dev/plain-assets/images/indigo-600-vertical.png" alt="" />
+        </div>
+        <div class="w-full px-4 lg:w-3/5">
+          <div class="max-w-xl lg:ml-auto">
+            <h2 class="font-heading mb-12 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Lorem ipsum dolor sit amet consectetur</h2>
+            <div class="-mx-4 -mb-10 flex flex-wrap lg:-mb-12">
+              <div class="mb-10 w-full px-4 md:w-1/2 lg:mb-12">
+                <span class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 text-xl font-bold leading-loose text-indigo-50">1</span>
+                <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+              </div>
+              <div class="mb-10 w-full px-4 md:w-1/2 lg:mb-12">
+                <span class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 text-xl font-bold leading-loose text-indigo-50">2</span>
+                <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+              </div>
+              <div class="mb-10 w-full px-4 md:w-1/2 lg:mb-12">
+                <span class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 text-xl font-bold leading-loose text-indigo-50">3</span>
+                <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+              </div>
+              <div class="mb-10 w-full px-4 md:w-1/2 lg:mb-12">
+                <span class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 text-xl font-bold leading-loose text-indigo-50">4</span>
+                <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/howitwork/hiw2.html b/components/howitwork/hiw2.html
new file mode 100644
index 0000000..10ce694
--- /dev/null
+++ b/components/howitwork/hiw2.html
@@ -0,0 +1,55 @@
+<section class="py-20">
+    <div class="container mx-auto px-4">
+      <div class="-mx-4 mb-12 flex flex-wrap items-center lg:mb-16">
+        <div class="mb-10 w-full px-4 lg:mb-0 lg:w-1/2">
+          <div class="max-w-lg">
+            <span class="text-xs font-semibold uppercase text-indigo-500">Lorem Ipsum</span>
+            <h2 class="font-heading mb-6 mt-2 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
+            <p class="max-w-sm text-base leading-relaxed text-gray-500 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">
+          <img class="max-h-80 w-full rounded-lg object-cover" src="https://shuffle.dev/plain-assets/images/indigo-600-horizontal.png" alt="" />
+        </div>
+      </div>
+      <div class="-mx-4 -mb-12 flex flex-wrap">
+        <div class="mb-12 flex w-full items-start px-4 md:w-1/2 lg:w-1/3">
+          <span class="inline-flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-500 font-bold text-gray-50">1</span>
+          <div class="max-w-xs px-4">
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+          </div>
+        </div>
+        <div class="mb-12 flex w-full items-start px-4 md:w-1/2 lg:w-1/3">
+          <span class="inline-flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-500 font-bold text-gray-50">2</span>
+          <div class="max-w-xs px-4">
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+          </div>
+        </div>
+        <div class="mb-12 flex w-full items-start px-4 md:w-1/2 lg:w-1/3">
+          <span class="inline-flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-500 font-bold text-gray-50">3</span>
+          <div class="max-w-xs px-4">
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+          </div>
+        </div>
+        <div class="mb-12 flex w-full items-start px-4 md:w-1/2 lg:w-1/3">
+          <span class="inline-flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-500 font-bold text-gray-50">4</span>
+          <div class="max-w-xs px-4">
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+          </div>
+        </div>
+        <div class="mb-12 flex w-full items-start px-4 md:w-1/2 lg:w-1/3">
+          <span class="inline-flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-500 font-bold text-gray-50">5</span>
+          <div class="max-w-xs px-4">
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+          </div>
+        </div>
+        <div class="mb-12 flex w-full items-start px-4 md:w-1/2 lg:w-1/3">
+          <span class="inline-flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-500 font-bold text-gray-50">6</span>
+          <div class="max-w-xs px-4">
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/howitwork/hiw3.html b/components/howitwork/hiw3.html
new file mode 100644
index 0000000..41b8266
--- /dev/null
+++ b/components/howitwork/hiw3.html
@@ -0,0 +1,49 @@
+<section class="bg-indigo-500 py-20">
+    <div class="container mx-auto px-4">
+      <div class="-m-4 flex flex-wrap">
+        <div class="w-full p-4 lg:w-1/2">
+          <div class="rounded-lg bg-white px-10 py-12">
+            <span class="font-heading mb-6 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 font-bold text-indigo-50">1</span>
+            <h3 class="font-heading mb-4 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
+          </div>
+        </div>
+        <div class="w-full p-4 lg:w-1/2">
+          <div class="rounded-lg bg-white px-10 py-12">
+            <span class="font-heading mb-6 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 font-bold text-indigo-50">2</span>
+            <h3 class="font-heading mb-4 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
+          </div>
+        </div>
+        <div class="w-full p-4 lg:w-1/2">
+          <div class="rounded-lg bg-white px-10 py-12">
+            <span class="font-heading mb-6 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 font-bold text-indigo-50">3</span>
+            <h3 class="font-heading mb-4 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
+          </div>
+        </div>
+        <div class="w-full p-4 lg:w-1/2">
+          <div class="rounded-lg bg-white px-10 py-12">
+            <span class="font-heading mb-6 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 font-bold text-indigo-50">4</span>
+            <h3 class="font-heading mb-4 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
+          </div>
+        </div>
+        <div class="w-full p-4 lg:w-1/2">
+          <div class="rounded-lg bg-white px-10 py-12">
+            <span class="font-heading mb-6 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 font-bold text-indigo-50">5</span>
+            <h3 class="font-heading mb-4 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
+          </div>
+        </div>
+        <div class="w-full p-4 lg:w-1/2">
+          <div class="rounded-lg bg-white px-10 py-12">
+            <span class="font-heading mb-6 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 font-bold text-indigo-50">6</span>
+            <h3 class="font-heading mb-4 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/howitwork/hiw4.html b/components/howitwork/hiw4.html
new file mode 100644
index 0000000..503d418
--- /dev/null
+++ b/components/howitwork/hiw4.html
@@ -0,0 +1,54 @@
+<section class="relative py-20">
+    <div class="container mx-auto px-4">
+      <div class="mx-auto mb-20 max-w-3xl text-center">
+        <span class="text-xs font-semibold uppercase text-indigo-500">Lorem ipsum</span>
+        <h2 class="font-heading mb-4 mt-2 text-3xl font-bold leading-tight 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-gray-500 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 class="-mx-4 -mb-12 flex flex-wrap">
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:w-1/3">
+          <div class="relative rounded-lg bg-gray-50 p-12 text-center">
+            <span class="font-heading absolute inset-x-0 top-0 mx-auto -mt-6 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 font-bold text-indigo-50">1</span>
+            <h3 class="font-heading mb-2 text-2xl font-bold">Suspendisse interdum ullamcorper elit at</h3>
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+          </div>
+        </div>
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:w-1/3">
+          <div class="relative rounded-lg bg-gray-50 p-12 text-center">
+            <span class="font-heading absolute inset-x-0 top-0 mx-auto -mt-6 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 font-bold text-indigo-50">2</span>
+            <h3 class="font-heading mb-2 text-2xl font-bold">Suspendisse interdum ullamcorper elit at</h3>
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+          </div>
+        </div>
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:w-1/3">
+          <div class="relative rounded-lg bg-gray-50 p-12 text-center">
+            <span class="font-heading absolute inset-x-0 top-0 mx-auto -mt-6 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 font-bold text-indigo-50">3</span>
+            <h3 class="font-heading mb-2 text-2xl font-bold">Suspendisse interdum ullamcorper elit at</h3>
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+          </div>
+        </div>
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:w-1/3">
+          <div class="relative rounded-lg bg-gray-50 p-12 text-center">
+            <span class="font-heading absolute inset-x-0 top-0 mx-auto -mt-6 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 font-bold text-indigo-50">4</span>
+            <h3 class="font-heading mb-2 text-2xl font-bold">Suspendisse interdum ullamcorper elit at</h3>
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+          </div>
+        </div>
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:w-1/3">
+          <div class="relative rounded-lg bg-gray-50 p-12 text-center">
+            <span class="font-heading absolute inset-x-0 top-0 mx-auto -mt-6 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 font-bold text-indigo-50">5</span>
+            <h3 class="font-heading mb-2 text-2xl font-bold">Suspendisse interdum ullamcorper elit at</h3>
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+          </div>
+        </div>
+        <div class="mb-12 w-full px-4 md:w-1/2 lg:w-1/3">
+          <div class="relative rounded-lg bg-gray-50 p-12 text-center">
+            <span class="font-heading absolute inset-x-0 top-0 mx-auto -mt-6 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500 font-bold text-indigo-50">6</span>
+            <h3 class="font-heading mb-2 text-2xl font-bold">Suspendisse interdum ullamcorper elit at</h3>
+            <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  
\ No newline at end of file
diff --git a/components/howitwork/hiw5.html b/components/howitwork/hiw5.html
new file mode 100644
index 0000000..b135fbb
--- /dev/null
+++ b/components/howitwork/hiw5.html
@@ -0,0 +1,37 @@
+<section class="py-20">
+    <div class="container mx-auto px-4">
+      <div class="-mx-4 flex flex-wrap">
+        <div class="w-full px-4 lg:w-1/2">
+          <div class="mb-10 max-w-lg lg:mx-auto lg:mb-0">
+            <span class="text-xs font-semibold uppercase text-indigo-500">Lorem ipsum</span>
+            <h2 class="font-heading mb-4 mt-2 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
+            <p class="mb-8 text-base leading-relaxed text-gray-500 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>
+            <a class="mb-3 inline-block 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 md:mb-0 md:mr-3" href="#">Action</a>
+          </div>
+        </div>
+        <div class="w-full px-4 lg:w-1/2">
+          <div class="flex flex-wrap rounded-lg bg-gray-50 px-2 py-6 md:px-8 md:py-12">
+            <div class="mb-8 flex w-full flex-col items-start px-4 md:w-1/2 lg:mb-6 lg:w-full lg:flex-row">
+              <span class="font-heading mb-4 mr-10 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-500 font-bold text-indigo-50 lg:mb-0">1</span>
+              <div class="max-w-xs">
+                <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+              </div>
+            </div>
+            <div class="mb-8 flex w-full flex-col items-start px-4 md:w-1/2 lg:mb-6 lg:w-full lg:flex-row">
+              <span class="font-heading mb-4 mr-10 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-500 font-bold text-indigo-50 lg:mb-0">2</span>
+              <div class="max-w-xs">
+                <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+              </div>
+            </div>
+            <div class="flex w-full flex-col items-start px-4 md:w-1/2 lg:w-full lg:flex-row">
+              <span class="font-heading mb-4 mr-10 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-500 font-bold text-indigo-50 lg:mb-0">3</span>
+              <div class="max-w-xs">
+                <p class="text-lg leading-loose text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  
\ No newline at end of file