diff --git a/content/navigation/navigation.md b/content/navigation/navigation.md
index f68984591..811341d83 100644
--- a/content/navigation/navigation.md
+++ b/content/navigation/navigation.md
@@ -15,6 +15,12 @@ navLinks:
     link: /token
     external: false
     expandable: false
+
+  - name: How It Works
+    link: /how-it-works
+    external : false
+    expandble : false
+
   
   - name: Community
     link: "" # /dropdown
diff --git a/content/page/home/home-bg_new.jpg b/content/page/home/home-bg_new.jpg
new file mode 100644
index 000000000..b6a26ee29
Binary files /dev/null and b/content/page/home/home-bg_new.jpg differ
diff --git a/content/page/home/home.md b/content/page/home/home.md
index 0b49a62d1..46b429f96 100644
--- a/content/page/home/home.md
+++ b/content/page/home/home.md
@@ -2,10 +2,10 @@
 id: home
 metaTitle: ThreeFold | Home
 metaDesc: ThreeFold is the engine for a planet positive and data sovereign Internet. A collaborative movement of people who care about a better future.
-metaImg: ./home_bg.jpg
+metaImg: ./home-bg_new.jpg
 header_slogan: from zero
 header_title: to one
-header_image: ./home_bg.jpg
+header_image: ./home-bg_new.jpg
 
 header_altImg: threefold
 header_excerpt: The digital infrastructure for an interconnected world.
diff --git a/src/components/custom/SplitWithForm.vue b/src/components/custom/SplitWithForm.vue
index d00c097cb..94422459b 100644
--- a/src/components/custom/SplitWithForm.vue
+++ b/src/components/custom/SplitWithForm.vue
@@ -1,37 +1,29 @@
 <template>
-  <section class="text-gray-600 body-font">
+  <section class="body-font">
     <div class="mx-auto flex py-24 md:flex-row flex-col items-center">
       <div
         class="
           lg:pl-24
-          md:w-1/2
-          lg:pr-24
-          md:pr-16
+          lg:w-1/2
           flex flex-col
           md:items-start
           md:text-left
           mb-16
           md:mb-0
+          mx-4
           items-center
           text-center
         "
       >
         <h1
           class="
-            max-w-xs
-            title-font
-            sm:text-4xl
-            text-3xl
-            mb-4
-            font-bold
-            uppercase
-            text-gray-900
+            text-5xl uppercase mb-0 leading-tight font-semibold font-heading
           "
         >
           {{ subscribe.title }}
         </h1>
         <div
-          class="max-w-md mb-8 leading-relaxed"
+          class="my-8 lg:text-xl"
           v-html="subscribe.content"
         ></div>
         <div class="flex w-full md:justify-start justify-center items-end">
diff --git a/src/components/custom/sections/CallToAction.vue b/src/components/custom/sections/CallToAction.vue
index 27efe386e..f48cf1094 100644
--- a/src/components/custom/sections/CallToAction.vue
+++ b/src/components/custom/sections/CallToAction.vue
@@ -233,7 +233,7 @@
           >{{ cta.video_button }}</a
         >
       </div> -->
-      <div class="max-w-7xl mx-auto grid grid-cols-3 gap-4">
+      <div class="max-w-7xl mx-auto grid lg:grid-cols-3 gap-4">
         <a
           class="
             inline-block
@@ -244,7 +244,8 @@
             bo
             px-12
             py-1
-            mr-5
+            lg:mr-5
+            mx-2
             border-2
             shadow
             border-black
@@ -263,8 +264,9 @@
             hover:bg-gray-400
             bo
             px-12
+            mx-2
             py-1
-            mr-5
+            lg:mr-5
             border-2
             shadow
             border-black
@@ -283,7 +285,8 @@
             bo
             px-12
             py-1
-            mr-5
+            mx-2
+            lg:mr-5
             border-2
             shadow
             border-black
@@ -302,8 +305,9 @@
             hover:bg-gray-400
             bo
             px-12
+            mx-2
             py-1
