diff --git a/public/images/3nodes.png b/public/images/3nodes.png
new file mode 100644
index 0000000..000a9e9
Binary files /dev/null and b/public/images/3nodes.png differ
diff --git a/public/images/capacity.png b/public/images/capacity.png
new file mode 100644
index 0000000..8720cef
Binary files /dev/null and b/public/images/capacity.png differ
diff --git a/public/images/rewards.png b/public/images/rewards.png
new file mode 100644
index 0000000..deedde0
Binary files /dev/null and b/public/images/rewards.png differ
diff --git a/src/components/Apps.tsx b/src/components/Apps.tsx
index 09768eb..f5bd91f 100644
--- a/src/components/Apps.tsx
+++ b/src/components/Apps.tsx
@@ -21,7 +21,7 @@ const logos = [
 export function AppsPreview() {
   return (
     <div className="relative flex h-[40rem] w-full overflow-hidden rounded-md bg-transparent antialiased md:items-center md:justify-center">
-      <div className="relative z-10 mx-auto w-full max-w-4xl p-4 pt-20 md:pt-0">
+      <div className="relative z-10 mx-auto w-full max-w-4xl p-4 pt-24">
 
         {/* Heading */}
         <motion.div
@@ -67,7 +67,7 @@ export function AppsPreview() {
               }}
               transition={{ duration: 0.6, ease: "easeOut" }}
             >
-              <Image src={logo} alt="" unoptimized />
+              <Image src={logo} alt="" unoptimized className="hover:backdrop-opacity-100 opacity-90" />
             </motion.div>
           ))}
         </motion.div>
diff --git a/src/components/Farmer.tsx b/src/components/Farmer.tsx
index e3dabda..486abe2 100644
--- a/src/components/Farmer.tsx
+++ b/src/components/Farmer.tsx
@@ -1,29 +1,96 @@
 "use client";
 import { Button } from "./Button";
+import Image from "next/image";
+
+const posts = [
+  {
+    id: 1,
+    title: 'Host A Node',
+    href: '#',
+    description1:
+      'All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.',
+    description2: '',
+    imageUrl:
+      './images/3nodes.png',
+    },
+    {
+    id: 2,
+    title: 'Offer Capacity',
+    href: '#',
+    description1: 'The capacity of the node gets registered on the ThreeFold Blockchain and is available for users on the TF Marketplace.',
+      description2: '',
+    imageUrl:
+      './images/capacity.png',
+    },
+    {
+    id: 3,
+    title: 'Earn Rewards',
+    href: '#',
+    description1:
+      'Farmers earn rewards for their used resources, enabling a fair and transparent peer-to-peer economy.',
+      description2: '',
+    imageUrl:
+      './images/rewards.png',
+    },
+]
 
 
 export function FarmerPreview() {
 
   return (
-    <section className="w-full bg-transparent px-4 py-8 sm:px-6 sm:pb-12 lg:px-8 relative">
+    <section className="w-full bg-transparent px-4 py-8 sm:px-6 mt-12 sm:pb-12 lg:px-8 relative">
     {/* Gradient Blob Component */}
       <div className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-40 rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0" />
       <div className="absolute w-[200px] h-[100px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-50 rounded-full blur-[150px] top-[200px] right-[-150px] z-0" />
       <div className="mx-auto max-w-7xl">
         <div className="lg:flex lg:items-center lg:justify-between lg:px-8">
           {/* Left Column - Text (1/3 width) */}
-          <div className="lg:col-span-1 flex text-center lg:text-left order-1 lg:order-1">
-            <h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-3xl">
+          <div className="lg:col-span-1 flex max text-center lg:text-left order-1 lg:order-1">
+            <div className="max-w-xl">
+            <h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
               Contribute to the Decentralized Internet in 3 Steps
             </h2>
             </div>
+            </div>
           {/* Right Column - Stacked Cubes (2/3 width) */}
           <div className="lg:col-span-2 flex items-center justify-center lg:justify-start order-2 lg:order-2">
-            <Button variant="outline" className=" text-white px-4 py-2 rounded-md hover:bg-gray-700 transition-colors">
+            <Button variant="outline" className=" text-black px-4 py-2 rounded-md hover:bg-gray-700 transition-colors">
               Become A Farmer
             </Button>
           </div>
         </div>
+        <div className="mx-auto  mt-10 grid max-w-2xl h-3/4 grid-cols-1 gap-8 lg:mt-10 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          {posts.map((post) => (
+            <article
+              key={post.id}
+              className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-state-gradient px-8 lg:pt-12"
+            >
+              <div className="absolute inset-0 -z-10 bg-linear-to-t from-gray-200 via-gray-300/10" 
+              style={{
+                    filter: 'brightness(1)',
+                }}
+                onMouseEnter={(e) => {
+                    e.currentTarget.style.filter = 'brightness(0.8) drop-shadow(0 0 20px rgba(156, 163, 175, 0.5))';
+                }}
+                onMouseLeave={(e) => {
+                    e.currentTarget.style.filter = 'brightness(1)';
+                }}
+                >
+                </div>
+                <h3 className="mt-12 text-lg/6 font-semibold text-white">
+                <a href={post.href}>
+                  <span className="absolute inset-10" />
+                  {post.title}
+                </a>
+                </h3>
+                < div className="max-w-2/3">
+                <p className="mt-4 text-sm font-light text-gray-700">{post.description1}</p>
+                <p className=" text-sm font-light text-gray-700">{post.description2}</p>
+                </div>
+                <img alt="" src={post.imageUrl} className="w-1/2 h-full translate-x-20 -translate-32 transform object-cover object-top-left lg:translate-x-50  lg:-translate-20 opacity-70 hover:opacity-95" />
+            </article>
+          ))}
+        </div>
       </div>
     </section>
   );
