diff --git a/resources/views/components/card-number.blade.php b/resources/views/components/card-number.blade.php
new file mode 100644
index 0000000..978b0b2
--- /dev/null
+++ b/resources/views/components/card-number.blade.php
@@ -0,0 +1,5 @@
+@props(['text' => ''])
+<div
+    class="absolute -top-5 md:-left-3 shadow-lg rounded-full bg-linear-135 from-[#2A6EFA] to-[#7C6CFA] flex justify-center items-center h-10 w-10">
+    <p class="text-white font-bold text-sm">{{$text}}</p>
+</div>
diff --git a/resources/views/components/card.blade.php b/resources/views/components/card.blade.php
index c8824eb..4fa607f 100644
--- a/resources/views/components/card.blade.php
+++ b/resources/views/components/card.blade.php
@@ -1,3 +1,3 @@
-<div class="card flex flex-col space-y-4 shadow-xl p-8 bg-white rounded-xl">
+<div {{$attributes->merge(['class' => 'card flex flex-col space-y-4 shadow-xl p-8 bg-white rounded-xl'])}}>
     {{$slot}}
 </div>
diff --git a/resources/views/components/hero.blade.php b/resources/views/components/hero.blade.php
index ddb47b9..768b0c4 100644
--- a/resources/views/components/hero.blade.php
+++ b/resources/views/components/hero.blade.php
@@ -30,13 +30,13 @@
             </div>
 
             <!-- Stats card, top right of the image -->
-            <div class="card shadow-xl absolute -top-5 -right-5">
+            <div class="bg-white p-4 rounded-lg shadow-xl absolute -top-5 -right-5">
                 <p class="text-3xl font-black text-[#8669ED]">10K+</p>
                 <p class="text-accent-600 text-xs">Active Deals</p>
             </div>
 
             <!-- Stats card, bottom left of the image -->
-            <div class="card shadow-xl absolute -bottom-5 -left-5">
+            <div class="bg-white p-4 rounded-lg shadow-xl absolute -bottom-5 -left-5">
                 <p class="text-3xl font-black text-[#0070EB]">500+</p>
                 <p class="text-accent-600 text-xs">Verified Brokers</p>
             </div>
diff --git a/resources/views/components/get-in-touch.blade.php b/resources/views/components/how-it-works.blade.php
similarity index 82%
rename from resources/views/components/get-in-touch.blade.php
rename to resources/views/components/how-it-works.blade.php
index ed71aa8..3452bf5 100644
--- a/resources/views/components/get-in-touch.blade.php
+++ b/resources/views/components/how-it-works.blade.php
@@ -2,13 +2,13 @@
     <h2 class="mt-15">How It Works</h2>
 
     <p class="text-accent-600 text-center mt-3 mb-10">
-        Have questions? We'd love it hear from you. Send us a message and we'll respond <br/>
-        as soon as possible.
+        A simple, three step process to connect buyers with trusted sellers and service<br/>providers
     </p>
 
     <section class="grid grid-cols-1 md:grid-cols-3 gap-8">
 
-        <x-card>
+        <x-card class="relative">
+            <x-card-number text="01" />
             <div class="p-4 rounded-lg w-fit bg-linear-135 from-[#DEEAFE] to-[#EEEAFF] text-blue-700">
                 <x-heroicon-o-user-plus class="w-8"/>
             </div>
@@ -19,7 +19,8 @@
                 the platform.</p>
         </x-card>
 
-        <x-card>
+        <x-card class="relative">
+            <x-card-number text="02" />
             <div class="p-4 rounded-lg w-fit bg-linear-135 from-[#DEEAFE] to-[#EEEAFF] text-blue-700">
                 <x-heroicon-o-eye class="w-8"/>
             </div>
@@ -30,7 +31,8 @@
                 contact brokers directly.</p>
         </x-card>
 
-        <x-card>
+        <x-card class="relative">
+            <x-card-number text="03" />
             <div class="p-4 rounded-lg w-fit bg-linear-135 from-[#DEEAFE] to-[#EEEAFF] text-blue-700">
                 <x-heroicon-o-arrow-trending-up class="w-8"/>
             </div>
diff --git a/resources/views/components/why-dealhub.blade.php b/resources/views/components/why-dealhub.blade.php
index 780f2a4..323504b 100644
--- a/resources/views/components/why-dealhub.blade.php
+++ b/resources/views/components/why-dealhub.blade.php
@@ -11,23 +11,23 @@
                 <x-heroicon-o-shield-check class="w-8"/>
             </div>
             <h3 class="font-bold">Verified Brokers</h3>
-            <p class="text-accent-600 text-md">All brokers are verified and vetted to ensure trustworthy recommendations and deals</p>
+            <p class="text-accent-600 text-md">All brokers are verified and vetted to ensure trustworthy recommendations and deals.</p>
         </x-card>
 
         <x-card>
             <div class="p-4 rounded-lg bg-[#F0EBFF] text-[#9470F9] w-fit">
                 <x-heroicon-o-arrow-trending-up class="w-8"/>
             </div>
-            <h3 class="font-bold">Verified Brokers</h3>
-            <p class="text-accent-600 text-md">All brokers are verified and vetted to ensure trustworthy recommendations and deals</p>
+            <h3 class="font-bold">Trending Recommendations</h3>
+            <p class="text-accent-600 text-md">Discover what's hot and trending based on real user interactions and feedback.</p>
         </x-card>
 
         <x-card>
             <div class="p-4 rounded-lg bg-[#F9EBF3] text-[#DB5A84] w-fit">
                 <x-heroicon-o-magnifying-glass class="w-8"/>
             </div>
-            <h3 class="font-bold">Verified Brokers</h3>
-            <p class="text-accent-600 text-md">All brokers are verified and vetted to ensure trustworthy recommendations and deals</p>
+            <h3 class="font-bold">Smart discovery</h3>
+            <p class="text-accent-600 text-md">Find exactly what you need with our intelligent search and category filtering.</p>
         </x-card>
 
     </section>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 4eef0ad..179cbea 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -2,5 +2,5 @@
     <x-navbar />
     <x-hero />
     <x-why-dealhub />
-    <x-get-in-touch />
+    <x-how-it-works />
 </x-layout>