-            mr-5
+            lg:mr-5
             border-2
             shadow
             border-black
@@ -321,8 +325,9 @@
             hover:bg-gray-400
             bo
             px-12
+            mx-2
             py-1
-            mr-5
+            lg:mr-5
             border-2
             shadow
             border-black
@@ -341,8 +346,9 @@
             hover:bg-gray-400
             bo
             px-12
+            mx-2
             py-1
-            mr-5
+            lg:mr-5
             border-2
             shadow
             border-black
@@ -360,8 +366,9 @@
             hover:bg-gray-400
             bo
             px-12
+            mx-2
             py-1
-            mr-5
+            lg:mr-5
             border-2
             shadow
             border-black
@@ -380,8 +387,9 @@
             hover:bg-gray-400
             bo
             px-12
+            mx-2
             py-1
-            mr-5
+            lg:mr-5
             border-2
             shadow
             border-black
@@ -400,8 +408,9 @@
             hover:bg-gray-400
             bo
             px-12
+            mx-2
             py-1
-            mr-5
+            lg:mr-5
             border-2
             shadow
             border-black
@@ -420,8 +429,9 @@
             hover:bg-gray-400
             bo
             px-12
+            mx-2
             py-1
-            mr-5
+            lg:mr-5
             border-2
             shadow
             border-black
@@ -440,8 +450,9 @@
             hover:bg-gray-400
             bo
             px-12
+            mx-2
             py-1
-            mr-5
+            lg:mr-5
             border-2
             shadow
             border-black
@@ -460,8 +471,9 @@
             hover:bg-gray-400
             bo
             px-12
+            mx-2
             py-1
-            mr-5
+            lg:mr-5
             border-2
             shadow
             border-black
@@ -499,7 +511,7 @@
             px-12
             py-2
             mr-5
-            mb-4
+            my-2
             shadow
             rounded-full
           "
@@ -517,6 +529,7 @@
           px-12
           py-1
           mr-5
+          my-2
           border-2
           shadow
           border-black
@@ -537,6 +550,7 @@
           px-12
           py-1
           mr-5
+          my-2
           border-2
           shadow
           border-black
@@ -556,6 +570,7 @@
           px-12
           py-1
           mr-5
+          my-2
           border-2
           shadow
           border-black
@@ -576,6 +591,7 @@
           px-12
           py-1
           mr-5
+          my-2
           border-2
           shadow
           border-black
@@ -595,6 +611,7 @@
           px-12
           py-1
           mr-5
+          my-2
           border-2
           shadow
           border-black
@@ -615,6 +632,7 @@
           px-12
           py-1
           mr-5
+          my-2
           border-2
           shadow
           border-black
@@ -634,6 +652,7 @@
           px-12
           py-1
           mr-5
+          my-2
           border-2
           shadow
           border-black
@@ -654,6 +673,7 @@
           px-12
           py-1
           mr-5
+          my-2
           border-2
           shadow
           border-black
diff --git a/src/components/marketing/sections/cta-sections/BrandPanel.vue b/src/components/marketing/sections/cta-sections/BrandPanel.vue
index 82987e839..fdfe40f0a 100644
--- a/src/components/marketing/sections/cta-sections/BrandPanel.vue
+++ b/src/components/marketing/sections/cta-sections/BrandPanel.vue
@@ -259,9 +259,9 @@
         <div class="lg:w-1/2 px-2 self-center">
           <g-image class="mx-auto" :src="image" :alt="brand.title" />
         </div>
-        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none text-left">
+        <div class="lg:w-1/2 lg:mt-10 order-1 lg:order-none text-left">
           <div class="lg:self-center">
