diff --git a/content/page/tft/brandPanel/index.md b/content/page/tft/brandPanel/index.md
new file mode 100644
index 000000000..4171f3ba7
--- /dev/null
+++ b/content/page/tft/brandPanel/index.md
@@ -0,0 +1,13 @@
+---
+id: tft_brandPanel
+title: decentralized DATA NEEDED A CURRENCY
+subtitle: IT NOW HAS ONE
+sourceUrl: ''
+btnTxt: 
+image: tft_decentralized.jpg # src/assets/brandPanel/..
+---
+The ThreeFold Token (TFT) is a utility token that allows you to hold current and future Internet capacity on the fully DECENTRALIZED THREEFOLD GRID, the fastest growing P2P network on the planet.
+
+<br />
+
+With rising demand for Internet infrastructure to hold the most valuable asset on earth, data --  TFT is your gateway to enter the largest and fastest growing economy in the world.
diff --git a/content/page/tft/card/index.md b/content/page/tft/card/index.md
new file mode 100644
index 000000000..68ae7c24e
--- /dev/null
+++ b/content/page/tft/card/index.md
@@ -0,0 +1,8 @@
+---
+id: tft_card
+title: EXPANDING FAST
+img: ./tft_expanding.jpg
+button: Know the TF Grid
+link: /
+---
+Visionary organisations and developers are already building on the ThreeFold Grid as it is the most empowering infrastructure ever built. Anyone can finally store their data and build applications autonomously, without any intermediaries.
\ No newline at end of file
diff --git a/content/page/tft/card/tft_expanding.jpg b/content/page/tft/card/tft_expanding.jpg
new file mode 100644
index 000000000..a7c7240b2
Binary files /dev/null and b/content/page/tft/card/tft_expanding.jpg differ
diff --git a/content/page/tft/cta/index.md b/content/page/tft/cta/index.md
new file mode 100644
index 000000000..4a1f6de8d
--- /dev/null
+++ b/content/page/tft/cta/index.md
@@ -0,0 +1,12 @@
+---
+id: tft_cta
+title: INTERNET REIMAGINED... AND REBUILT
+button: Know More
+link: /
+---
+
+The ThreeFold Grid is an open system which allows anyone to provide and utilize Internet resources without any intermediaries. This revolutionary infrastructure can host any digital workload including blockchain, IoT, decentralized organizations and applications.
+
+<br />
+
+**This model is quickly replacing the centralized infrastructure of the internet**
diff --git a/content/page/tft/tft.md b/content/page/tft/tft.md
new file mode 100644
index 000000000..4219a1c83
--- /dev/null
+++ b/content/page/tft/tft.md
@@ -0,0 +1,16 @@
+---
+id: tft
+metaTitle: THE WORLD IS USING A NEW INTERNET
+metaDesc: It runs on TFT
+metaImg: ./tft_header.jpg
+header_slogan: 
+header_title: THE WORLD IS USING A NEW INTERNET
+header_image: ./tft_header.jpg
+header_altImg: TFT
+header_excerpt: It runs on TFT
+button: Get TFT
+link: /
+cta: tft_cta
+brandPanel: tft_brandPanel
+card: tft_card
+---
diff --git a/content/page/tft/tft_header.jpg b/content/page/tft/tft_header.jpg
new file mode 100644
index 000000000..ddad436d9
Binary files /dev/null and b/content/page/tft/tft_header.jpg differ
diff --git a/gridsome.config.js b/gridsome.config.js
index 957f721dc..b148eb4da 100644
--- a/gridsome.config.js
+++ b/gridsome.config.js
@@ -363,6 +363,14 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Card',
+                path: './content/page/**/card/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -420,7 +428,8 @@ module.exports = {
                     faqContent: 'FAQContent',
                     jobs: 'Jobs',
                     customCTA: 'CustomCTA',
-                    pageHeader: 'PageHeader'
+                    pageHeader: 'PageHeader',
+                    card: 'Card'
                 }
             }
         },
diff --git a/src/assets/images/brandPanel/tft_decentralized.jpg b/src/assets/images/brandPanel/tft_decentralized.jpg
new file mode 100644
index 000000000..86b023a09
Binary files /dev/null and b/src/assets/images/brandPanel/tft_decentralized.jpg differ
diff --git a/src/components/custom/sections/CallToAction.vue b/src/components/custom/sections/CallToAction.vue
index e3ba3800d..969a17c26 100644
--- a/src/components/custom/sections/CallToAction.vue
+++ b/src/components/custom/sections/CallToAction.vue
@@ -4,12 +4,24 @@
     <div class="w-full max-w-2xl mx-auto py-12" v-if="id == 'why'">
       <h2
         v-if="cta.title"
