diff --git a/frontend/src/components/LandingComponents/Contact/Contact.tsx b/frontend/src/components/LandingComponents/Contact/Contact.tsx
index 29410765..d6e879e5 100644
--- a/frontend/src/components/LandingComponents/Contact/Contact.tsx
+++ b/frontend/src/components/LandingComponents/Contact/Contact.tsx
@@ -85,8 +85,9 @@ export const Contact = () => {
             animate={inView ? 'visible' : 'hidden'}
             variants={cardVariants}
             whileHover={'hover'}
+            className="bg-muted rounded-lg mt-8"
           >
-            <Card className="bg-muted/50 relative mt-8 flex flex-col justify-center items-center">
+            <Card className="bg-muted/50 relative  flex flex-col justify-center items-center">
               <CardHeader className="mt-8 flex justify-center items-center pb-2">
                 <a href={url}>{icon}</a>
                 <CardTitle className="text-center">
diff --git a/frontend/src/components/LandingComponents/HowItWorks/HowItWorks.tsx b/frontend/src/components/LandingComponents/HowItWorks/HowItWorks.tsx
index 9d28a0f1..3de0c578 100644
--- a/frontend/src/components/LandingComponents/HowItWorks/HowItWorks.tsx
+++ b/frontend/src/components/LandingComponents/HowItWorks/HowItWorks.tsx
@@ -78,7 +78,7 @@ export const HowItWorks = () => {
             animate={controls}
             variants={cardVariants}
             whileHover="hover"
-            className="bg-muted/50"
+            className="bg-muted rounded-lg"
           >
             <Card className="bg-muted/50 relative flex flex-col justify-center items-center">
               <CardHeader>
diff --git a/frontend/src/components/LandingComponents/HowItWorks/__tests__/__snapshots__/HowItWorks.test.tsx.snap b/frontend/src/components/LandingComponents/HowItWorks/__tests__/__snapshots__/HowItWorks.test.tsx.snap
index 5d7d429f..ee709f43 100644
--- a/frontend/src/components/LandingComponents/HowItWorks/__tests__/__snapshots__/HowItWorks.test.tsx.snap
+++ b/frontend/src/components/LandingComponents/HowItWorks/__tests__/__snapshots__/HowItWorks.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`HowItWorks component using snapshot renders correctly 1`] = `
       class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 gap-y-10"
     >
       <div
-        class="bg-muted/50"
+        class="bg-muted rounded-lg"
         style="opacity: 0; transform: translateX(-50px);"
       >
         <div
@@ -125,7 +125,7 @@ exports[`HowItWorks component using snapshot renders correctly 1`] = `
         </div>
       </div>
       <div
-        class="bg-muted/50"
+        class="bg-muted rounded-lg"
         style="opacity: 0; transform: translateX(-50px);"
       >
         <div
@@ -223,7 +223,7 @@ exports[`HowItWorks component using snapshot renders correctly 1`] = `
         </div>
       </div>
       <div
-        class="bg-muted/50"
+        class="bg-muted rounded-lg"
         style="opacity: 0; transform: translateX(-50px);"
       >
         <div
@@ -305,7 +305,7 @@ exports[`HowItWorks component using snapshot renders correctly 1`] = `
         </div>
       </div>
       <div
-        class="bg-muted/50"
+        class="bg-muted rounded-lg"
         style="opacity: 0; transform: translateX(-50px);"
       >
         <div