diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 000000000..ef68b89ba
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,23 @@
+<template>
+<section class="py-12 px-4">
+  <div class="flex flex-wrap items-center text-center lg:text-left -mx-2">
+    <div class="lg:w-1/2 px-2 lg:pr-10 mt-10 lg:mt-0 order-1 lg:order-none">
+      <h2 class="text-5xl mb-6 leading-tight font-semibold font-heading">{{ header.title }}</h2>
+      <p class="mb-8 text-gray-700 leading-relaxed">{{ header.content }}</p>
+      <!-- <div>
+          <a class="inline-block py-4 px-8 mr-6 leading-none text-white bg-indigo-600 hover:bg-indigo-700 font-semibold rounded shadow" href="#">Sign up</a>
+          <a class="text-indigo-600 hover:underline" href="#">Learn more</a>
+      </div> -->
+    </div>
+    <div class="lg:w-1/2 px-2"><img :src="header.img" :alt="header.altImg"></div>
+  </div>
+</section>
+
+
+</template>
+
+<script>
+export default {
+  props: ["header"],
+};
+</script>
\ No newline at end of file
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 0fa11e6df..09463a14f 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -2,24 +2,28 @@
   <Layout :hideHeader="true" :disableScroll="true">
     <div class="container sm:pxi-0 mx-auto overflow-hidden">
       <!-- <VacationCard img="" imgAlt="" eyebrow="" title="" pricing="" url="" /> -->
-
-      <div class="py-10 flex flex-col">
+            <Header
+        v-for="header in headers"
+        :key="header.title"
+        :header="header"
+      />
+      <!-- <div class="py-10 flex flex-col">
         <section class="py-10">
           <div class="flex flex-wrap items-center -mx-8">
             <div class="md:ml-auto md:w-1/2 md:pl-20 px-10">
               <h2 class="text-4xl font-bold font-tf-secondary">
                 Welcome to the growing ecosystem of ThreeFold
               </h2>
-              <!-- <p class="text-gray-600 leading-relaxed">Welcome to the growing ecosystem of ThreeFold</p> -->
+              <p class="text-gray-600 leading-relaxed">Welcome to the growing ecosystem of ThreeFold</p>
             </div>
             <div class="md:ml-auto md:w-1/2 pl-8">
               <img class="object-cover" src="img/equality.png" alt="imgAlt" />
             </div>
           </div>
         </section>
-      </div>
+      </div> -->
 
-              <!-- <section class="py-5 m-5 px-0 shadow-xl border border-gray-300">
+      <!-- <section class="py-5 m-5 px-0 shadow-xl border border-gray-300">
           <div class="flex flex-wrap items-center -mx-8">
             <div class="md:ml-auto md:w-1/3 pl-8">
               <img
@@ -70,6 +74,8 @@
 
       <!-- <vue-markdown> </vue-markdown> -->
       <NewCard v-for="card in cards" :key="card.title" :card="card" />
+
+
     </div>
   </Layout>
 </template>
@@ -77,6 +83,7 @@
 <script>
 import VueMarkdown from "vue-markdown";
 import NewCard from "~/components/NewCard.vue";
+import Header from "~/components/Header.vue";
 
 export default {
   metaInfo: {
@@ -110,6 +117,14 @@ export default {
           link: "/blog",
         },
       ],
+      headers: [
+        {
+          title: "Welcome to the growing ecosystem of ThreeFold",
+          img: "img/equality.png",
+          altImg :"home",
+          content:"Professional, dedicated, local. Dunder Mifflin is on its best patch to change the way you think about paper. That’s us - people who sell limitless paper in the paperless world.",
+        },
+      ],
     };
   },
   computed: {
@@ -122,10 +137,7 @@ export default {
   components: {
     VueMarkdown,
     NewCard,
+    Header,
   },
 };
 </script>
-
-
-
-