-        class="text-4xl text-center uppercase mb-2 leading-none font-light font-heading"
+        class="
+          text-4xl text-center
+          uppercase
+          mb-2
+          leading-none
+          font-light font-heading
+        "
       >
         {{ cta.title }}
       </h2>
       <span
-        class="text-center uppercase leading-none text-4xl text-gray-800 font-black font-heading"
+        class="
+          text-center
+          uppercase
+          leading-none
+          text-4xl text-gray-800
+          font-black font-heading
+        "
       >
         {{ cta.slogan }}
       </span>
@@ -17,25 +29,81 @@
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
-          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+          class="
+            inline-block
+            bg-blue-900
+            text-sm
+            learn-button
+            hover:bg-blue-800
+            text-gray-100
+            px-12
+            py-2
+            mr-5
+            mb-4
+            rounded
+            shadow
+            rounded-full
+          "
           >{{ cta.video_button }}</a
         >
       </div>
       <g-link
-        class="inline-block bg-blue-900 text-md learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+        class="
+          inline-block
+          bg-blue-900
+          text-md
+          learn-button
+          hover:bg-blue-800
+          text-gray-100
+          px-12
+          py-2
+          mr-5
+          mb-4
+          rounded
+          shadow
+          rounded-full
+        "
         target="_blank"
         v-if="cta.button"
         :to="cta.link"
         >{{ cta.button }}</g-link
       >
       <g-link
-        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+        class="
+          inline-block
+          bg-blue-900
+          text-sm
+          learn-button
+          hover:bg-blue-800
+          text-gray-100
+          px-12
+          py-2
+          mr-5
+          mb-4
+          rounded
+          shadow
+          rounded-full
+        "
         v-if="cta.button2"
         :to="cta.link2"
         >{{ cta.button2 }}</g-link
       >
       <g-link
-        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+        class="
+          inline-block
+          bg-blue-900
+          text-sm
+          learn-button
+          hover:bg-blue-800
+          text-gray-100
+          px-12
+          py-2
+          mr-5
+          mb-4
+          rounded
+          shadow
+          rounded-full
+        "
         v-if="cta.button3"
         :to="cta.link3"
         >{{ cta.button3 }}</g-link
@@ -55,32 +123,213 @@
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
-          class="inline-block cursor-pointer bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+          class="
+            inline-block
+            cursor-pointer
+            bg-blue-900
+            text-sm
+            learn-button
+            hover:bg-blue-800
+            text-gray-100
+            px-12
+            py-2
+            mr-5
+            mb-4
+            rounded
+            shadow
+            rounded-full
+          "
           >{{ cta.video_button }}</a
         >
       </div>
       <a
-        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+        class="
+          inline-block
+          bg-blue-900
+          text-sm
+          learn-button
+          hover:bg-blue-800
+          text-gray-100
+          px-12
+          py-2
+          mr-5
+          mb-4
+          rounded
+          shadow
+          rounded-full
+        "
         target="_blank"
         v-if="cta.button"
         :href="cta.link"
         >{{ cta.button }}</a
       >
       <g-link
-        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+        class="
+          inline-block
+          bg-blue-900
+          text-sm
+          learn-button
+          hover:bg-blue-800
+          text-gray-100
+          px-12
+          py-2
+          mr-5
+          mb-4
+          rounded
+          shadow
+          rounded-full
+        "
         v-if="cta.button2"
         :to="cta.link2"
         >{{ cta.button2 }}</g-link
       >
       <g-link
-        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+        class="
+          inline-block
+          bg-blue-900
+          text-sm
+          learn-button
+          hover:bg-blue-800
+          text-gray-100
+          px-12
+          py-2
+          mr-5
+          mb-4
+          rounded
+          shadow
+          rounded-full
+        "
         v-if="cta.button3"
         :to="cta.link3"
         >{{ cta.button3 }}</g-link
       >
 
       <g-link
