diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index f3a84e477..cbb464fc0 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -2,137 +2,96 @@
   <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" :style="{ height: contentHeight + 'px' }">
-        <div class="relative my-5 shadow-md border-solid border-2 border-light-gray-100">
-  <div class="h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/4">
-    <img class="w-full h-full object-cover" src="https://via.placeholder.com/500" alt=""/>
-  </div>
-  <div class="relative max-w-screen-xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-3">
-    <div class="md:ml-auto md:w-3/4 md:pl-10">
-      <!-- <div class="text-base leading-6 font-semibold uppercase tracking-wider text-gray-300">
-        Award winning support
-      </div> -->
-      <h2 class="mt-1 text-3xl leading-9 font-extrabold tracking-tight uppercase">
-        Projects
-      </h2>
-      <p class="mt-3 text-lg leading-7">
-        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-      </p>
-      <div class="mt-4">
-        <div class="inline-flex rounded-md shadow">
-          <a href="/projects" class="inline-flex items-center justify-center px-5 py-1 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
-            LEARN MORE
-            <!-- Heroicon name: external-link -->
-            <svg class="-mr-1 ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-              <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
-              <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
-            </svg>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+      
+      <div class="py-10 flex flex-col">
 
-<div class="relative my-5 shadow-md border-solid border-2 border-light-gray-100">
-  <div class="h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/4">
-    <img class="w-full h-full object-cover" src="https://via.placeholder.com/500" alt=""/>
-  </div>
-  <div class="relative max-w-screen-xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-3">
-    <div class="md:ml-auto md:w-3/4 md:pl-10">
-      <!-- <div class="text-base leading-6 font-semibold uppercase tracking-wider text-gray-300">
-        Award winning support
-      </div> -->
-      <h2 class="mt-1 text-3xl leading-9 font-extrabold tracking-tight uppercase">
-        Pepole
-      </h2>
-      <p class="mt-3 text-lg leading-7">
-        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-      </p>
-      <div class="mt-4">
-        <div class="inline-flex rounded-md shadow">
-          <a href="/people" class="inline-flex items-center justify-center px-5 py-1 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
-            LEARN MORE
-            <!-- Heroicon name: external-link -->
-            <svg class="-mr-1 ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-              <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
-              <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
-            </svg>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+        <!-- <section class="my-5 pt-10">
+            <div class="flex mx-32">
+                <div class="flex-1 mx-auto mr-24 py-10 my-auto justify-items-end max-w-2xl text-right">
+                    <h2 class="uppercase font-semibold text-gray-700">Be The Internet</h2>
+                    <p class="mt-6 mb-8 text-gray-400 leading-relaxed font-tf-primary text-lg">Centralized storage and Compute <br> owned by everyone, everywhere.</p>
+                </div>
+                <div class="flex-1">
+                    <img src="img/valuesheader2.png" alt="globe" class="max-w-2xl">
+                </div>
+            </div>
+        </section> -->
 
-<div class="relative my-5 shadow-md border-solid border-2 border-light-gray-100">
-  <div class="h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/4">
-    <img class="w-full h-full object-cover" src="https://via.placeholder.com/500" alt=""/>
-  </div>
-  <div class="relative max-w-screen-xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-3">
-    <div class="md:ml-auto md:w-3/4 md:pl-10">
-      <!-- <div class="text-base leading-6 font-semibold uppercase tracking-wider text-gray-300">
-        Award winning support
-      </div> -->
-      <h2 class="mt-1 text-3xl leading-9 font-extrabold tracking-tight uppercase">
-        Overview
-      </h2>
-      <p class="mt-3 text-lg leading-7">
-        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-      </p>
-      <div class="mt-4">
-        <div class="inline-flex rounded-md shadow">
-          <a href="/overview" class="inline-flex items-center justify-center px-5 py-1 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
-            LEARN MORE
-            <!-- Heroicon name: external-link -->
-            <svg class="-mr-1 ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-              <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
-              <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
-            </svg>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="relative my-5 shadow-md border-solid border-2 border-light-gray-100">
-  <div class="h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/4">
-    <img class="w-full h-full object-cover" src="https://via.placeholder.com/500" alt=""/>
-  </div>
-  <div class="relative max-w-screen-xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-3">
-    <div class="md:ml-auto md:w-3/4 md:pl-10">
-      <!-- <div class="text-base leading-6 font-semibold uppercase tracking-wider text-gray-300">
-        Award winning support
-      </div> -->
-      <h2 class="mt-1 text-3xl leading-9 font-extrabold tracking-tight uppercase">
-        News
-      </h2>
-      <p class="mt-3 text-lg leading-7">
-        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-      </p>
-      <div class="mt-4">
-        <div class="inline-flex rounded-md shadow">
-          <a href="/news" class="inline-flex items-center justify-center px-5 py-1 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
-            LEARN MORE
-            <!-- Heroicon name: external-link -->
-            <svg class="-mr-1 ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-              <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
-              <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
-            </svg>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+     <section class="py-20">
+            <div class="flex flex-wrap items-center -mx-8">
+              
+              <div class="md:ml-auto md:w-1/2 md:pl-10 px-20 text-center">
+                <h1 class="text-4xl font-semibold font-tf-secondary">THANK YOU PARTNERS</h1>
+                <p class="mt-6 mb-8 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/valuesheader2.png" alt="imgAlt"/>
+              </div>
+            </div>
+          </section>   
 
 
 