-            <h2 class="text-3xl mb-6 uppercase leading-none font-heading">
+            <h2 class="text-5xl mb-6 uppercase leading-none font-heading">
               <span class="block">{{ brand.title }}</span>
               <span class="block" v-if="brand.subtitle">{{
                 brand.subtitle
@@ -299,7 +299,7 @@
       >
         <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
           <div class="lg:self-center">
-            <h2 class="text-3xl mb-8 uppercase leading-none font-heading">
+            <h2 class="text-5xl mb-8 uppercase leading-none font-heading">
               <span class="block">{{ brand.title }}</span>
               <span class="block" v-if="brand.subtitle">{{
                 brand.subtitle
@@ -346,7 +346,7 @@
         </div>
         <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
           <div class="lg:self-center">
-            <h2 class="text-3xl mb-8 uppercase leading-none font-heading">
+            <h2 class="text-5xl mb-8 uppercase leading-none font-heading">
               <span class="block">{{ brand.title }}</span>
               <span class="block" v-if="brand.subtitle">{{
                 brand.subtitle
diff --git a/src/components/marketing/sections/cta-sections/Header.vue b/src/components/marketing/sections/cta-sections/Header.vue
index e6cae7fb6..9732265ff 100644
--- a/src/components/marketing/sections/cta-sections/Header.vue
+++ b/src/components/marketing/sections/cta-sections/Header.vue
@@ -1,9 +1,9 @@
 <template>
   <section
-    class="mb-10 bg-no-repeats bg-cover"
+    class="mb-10 bg-no-repeats bg-home"
     :style="[
       id == 'home'
-        ? { background: 'url(' + img + ') center no-repeat' }
+        ? { background: 'url(' + img + ') no-repeat' }
         : { background: 'transparent' },
     ]"
   >
@@ -363,12 +363,12 @@
         <h2 class="text-8xl uppercase mb-6 mt-20 leading-none font-heading">
           {{ title }}
         </h2>
-        <div class="mb-8 text-xl leading-relaxed" v-html="excerpt"></div>
+        <div class="mb-8 text-2xl leading-relaxed" v-html="excerpt"></div>
       </div>
     </div>
 
     <div
-      class="flex flex-wrap text-center lg:text-left lg:pt-4 -mx-2"
+      class="flex flex-wrap text-center lg:text-left lg:pt-10 -mx-2"
       v-else-if="id == 'grid'"
     >
       <div class="px-3 lg:mt-5 order-1 lg:order-none mx-auto text-center">
@@ -376,7 +376,7 @@
           {{ title }}
         </h2>
         <div
-          class="mb-8 text-xl max-w-xl mx-auto leading-relaxed"
+          class="mb-8 mx-auto text-xl max-w-xl leading-relaxed"
           v-html="excerpt"
         ></div>
 
@@ -552,5 +552,6 @@ export default {
   background: #70dfc9;
   background: -webkit-linear-gradient(to bottom, #ea1ff7, #70dfc9);
   background: linear-gradient(to bottom, #ea1ff7, #70dfc9);
+  background-size: cover !important;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue b/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
index 1b9b098f1..8dcca4747 100644
--- a/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
+++ b/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
@@ -36,7 +36,7 @@
                 learn-button
                 hover:bg-gray-400
                 px-12
-                py-2
+                py-1
                 mb-5
                 shadows
                 border-black border-2
@@ -52,7 +52,7 @@
                 learn-button
                 hover:bg-gray-400
                 px-12
-                py-2
+                py-1
                 mb-5
                 shadows
                 border-black border-2
@@ -90,7 +90,7 @@ export default {
 } */
 
 .part {
-  max-height: 570px;
+  
   background-color: #70dfc9;
 }
 
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 5075cb073..1c298fb67 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -108,15 +108,13 @@
         v-if="$page.markdownPage.solution_image"
         :src="$page.markdownPage.solution_image.src"
       /> -->
-    </div>
-    <div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
+   
       <SplitWithForm
         v-if="$page.markdownPage.subscribe"
         :id="$page.markdownPage.id"
         :subscribe="$page.markdownPage.subscribe"
       />
-    </div>
-    <div class="container mx-auto sm:pxi-0 overflow-x-hidden">
+      
       <CallToAction
         v-if="$page.markdownPage.cta2"
         :id="$page.markdownPage.id"