-        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+        class="
+          inline-block
+          bg-blue-900
+          text-sm
+          learn-button
+          hover:bg-blue-800
+          text-gray-100
+          px-12
+          py-2
+          mr-5
+          mb-4
+          rounded
+          shadow
+          rounded-full
+        "
+        v-if="cta.button4"
+        :to="cta.link4"
+        >{{ cta.button4 }}</g-link
+      >
+    </div>
+
+    <!-- tft -->
+    <div class="w-full max-w-7xl mx-auto mt-10 px-16" v-else-if="id == 'tft'">
+      <h2
+        v-if="cta.title"
+        class="text-4xl mb-2 uppercase leading-tight font-semibold font-heading"
+      >
+        {{ cta.title }}
+      </h2>
+      <div v-html="cta.content" class="mt-6 mb-8 text-2xl text-gray-800"></div>
+      <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
+        <a
+          @click="toggleModal"
+          class="
+            inline-block
+            cursor-pointer
+            bg-blue-900
+            text-sm
+            learn-button
+            hover:bg-blue-800
+            text-gray-100
+            px-12
+            py-2
+            mr-5
+            mb-4
+            shadow
+            rounded-full
+          "
+          >{{ cta.video_button }}</a
+        >
+      </div>
+      <a
+        class="
+          inline-block
+          bg-blue-900
+          text-sm
+          learn-button
+          hover:bg-blue-800
+          text-gray-100
+          px-12
+          py-2
+          mr-5
+          mb-4
+          shadow
+          rounded-full
+        "
+        target="_blank"
+        v-if="cta.button"
+        :href="cta.link"
+        >{{ cta.button }}</a
+      >
+      <g-link
+        class="
+          inline-block
+          bg-blue-900
+          text-sm
+          learn-button
+          hover:bg-blue-800
+          text-gray-100
+          px-12
+          py-2
+          mr-5
+          mb-4
+          shadow
+          rounded-full
+        "
+        v-if="cta.button2"
+        :to="cta.link2"
+        >{{ cta.button2 }}</g-link
+      >
+      <g-link
+        class="
+          inline-block
+          bg-blue-900
+          text-sm
+          learn-button
+          hover:bg-blue-800
+          text-gray-100
+          px-12
+          py-2
+          mr-5
+          mb-4
+          shadow
+          rounded-full
+        "
+        v-if="cta.button3"
+        :to="cta.link3"
+        >{{ cta.button3 }}</g-link
+      >
+
+      <g-link
+        class="
+          inline-block
+          bg-blue-900
+          text-sm
+          learn-button
+          hover:bg-blue-800
+          text-gray-100
+          px-12
+          py-2
+          mr-5
+          mb-4
+          shadow
+          rounded-full
+        "
         v-if="cta.button4"
         :to="cta.link4"
         >{{ cta.button4 }}</g-link
@@ -98,25 +347,82 @@
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
-          class="inline-block cursor-pointer bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+          class="
+            inline-block
+            cursor-pointer
+            bg-blue-900
+            text-sm
+            learn-button
+            hover:bg-blue-800
+            text-gray-100
+            px-12
+            py-2
+            mr-5
+            mb-4
+            rounded
+            shadow
+            rounded-full
+          "
           >{{ cta.video_button }}</a
         >
       </div>
       <a
-        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+        class="
+          inline-block
+          bg-blue-900
+          text-sm
+          learn-button
+          hover:bg-blue-800
+          text-gray-100
+          px-12
+          py-2
+          mr-5
+          mb-4
+          rounded
+          shadow
+          rounded-full
+        "
         target="_blank"
         v-if="cta.button"
         :href="cta.link"
         >{{ cta.button }}</a
       >
       <g-link
-        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+        class="
+          inline-block
+          bg-blue-900
+          text-sm
+          learn-button
+          hover:bg-blue-800
+          text-gray-100
+          px-12
+          py-2
+          mr-5
+          mb-4
+          rounded
+          shadow
+          rounded-full
+        "
         v-if="cta.button2"
         :to="cta.link2"
         >{{ cta.button2 }}</g-link
       >
       <g-link
-        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+        class="
+          inline-block
+          bg-blue-900
+          text-sm
+          learn-button
+          hover:bg-blue-800
+          text-gray-100
+          px-12
+          py-2
+          mr-5
+          mb-4
+          rounded
+          shadow
+          rounded-full
+        "
         v-if="cta.button3"
         :to="cta.link3"
         >{{ cta.button3 }}</g-link