-      </div>
+          <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 class="object-cover" src="img/projects_card.png" alt="imgAlt"/>
+              </div>
+              <div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left">
+                <h2 class="text-4xl font-semibold font-tf-secondary uppercase">Projects</h2>
+                <p class="mt-6 mb-8 text-gray-600 leading-relaxed">Organisations that take action now to shape a conscious digital world.</p>
+                <div class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
+                    <a  href="/projects">
+                        <svg  class="inline-block fill-current text-green-600 h-5 w-5 mt-3 " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.04 315.72"><title>Arrows</title><path class="cls-1" d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z" transform="translate(-35 -96.28)"/><path class="cls-1" d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z" transform="translate(-35 -96.28)"/></svg>
+                    </a>
+                    <a class="inline-block text-green-600 hover:underline py-2 ml-2 uppercase text-right font-bold" href="/projects">LEARN MORE</a>
+                </div>
+
+              </div>
+            </div>
+          </section>
+          <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 class="object-cover" src="img/people.png" alt="imgAlt"/>
+              </div>
+              <div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left">
+                <h2 class="text-4xl font-semibold font-tf-secondary uppercase">People</h2>
+                <p class="mt-6 mb-8 text-gray-600 leading-relaxed">Independent of location, race, gender, religion we leave no one behind.</p>
+                <div class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
+                    <a  href="/people">
+                        <svg  class="inline-block fill-current text-green-600 h-5 w-5 mt-3 " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.04 315.72"><title>Arrows</title><path class="cls-1" d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z" transform="translate(-35 -96.28)"/><path class="cls-1" d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z" transform="translate(-35 -96.28)"/></svg>
+                    </a>
+                    <a class="inline-block text-green-600 hover:underline py-2 ml-2 uppercase text-right font-bold" href="/people">LEARN MORE</a>
+                </div>
+
+              </div>
+            </div>
+          </section>
+          <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 class="object-cover" src="img/blog.png" alt="imgAlt"/>
+              </div>
+              <div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left">
+                <h2 class="text-4xl font-semibold font-tf-secondary uppercase">Blog</h2>
+                <p class="mt-6 mb-8 text-gray-600 leading-relaxed">We collaborate to improve our solutions, efficiency, reach, visibility and service.</p>
+                <div class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
+                    <a  href="/blog">
+                        <svg  class="inline-block fill-current text-green-600 h-5 w-5 mt-3 " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.04 315.72"><title>Arrows</title><path class="cls-1" d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z" transform="translate(-35 -96.28)"/><path class="cls-1" d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z" transform="translate(-35 -96.28)"/></svg>
+                    </a>
+                    <a class="inline-block text-green-600 hover:underline py-2 ml-2 uppercase text-right font-bold" href="/blog">LEARN MORE</a>
+                </div>
+
+              </div>
+            </div>
+          </section>
+ </div>
 
       <!-- <vue-markdown> </vue-markdown> -->
     </div>
+
+ 
   </Layout>
 </template>
 
diff --git a/static/img/blog.png b/static/img/blog.png
new file mode 100644
index 000000000..f17a37bbe
Binary files /dev/null and b/static/img/blog.png differ
diff --git a/static/img/people.png b/static/img/people.png
new file mode 100644
index 000000000..a26f3abf3
Binary files /dev/null and b/static/img/people.png differ
diff --git a/static/img/projects_card.png b/static/img/projects_card.png
new file mode 100644
index 000000000..c4c044791
Binary files /dev/null and b/static/img/projects_card.png differ