diff --git a/src/components/StackSection.tsx b/src/components/StackSection.tsx
index fd59e2c..5a8f8bf 100644
--- a/src/components/StackSection.tsx
+++ b/src/components/StackSection.tsx
@@ -13,7 +13,7 @@ export function StackSectionPreview() {
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-16 items-center lg:items-start">
           {/* Left Column - Text (1/3 width) */}
           <div className="text-center lg:text-left lg:col-span-1 order-1 lg:order-1">
-            <h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-3xl">
+            <h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
               A Decentralized Infrastructure Layer
             </h2>
             <p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-white lg:text-base">
diff --git a/src/components/ui/Blog.tsx b/src/components/ui/Blog.tsx
new file mode 100644
index 0000000..00e54ca
--- /dev/null
+++ b/src/components/ui/Blog.tsx
@@ -0,0 +1,97 @@
+const posts = [
+  {
+    id: 1,
+    title: 'Boost your conversion rate',
+    href: '#',
+    description:
+      'Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.',
+    imageUrl:
+      'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80',
+    date: 'Mar 16, 2020',
+    datetime: '2020-03-16',
+    author: {
+      name: 'Michael Foster',
+      imageUrl:
+        'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+    },
+  },
+  {
+    id: 2,
+    title: 'How to use search engine optimization to drive sales',
+    href: '#',
+    description: 'Optio cum necessitatibus dolor voluptatum provident commodi et. Qui aperiam fugiat nemo cumque.',
+    imageUrl:
+      'https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
+    date: 'Mar 10, 2020',
+    datetime: '2020-03-10',
+    author: {
+      name: 'Lindsay Walton',
+      imageUrl:
+        'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+    },
+  },
+  {
+    id: 3,
+    title: 'Improve your customer experience',
+    href: '#',
+    description:
+      'Cupiditate maiores ullam eveniet adipisci in doloribus nulla minus. Voluptas iusto libero adipisci rem et corporis.',
+    imageUrl:
+      'https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
+    date: 'Feb 12, 2020',
+    datetime: '2020-02-12',
+    author: {
+      name: 'Tom Cook',
+      imageUrl:
+        'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+    },
+  },
+]
+
+export default function Example() {
+  return (
+    <div className="bg-white py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">
+            From the blog
+          </h2>
+          <p className="mt-2 text-lg/8 text-gray-600">Learn how to grow your business with our expert advice.</p>
+        </div>
+        <div className="mx-auto mt-16 grid max-w-2xl auto-rows-fr grid-cols-1 gap-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          {posts.map((post) => (
+            <article
+              key={post.id}
+              className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 px-8 pt-80 pb-8 sm:pt-48 lg:pt-80"
+            >
+              <img alt="" src={post.imageUrl} className="absolute inset-0 -z-10 size-full object-cover" />
+              <div className="absolute inset-0 -z-10 bg-linear-to-t from-gray-900 via-gray-900/40" />
+              <div className="absolute inset-0 -z-10 rounded-2xl inset-ring inset-ring-gray-900/10" />
+
+              <div className="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm/6 text-gray-300">
+                <time dateTime={post.datetime} className="mr-8">
+                  {post.date}
+                </time>
+                <div className="-ml-4 flex items-center gap-x-4">
+                  <svg viewBox="0 0 2 2" className="-ml-0.5 size-0.5 flex-none fill-white/50">
+                    <circle r={1} cx={1} cy={1} />
+                  </svg>
+                  <div className="flex gap-x-2.5">
+                    <img alt="" src={post.author.imageUrl} className="size-6 flex-none rounded-full bg-white/10" />
+                    {post.author.name}
+                  </div>
+                </div>
+              </div>
+              <h3 className="mt-3 text-lg/6 font-semibold text-white">
+                <a href={post.href}>
+                  <span className="absolute inset-0" />
+                  {post.title}
+                </a>
+              </h3>
+            </article>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/images/3nodes.png b/src/images/3nodes.png
new file mode 100644
index 0000000..0603be8
Binary files /dev/null and b/src/images/3nodes.png differ