diff --git a/src/components/marketing/sections/cta-sections/BrandPanel.vue b/src/components/marketing/sections/cta-sections/BrandPanel.vue
index 476b957ca..87fa7c42f 100644
--- a/src/components/marketing/sections/cta-sections/BrandPanel.vue
+++ b/src/components/marketing/sections/cta-sections/BrandPanel.vue
@@ -4,21 +4,55 @@
       <!-- token -->
       <div
         v-if="id == 'token'"
-        class="brandpanel rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
+        class="
+          brandpanel
+          rounded-lg
+          shadow-xl
+          overflow-hidden
+          lg:grid lg:grid-cols-2
+          lg:gap-4
+        "
       >
         <div class="relative pb-3/5 -mt-6 md:pb-1/2">
           <g-image
-            class="absolute brandpanel inset-0 w-full h-full translate-x-0 translate-y-center rounded-md object-fill object-left-top sm:translate-x-0 lg:translate-y-20"
+            class="
+              absolute
+              brandpanel
+              inset-0
+              w-full
+              h-full
+              translate-x-0 translate-y-center
+              rounded-md
+              object-fill object-left-top
+              sm:translate-x-0
+              lg:translate-y-20
+            "
             :src="image"
             :alt="brand.title"
           />
         </div>
         <div
-          class="pt-10 pb-10 px-6 sm:pt-16 sm:px-10 lg:py-16 lg:pr-0 xl:py-20 xl:px-15"
+          class="
+            pt-10
+            pb-10
+            px-6
+            sm:pt-16
+            sm:px-10
+            lg:py-16
+            lg:pr-0
+            xl:py-20
+            xl:px-15
+          "
         >
           <div class="lg:self-center">
             <h2
