diff --git a/resources/css/app.css b/resources/css/app.css
index 8e565d6..c691ffa 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -21,7 +21,11 @@ @layer components{
         @apply px-4 md:px-12
     }
 
-    .card {
-        @apply bg-white rounded-lg p-4
+
+}
+
+@layer base{
+    h2 {
+        @apply text-5xl font-black text-center
     }
 }
diff --git a/resources/views/components/card.blade.php b/resources/views/components/card.blade.php
new file mode 100644
index 0000000..c8824eb
--- /dev/null
+++ b/resources/views/components/card.blade.php
@@ -0,0 +1,3 @@
+<div class="card flex flex-col space-y-4 shadow-xl p-8 bg-white rounded-xl">
+    {{$slot}}
+</div>
diff --git a/resources/views/components/why-dealhub.blade.php b/resources/views/components/why-dealhub.blade.php
index 090d0d7..780f2a4 100644
--- a/resources/views/components/why-dealhub.blade.php
+++ b/resources/views/components/why-dealhub.blade.php
@@ -1,33 +1,34 @@
 <section class="wrapper mb-15">
-    <h2 class="text-5xl font-black text-center mt-15">Why Choose {{config('app.name')}}?</h2>
+    <h2 class="mt-15">Why Choose {{config('app.name')}}?</h2>
     <p class="text-accent-600 text-center mt-3 mb-10">
         A trusted platform connecting you with verified experts who share the best deals, <br />
         services, and opportunities in your area.
     </p>
 
     <section class="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <div class="card flex flex-col space-y-4 shadow-xl p-8">
+        <x-card>
             <div class="p-4 rounded-lg bg-blue-100 text-blue-700 w-fit">
                 <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>
-        </div>
+        </x-card>
 
-        <div class="card flex flex-col space-y-4 shadow-xl p-8">
+        <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>
-        </div>
+        </x-card>
 
-        <div class="card flex flex-col space-y-4 shadow-xl p-8">
+        <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>
-        </div>
+        </x-card>
+
     </section>
 </section>