-              class="text-4xl mb-2 uppercase leading-tight font-semibold font-heading"
+              class="
+                text-4xl
+                mb-2
+                uppercase
+                leading-tight
+                font-semibold font-heading
+              "
             >
               <span class="block">{{ brand.title }}</span>
               <span class="block" v-if="brand.subtitle">{{
@@ -30,7 +64,18 @@
               v-if="brand.btnTxt"
               target="_blank"
               :href="brand.sourceUrl"
-              class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-white px-12 py-2 mr-3 shadow rounded-full"
+              class="
+                bg-blue-900
+                text-sm
+                learn-button
+                hover:bg-blue-800
+                text-white
+                px-12
+                py-2
+                mr-3
+                shadow
+                rounded-full
+              "
               >{{ brand.btnTxt }}</a
             >
           </div>
@@ -40,14 +85,38 @@
       <!-- why -->
       <div
         v-else-if="id == 'why'"
-        class="whybrand brandpanel rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
+        class="
+          whybrand
+          brandpanel
+          rounded-lg
+          shadow-xl
+          overflow-hidden
+          lg:grid lg:grid-cols-2
+          lg:gap-4
+        "
       >
         <div
-          class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-15"
+          class="
+            pt-10
+            pb-12
+            px-6
+            sm:pt-16
+            sm:px-16
+            lg:py-16
+            lg:pr-0
+            xl:py-20
+            xl:px-15
+          "
         >
           <div class="lg:self-center text-center">
             <h2
-              class="text-4xl mb-2 uppercase leading-tight font-semibold font-heading"
+              class="
+                text-4xl
+                mb-2
+                uppercase
+                leading-tight
+                font-semibold font-heading
+              "
             >
               <span class="block">{{ brand.title }}</span>
               <span class="block" v-if="brand.subtitle">{{
@@ -57,27 +126,66 @@
             <div class="py-6 mt-4 mx-4 text-black" v-html="brand.content"></div>
             <a
               :href="brand.sourceUrl"
-              class="bg-gray-700 text-sm learn-button hover:bg-57EEF8-400 text-white px-12 py-2 mr-3 shadow rounded-full"
+              class="
+                bg-gray-700
+                text-sm
+                learn-button
+                hover:bg-57EEF8-400
+                text-white
+                px-12
+                py-2
+                mr-3
+                shadow
+                rounded-full
+              "
               >{{ brand.btnTxt }}</a
             >
           </div>
         </div>
         <div class="relative pb-3/5 -mt-6 md:pb-1/2">
           <g-image
-            class="absolute brandpanel inset-0 w-full h-full transform translate-x-0 translate-y-6 rounded-md object-fill object-left-top sm:translate-x-0 lg:translate-y-20"
+            class="
+              absolute
+              brandpanel
+              inset-0
+              w-full
+              h-full
+              transform
+              translate-x-0 translate-y-6
+              rounded-md
+              object-fill object-left-top
+              sm:translate-x-0
+              lg:translate-y-20
+            "
             :src="image"
             :alt="brand.title"
           />
         </div>
       </div>
 
+      <!-- home -->
       <div v-else-if="id == 'home'" class="brandpanel lg:grid lg:grid-cols-2">
         <div
-          class="py-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-15"
+          class="
+            py-12
+            px-6
+            sm:pt-16
+            sm:px-16
+            lg:py-16
+            lg:pr-0
+            xl:py-20
+            xl:px-15
+          "
         >
           <div class="lg:self-center">
             <h2
-              class="text-4xl leading-tight mb-6 font-bold font-heading uppercase"
+              class="
+                text-4xl
+                leading-tight
+                mb-6
+                font-bold font-heading
+                uppercase
+              "
             >
               <span class="block">{{ brand.title }}</span>
               <span class="block" v-if="brand.subtitle">{{
@@ -92,13 +200,35 @@
               v-if="brand.sourceUrl.includes('http')"
               :href="brand.sourceUrl"
               target="_blank"
-              class="bg-teal-300 text-sm learn-button hover:bg-57EEF8-400 text-gray-900 px-12 py-2 mr-3 shadow rounded-full"
+              class="
+                bg-teal-300
+                text-sm
+                learn-button
+                hover:bg-57EEF8-400
+                text-gray-900
+                px-12
+                py-2
+                mr-3
+                shadow
+                rounded-full
+              "
               >{{ brand.btnTxt }}</a
             >
             <a
               v-else
               :href="brand.sourceUrl"
-              class="bg-teal-300 text-sm learn-button hover:bg-57EEF8-400 text-gray-900 px-12 py-2 mr-3 shadow rounded-full"
+              class="
+                bg-teal-300
+                text-sm
+                learn-button
+                hover:bg-57EEF8-400
+                text-gray-900
+                px-12
+                py-2
+                mr-3
+                shadow
+                rounded-full
+              "
               >{{ brand.btnTxt }}</a
             >
           </div>
@@ -112,12 +242,111 @@
         </div>
       </div>
 
+      <!-- tft -->
+      <div
+        v-else-if="id == 'tft'"
+        class="
+          brandpanel
+          rounded-lg
+          overflow-hidden
+          lg:grid lg:grid-cols-2
+          lg:gap-4
+        "
+      >
+        <div class="relative pb-3/5 -mt-6 md:pb-1/2">
+          <g-image
+            class="
+              absolute
+              brandpanel
+              inset-0
+              w-full
+              h-full
+              sm:h-auto
+              translate-x-0 translate-y-center
+              rounded-md
+              object-fill object-left-top
+              sm:translate-x-0
+              lg:translate-y-20
+            "
+            :src="image"
+            :alt="brand.title"
+          />
+        </div>
+        <div
+          class="
+            pt-10
+            pb-10
+            px-6
+            sm:pt-16
+            sm:px-10
+            lg:py-16
+            lg:pr-0
+            xl:py-20
+            xl:px-15
+          "
+        >
+          <div class="lg:self-center">
+            <h2
+              class="
+                text-4xl
+                mb-2
+                uppercase
+                leading-tight
+                font-semibold font-heading
+              "
+            >
+              <span class="block">{{ brand.title }}</span>
+              <span class="block" v-if="brand.subtitle">{{
+                brand.subtitle
+              }}</span>
+            </h2>
+            <div class="py-6 mt-4 text-gray-600" v-html="brand.content"></div>
+            <a
+              v-if="brand.btnTxt"
+              target="_blank"
+              :href="brand.sourceUrl"
+              class="
+                bg-blue-900
+                text-sm
+                learn-button
+                hover:bg-blue-800
+                text-white
+                px-12
+                py-2
+                mr-3
+                shadow
+                rounded-full
+              "
+              >{{ brand.btnTxt }}</a
+            >
+          </div>
+        </div>
+      </div>
+
       <div
         v-else
-        class="brandpanel bg-gray-900 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
+        class="
+          brandpanel
+          bg-gray-900
+          rounded-lg
+          shadow-xl
+          overflow-hidden
+          lg:grid lg:grid-cols-2
+          lg:gap-4
+        "
       >
         <div
-          class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-15"
+          class="
+            pt-10
+            pb-12
+            px-6
+            sm:pt-16
+            sm:px-16
+            lg:py-16
+            lg:pr-0
+            xl:py-20
+            xl:px-15
+          "
         >
           <div class="lg:self-center">
             <h2
@@ -138,7 +367,19 @@
         </div>
         <div class="relative pb-3/5 -mt-6 md:pb-1/2">
           <g-image
-            class="absolute brandpanel inset-0 w-full h-full transform translate-x-0 translate-y-6 rounded-md object-fill object-left-top sm:translate-x-0 lg:translate-y-20"
+            class="
+              absolute
+              brandpanel
+              inset-0
+              w-full
+              h-full
+              transform
+              translate-x-0 translate-y-6
+              rounded-md
+              object-fill object-left-top
+              sm:translate-x-0
+              lg:translate-y-20
+            "
             :src="image"
             :alt="brand.title"
           />
diff --git a/src/components/marketing/sections/cta-sections/Header.vue b/src/components/marketing/sections/cta-sections/Header.vue
index 9c410e350..25805006f 100644
--- a/src/components/marketing/sections/cta-sections/Header.vue
+++ b/src/components/marketing/sections/cta-sections/Header.vue
@@ -161,6 +161,63 @@
       <div class="lg:w-1/2 px-2"><g-image :src="img" :alt="altImg" /></div>
     </div>
 
+    <div
+      class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2"
+      v-else-if="id == 'tft'"
+    >
+      <div class="lg:w-2/5 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none">
+        <h2 class="text-6xl mb-6 mt-20 leading-none font-heading">
+          {{ title }}
+        </h2>
+        <div class="mb-8 text-gray-700 leading-relaxed" v-html="excerpt"></div>
+        <div v-if="button">
+          <a
+            v-if="link.includes('http')"
+            target="_blank"
+            class="
+              inline-block
+              bg-blue-900
+              text-sm
+              learn-button
+              hover:bg-blue-800
+              text-gray-100
+              px-12
+              py-2
+              mr-5
+              mb-4
+              shadow
+              rounded-full
+            "
+            :href="link"
+            >{{ button }}</a
+          >
+          <a
+            v-else
+            class="
+              inline-block
+              bg-blue-900
+              text-sm
+              learn-button
+              hover:bg-blue-800
+              text-gray-100
+              px-12
+              py-2
+              mr-5
+              mb-4
+              shadow
+              rounded-full
+            "
+            :href="link"
+            >{{ button }}</a
+          >
+          <!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
+        </div>
+      </div>
+      <div class="lg:w-3/5 px-2 self-center">
+        <g-image :src="img" :alt="altImg" />
+      </div>
+    </div>
+
     <div
       class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2"
       v-else
diff --git a/src/components/marketing/sections/cta-sections/NewCard.vue b/src/components/marketing/sections/cta-sections/NewCard.vue
index 81f30d7a6..6e2d5cc28 100644
--- a/src/components/marketing/sections/cta-sections/NewCard.vue
+++ b/src/components/marketing/sections/cta-sections/NewCard.vue
@@ -1,30 +1,99 @@
 <template>
-  <div>
-    <div class="lg:py-12 lg:flex lg:justify-center flex flex-col">
-      <div
-        class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg"
-      >
-        <div class="lg:w-1/2">
-          <div class="h-64 bg-cover lg:rounded-lg lg:h-full" :style="img"></div>
+  <div class="lg:py-12 lg:flex lg:justify-center flex flex-col">
+    <div
+      v-if="id == 'tft'"
+      class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:rounded-lg"
+    >
+      <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
+        <h2 class="text-3xl text-gray-700 font-bold">{{ card.title }}</h2>
+        <div class="mt-4 text-gray-700" v-html="card.content"></div>
+        <div class="mt-8" v-if="card.button">
+          <a
+            v-if="card.link.includes('http')"
+            target="_blank"
+            :href="card.link"
+            class="
+              bg-blue-900
+              learn-button
+              hover:bg-blue-700
+              text-gray-100
+              px-5
+              py-3
+              font-semibold
+              rounded
+            "
+            >{{ card.button }}</a
+          >
+          <a
+            v-else
+            :href="card.link"
+            class="
+              bg-blue-900
+              learn-button
+              hover:bg-blue-700
+              text-gray-100
+              px-5
+              py-3
+              font-semibold
+              rounded
+            "
+            >{{ card.button }}</a
+          >
         </div>
-        <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
-          <h2 class="text-3xl text-gray-700 font-bold">{{ card.title }}</h2>
-          <div class="mt-4 text-gray-700" v-html="card.content"></div>
-          <div class="mt-8" v-if="card.button">
-            <a
-              v-if="card.link.includes('http')"
-              target="_blank"
-              :href="card.link"
-              class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 font-semibold rounded"
-              >{{ card.button }}</a
-            >
-            <a
-              v-else
-              :href="card.link"
-              class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 font-semibold rounded"
-              >{{ card.button }}</a
-            >
-          </div>
+      </div>
+      <div class="lg:w-1/2">
+        <div
+          class="h-64 bg-cover lg:rounded-lg lg:h-full"
+          :style="{ 'background-image': 'url(' + img(card.img) + ')' }"
+        ></div>
+      </div>
+    </div>
+
+    <div
+      v-else
+      class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg"
+    >
+      <div class="lg:w-1/2">
+        <div
+          class="h-64 bg-cover lg:rounded-lg lg:h-full"
+          :style="{ 'background-image': 'url(' + img(card.img) + ')' }"
+        ></div>
+      </div>
+      <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
+        <h2 class="text-3xl text-gray-700 font-bold">{{ card.title }}</h2>
+        <div class="mt-4 text-gray-700" v-html="card.content"></div>
+        <div class="mt-8" v-if="card.button">
+          <a
+            v-if="card.link.includes('http')"
+            target="_blank"
+            :href="card.link"
+            class="
+              bg-gray-900
+              learn-button
+              hover:bg-gray-700
+              text-gray-100
+              px-5
+              py-3
+              font-semibold
+              rounded
+            "
+            >{{ card.button }}</a
+          >
+          <a
+            v-else
+            :href="card.link"
+            class="
+              bg-gray-900
+              learn-button
+              hover:bg-gray-700
+              text-gray-100
+              px-5
+              py-3
+              font-semibold
+              rounded
+            "
+            >{{ card.button }}</a
+          >
         </div>
       </div>
     </div>
@@ -33,14 +102,13 @@
 
 <script>
 export default {
-  computed: {
-    img: function () {
-      if (this.card.image.src)
-        return "background-image:url(" + this.card.image.src + ")";
-      return this.card.image;
+  props: ["id", "card"],
+  methods: {
+    img(image) {
+      if (!image) return "";
+      if (image.src) return image.src;
+      return image;
     },
   },
-
-  props: ["card"],
 };
 </script>
\ No newline at end of file
diff --git a/src/templates/MarkdownPage.vue b/src/templates/MarkdownPage.vue
index a6bd2af19..7ec23a3e8 100644
--- a/src/templates/MarkdownPage.vue
+++ b/src/templates/MarkdownPage.vue
@@ -75,7 +75,10 @@
     <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
       <CallToAction
         :id="$page.markdownPage.id"
-        v-if="$page.markdownPage.cta && $page.markdownPage.id == 'why'"
+        v-if="
+          ($page.markdownPage.cta && $page.markdownPage.id == 'why') ||
+          $page.markdownPage.id == 'tft'
+        "
         :cta="$page.markdownPage.cta"
       />
 
@@ -100,6 +103,12 @@
         :brand="$page.markdownPage.brandPanel"
         v-if="$page.markdownPage.brandPanel"
       />
+
+      <NewCard
+        v-if="$page.markdownPage.card"
+        :id="$page.markdownPage.id"
+        :card="$page.markdownPage.card"
+      />
       <Partenerships
         v-if="
           $page.markdownPage.partnerships &&
@@ -424,7 +433,16 @@
       id
       title
       image
-    }
+     }
+
+     card{
+       id
+       img
+       title
+       content
+       button
+       link
+     }
     }
     allCustomCta {
       edges {
@@ -487,9 +505,6 @@ export default {
     CenteredAccordion,
     CustomCTA,
   },
-  mounted() {
-    console.log(this.$page.markdownPage.careersHeader);
-  },
   computed: {
     getImg() {
       let img = "";